/* _content/Admin_KA_Transport_Blazor/Components/App.razor.rz.scp.css */
/* _content/Admin_KA_Transport_Blazor/Components/Layout/404Layout.razor.rz.scp.css */
.page[b-03bu738ils] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-03bu738ils] {
    flex: 1;
}

.e-icons[b-03bu738ils] {
    font-size: 28px;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-03bu738ils] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-03bu738ils] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-03bu738ils]  a, .top-row[b-03bu738ils]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-03bu738ils]  a:hover, .top-row[b-03bu738ils]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-03bu738ils]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-03bu738ils] {
        justify-content: space-between;
    }

    .top-row[b-03bu738ils]  a, .top-row[b-03bu738ils]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-03bu738ils] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-03bu738ils] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-03bu738ils]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-03bu738ils], article[b-03bu738ils] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-03bu738ils] {
    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: 1000;
}

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

/* _content/Admin_KA_Transport_Blazor/Components/Layout/Alert.razor.rz.scp.css */
.e-control[b-7cjm4aaz2g] {
	position: absolute;
}

/* _content/Admin_KA_Transport_Blazor/Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-aooo7onsf2] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-aooo7onsf2] {
    flex: 1;
}

.e-icons[b-aooo7onsf2] {
    font-size: 28px;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-aooo7onsf2] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-aooo7onsf2] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-aooo7onsf2]  a, .top-row[b-aooo7onsf2]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-aooo7onsf2]  a:hover, .top-row[b-aooo7onsf2]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-aooo7onsf2]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-aooo7onsf2] {
        justify-content: space-between;
    }

    .top-row[b-aooo7onsf2]  a, .top-row[b-aooo7onsf2]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-aooo7onsf2] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s;
    }

    .top-row[b-aooo7onsf2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-aooo7onsf2]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-aooo7onsf2], article[b-aooo7onsf2] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
    .content-expanded[b-aooo7onsf2] {
        flex: 1;
        padding: 0 20px;
    }

    .content-collapsed[b-aooo7onsf2] {
        flex: 1;
        padding: 0 20px;
        margin-left: 0;
    }

    /* Optional: Style the toggle button */
    .toggle-button[b-aooo7onsf2] {
        position: fixed;
        top: 10px;
        left: 5px;
        z-index: 1001;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #808080;
    }
}

#blazor-error-ui[b-aooo7onsf2] {
    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: 1000;
}

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

/* _content/Admin_KA_Transport_Blazor/Components/Layout/LoginLayout.razor.rz.scp.css */
.page[b-471klqgs8q] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-471klqgs8q] {
    flex: 1;
}

/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/

.top-row[b-471klqgs8q] {
    background-color: #98F5F9;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-471klqgs8q]  a, .top-row[b-471klqgs8q]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-471klqgs8q]  a:hover, .top-row[b-471klqgs8q]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-471klqgs8q]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-471klqgs8q] {
        justify-content: space-between;
    }

    .top-row[b-471klqgs8q]  a, .top-row[b-471klqgs8q]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-471klqgs8q] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-471klqgs8q] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-471klqgs8q]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-471klqgs8q], article[b-471klqgs8q] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-471klqgs8q] {
    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: 1000;
}

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

/* _content/Admin_KA_Transport_Blazor/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-l490buuok2] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-l490buuok2] {
    flex: 1;
}

.e-icons[b-l490buuok2] {
    font-size: 28px;
}
/*.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/
.e-avatar:hover[b-l490buuok2] {
    cursor:pointer;
    background-color: #f3f3f3; /* Darker background color on hover */
}
.top-row[b-l490buuok2] {
   
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-l490buuok2]  a, .top-row[b-l490buuok2]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-l490buuok2]  a:hover, .top-row[b-l490buuok2]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-l490buuok2]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-l490buuok2] {
        justify-content: space-between;
    }

    .top-row[b-l490buuok2]  a, .top-row[b-l490buuok2]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-l490buuok2] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s;
    }

    .top-row[b-l490buuok2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-l490buuok2]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-l490buuok2], article[b-l490buuok2] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
    .content-expanded[b-l490buuok2] {
        flex: 1;
        padding: 0 20px;
    }

    .content-collapsed[b-l490buuok2] {
        flex: 1;
        padding: 0 20px;
        margin-left: 0;
    }

    /* Optional: Style the toggle button */
    .toggle-button[b-l490buuok2] {
        position: fixed;
        top: 10px;
        left: 5px;
        z-index: 1001;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #808080;
    }

    /* Main header styles */
    .main-header[b-l490buuok2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-right[b-l490buuok2] {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto;
    }
}

#blazor-error-ui[b-l490buuok2] {
    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: 1000;
}

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

/* _content/Admin_KA_Transport_Blazor/Components/Layout/MainLayoutV2.razor.rz.scp.css */
/* Main page layout */
.page-layout[b-tk7jfhzapx] {
    display: grid;
    grid-template-rows: 50px 1fr;
    height: 100vh;
}

.topnav-container[b-tk7jfhzapx] {
    grid-row: 1;
    background: white;
    z-index: 900;
}

.page[b-tk7jfhzapx] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

    .page main[b-tk7jfhzapx] {
        flex: 1;
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s ease;
    }

    /* When sidebar is collapsed */
    .etrans-sidebar-collapsed ~ main[b-tk7jfhzapx],
    .page.sidebar-collapsed main[b-tk7jfhzapx] {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Content area */
    .page main article[b-tk7jfhzapx] {
/*        padding: 1rem;*/
        min-height: calc(100vh - var(--topbar-height));
        background: var(--bg-light);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .page main[b-tk7jfhzapx] {
            margin-left: 0;
            margin-top: 0;
        }

        .page.sidebar-collapsed main[b-tk7jfhzapx] {
            margin-left: 0;
        }
    }

.main-container[b-tk7jfhzapx] {
    grid-row: 2;
    overflow: auto;
    background-color: #f8fafc;
}

.main-content[b-tk7jfhzapx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
/*    padding: 1rem;*/
    margin: 0 auto;
    max-width: 100%;
    min-height: calc(100vh - 3rem);
    transition: all 0.2s ease-in-out;
}

    .main-content:hover[b-tk7jfhzapx] {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }


/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container[b-tk7jfhzapx] {
        padding: 0.5rem;
    }

    .main-content[b-tk7jfhzapx] {
        border-radius: 8px;
        min-height: calc(100vh - 2rem);
    }
    .etrans-tenant-info[b-tk7jfhzapx] {
       font-size: 1rem;
    }
}

/* Custom Scrollbar Styles */
*[b-tk7jfhzapx] {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) var(--bg-light);
}

/* Webkit Scrollbar Styles (Chrome, Safari, Edge) */
[b-tk7jfhzapx]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-tk7jfhzapx]::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

[b-tk7jfhzapx]::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 6px;
    border: 2px solid var(--bg-light);
    transition: all 0.2s ease;
}

    [b-tk7jfhzapx]::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color);
        border-color: var(--bg-light);
    }

    [b-tk7jfhzapx]::-webkit-scrollbar-thumb:active {
        background: var(--primary-active);
    }

[b-tk7jfhzapx]::-webkit-scrollbar-corner {
    background: var(--bg-light);
}

/* Thin scrollbar variant for smaller containers */
.thin-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.thin-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-track {
    background: var(--secondary-lighter);
    border-radius: 4px;
    border: none;
}

.thin-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
    border: 1px solid var(--secondary-lighter);
}

    .thin-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-hover);
    }

/* Dark theme scrollbar */
.dark-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-color: var(--secondary-dark);
}

.dark-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-color: var(--bg-dark);
}

    .dark-scrollbar[b-tk7jfhzapx]::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-light);
    }
/* _content/Admin_KA_Transport_Blazor/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lhou8dbrme] {
    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);
}
.sidebar[b-lhou8dbrme] {
    border: solid 1px darkgrey;
}
.sidebar > .top-row[b-lhou8dbrme] {
    background-color: #9FB234;
}
.navbar-toggler:checked[b-lhou8dbrme] {
    background-color: rgba(255, 255, 255, 0.5);
}
.nav-link span[b-lhou8dbrme]{
    color: black ;
}

.top-row[b-lhou8dbrme] {
    height: 3.5rem;
}
.nav-scrollable[b-lhou8dbrme]{
    background-color:white;
   
}
.e-icons[b-lhou8dbrme] {
    color: rgba(255,255,255,0.37);
}

.navbar-brand[b-lhou8dbrme] {
    font-size: 1.1rem;
}

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

.bi-house-door-fill[b-lhou8dbrme] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill[b-lhou8dbrme] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested[b-lhou8dbrme] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-lhou8dbrme] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-lhou8dbrme]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-lhou8dbrme]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-lhou8dbrme]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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


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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}


/* _content/Admin_KA_Transport_Blazor/Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-bell-container[b-so837dqw3m] {
    position: relative;
    display: inline-block;
}

.notification-bell-button[b-so837dqw3m] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    font-size: 20px;
    color: #666;
    transition: color 0.3s ease;
}

.notification-bell-button:hover[b-so837dqw3m] {
    color: #007bff;
}

.notification-badge[b-so837dqw3m] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    line-height: 14px;
}

.notification-dropdown[b-so837dqw3m] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-width: 90vw;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.notification-dropdown-header[b-so837dqw3m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.notification-dropdown-header h3[b-so837dqw3m] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.btn-mark-all-read[b-so837dqw3m] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #007bff;
    font-size: 16px;
    transition: color 0.3s ease;
}

.btn-mark-all-read:hover[b-so837dqw3m] {
    color: #0056b3;
}

.notification-dropdown-body[b-so837dqw3m] {
    overflow-y: auto;
    max-height: 450px;
    flex: 1;
}

.notification-loading[b-so837dqw3m],
.notification-empty[b-so837dqw3m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
}

.notification-loading i[b-so837dqw3m],
.notification-empty i[b-so837dqw3m] {
    font-size: 32px;
    margin-bottom: 12px;
}

.notification-loading span[b-so837dqw3m],
.notification-empty p[b-so837dqw3m] {
    font-size: 14px;
    margin: 0;
}

.notification-item[b-so837dqw3m] {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.notification-item:hover[b-so837dqw3m] {
    background-color: #f8f9fa;
}

.notification-item.unread[b-so837dqw3m] {
    background-color: #f0f7ff;
}

.notification-item:last-child[b-so837dqw3m] {
    border-bottom: none;
}

.notification-icon[b-so837dqw3m] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 16px;
}

.notification-icon.info[b-so837dqw3m] {
    background: #e3f2fd;
    color: #1976d2;
}

.notification-icon.success[b-so837dqw3m] {
    background: #e8f5e9;
    color: #388e3c;
}

.notification-icon.warning[b-so837dqw3m] {
    background: #fff3e0;
    color: #f57c00;
}

.notification-icon.error[b-so837dqw3m] {
    background: #ffebee;
    color: #d32f2f;
}

.notification-content[b-so837dqw3m] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-so837dqw3m] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-message[b-so837dqw3m] {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time[b-so837dqw3m] {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-unread-indicator[b-so837dqw3m] {
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: 14px;
}

.notification-dropdown-footer[b-so837dqw3m] {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-view-all[b-so837dqw3m] {
    width: 100%;
    background: transparent;
    border: none;
    color: #007bff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-view-all:hover[b-so837dqw3m] {
    background-color: #f0f7ff;
}

.notification-overlay[b-so837dqw3m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
}

/* Responsive design */
@media (max-width: 768px) {
    .notification-dropdown[b-so837dqw3m] {
        width: 340px;
        right: -10px;
    }
}

/* Scrollbar styling */
.notification-dropdown-body[b-so837dqw3m]::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown-body[b-so837dqw3m]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-dropdown-body[b-so837dqw3m]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.notification-dropdown-body[b-so837dqw3m]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* _content/Admin_KA_Transport_Blazor/Components/Layout/SideNavMenuV2.razor.rz.scp.css */
.etrans-sidebar[b-7z87ezovhg] {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    background: var(--sidebar-bg);
    color: var(--text-dark);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    box-shadow: var(--sidebar-shadow);
    border-right: var(--border-width) solid var(--sidebar-border);
    overflow: hidden;
}

    /* Collapsed state */
    .etrans-sidebar.etrans-collapsed[b-7z87ezovhg] {
        width: 60px;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

        /* Remove hover effect when collapsed - make it completely empty */
        .etrans-sidebar.etrans-collapsed:hover[b-7z87ezovhg] {
            width: 60px;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

    /* Hidden state (desktop only) */
    .etrans-sidebar.etrans-hidden[b-7z87ezovhg] {
        transform: translateX(-100%);
    }

/* Mobile states */
@media (max-width: 768px) {
    .etrans-sidebar[b-7z87ezovhg] {
        transform: translateX(-100%);
        width: 280px;
    }

        .etrans-sidebar.etrans-collapsed[b-7z87ezovhg] {
            transform: translateX(-100%);
            width: 280px;
        }

        .etrans-sidebar.etrans-mobile-open[b-7z87ezovhg] {
            transform: translateX(0);
        }

        /* On mobile, hidden state should still allow mobile toggle */
        .etrans-sidebar.etrans-hidden[b-7z87ezovhg] {
            transform: translateX(-100%);
        }

            .etrans-sidebar.etrans-hidden.etrans-mobile-open[b-7z87ezovhg] {
                transform: translateX(0);
            }
}

/* Header Styles */
.etrans-sidebar-header[b-7z87ezovhg] {
    padding: 0 1rem;
    border-bottom: var(--border-width) solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px;
    background: var(--bg-primary);
}

.etrans-brand-container[b-7z87ezovhg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

.etrans-brand-logo[b-7z87ezovhg] {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.2);
    border: var(--border-width-thick) solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-text);
    flex-shrink: 0;
}

.etrans-brand-text[b-7z87ezovhg] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    white-space: nowrap;
    color: var(--primary-text);
}

.etrans-collapsed .etrans-brand-text[b-7z87ezovhg] {
    opacity: 0;
    transform: translateX(-20px);
}

/* Hide all content when collapsed */
.etrans-collapsed .etrans-nav-content[b-7z87ezovhg] {
    display: none;
}

.etrans-collapsed .etrans-brand-container[b-7z87ezovhg] {
    display: none;
}

.etrans-toggle-btn[b-7z87ezovhg] {
    width: 38px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border: var(--border-width) solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius);
    color: var(--primary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .etrans-toggle-btn:hover[b-7z87ezovhg] {
        background: rgba(255,255,255,0.3);
        transform: scale(1.05);
        color: var(--primary-text);
    }

    .etrans-toggle-btn i[b-7z87ezovhg] {
        font-size: 0.85rem;
        transition: transform 0.3s ease;
    }

/* Navigation Styles */
.etrans-nav-content[b-7z87ezovhg] {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 140px);
    scrollbar-width: thin;
    scrollbar-color: var(--border-muted) transparent;
}

    .etrans-nav-content[b-7z87ezovhg]::-webkit-scrollbar {
        width: 4px;
    }

    .etrans-nav-content[b-7z87ezovhg]::-webkit-scrollbar-track {
        background: transparent;
    }

    .etrans-nav-content[b-7z87ezovhg]::-webkit-scrollbar-thumb {
        background: var(--border-muted);
        border-radius: 2px;
    }

.etrans-nav-items[b-7z87ezovhg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Show content on hover when collapsed */
.etrans-collapsed:hover .etrans-nav-content[b-7z87ezovhg] {
    visibility: visible;
}

/* Module Styles */
.etrans-nav-module[b-7z87ezovhg] {
    margin-bottom: 1.5rem;
}

.etrans-module-header[b-7z87ezovhg] {
    padding: 0.5rem 0.75rem 0.3rem 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--primary-color);
    background: linear-gradient(135deg, var(--primary-lighter), rgba(255,255,255,0.05));
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .etrans-module-header:hover[b-7z87ezovhg] {
        background: linear-gradient(135deg, var(--primary-color), rgba(255,255,255,0.1));
        transform: translateY(-1px);
        color: white;
    }

        .etrans-module-header:hover .etrans-module-icon[b-7z87ezovhg],
        .etrans-module-header:hover .etrans-module-title[b-7z87ezovhg],
        .etrans-module-header:hover .etrans-module-toggle[b-7z87ezovhg] {
            color: white;
        }

    .etrans-module-header.expanded[b-7z87ezovhg] {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        border-bottom-color: var(--primary-dark);
    }

.etrans-module-title[b-7z87ezovhg] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary-color);
    flex: 1;
}

.etrans-module-header.expanded .etrans-module-title[b-7z87ezovhg] {
    color: var(--primary-text);
}

.etrans-module-icon[b-7z87ezovhg] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--primary-color);
    background: rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
    padding: 3px;
    transition: all 0.3s ease;
}

.etrans-module-header.expanded .etrans-module-icon[b-7z87ezovhg] {
    color: var(--primary-text);
    background: rgba(255,255,255,0.2);
}

.etrans-module-toggle[b-7z87ezovhg] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

    .etrans-module-toggle i[b-7z87ezovhg] {
        font-size: 0.75rem;
        transition: transform 0.3s ease;
    }

.etrans-module-header.expanded .etrans-module-toggle[b-7z87ezovhg] {
    color: var(--primary-text);
}

    .etrans-module-header.expanded .etrans-module-toggle i[b-7z87ezovhg] {
        transform: rotate(180deg);
    }

/* Module Content (Collapsible) */
.etrans-module-content[b-7z87ezovhg] {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .etrans-module-content.collapsed[b-7z87ezovhg] {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: hidden;
    }

    .etrans-module-content.expanded[b-7z87ezovhg] {
        max-height: 2000px;
        opacity: 1;
        transform: translateY(0);
        overflow: visible;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

.etrans-section-items.hidden[b-7z87ezovhg] {
    display: none;
}

/* Module Section Styles */
.etrans-module-section[b-7z87ezovhg] {
    margin-bottom: 0.75rem;
    padding-left: 8px;
    border-left: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.etrans-standalone-section[b-7z87ezovhg] {
    margin-bottom: 1rem;
}

/* Section Styles */
.etrans-section-header[b-7z87ezovhg] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.3rem;
    gap: 6px;
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .etrans-section-header:hover[b-7z87ezovhg] {
        opacity: 1;
    }

.etrans-section-title[b-7z87ezovhg] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.etrans-section-icon[b-7z87ezovhg] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.etrans-section-items[b-7z87ezovhg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Navigation Items */
.etrans-nav-item[b-7z87ezovhg] {
    position: relative;
    margin: 2px 4px;
}

.etrans-collapsed .etrans-nav-item[b-7z87ezovhg] {
    margin: 4px 2px;
}

/* Hide nav content when collapsed but not hovering */
.etrans-collapsed .etrans-nav-content[b-7z87ezovhg] {
    display: none;
}

/* Don't show content on hover when collapsed */
.etrans-collapsed:hover .etrans-nav-content[b-7z87ezovhg] {
    display: none;
}

.etrans-nav-link[b-7z87ezovhg] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: black;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .etrans-nav-link[b-7z87ezovhg]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--primary-lighter);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: inherit;
        z-index: -1;
    }

    .etrans-nav-link:hover[b-7z87ezovhg]::before {
        opacity: 1;
    }

    .etrans-nav-link:hover[b-7z87ezovhg] {
        color: black;
        transform: translateX(3px);
    }

.etrans-collapsed .etrans-nav-link[b-7z87ezovhg] {
    padding: 8px 4px;
    margin: 2px 0;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

    .etrans-collapsed .etrans-nav-link:hover[b-7z87ezovhg] {
        transform: translateY(-2px);
        background: var(--primary-lighter);
    }

/* Active State */
.etrans-nav-link.etrans-active[b-7z87ezovhg] {
    background: var(--primary-color);
    border-left: var(--border-width-thick) solid var(--primary-dark);
    color: var(--primary-text);
}

.etrans-nav-link.etrans-active .etrans-nav-icon[b-7z87ezovhg] {
    color: white !important;
}

.etrans-nav-link.etrans-active:hover .etrans-nav-icon[b-7z87ezovhg] {
    color: white !important;
}

.etrans-collapsed .etrans-nav-link.etrans-active[b-7z87ezovhg] {
    border: none;
    background: var(--primary-color);
    box-shadow: var(--shadow-primary);
    color: var(--primary-text);
}

/* Icon Styles */
.etrans-nav-icon[b-7z87ezovhg] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 0.9rem;
    flex-shrink: 0;
    color: black;
}

.etrans-collapsed .etrans-nav-icon[b-7z87ezovhg] {
    margin-right: 0;
    margin-bottom: 2px;
    font-size: 1rem;
}

/* Text Styles */
.etrans-nav-text[b-7z87ezovhg] {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
}

.etrans-nav-link:hover .etrans-nav-text[b-7z87ezovhg] {
    color: black;
    opacity: 1;
    visibility: visible;
}

.etrans-collapsed .etrans-nav-text[b-7z87ezovhg] {
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    margin-top: 1px;
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.etrans-collapsed .etrans-nav-link:hover .etrans-nav-text[b-7z87ezovhg] {
    color: var(--primary-text);
    opacity: 1;
    visibility: visible;
}

/* Badge Styles */
.etrans-nav-badge[b-7z87ezovhg] {
    background: var(--primary-color);
    color: var(--primary-text);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: var(--border-radius);
    min-width: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.etrans-collapsed .etrans-nav-badge[b-7z87ezovhg] {
    position: absolute;
    top: 2px;
    right: 2px;
    transform: scale(0.75);
    padding: 1px 3px;
    font-size: 0.55rem;
    min-width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etrans-nav-badge.new-v2[b-7z87ezovhg] {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    animation: pulse-b-7z87ezovhg 2s infinite;
}

@keyframes pulse-b-7z87ezovhg {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Tooltip for collapsed state */
.etrans-tooltip[b-7z87ezovhg] {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-dark, #2c3e50);
    color: var(--primary-text, white);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm, 4px);
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0,0,0,0.15));
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

    .etrans-tooltip[b-7z87ezovhg]::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: var(--text-dark, #2c3e50);
    }

.etrans-collapsed .etrans-nav-link:hover .etrans-tooltip[b-7z87ezovhg] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.5s;
}

/* Mobile Styles */
.etrans-mobile-menu-btn[b-7z87ezovhg] {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: var(--bg-light);
    border: var(--border-width) solid var(--border-light);
    color: var(--text-dark);
    padding: 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

    .etrans-mobile-menu-btn:hover[b-7z87ezovhg] {
        background: var(--primary-lighter);
        transform: scale(1.05);
    }
@media (max-width: 769px) {
    .etrans-mobile-overlay[b-7z87ezovhg] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

        .etrans-mobile-overlay.active[b-7z87ezovhg] {
            opacity: 1;
            visibility: visible;
        }
}

/* Show sidebar button when hidden on desktop */
.etrans-show-sidebar-btn[b-7z87ezovhg] {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .etrans-show-sidebar-btn:hover[b-7z87ezovhg] {
        background: var(--primary-hover);
        transform: scale(1.05);
    }

/* Desktop specific styles */
@media (min-width: 769px) {
    .etrans-mobile-menu-btn[b-7z87ezovhg] {
        display: none;
    }

    .etrans-sidebar.etrans-hidden[b-7z87ezovhg] {
        transform: translateX(-100%);
    }
}

/* Collapsed State Module Styles */
.etrans-collapsed .etrans-module-header[b-7z87ezovhg] {
    display: none;
}

.etrans-collapsed .etrans-module-content[b-7z87ezovhg] {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.etrans-collapsed .etrans-module-section[b-7z87ezovhg] {
    padding-left: 0;
    border-left: none;
    margin-bottom: 0.3rem;
}

.etrans-collapsed .etrans-section-header[b-7z87ezovhg] {
    display: none;
}

/* Additional Clean-up Styles */
.etrans-module-section .etrans-nav-item[b-7z87ezovhg] {
    position: relative;
}

    .etrans-module-section .etrans-nav-item[b-7z87ezovhg]::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 50%;
        width: 6px;
        height: 1px;
        background: var(--border-muted);
        transform: translateY(-50%);
    }

.etrans-collapsed .etrans-module-section .etrans-nav-item[b-7z87ezovhg]::before {
    display: none;
}

.etrans-module-section:hover[b-7z87ezovhg] {
    border-left-color: var(--primary-color);
    transition: border-left-color 0.3s ease;
}

.etrans-module-section .etrans-section-title[b-7z87ezovhg] {
    position: relative;
}

    .etrans-module-section .etrans-section-title[b-7z87ezovhg]::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary-color);
        transition: width 0.3s ease;
    }

.etrans-module-section:hover .etrans-section-title[b-7z87ezovhg]::after {
    width: 100%;
}

.etrans-module-section .etrans-nav-link[b-7z87ezovhg] {
    margin-left: 3px;
    border-radius: var(--border-radius-sm);
}

    .etrans-module-section .etrans-nav-link:hover[b-7z87ezovhg] {
        background: rgba(0,0,0,0.05);
        transform: translateX(6px);
    }

.etrans-collapsed .etrans-module-section .etrans-nav-link:hover[b-7z87ezovhg] {
    transform: translateY(-2px);
}

/* Animation keyframes */
.etrans-module-content.collapsed .etrans-section-items[b-7z87ezovhg] {
    animation: slideUp-b-7z87ezovhg 0.3s ease-out;
}

.etrans-module-content.expanded .etrans-section-items[b-7z87ezovhg] {
    animation: slideDown-b-7z87ezovhg 0.3s ease-out;
}

@keyframes slideUp-b-7z87ezovhg {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes slideDown-b-7z87ezovhg {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.etrans-module-header[b-7z87ezovhg] {
    user-select: none;
}

    .etrans-module-header:active[b-7z87ezovhg] {
        transform: translateY(0);
    }

    .etrans-module-header[b-7z87ezovhg]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary-text);
        transition: width 0.3s ease;
    }

    .etrans-module-header.expanded[b-7z87ezovhg]::after {
        width: 100%;
    }

/* Enhanced collapsed sidebar styling */
.etrans-sidebar.etrans-collapsed[b-7z87ezovhg] {
    background: white;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

    .etrans-sidebar.etrans-collapsed:hover[b-7z87ezovhg] {
        background: #f8f9fa;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease-in-out;
    }

    .etrans-sidebar.etrans-collapsed[b-7z87ezovhg]::before {
        display: none;
    }

@keyframes glow-b-7z87ezovhg {
    0%, 100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* Sidebar Footer Styles */
.etrans-sidebar-footer[b-7z87ezovhg] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-top: var(--border-width) solid rgba(255,255,255,0.1);
    text-align: center;
}

.etrans-version[b-7z87ezovhg] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.etrans-copyright[b-7z87ezovhg] {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* Hide footer when collapsed */
.etrans-collapsed .etrans-sidebar-footer[b-7z87ezovhg] {
    display: none;
}
/* _content/Admin_KA_Transport_Blazor/Components/Layout/TopNavMenuV2.razor.rz.scp.css */
.etrans-topbar[b-35ivd8p3pb] {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 50px; /* Reduced from default */
    background: var(--topbar-bg);
    color: var(--primary-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem; /* Reduced padding */
    z-index: 999;
    box-shadow: var(--topbar-shadow);
    backdrop-filter: blur(10px);
    transition: left 0.3s ease;
}

/* Adjust when sidebar is collapsed */
[b-35ivd8p3pb] .etrans-sidebar-collapsed ~ .etrans-topbar,
.sidebar-collapsed .etrans-topbar[b-35ivd8p3pb] {
    left: var(--sidebar-collapsed-width);
}

.etrans-topbar[b-35ivd8p3pb]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

/* Left Section - Logo & Breadcrumb */
.etrans-topbar-left[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 1rem; /* Reduced gap */
}

/* Logo */
.etrans-logo[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-logo-text[b-35ivd8p3pb] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.etrans-breadcrumb[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Reduced gap */
    font-size: 0.8rem; /* Smaller font */
    opacity: 0.9;
}

.etrans-breadcrumb-item[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.etrans-breadcrumb-separator[b-35ivd8p3pb] {
    opacity: 0.6;
    font-size: 0.7rem;
}

.etrans-breadcrumb-link[b-35ivd8p3pb] {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

    .etrans-breadcrumb-link:hover[b-35ivd8p3pb] {
        color: white;
    }

.etrans-breadcrumb-current[b-35ivd8p3pb] {
    font-weight: 600;
    color: white;
}

/* Right Section */
.etrans-topbar-right[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Reduced gap */
}

.etrans-topbar-actions[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* Reduced gap */
}

.etrans-action-btn[b-35ivd8p3pb] {
    width: 34px; /* Smaller size */
    height: 34px; /* Smaller size */
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; /* Smaller radius */
    color: var(--primary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

    .etrans-action-btn:hover[b-35ivd8p3pb] {
        background: rgba(255,255,255,0.25);
        transform: translateY(-1px);
    }

    .etrans-action-btn i[b-35ivd8p3pb] {
        font-size: 0.9rem; /* Smaller icon */
    }

    /* Notification Badge */
    .etrans-action-btn .etrans-notification-badge[b-35ivd8p3pb] {
        position: absolute;
        top: -3px;
        right: -3px;
        background: #ff4757;
        color: white;
        font-size: 0.65rem; /* Smaller badge */
        font-weight: 600;
        padding: 1px 4px;
        border-radius: 8px;
        min-width: 14px;
        text-align: center;
        border: 1px solid white;
    }

/* Quick Actions */
.etrans-quick-actions[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-right: 0.8rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-quick-btn[b-35ivd8p3pb] {
    width: 34px; /* Icon only buttons */
    height: 34px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .etrans-quick-btn:hover[b-35ivd8p3pb] {
        background: rgba(255,255,255,0.25);
        transform: translateY(-1px);
    }

/* User Dropdown */
.etrans-user-dropdown[b-35ivd8p3pb] {
    position: relative;
}

.etrans-user-trigger[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced gap */
    padding: 6px 12px; /* Reduced padding */
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px; /* Smaller radius */
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    .etrans-user-trigger:hover[b-35ivd8p3pb] {
        background: rgba(255,255,255,0.25);
    }

.etrans-user-avatar-small[b-35ivd8p3pb] {
    width: 26px; /* Smaller avatar */
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem; /* Smaller font */
    color: var(--primary-color);
}

.etrans-user-name-small[b-35ivd8p3pb] {
    font-size: 0.8rem; /* Smaller font */
    font-weight: 500;
    max-width: 180px; /* Increased width for more text */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.etrans-dropdown-arrow[b-35ivd8p3pb] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.etrans-user-dropdown.active .etrans-dropdown-arrow[b-35ivd8p3pb] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.etrans-dropdown-menu[b-35ivd8p3pb] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px; /* Slightly smaller */
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.etrans-user-dropdown.active .etrans-dropdown-menu[b-35ivd8p3pb] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.etrans-dropdown-menu[b-35ivd8p3pb]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    border-radius: 1px;
}

.etrans-dropdown-item[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap */
    padding: 10px 14px; /* Reduced padding */
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.3s ease;
    border-radius: 6px;
    margin: 3px;
    font-size: 0.85rem; /* Smaller font */
}

    .etrans-dropdown-item:hover[b-35ivd8p3pb] {
        background: var(--bg-light);
    }

    .etrans-dropdown-item i[b-35ivd8p3pb] {
        width: 16px;
        text-align: center;
        opacity: 0.7;
        font-size: 0.85rem;
    }

.etrans-dropdown-divider[b-35ivd8p3pb] {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 0;
}

/* Notification Dropdown */
.etrans-notification-dropdown[b-35ivd8p3pb] {
    position: relative;
}

.etrans-notification-panel[b-35ivd8p3pb] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.etrans-notification-dropdown.active .etrans-notification-panel[b-35ivd8p3pb] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.etrans-notification-panel[b-35ivd8p3pb]::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* Notification Header */
.notification-header[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.notification-header h4[b-35ivd8p3pb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.mark-all-read[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-all-read:hover[b-35ivd8p3pb] {
    background: var(--primary-color);
    color: white;
}

/* Notification List */
.notification-list[b-35ivd8p3pb] {
    max-height: 380px;
    overflow-y: auto;
}

.notification-list[b-35ivd8p3pb]::-webkit-scrollbar {
    width: 6px;
}

.notification-list[b-35ivd8p3pb]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.notification-list[b-35ivd8p3pb]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.notification-list[b-35ivd8p3pb]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* No Notifications */
.no-notifications[b-35ivd8p3pb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.no-notifications i[b-35ivd8p3pb] {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-notifications p[b-35ivd8p3pb] {
    margin: 0;
    font-size: 0.9rem;
}

/* Notification Item */
.notification-item[b-35ivd8p3pb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.notification-item:hover[b-35ivd8p3pb] {
    background: #f8fafc;
}

.notification-item.unread[b-35ivd8p3pb] {
    background: #f0f9ff;
}

.notification-item.unread:hover[b-35ivd8p3pb] {
    background: #e0f2fe;
}

/* Notification Icon */
.notification-icon[b-35ivd8p3pb] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.info[b-35ivd8p3pb] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.notification-icon.success[b-35ivd8p3pb] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.notification-icon.warning[b-35ivd8p3pb] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.notification-icon.error[b-35ivd8p3pb] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* Notification Content */
.notification-content[b-35ivd8p3pb] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-35ivd8p3pb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.notification-message[b-35ivd8p3pb] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-time[b-35ivd8p3pb] {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Unread Indicator */
.unread-indicator[b-35ivd8p3pb] {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 2px solid white;
}

/* Notification Footer */
.notification-footer[b-35ivd8p3pb] {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.view-all-btn[b-35ivd8p3pb] {
    width: 100%;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-all-btn:hover[b-35ivd8p3pb] {
    background: var(--primary-color);
    color: white;
}

/* User Info */
.etrans-user-info[b-35ivd8p3pb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.etrans-tenant-info[b-35ivd8p3pb] {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .etrans-topbar[b-35ivd8p3pb] {
        left: 0;
        padding: 0 0.8rem;
        height: 45px; /* Even smaller on mobile */
    }

    .etrans-logo-text[b-35ivd8p3pb] {
        font-size: 1rem;
    }

    .etrans-breadcrumb[b-35ivd8p3pb] {
        display: none; /* Hide breadcrumb on mobile */
    }

    .etrans-quick-actions[b-35ivd8p3pb] {
        display: none;
    }

    .etrans-user-name-small[b-35ivd8p3pb] {
        display: none; /* Hide username on mobile */
    }

    .etrans-action-btn[b-35ivd8p3pb] {
        width: 30px;
        height: 30px;
    }

    .etrans-notification-panel[b-35ivd8p3pb] {
        width: 320px;
        right: -60px;
    }

    .etrans-tenant-info[b-35ivd8p3pb] {
        display: none;
    }
}

/* Mobile Menu Button Styles */
.etrans-mobile-menu-btn[b-35ivd8p3pb] {
    background: none;
    border: none;
    color: var(--primary-text);
    font-size: 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.etrans-mobile-menu-btn:hover[b-35ivd8p3pb] {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.etrans-mobile-menu-btn:active[b-35ivd8p3pb] {
    transform: scale(0.95);
}

.etrans-mobile-menu-btn i[b-35ivd8p3pb] {
    transition: transform 0.2s ease;
}

/* Adjust topbar for mobile when sidebar is hidden */
@media (max-width: 991.98px) {
    .etrans-topbar[b-35ivd8p3pb] {
        left: 0 !important;
    }
    
    .etrans-mobile-menu-btn[b-35ivd8p3pb] {
        display: flex;
    }
}


/* _content/Admin_KA_Transport_Blazor/Components/Pages/404.razor.rz.scp.css */

body[b-qskmfkjdf7]
{
  background-color:#141019;
  background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed;
}


#handboy[b-qskmfkjdf7]
{
   animation: swing-b-qskmfkjdf7 ease-in-out 1.3s infinite alternate;
    transform-origin: 98% 98%;
    transform-box: fill-box;
    
}


#girllight[b-qskmfkjdf7]
{
   animation: swing-b-qskmfkjdf7 ease-in-out 1.3s infinite alternate;
    transform-origin: 0% 97%;
    transform-box: fill-box;
}

#hairgirl[b-qskmfkjdf7]
{
    animation: swinghair-b-qskmfkjdf7 ease-in-out 1.3s infinite alternate;
   transform-origin: 60% 0%;
    transform-box: fill-box;
  
}

#zero[b-qskmfkjdf7]
{
  transform-origin:bottom;
  transform-box:fill-box;
  
}

.ftr[b-qskmfkjdf7]{
    text-align: center;
    margin-top: 20px;
    position:absolute;
    bottom:20px;
}

.ftr a[b-qskmfkjdf7]{
    color: #fff;
}

/*************swing************/
@keyframes swing-b-qskmfkjdf7 {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}


/*************swing hair************/
@keyframes swinghair-b-qskmfkjdf7 {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/CheckIn/Checkin.razor.rz.scp.css */
/* ========================================
   CHECKIN PAGE STYLES
   Modernized to match ManageTruckV2 design system
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.checkin-page[b-qz18bwbbc1] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

.page-header[b-qz18bwbbc1] {
    margin-bottom: 24px;
}

.page-title[b-qz18bwbbc1] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 12px;
}

/* ========================================
   QR SCANNER SECTION
   ======================================== */
.qr-scanner-wrapper[b-qz18bwbbc1] {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qr-scanner-header[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.qr-scanner-header h3[b-qz18bwbbc1] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #343a40;
    margin: 0;
}

.qr-scanner-header i[b-qz18bwbbc1] {
    color: #ca3c19;
    font-size: 1.2rem;
}

.video-stream[b-qz18bwbbc1] {
    width: 100%;
    max-width: 500px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: block;
}

.scan-result[b-qz18bwbbc1] {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    margin-bottom: 16px;
    border-left: 4px solid #ca3c19;
}

.scan-result p[b-qz18bwbbc1] {
    margin: 0;
    font-size: 1rem;
    color: #343a40;
}

.scan-result strong[b-qz18bwbbc1] {
    color: #ca3c19;
    font-weight: 600;
}

/* Manual Input Section */
.manual-input-section[b-qz18bwbbc1] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.manual-input-section > *[b-qz18bwbbc1] {
    flex: 1;
    min-width: 200px;
}

/* ========================================
   TRIP INFO CONTAINER
   ======================================== */
.trip-info-container[b-qz18bwbbc1] {
    width: 90%;
    max-width: 600px;
    margin: 24px auto;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* ========================================
   TRIP INFO SECTIONS
   ======================================== */
.trip-section[b-qz18bwbbc1] {
    background: white;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trip-section:last-child[b-qz18bwbbc1] {
    margin-bottom: 0;
}

.trip-section-header[b-qz18bwbbc1] {
    background: linear-gradient(135deg, #ca3c19, #d96b47);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

.trip-section-header h2[b-qz18bwbbc1] {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 600;
    flex: 1;
}

.trip-section-header i[b-qz18bwbbc1] {
    font-size: 0.875rem;
}

.trip-section-content[b-qz18bwbbc1] {
    padding: 16px;
    line-height: 1.6;
}

/* Info Grid Layout */
.trip-info-grid[b-qz18bwbbc1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.trip-info-item[b-qz18bwbbc1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trip-info-label[b-qz18bwbbc1] {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trip-info-value[b-qz18bwbbc1] {
    font-size: 1rem;
    color: #343a40;
    font-weight: 500;
}

/* ========================================
   DRIVER INFO SECTION
   ======================================== */
.driver-info-section[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

.driver-img-wrapper[b-qz18bwbbc1] {
    width: 100%;
    max-width: 400px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.driver-img[b-qz18bwbbc1] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 2px solid #ddd;
}

.driver-details[b-qz18bwbbc1] {
    width: 100%;
}

/* ========================================
   STATUS BADGE SYSTEM
   ======================================== */
.status-badge[b-qz18bwbbc1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge i[b-qz18bwbbc1] {
    font-size: 0.75rem;
}

.status-notcheckin[b-qz18bwbbc1],
.status-badge.notcheckin[b-qz18bwbbc1] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-checked[b-qz18bwbbc1],
.status-badge.checked[b-qz18bwbbc1] {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #b8daff;
}

.status-pickuped[b-qz18bwbbc1],
.status-badge.pickuped[b-qz18bwbbc1] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-delivered[b-qz18bwbbc1],
.status-badge.delivered[b-qz18bwbbc1] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ========================================
   DETAIL GRID (SfGrid Enhancement)
   ======================================== */
.detail-grid-wrapper[b-qz18bwbbc1] {
    margin-top: 16px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-grid-wrapper .e-grid[b-qz18bwbbc1] {
    border: 1px solid #ddd;
    border-radius: 6px;
}

.detail-grid-wrapper .e-grid .e-gridheader[b-qz18bwbbc1] {
    background: linear-gradient(180deg, #f8f9fa, #e9ecef);
    border-bottom: 2px solid #ca3c19;
}

.detail-grid-wrapper .e-grid .e-headercell[b-qz18bwbbc1] {
    font-weight: 600;
    color: #343a40;
    font-size: 0.875rem;
}

.detail-grid-wrapper .e-grid .e-row:hover[b-qz18bwbbc1] {
    background-color: rgba(202, 60, 25, 0.05);
}

.detail-grid-wrapper .e-grid .e-altrow[b-qz18bwbbc1] {
    background-color: #f8f9fa;
}

/* Column specific styling */
.col-code[b-qz18bwbbc1] {
    font-weight: 600;
    color: #ca3c19;
}

.col-driver[b-qz18bwbbc1],
.col-vehicle[b-qz18bwbbc1] {
    font-weight: 500;
}

.col-status[b-qz18bwbbc1] {
    text-align: center;
}

/* ========================================
   CHECK-IN BUTTON
   ======================================== */
.checkin-button-wrapper[b-qz18bwbbc1] {
    padding: 16px;
    background: white;
    border-top: 1px solid #ddd;
    margin-top: 16px;
}

.btn-checkin[b-qz18bwbbc1] {
    width: 100%;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-checkin:hover[b-qz18bwbbc1] {
    background: linear-gradient(135deg, #218838, #28a745);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.btn-checkin:active[b-qz18bwbbc1] {
    transform: translateY(0);
}

.btn-checkin i[b-qz18bwbbc1] {
    font-size: 1.2rem;
}

/* ========================================
   LOADING SKELETON
   ======================================== */
.loading-skeleton[b-qz18bwbbc1] {
    padding: 24px;
}

.skeleton-card[b-qz18bwbbc1] {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton-header[b-qz18bwbbc1] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.skeleton-item[b-qz18bwbbc1] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-animate[b-qz18bwbbc1] {
    animation: skeleton-pulse-b-qz18bwbbc1 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-qz18bwbbc1 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-row[b-qz18bwbbc1] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.skeleton-row:last-child[b-qz18bwbbc1] {
    margin-bottom: 0;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-qz18bwbbc1] {
    text-align: center;
    padding: 32px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-state i[b-qz18bwbbc1] {
    color: #6c757d;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-qz18bwbbc1] {
    color: #6c757d;
    font-size: 1rem;
    margin: 0;
}

.empty-state .empty-title[b-qz18bwbbc1] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}

.empty-state .empty-description[b-qz18bwbbc1] {
    font-size: 0.875rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .trip-info-container[b-qz18bwbbc1] {
        width: 95%;
        max-width: none;
    }

    .trip-info-grid[b-qz18bwbbc1] {
        grid-template-columns: 1fr;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .checkin-page[b-qz18bwbbc1] {
        padding: 12px;
    }

    .qr-scanner-wrapper[b-qz18bwbbc1] {
        padding: 16px;
    }

    .video-stream[b-qz18bwbbc1] {
        max-width: 100%;
    }

    .manual-input-section[b-qz18bwbbc1] {
        flex-direction: column;
    }

    .manual-input-section > *[b-qz18bwbbc1] {
        width: 100%;
        min-width: auto;
    }

    .trip-info-container[b-qz18bwbbc1] {
        width: 100%;
        margin: 16px 0;
    }

    .trip-section-content[b-qz18bwbbc1] {
        padding: 12px;
    }

    .trip-info-grid[b-qz18bwbbc1] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .driver-img-wrapper[b-qz18bwbbc1] {
        max-width: 100%;
    }

    .btn-checkin[b-qz18bwbbc1] {
        font-size: 1rem;
        min-height: 48px;
    }

    /* Sticky check-in button on mobile */
    .checkin-button-wrapper[b-qz18bwbbc1] {
        position: sticky;
        bottom: 0;
        z-index: 100;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .checkin-page[b-qz18bwbbc1] {
        padding: 8px;
    }

    .qr-scanner-wrapper[b-qz18bwbbc1] {
        padding: 12px;
    }

    .trip-section-header[b-qz18bwbbc1] {
        padding: 8px 12px;
    }

    .trip-section-header h2[b-qz18bwbbc1] {
        font-size: 1rem;
    }

    .trip-info-item[b-qz18bwbbc1] {
        gap: 4px;
    }

    .trip-info-label[b-qz18bwbbc1] {
        font-size: 0.7rem;
    }

    .trip-info-value[b-qz18bwbbc1] {
        font-size: 0.875rem;
    }
}

/* Desktop enhancements (min-width: 769px) */
@media (min-width: 769px) {
    /* Sections are always visible - no special rules needed */
}

/* ========================================
   WAREHOUSE SECTION (Nơi Lấy Hàng)
   ======================================== */
.warehouse-cards[b-qz18bwbbc1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.warehouse-card[b-qz18bwbbc1] {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.warehouse-card:hover[b-qz18bwbbc1] {
    border-color: #ca3c19;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.warehouse-card-body[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.warehouse-card-body i[b-qz18bwbbc1] {
    color: #ca3c19;
    font-size: 1.2rem;
}

.warehouse-name[b-qz18bwbbc1] {
    font-size: 1rem;
    font-weight: 500;
    color: #343a40;
}

.warehouse-card-actions[b-qz18bwbbc1] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.empty-warehouse-state[b-qz18bwbbc1] {
    text-align: center;
    padding: 32px 16px;
    color: #6c757d;
    background: #f9f9f9;
    border-radius: 6px;
    border: 2px dashed #ddd;
}

.empty-warehouse-state i[b-qz18bwbbc1] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 12px;
    display: block;
}

.empty-warehouse-state p[b-qz18bwbbc1] {
    margin: 0;
    font-size: 1rem;
    font-style: italic;
}

/* Mobile responsive for warehouse cards */
@media (max-width: 768px) {
    .warehouse-card[b-qz18bwbbc1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .warehouse-card-body[b-qz18bwbbc1] {
        width: 100%;
    }

    .warehouse-card-actions[b-qz18bwbbc1] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-center[b-qz18bwbbc1] {
    text-align: center;
}

.mb-3[b-qz18bwbbc1] {
    margin-bottom: 16px;
}

.mt-3[b-qz18bwbbc1] {
    margin-top: 16px;
}

.text-muted[b-qz18bwbbc1] {
    color: #6c757d;
}

.text-danger[b-qz18bwbbc1] {
    color: #dc3545;
}

.text-primary[b-qz18bwbbc1] {
    color: #ca3c19;
}

.font-weight-bold[b-qz18bwbbc1] {
    font-weight: 600;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/DashBoardV2.razor.rz.scp.css */

        .container[b-ye6q88q1ia] {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* Header */
        .header[b-ye6q88q1ia] {
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem 0;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
            border-radius: 20px;
            color: white;
            box-shadow: 0 10px 30px rgba(202, 60, 25, 0.3);
            position: relative;
            overflow: hidden;
        }

        .header[b-ye6q88q1ia]::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: shimmer-b-ye6q88q1ia 8s linear infinite;
        }

        @keyframes shimmer-b-ye6q88q1ia {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .header h1[b-ye6q88q1ia] {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .header .date[b-ye6q88q1ia] {
            font-size: 1.2rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        /* Summary Cards */
        .summary-grid[b-ye6q88q1ia] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .summary-card[b-ye6q88q1ia] {
            background: white;
            padding: 1.5rem;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .summary-card[b-ye6q88q1ia]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        .summary-card:hover[b-ye6q88q1ia] {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.12);
            border-color: var(--primary-lighter);
        }

        .summary-card .icon[b-ye6q88q1ia] {
            width: 50px;
            height: 50px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        .summary-card .value[b-ye6q88q1ia] {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .summary-card .label[b-ye6q88q1ia] {
            color: var(--text-muted);
            font-weight: 500;
            font-size: 0.9rem;
        }

        /* Schedule Cards */
        .schedules-section[b-ye6q88q1ia] {
            margin-bottom: 3rem;
        }

        .section-title[b-ye6q88q1ia] {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-title[b-ye6q88q1ia]::before {
            content: '';
            width: 4px;
            height: 30px;
            background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
            border-radius: 2px;
        }

        .schedule-card[b-ye6q88q1ia] {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
        }

        .schedule-card:hover[b-ye6q88q1ia] {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }

        .schedule-header[b-ye6q88q1ia] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid var(--bg-light);
        }

        .schedule-info[b-ye6q88q1ia] {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .schedule-info .label[b-ye6q88q1ia] {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .schedule-info .value[b-ye6q88q1ia] {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .schedule-info .highlight[b-ye6q88q1ia] {
            color: var(--primary-color);
            font-weight: 700;
        }

        .status-grid[b-ye6q88q1ia] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .status-item[b-ye6q88q1ia] {
            padding: 1rem;
            border-radius: 12px;
            text-align: center;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .status-item[b-ye6q88q1ia]::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s ease;
        }

        .status-item:hover[b-ye6q88q1ia]::before {
            left: 100%;
        }

        .status-total[b-ye6q88q1ia] { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-color: #2196f3; }
        .status-pending[b-ye6q88q1ia] { background: linear-gradient(135deg, #fff8e1, #ffecb3); border-color: #ffc107; }
        .status-checked[b-ye6q88q1ia] { background: linear-gradient(135deg, #e8f5e8, #c8e6c9); border-color: #4caf50; }
        .status-pickup[b-ye6q88q1ia] { background: linear-gradient(135deg, #e1f5fe, #b3e5fc); border-color: #03a9f4; }
        .status-delivery[b-ye6q88q1ia] { background: linear-gradient(135deg, #f3e5f5, #e1bee7); border-color: #9c27b0; }

        .status-item .number[b-ye6q88q1ia] {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .status-item .text[b-ye6q88q1ia] {
            font-size: 0.85rem;
            font-weight: 500;
            position: relative;
            z-index: 1;
        }

        .detail-button[b-ye6q88q1ia] {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            box-shadow: 0 4px 15px rgba(202, 60, 25, 0.3);
        }

        .detail-button:hover[b-ye6q88q1ia] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(202, 60, 25, 0.4);
            background: linear-gradient(135deg, var(--primary-hover), var(--primary-active));
        }

        .detail-button:active[b-ye6q88q1ia] {
            transform: translateY(0);
        }

        /* White Tickets Section */
        .white-tickets[b-ye6q88q1ia] {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        .white-tickets-header[b-ye6q88q1ia] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid var(--bg-light);
        }

        .ticket-stat[b-ye6q88q1ia] {
            text-align: center;
            padding: 1rem;
            background: linear-gradient(135deg, var(--bg-light), #ffffff);
            border-radius: 12px;
            border: 2px solid var(--border-light);
        }

        .ticket-stat .number[b-ye6q88q1ia] {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .ticket-stat .label[b-ye6q88q1ia] {
            color: var(--text-muted);
            font-weight: 500;
        }

        .white-ticket-card[b-ye6q88q1ia] {
            background: linear-gradient(135deg, #fff9c4, #fff59d);
            border: 2px solid #fdd835;
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        .white-ticket-card:hover[b-ye6q88q1ia] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(253, 216, 53, 0.3);
        }

        .ticket-info[b-ye6q88q1ia] {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .ticket-info-item[b-ye6q88q1ia] {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .ticket-info-item .label[b-ye6q88q1ia] {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .ticket-info-item .value[b-ye6q88q1ia] {
            font-weight: 600;
            color: var(--text-dark);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container[b-ye6q88q1ia] {
                padding: 1rem 0.5rem;
            }

            .header h1[b-ye6q88q1ia] {
                font-size: 2rem;
            }

            .header .date[b-ye6q88q1ia] {
                font-size: 1rem;
            }

            .summary-grid[b-ye6q88q1ia] {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1rem;
            }

            .schedule-header[b-ye6q88q1ia] {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .status-grid[b-ye6q88q1ia] {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }

            .white-tickets-header[b-ye6q88q1ia] {
                grid-template-columns: 1fr;
            }

            .ticket-info[b-ye6q88q1ia] {
                grid-template-columns: 1fr;
            }
        }

        /* Loading Animation */
        .loading[b-ye6q88q1ia] {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin-b-ye6q88q1ia 1s ease-in-out infinite;
        }

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

        /* Smooth transitions for all interactive elements */
        *[b-ye6q88q1ia] {
            transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }
/* _content/Admin_KA_Transport_Blazor/Components/Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-ihczw8j3es] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.notifications-header[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.header-left[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notifications-header h2[b-ihczw8j3es] {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notifications-header h2 i[b-ihczw8j3es] {
    color: var(--primary-color);
}

.notification-count[b-ihczw8j3es] {
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.header-actions[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-mark-all[b-ihczw8j3es],
.btn-filter[b-ihczw8j3es] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid;
}

.btn-mark-all[b-ihczw8j3es] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-mark-all:hover[b-ihczw8j3es] {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(202, 60, 25, 0.3);
}

.btn-filter[b-ihczw8j3es] {
    background: white;
    color: #64748b;
    border-color: #cbd5e1;
}

.btn-filter:hover[b-ihczw8j3es],
.btn-filter.active[b-ihczw8j3es] {
    background: #f8fafc;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Filter Panel */
.filter-panel[b-ihczw8j3es] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.filter-group[b-ihczw8j3es] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.filter-group label[b-ihczw8j3es] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.filter-select[b-ihczw8j3es] {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus[b-ihczw8j3es] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(202, 60, 25, 0.1);
}

/* Notifications Content */
.notifications-content[b-ihczw8j3es] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Empty State */
.empty-state[b-ihczw8j3es] {
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
}

.empty-state i[b-ihczw8j3es] {
    font-size: 5rem;
    margin-bottom: 24px;
    opacity: 0.5;
}

.empty-state h3[b-ihczw8j3es] {
    font-size: 1.5rem;
    margin: 0 0 12px 0;
    color: #64748b;
}

.empty-state p[b-ihczw8j3es] {
    margin: 0;
    font-size: 1rem;
    color: #94a3b8;
}

/* Notifications List */
.notifications-list[b-ihczw8j3es] {
    display: flex;
    flex-direction: column;
}

/* Notification Card */
.notification-card[b-ihczw8j3es] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notification-card:hover[b-ihczw8j3es] {
    background: #f8fafc;
}

.notification-card.unread[b-ihczw8j3es] {
    background: linear-gradient(to right, #f0f9ff, #ffffff);
    border-left: 4px solid var(--primary-color);
}

.notification-card.unread:hover[b-ihczw8j3es] {
    background: linear-gradient(to right, #e0f2fe, #f8fafc);
}

.notification-card:last-child[b-ihczw8j3es] {
    border-bottom: none;
}

/* Notification Icon */
.notification-icon-large[b-ihczw8j3es] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.notification-icon-large.info[b-ihczw8j3es] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.notification-icon-large.success[b-ihczw8j3es] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.notification-icon-large.warning[b-ihczw8j3es] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.notification-icon-large.error[b-ihczw8j3es] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* Notification Details */
.notification-details[b-ihczw8j3es] {
    flex: 1;
    min-width: 0;
}

.notification-header-row[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.notification-title[b-ihczw8j3es] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.unread-badge[b-ihczw8j3es] {
    padding: 2px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.notification-message[b-ihczw8j3es] {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

.notification-meta[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-time[b-ihczw8j3es] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.notification-type-badge[b-ihczw8j3es] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.notification-type-badge.info[b-ihczw8j3es] {
    background: #dbeafe;
    color: #1e40af;
}

.notification-type-badge.success[b-ihczw8j3es] {
    background: #d1fae5;
    color: #065f46;
}

.notification-type-badge.warning[b-ihczw8j3es] {
    background: #fef3c7;
    color: #92400e;
}

.notification-type-badge.error[b-ihczw8j3es] {
    background: #fee2e2;
    color: #991b1b;
}

/* Notification Actions */
.notification-actions[b-ihczw8j3es] {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-card:hover .notification-actions[b-ihczw8j3es] {
    opacity: 1;
}

.btn-mark-read[b-ihczw8j3es],
.btn-delete[b-ihczw8j3es] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.btn-mark-read[b-ihczw8j3es] {
    color: #10b981;
    border-color: #10b981;
}

.btn-mark-read:hover[b-ihczw8j3es] {
    background: #10b981;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-delete[b-ihczw8j3es] {
    color: #ef4444;
    border-color: #ef4444;
}

.btn-delete:hover[b-ihczw8j3es] {
    background: #ef4444;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-page[b-ihczw8j3es] {
        padding: 16px;
    }

    .notifications-header[b-ihczw8j3es] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-left[b-ihczw8j3es] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .notifications-header h2[b-ihczw8j3es] {
        font-size: 1.4rem;
    }

    .header-actions[b-ihczw8j3es] {
        width: 100%;
    }

    .btn-mark-all[b-ihczw8j3es],
    .btn-filter[b-ihczw8j3es] {
        flex: 1;
        justify-content: center;
    }

    .filter-panel[b-ihczw8j3es] {
        flex-direction: column;
    }

    .notification-card[b-ihczw8j3es] {
        gap: 12px;
        padding: 16px;
    }

    .notification-icon-large[b-ihczw8j3es] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .notification-title[b-ihczw8j3es] {
        font-size: 1rem;
    }

    .notification-message[b-ihczw8j3es] {
        font-size: 0.9rem;
    }

    .notification-actions[b-ihczw8j3es] {
        opacity: 1;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/User/Login.razor.rz.scp.css */
.container[b-v1faat5qhe] {
	height: 100%;
}

.login-wrapper[b-v1faat5qhe] {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-attachment: fixed;
}

.card[b-v1faat5qhe] {
	margin-top: -50px;
	min-width: 380px;
	max-width: 450px;
	padding: 35px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.card-header[b-v1faat5qhe] {
	text-align: center;
	color: #333;
	font-weight: 600;
	margin-bottom: 25px;
	font-size: 1.6rem;
}

.form-group[b-v1faat5qhe] {
	margin-bottom: 22px;
}

.form-group label[b-v1faat5qhe] {
	color: #555;
	font-weight: 500;
	margin-bottom: 10px;
	display: block;
	font-size: 14px;
}

.form-control[b-v1faat5qhe] {
	border-radius: 10px;
	border: 2px solid #e0e0e0;
	padding: 14px 16px;
	font-size: 15px;
	transition: all 0.3s ease;
	width: 100%;
}

.form-control:focus[b-v1faat5qhe] {
	border-color: #ff8c00;
	box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.25);
	outline: none;
}

.btn-primary[b-v1faat5qhe] {
	margin-top: 28px;
	width: 100%;
	padding: 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
	border: none;
	transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled)[b-v1faat5qhe] {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 140, 0, 0.4);
}

.btn-primary:disabled[b-v1faat5qhe] {
	opacity: 0.7;
	cursor: not-allowed;
}

.spinner-border-sm[b-v1faat5qhe] {
	margin-right: 8px;
}

@media (max-width: 576px) {
	.card[b-v1faat5qhe] {
		width: 90%;
		margin: 0px 15px;
		padding: 25px;
		min-width: unset;
	}
	
	.card-header[b-v1faat5qhe] {
		font-size: 1.4rem;
	}
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/DailyDeliveryDetailReport/DailyDeliveryDetailReport.razor.rz.scp.css */
.filters-section[b-ifhjjz7bdv] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-ifhjjz7bdv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-ifhjjz7bdv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-ifhjjz7bdv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-ifhjjz7bdv] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-ifhjjz7bdv], .filter-select[b-ifhjjz7bdv] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-ifhjjz7bdv], .filter-select:focus[b-ifhjjz7bdv] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-ifhjjz7bdv] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.etrans-container[b-ifhjjz7bdv] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-ifhjjz7bdv] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-ifhjjz7bdv] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-ifhjjz7bdv] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-ifhjjz7bdv] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-ifhjjz7bdv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-ifhjjz7bdv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-ifhjjz7bdv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-ifhjjz7bdv] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-ifhjjz7bdv], .filter-select[b-ifhjjz7bdv] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-ifhjjz7bdv], .filter-select:focus[b-ifhjjz7bdv] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-ifhjjz7bdv] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-ifhjjz7bdv] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-ifhjjz7bdv] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-ifhjjz7bdv] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-ifhjjz7bdv] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-ifhjjz7bdv] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-ifhjjz7bdv] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-ifhjjz7bdv] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-ifhjjz7bdv] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-ifhjjz7bdv] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-ifhjjz7bdv], .rz-grid-table td[b-ifhjjz7bdv] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-ifhjjz7bdv] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-ifhjjz7bdv] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-ifhjjz7bdv] {
    background-color: #e9ecef;
}

.status-badge[b-ifhjjz7bdv] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-ifhjjz7bdv] {
    background-color: #28a745;
}

.status-pending[b-ifhjjz7bdv] {
    background-color: #ffc107;
}

.status-completed[b-ifhjjz7bdv] {
    background-color: #17a2b8;
}

.status-default[b-ifhjjz7bdv] {
    background-color: #6c757d;
}

.quantity-cell[b-ifhjjz7bdv], .date-cell[b-ifhjjz7bdv] {
    text-align: right;
}

@keyframes fadeIn-b-ifhjjz7bdv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-ifhjjz7bdv] {
        padding: 12px;
    }

    .filters-grid[b-ifhjjz7bdv] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-ifhjjz7bdv] {
        justify-content: stretch;
    }

    .btn[b-ifhjjz7bdv] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-ifhjjz7bdv] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-ifhjjz7bdv] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-ifhjjz7bdv], .rz-grid-table td[b-ifhjjz7bdv] {
            padding: 8px;
        }

    .data-table th[b-ifhjjz7bdv],
    .data-table td[b-ifhjjz7bdv] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-ifhjjz7bdv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-ifhjjz7bdv 0.3s ease;
    padding: 20px;
}

.modal-container[b-ifhjjz7bdv] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-ifhjjz7bdv 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-ifhjjz7bdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-ifhjjz7bdv] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-ifhjjz7bdv] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-ifhjjz7bdv] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-ifhjjz7bdv] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-ifhjjz7bdv] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-ifhjjz7bdv] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-ifhjjz7bdv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-ifhjjz7bdv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-ifhjjz7bdv] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-ifhjjz7bdv] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-ifhjjz7bdv] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-ifhjjz7bdv] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-ifhjjz7bdv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-ifhjjz7bdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-ifhjjz7bdv] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-ifhjjz7bdv] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-ifhjjz7bdv] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-ifhjjz7bdv] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-ifhjjz7bdv] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-ifhjjz7bdv] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-ifhjjz7bdv] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-ifhjjz7bdv] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-ifhjjz7bdv] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-ifhjjz7bdv] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-ifhjjz7bdv] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-ifhjjz7bdv] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-ifhjjz7bdv] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-ifhjjz7bdv] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-ifhjjz7bdv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-ifhjjz7bdv] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-ifhjjz7bdv] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-ifhjjz7bdv] {
        max-width: 95%;
    }

    .info-grid[b-ifhjjz7bdv] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-ifhjjz7bdv] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-ifhjjz7bdv] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-ifhjjz7bdv] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-ifhjjz7bdv] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-ifhjjz7bdv] {
        padding: 10px;
    }

    .modal-container[b-ifhjjz7bdv] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-ifhjjz7bdv] {
        padding: 16px 20px;
    }

    .modal-title[b-ifhjjz7bdv] {
        font-size: 1rem;
    }

    .info-bar[b-ifhjjz7bdv] {
        padding: 12px 16px;
    }

    .info-grid[b-ifhjjz7bdv] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-ifhjjz7bdv] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-ifhjjz7bdv] {
        padding: 12px 16px;
    }

    .grid-header[b-ifhjjz7bdv] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-ifhjjz7bdv] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-ifhjjz7bdv],
    .transport-grid-full .rz-grid-table td[b-ifhjjz7bdv] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-ifhjjz7bdv] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-ifhjjz7bdv] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-ifhjjz7bdv] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-ifhjjz7bdv] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-ifhjjz7bdv] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-ifhjjz7bdv], .rz-textbox[b-ifhjjz7bdv], .rz-numeric[b-ifhjjz7bdv], .rz-textarea[b-ifhjjz7bdv] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-ifhjjz7bdv] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-ifhjjz7bdv] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-ifhjjz7bdv] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-ifhjjz7bdv] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-ifhjjz7bdv] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-ifhjjz7bdv] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-ifhjjz7bdv],
.rz-numeric.rz-state-invalid[b-ifhjjz7bdv],
.rz-dropdown.rz-state-invalid[b-ifhjjz7bdv] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-ifhjjz7bdv] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-ifhjjz7bdv] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-ifhjjz7bdv]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-ifhjjz7bdv]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-ifhjjz7bdv]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-ifhjjz7bdv]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-ifhjjz7bdv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-ifhjjz7bdv {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-ifhjjz7bdv] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-ifhjjz7bdv] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-ifhjjz7bdv] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-ifhjjz7bdv] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-ifhjjz7bdv] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-ifhjjz7bdv],
    .modal-footer[b-ifhjjz7bdv] {
        display: none;
    }

    .action-buttons[b-ifhjjz7bdv] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-ifhjjz7bdv] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-ifhjjz7bdv] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-ifhjjz7bdv] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-ifhjjz7bdv] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-ifhjjz7bdv] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-ifhjjz7bdv] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-ifhjjz7bdv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-ifhjjz7bdv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-ifhjjz7bdv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-ifhjjz7bdv] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-ifhjjz7bdv], .filter-select[b-ifhjjz7bdv] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-ifhjjz7bdv], .filter-select:focus[b-ifhjjz7bdv] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-ifhjjz7bdv] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-ifhjjz7bdv] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-ifhjjz7bdv] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-ifhjjz7bdv] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-ifhjjz7bdv] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-ifhjjz7bdv] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-ifhjjz7bdv] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-ifhjjz7bdv] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-ifhjjz7bdv] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-ifhjjz7bdv], .rz-grid-table td[b-ifhjjz7bdv] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-ifhjjz7bdv] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-ifhjjz7bdv] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-ifhjjz7bdv] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-ifhjjz7bdv] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-ifhjjz7bdv] {
    background-color: #28a745;
}

.status-pending[b-ifhjjz7bdv] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-ifhjjz7bdv] {
    background-color: #17a2b8;
}

.status-cancelled[b-ifhjjz7bdv] {
    background-color: #dc3545;
}

.status-default[b-ifhjjz7bdv] {
    background-color: #6c757d;
}

.quantity-cell[b-ifhjjz7bdv], .date-cell[b-ifhjjz7bdv] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-ifhjjz7bdv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-ifhjjz7bdv 0.3s ease;
}

.modal-container[b-ifhjjz7bdv] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-ifhjjz7bdv 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-ifhjjz7bdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-ifhjjz7bdv] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-ifhjjz7bdv] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-ifhjjz7bdv] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-ifhjjz7bdv] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-ifhjjz7bdv] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-ifhjjz7bdv] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-ifhjjz7bdv] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-ifhjjz7bdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-ifhjjz7bdv] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-ifhjjz7bdv] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-ifhjjz7bdv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-ifhjjz7bdv] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-ifhjjz7bdv] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-ifhjjz7bdv] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-ifhjjz7bdv] {
        background: #f8f9fa;
    }

.highlight-row[b-ifhjjz7bdv] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-ifhjjz7bdv] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-ifhjjz7bdv] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-ifhjjz7bdv] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-ifhjjz7bdv] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-ifhjjz7bdv] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-ifhjjz7bdv] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-ifhjjz7bdv] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-ifhjjz7bdv] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-ifhjjz7bdv] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-ifhjjz7bdv] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-ifhjjz7bdv] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-ifhjjz7bdv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-ifhjjz7bdv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-ifhjjz7bdv {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-ifhjjz7bdv] {
        width: 98%;
    }

    .detail-layout[b-ifhjjz7bdv] {
        flex-direction: column;
    }

    .left-panel[b-ifhjjz7bdv] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-ifhjjz7bdv] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-ifhjjz7bdv] {
        padding: 12px;
    }

    .filters-grid[b-ifhjjz7bdv] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-ifhjjz7bdv] {
        justify-content: stretch;
    }

    .btn[b-ifhjjz7bdv] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-ifhjjz7bdv] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-ifhjjz7bdv] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-ifhjjz7bdv], .rz-grid-table td[b-ifhjjz7bdv] {
            padding: 8px;
        }

    .data-table th[b-ifhjjz7bdv],
    .data-table td[b-ifhjjz7bdv] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-ifhjjz7bdv] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-ifhjjz7bdv] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-ifhjjz7bdv],
        .transport-grid .rz-grid-table td[b-ifhjjz7bdv] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-ifhjjz7bdv] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-ifhjjz7bdv] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-ifhjjz7bdv] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-ifhjjz7bdv] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-ifhjjz7bdv], .rz-textbox[b-ifhjjz7bdv], .rz-numeric[b-ifhjjz7bdv], .rz-textarea[b-ifhjjz7bdv] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-ifhjjz7bdv] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-ifhjjz7bdv] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-ifhjjz7bdv] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-ifhjjz7bdv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-ifhjjz7bdv] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-ifhjjz7bdv] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-ifhjjz7bdv] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-ifhjjz7bdv] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-ifhjjz7bdv] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-ifhjjz7bdv] {
        display: none !important;
    }
    
    .mobile-filters-content[b-ifhjjz7bdv] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-ifhjjz7bdv] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-ifhjjz7bdv] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-ifhjjz7bdv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-ifhjjz7bdv] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-ifhjjz7bdv] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-ifhjjz7bdv] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-ifhjjz7bdv] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-ifhjjz7bdv] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-ifhjjz7bdv] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-ifhjjz7bdv] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-ifhjjz7bdv] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-ifhjjz7bdv] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-ifhjjz7bdv] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-ifhjjz7bdv], .filter-select[b-ifhjjz7bdv] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-ifhjjz7bdv] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-ifhjjz7bdv] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-ifhjjz7bdv] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-ifhjjz7bdv],
    .rz-grid-table td[b-ifhjjz7bdv] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-ifhjjz7bdv] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/ExportCommand/ExportCommandRowDialog.razor.rz.scp.css */
.dialog-content[b-ypo08h6w9z] {
    padding: 20px 10px;
}

.form-group[b-ypo08h6w9z] {
    margin-bottom: 20px;
}

.form-label[b-ypo08h6w9z] {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
}

.required[b-ypo08h6w9z] {
    color: #dc3545;
    margin-left: 2px;
}

.error-message[b-ypo08h6w9z] {
    display: block;
    margin-top: 4px;
    color: #dc3545;
    font-size: 12px;
    font-style: italic;
}

.dialog-footer[b-ypo08h6w9z] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 0;
}

[b-ypo08h6w9z] .e-dialog .e-dlg-header-content {
    background-color: #007bff;
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
}

[b-ypo08h6w9z] .e-dialog .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

[b-ypo08h6w9z] .e-dialog .e-footer-content {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

[b-ypo08h6w9z] .e-dropdownlist,
[b-ypo08h6w9z] .e-numerictextbox,
[b-ypo08h6w9z] .e-textbox {
    width: 100%;
}

[b-ypo08h6w9z] .e-input-group,
[b-ypo08h6w9z] .e-float-input {
    width: 100%;
}

[b-ypo08h6w9z] .e-input-group input,
[b-ypo08h6w9z] .e-float-input input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

[b-ypo08h6w9z] .e-input-group input:focus,
[b-ypo08h6w9z] .e-float-input input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

[b-ypo08h6w9z] .e-dropdownlist .e-input-group {
    border: 1px solid #ced4da;
    border-radius: 4px;
}

[b-ypo08h6w9z] .e-dropdownlist .e-input-group:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/ExportCommand/ExportCommandTable.razor.rz.scp.css */
.export-command-table-container[b-6likovwuwq] {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    min-height: calc(100vh - 100px);
}

.page-header[b-6likovwuwq] {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
}

.page-header h3[b-6likovwuwq] {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
}

.toolbar-section[b-6likovwuwq] {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[b-6likovwuwq] .e-grid {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[b-6likovwuwq] .e-grid .e-headercell {
    background-color: #007bff;
    color: white;
    font-weight: 600;
    padding: 12px 8px;
}

[b-6likovwuwq] .e-grid .e-rowcell {
    padding: 10px 8px;
    border-color: #e9ecef;
}

[b-6likovwuwq] .e-grid .e-row:hover {
    background-color: #f1f5f9;
}

[b-6likovwuwq] .e-grid .e-selectionbackground {
    background-color: #e3f2fd !important;
}

[b-6likovwuwq] .e-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

[b-6likovwuwq] .e-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[b-6likovwuwq] .e-btn.e-success {
    background-color: #28a745;
    border-color: #28a745;
}

[b-6likovwuwq] .e-btn.e-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

[b-6likovwuwq] .e-btn.e-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

[b-6likovwuwq] .e-btn.e-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

[b-6likovwuwq] .e-btn.e-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

[b-6likovwuwq] .e-btn.e-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

[b-6likovwuwq] .e-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Sanction/BlacklistsDriver.razor.rz.scp.css */
/* Main tabs styling */
.tabs[b-2wl5gqdc5p] {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab[b-2wl5gqdc5p] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tab:hover[b-2wl5gqdc5p] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.05);
        transform: translateY(-1px);
    }

    .tab.active[b-2wl5gqdc5p] {
        color: var(--primary-color);
        font-weight: 600;
        background: rgba(202, 60, 25, 0.08);
    }

        .tab.active[b-2wl5gqdc5p]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px 2px 0 0;
        }

/* Subtabs styling */
.subtabs[b-2wl5gqdc5p] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.subtab[b-2wl5gqdc5p] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 6px;
    margin: 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .subtab:hover[b-2wl5gqdc5p] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.15);
    }

    .subtab.active[b-2wl5gqdc5p] {
        color: var(--primary-color);
        font-weight: 500;
        background: linear-gradient(135deg, rgba(202, 60, 25, 0.12), rgba(202, 60, 25, 0.08));
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

        .subtab.active[b-2wl5gqdc5p]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 0 0 2px 2px;
        }

/* Dialog styling */
.rz-dialog-overlay[b-2wl5gqdc5p] {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.rz-dialog[b-2wl5gqdc5p] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: #ffffff;
    margin: 0 auto;
}

.rz-dialog-titlebar[b-2wl5gqdc5p] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rz-dialog-close:hover[b-2wl5gqdc5p] {
    opacity: 0.8;
}

.form-group[b-2wl5gqdc5p] {
    margin-bottom: 0.5rem;
}

.form-group label[b-2wl5gqdc5p] {
    color: #333;
}



/* Responsive design */
@media (max-width: 768px) {
    .tabs[b-2wl5gqdc5p] {
        flex-wrap: wrap;
    }

    .tab[b-2wl5gqdc5p] {
        min-width: 120px;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .subtabs[b-2wl5gqdc5p] {
        flex-wrap: wrap;
        padding: 0.5rem 0.25rem;
    }

    .subtab[b-2wl5gqdc5p] {
        min-width: 100px;
        margin: 0.125rem;
        font-size: 0.85rem;
    }
}

/* Animation for tab switching */
.tab-content[b-2wl5gqdc5p] {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .tab-content.active[b-2wl5gqdc5p] {
        opacity: 1;
        transform: translateY(0);
    }

/* Enhanced visual hierarchy */
.tabs-container[b-2wl5gqdc5p] {
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-wrapper[b-2wl5gqdc5p] {
    background: white;
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Header container with filters and count */
.header-container[b-2wl5gqdc5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Record count styling */
.record-count[b-2wl5gqdc5p] {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    background-color: rgba(248, 249, 250, 0.7);
    border-radius: 4px;
    border: 1px solid rgba(224, 224, 224, 0.5);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.record-count:hover[b-2wl5gqdc5p] {
    background-color: rgba(248, 249, 250, 0.9);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.record-icon[b-2wl5gqdc5p] {
    color: var(--primary-color, #ca3c19);
    opacity: 0.7;
    margin-right: 0.3rem;
    font-size: 0.8rem;
}

.count-label[b-2wl5gqdc5p] {
    color: red;
    margin-left: 0.2rem;
    font-weight: normal;
}

.count-value[b-2wl5gqdc5p] {
    font-weight: 600;
    color: red;
}

/* Filter section */
.filters[b-2wl5gqdc5p] {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.filters label[b-2wl5gqdc5p] {
    font-weight: 500;
    color: var(--primary-color, #ca3c19);
}
.filters select[b-2wl5gqdc5p], .filters input[b-2wl5gqdc5p] {
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border-light, #e0e0e0);
    font-size: 1rem;
    background: #f9f9f9;
    min-width: 140px;
}
.filters button[b-2wl5gqdc5p] {
    min-width: 100px;
}

/* Table styling */
table[b-2wl5gqdc5p] {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-radius: 8px;
    overflow: hidden;
}
th[b-2wl5gqdc5p], td[b-2wl5gqdc5p] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
th[b-2wl5gqdc5p] {
    background: linear-gradient(90deg, #f8f9fa 0%, #fff 100%);
    color: #ca3c19;
    font-weight: 600;
    font-size: 1rem;
}
tr:last-child td[b-2wl5gqdc5p] {
    border-bottom: none;
}
tr:hover[b-2wl5gqdc5p] {
    background: #f9f9f9;
}
ul[b-2wl5gqdc5p] {
    margin: 0;
    padding-left: 1.2rem;
}
/* Dialog styling */
.e-dialog .e-dlg-header-content[b-2wl5gqdc5p] {
    background: linear-gradient(90deg, #ca3c19 0%, #f8f9fa 100%);
    color: #fff;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}
.e-dialog .e-dlg-content[b-2wl5gqdc5p] {
    background: #fff;
    padding: 1.2rem 1rem;
}
.e-dialog .e-footer-content[b-2wl5gqdc5p] {
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}
.e-dialog input[b-2wl5gqdc5p], .e-dialog select[b-2wl5gqdc5p] {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: 1rem;
    background: #f9f9f9;
}
.e-dialog button[b-2wl5gqdc5p] {
    background: #ca3c19;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.e-dialog button:hover[b-2wl5gqdc5p] {
    background: #a82f13;
}

/* Rating stars */
.rating-stars[b-2wl5gqdc5p] {
    display: flex;
    gap: 4px;
    align-items: center;
}
.rating-star[b-2wl5gqdc5p] {
    color: #ffd700;
    font-size: 1.2rem;
    transition: transform 0.2s;
    cursor: pointer;
}
.rating-star.inactive[b-2wl5gqdc5p] {
    color: #e0e0e0;
}
.rating-star:hover[b-2wl5gqdc5p] {
    transform: scale(1.2);
}

/* Responsive for table and dialog */
@media (max-width: 768px) {
    .content-wrapper[b-2wl5gqdc5p] {
        padding: 0.5rem;
    }
    th[b-2wl5gqdc5p], td[b-2wl5gqdc5p] {
        padding: 0.5rem 0.4rem;
        font-size: 0.95rem;
    }
    .e-dialog .e-dlg-content[b-2wl5gqdc5p] {
        padding: 0.7rem 0.3rem;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookBarger.razor.rz.scp.css */
/* BookTruck Page Specific Styles */

.loading-overlay[b-mnkq1mfy7x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner[b-mnkq1mfy7x] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Modal Container Variants */
.modal-container--wide[b-mnkq1mfy7x] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-mnkq1mfy7x] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-mnkq1mfy7x] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}
@media (max-width: 1400px) {
    .table-container[b-mnkq1mfy7x] {
        position: fixed;
        top: 222px;
    }
}
/* Ensure proper sidebar responsive behavior for desktop */
@media (min-width: 769px) {
    .filters-container[b-mnkq1mfy7x] {
        left: var(--sidebar-width);
    }

    .table-container[b-mnkq1mfy7x] {
        left: var(--sidebar-width);
    }

    .sidebar-collapsed .filters-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width) !important;
    }

    .sidebar-collapsed .table-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width) !important;
    }
}

.filter-wrapper[b-mnkq1mfy7x] {
    display: flex;
    flex-direction: column;
}

.btn-fuction-container[b-mnkq1mfy7x] {
    display: flex;
}

.filters-grid[b-mnkq1mfy7x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-mnkq1mfy7x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group-btn[b-mnkq1mfy7x] {
    display: flex;
    align-items: flex-end;
}

.btn-group-function[b-mnkq1mfy7x] {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.filter-input[b-mnkq1mfy7x], .filter-select[b-mnkq1mfy7x] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

    .filter-input:focus[b-mnkq1mfy7x], .filter-select:focus[b-mnkq1mfy7x] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }
/* Level 2 switches styling */
.subtasks-level2[b-mnkq1mfy7x] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-mnkq1mfy7x] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-mnkq1mfy7x] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-mnkq1mfy7x] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }

/* Style cho footer */
.footer-text-right[b-mnkq1mfy7x] {
    font-size: 0.8rem !important;
    display: block;
    text-align: right;
    width: 100%;
}

.cell-number-right .rz-cell-footer[b-mnkq1mfy7x] {
    text-align: right !important;
}
/* Table and Grid Layout Styles */
.table-container[b-mnkq1mfy7x] {
    position: fixed;
    /*top: 217px;*/
    top: 162px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

.filter-label[b-mnkq1mfy7x] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

.main-planning-grid[b-mnkq1mfy7x] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

    .main-planning-grid .rz-datatable-data[b-mnkq1mfy7x] {
        height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

.page-content[b-mnkq1mfy7x] {
    padding-top: 125px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-mnkq1mfy7x] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .table-container[b-mnkq1mfy7x] {
    left: var(--sidebar-collapsed-width);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-mnkq1mfy7x] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-mnkq1mfy7x] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-mnkq1mfy7x] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-mnkq1mfy7x] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-mnkq1mfy7x] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-mnkq1mfy7x] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-mnkq1mfy7x] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-mnkq1mfy7x] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-mnkq1mfy7x] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-mnkq1mfy7x] {
            display: none !important;
        }

        .mobile-filters-content[b-mnkq1mfy7x] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
    }

    .table-container[b-mnkq1mfy7x] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }

    .page-content[b-mnkq1mfy7x] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    .filters-grid[b-mnkq1mfy7x] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-mnkq1mfy7x] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-mnkq1mfy7x] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }

    .mobile-compact-filters .filter-group[b-mnkq1mfy7x] {
        margin-bottom: 4px;
    }

    .mobile-compact-filters .filter-label[b-mnkq1mfy7x] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
    }

    /* Mobile subtasks switches */
    .subtasks-level2[b-mnkq1mfy7x] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: center;
    }

        .subtasks-level2 .switch[b-mnkq1mfy7x] {
            padding: 0.3rem 0.8rem;
            font-size: 0.75rem;
            min-width: 50px;
        }

    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-mnkq1mfy7x] {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 8px;
        padding: 8px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 8px;
        margin-top: 8px;
    }

        .btn-fuction-container .filter-group[b-mnkq1mfy7x] {
            flex: 1;
            display: flex;
            justify-content: center;
        }

    .filter-input[b-mnkq1mfy7x], .filter-select[b-mnkq1mfy7x] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }

    .btn-group-function[b-mnkq1mfy7x] {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .filter-group-btn[b-mnkq1mfy7x] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }



        .filter-group-btn .btn[b-mnkq1mfy7x] {
            flex: 1;
            justify-content: center;
            font-size: 0.8rem;
            padding: 8px 12px;
            min-height: 36px;
            min-width: 40px;
            margin: 0 4px;
            max-width: 100px;
        }

    /* Mobile button icons with tooltips */
    .btn[title][b-mnkq1mfy7x] {
        position: relative;
    }

        .btn[title]:hover[b-mnkq1mfy7x]::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }

        .btn[title]:hover[b-mnkq1mfy7x]::before {
            content: '';
            position: absolute;
            bottom: 95%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }

    .main-planning-grid[b-mnkq1mfy7x] {
        height: auto !important;
        width: 100% !important;
    }

        .main-planning-grid .rz-datatable-data[b-mnkq1mfy7x] {
            height: auto !important;
            overflow-y: visible !important;
        }

    /* Mobile grid adjustments */
    .rz-grid-table[b-mnkq1mfy7x] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }

        .rz-grid-table th[b-mnkq1mfy7x],
        .rz-grid-table td[b-mnkq1mfy7x] {
            padding: 6px 4px;
            font-size: 0.75rem;
            min-width: 80px;
        }

            /* Hide less important columns on mobile */
            .rz-grid-table th:nth-child(n+6)[b-mnkq1mfy7x],
            .rz-grid-table td:nth-child(n+6)[b-mnkq1mfy7x] {
                display: none;
            }

            /* Keep essential columns visible */
            .rz-grid-table th:nth-child(1)[b-mnkq1mfy7x],
            .rz-grid-table td:nth-child(1)[b-mnkq1mfy7x],
            .rz-grid-table th:nth-child(2)[b-mnkq1mfy7x],
            .rz-grid-table td:nth-child(2)[b-mnkq1mfy7x],
            .rz-grid-table th:nth-child(3)[b-mnkq1mfy7x],
            .rz-grid-table td:nth-child(3)[b-mnkq1mfy7x],
            .rz-grid-table th:last-child[b-mnkq1mfy7x],
            .rz-grid-table td:last-child[b-mnkq1mfy7x] {
                display: table-cell;
            }

    /* Status tags mobile responsive */
    .status-tags[b-mnkq1mfy7x] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }

    .status-tag[b-mnkq1mfy7x] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }

    /* Notification badge mobile adjustments */
    .notification-badge[b-mnkq1mfy7x] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }

    /* Button mobile improvements - Icon only */
    .btn[b-mnkq1mfy7x] {
        padding: 8px 8px;
        font-size: 0.8rem;
        min-height: 36px;
        border-radius: 6px;
        min-width: 36px;
        justify-content: center;
        position: relative;
    }



    /* Modal responsive for mobile */
    .modal-container--wide[b-mnkq1mfy7x] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }

    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-mnkq1mfy7x],
    .filters-container[b-mnkq1mfy7x] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .table-container[b-mnkq1mfy7x],
    .table-container[b-mnkq1mfy7x] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Tablet Responsive Design */
@media (max-width: 1024px) and (min-width: 769px) {
    .filters-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width);
        padding: 8px;
    }

    .table-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width);
    }

    .filters-grid[b-mnkq1mfy7x] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 6px;
    }

    .filter-input[b-mnkq1mfy7x], .filter-select[b-mnkq1mfy7x] {
        font-size: 0.75rem;
        height: 28px;
        padding: 4px 6px;
    }

    .filter-label[b-mnkq1mfy7x] {
        font-size: 0.65rem;
    }

    /* Tablet grid improvements */
    .rz-grid-table[b-mnkq1mfy7x] {
        font-size: 0.8rem;
    }

        .rz-grid-table th[b-mnkq1mfy7x],
        .rz-grid-table td[b-mnkq1mfy7x] {
            padding: 6px 8px;
            font-size: 0.8rem;
        }

            /* On tablet, hide some less important columns */
            .rz-grid-table th:nth-child(n+8)[b-mnkq1mfy7x],
            .rz-grid-table td:nth-child(n+8)[b-mnkq1mfy7x] {
                display: none;
            }

            .rz-grid-table th:last-child[b-mnkq1mfy7x],
            .rz-grid-table td:last-child[b-mnkq1mfy7x] {
                display: table-cell;
            }
}

/* Large Mobile / Small Tablet */
@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-collapsed .filters-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width);
    }

    .sidebar-collapsed .table-container[b-mnkq1mfy7x] {
        left: var(--sidebar-collapsed-width);
    }
}

/* Status Tags Styles */
.status-tags[b-mnkq1mfy7x] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-mnkq1mfy7x] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-mnkq1mfy7x] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* New Status Button Styles for BookBarger */
.status-waiting-orange[b-mnkq1mfy7x] {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

.status-waiting-orange:hover[b-mnkq1mfy7x] {
    background-color: #ffedd5;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

.status-booked-green[b-mnkq1mfy7x] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-booked-green:hover[b-mnkq1mfy7x] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-delivering-blue[b-mnkq1mfy7x] {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

.status-delivering-blue:hover[b-mnkq1mfy7x] {
    background-color: #dbeafe;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.status-completed-green[b-mnkq1mfy7x] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-completed-green:hover[b-mnkq1mfy7x] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-cancelled-red[b-mnkq1mfy7x] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 600;
}

.status-cancelled-red:hover[b-mnkq1mfy7x] {
    background-color: #fee2e2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.status-unknown-gray[b-mnkq1mfy7x] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

.status-unknown-gray:hover[b-mnkq1mfy7x] {
    background-color: #f3f4f6;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

/* Legacy status styles - Updated with harmonious colors */
.status-chua-thuc-hien[b-mnkq1mfy7x] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.status-dang-thuc-hien[b-mnkq1mfy7x] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-hoan-thanh[b-mnkq1mfy7x] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-huy[b-mnkq1mfy7x] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Hover effects */
.status-tag:hover[b-mnkq1mfy7x] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-mnkq1mfy7x] {
    animation: badge-pulse-b-mnkq1mfy7x 2s infinite, badge-glow-b-mnkq1mfy7x 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-mnkq1mfy7x {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-mnkq1mfy7x {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-mnkq1mfy7x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-mnkq1mfy7x 2.5s infinite;
}

@keyframes badge-shine-b-mnkq1mfy7x {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-mnkq1mfy7x] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* Notification Badge */
.notification-badge[b-mnkq1mfy7x] {
    position: absolute;
    top: 0px;
    right: -10px;
    background-color: #ff3547;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    animation: pulse-animation-b-mnkq1mfy7x 1.5s infinite;
}

@keyframes pulse-animation-b-mnkq1mfy7x {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 53, 71, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0);
    }
}

/* Table Cell Alignment Classes */
.cell-center[b-mnkq1mfy7x] {
    text-align: center !important;
    justify-content: center !important;
}

.cell-text-left[b-mnkq1mfy7x] {
    text-align: left !important;
    justify-content: flex-start !important;
}

.cell-number-right[b-mnkq1mfy7x] {
    text-align: right !important;
    justify-content: flex-end !important;
}



/* Make sure the checkbox column doesn't have any extra padding or elements */
.rz-datatable-header .cell-checkbox[b-mnkq1mfy7x],
.rz-datatable-data .cell-checkbox[b-mnkq1mfy7x] {
    padding-right: 8px !important;
    background-image: none !important;
}

/* Status Pills - Styled like buttons */
.status-pill[b-mnkq1mfy7x] {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
    transition: all 0.2s;
    cursor: default;
    outline: none;
}

    .status-pill:disabled[b-mnkq1mfy7x] {
        opacity: 1;
        cursor: default;
    }

    .status-pill:hover[b-mnkq1mfy7x] {
        transform: translateY(-1px);
        box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    }

/* Status classes - Button-like style with harmonious color schemes */
.status-waiting-register[b-mnkq1mfy7x] {
    background-color: #fef9f4;
    color: #d4530f;
    border: 1px solid #fed7aa;
}

.status-waiting-allocation[b-mnkq1mfy7x] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-waiting-approval[b-mnkq1mfy7x] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-partial-registration[b-mnkq1mfy7x] {
    background-color: #f8f7ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.status-registration-completed[b-mnkq1mfy7x] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-unknown[b-mnkq1mfy7x] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookContainer.razor.rz.scp.css */
/* BookTruck Page Specific Styles */

.loading-overlay[b-s5m4k88vxb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner[b-s5m4k88vxb] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@media (max-width: 1600px) {
    .table-container[b-s5m4k88vxb] {
        position: fixed;
        top: 217px !important;
    }
}
/* Modal Container Variants */
.modal-container--wide[b-s5m4k88vxb] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-s5m4k88vxb] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-s5m4k88vxb] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}
@media (max-width: 1400px) {
    .table-container[b-s5m4k88vxb] {
        position: fixed;
        top: 222px;
    }
}
/* Ensure proper sidebar responsive behavior for desktop */
@media (min-width: 769px) {
    .filters-container[b-s5m4k88vxb] {
        left: var(--sidebar-width);
    }

    .table-container[b-s5m4k88vxb] {
        left: var(--sidebar-width);
    }

    .sidebar-collapsed .filters-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width) !important;
    }

    .sidebar-collapsed .table-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width) !important;
    }
}

.filter-wrapper[b-s5m4k88vxb] {
    display: flex;
    flex-direction: column;
}

.btn-fuction-container[b-s5m4k88vxb] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.btn-fuction-container .filter-group[b-s5m4k88vxb] {
    flex-shrink: 0;
    min-width: auto;
}

.filters-grid[b-s5m4k88vxb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-s5m4k88vxb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group-btn[b-s5m4k88vxb] {
    display: flex;
    align-items: flex-end;
}

.btn-group-function[b-s5m4k88vxb] {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.filter-input[b-s5m4k88vxb], .filter-select[b-s5m4k88vxb] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

    .filter-input:focus[b-s5m4k88vxb], .filter-select:focus[b-s5m4k88vxb] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }
/* Level 2 switches styling */
.subtasks-level2[b-s5m4k88vxb] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-s5m4k88vxb] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-s5m4k88vxb] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-s5m4k88vxb] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }

.cell-number-right .rz-cell-footer[b-s5m4k88vxb] {
    text-align: right !important;
}
/* Table and Grid Layout Styles */
.table-container[b-s5m4k88vxb] {
    position: fixed;
    /*top: 217px;*/
    top: 162px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

.filter-label[b-s5m4k88vxb] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

.main-planning-grid[b-s5m4k88vxb] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

    .main-planning-grid .rz-datatable-data[b-s5m4k88vxb] {
        height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

.page-content[b-s5m4k88vxb] {
    padding-top: 125px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-s5m4k88vxb] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .table-container[b-s5m4k88vxb] {
    left: var(--sidebar-collapsed-width);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-s5m4k88vxb] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-s5m4k88vxb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-s5m4k88vxb] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-s5m4k88vxb] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-s5m4k88vxb] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-s5m4k88vxb] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-s5m4k88vxb] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-s5m4k88vxb] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-s5m4k88vxb] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-s5m4k88vxb] {
            display: none !important;
        }

        .mobile-filters-content[b-s5m4k88vxb] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
        
        .btn-fuction-container[b-s5m4k88vxb] {
            overflow-x: visible !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
        }
        
        .subtasks-level2[b-s5m4k88vxb] {
            overflow-x: visible !important;
            width: auto !important;
        }
    }

    .table-container[b-s5m4k88vxb] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }

    .page-content[b-s5m4k88vxb] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    .filters-grid[b-s5m4k88vxb] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-s5m4k88vxb] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-s5m4k88vxb] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }

    .mobile-compact-filters .filter-group[b-s5m4k88vxb] {
        margin-bottom: 4px;
    }

    .mobile-compact-filters .filter-label[b-s5m4k88vxb] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
    }

    /* Mobile subtasks switches */
    /* Mobile switches container - horizontal scroll */
    .subtasks-level2[b-s5m4k88vxb] {
        display: flex;
        background: white;
        border-radius: 6px;
        gap: 0;
        justify-content: center;
        margin: 0;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        box-sizing: border-box;
    }
    
    .subtasks-level2[b-s5m4k88vxb]::-webkit-scrollbar {
        height: 3px;
    }
    
    .subtasks-level2[b-s5m4k88vxb]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 2px;
    }
    
    .subtasks-level2[b-s5m4k88vxb]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

        .subtasks-level2 .switch[b-s5m4k88vxb] {
            padding: 0.4rem 1rem;
            font-size: 0.75rem;
            min-width: 60px;
            flex-shrink: 0;
            white-space: nowrap;
            border-radius: 4px;
            margin: 0 2px;
        }

    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-s5m4k88vxb] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        align-items: center;
        gap: 12px !important;
        padding: 10px 15px;
        background: rgba(248, 249, 250, 0.9);
        border-radius: 8px;
        margin-top: 8px;
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Add scrollbar styling for better UX */
    .btn-fuction-container[b-s5m4k88vxb]::-webkit-scrollbar {
        height: 4px;
    }
    
    .btn-fuction-container[b-s5m4k88vxb]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    
    .btn-fuction-container[b-s5m4k88vxb]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }
    
    .btn-fuction-container[b-s5m4k88vxb]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }

    .btn-fuction-container .filter-group[b-s5m4k88vxb] {
        flex: 0 0 auto !important;
        display: flex;
        justify-content: center;
        min-width: 45px;
        /* Prevent shrinking */
        flex-shrink: 0 !important;
        white-space: nowrap;
    }

    .filter-input[b-s5m4k88vxb], .filter-select[b-s5m4k88vxb] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }

    .btn-group-function[b-s5m4k88vxb] {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .filter-group-btn[b-s5m4k88vxb] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }



        .filter-group-btn .btn[b-s5m4k88vxb] {
            flex: 1;
            justify-content: center;
            font-size: 0.8rem;
            padding: 8px 12px;
            min-height: 36px;
            min-width: 40px;
            margin: 0 4px;
            max-width: 100px;
        }

    /* Mobile button icons with tooltips */
    .btn[title][b-s5m4k88vxb] {
        position: relative;
    }

        .btn[title]:hover[b-s5m4k88vxb]::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }

        .btn[title]:hover[b-s5m4k88vxb]::before {
            content: '';
            position: absolute;
            bottom: 95%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }

    .main-planning-grid[b-s5m4k88vxb] {
        height: auto !important;
        width: 100% !important;
    }

        .main-planning-grid .rz-datatable-data[b-s5m4k88vxb] {
            height: auto !important;
            overflow-y: visible !important;
        }

    /* Mobile grid adjustments */
    .rz-grid-table[b-s5m4k88vxb] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }

        .rz-grid-table th[b-s5m4k88vxb],
        .rz-grid-table td[b-s5m4k88vxb] {
            padding: 6px 4px;
            font-size: 0.75rem;
            min-width: 80px;
        }

            /* Hide less important columns on mobile */
            .rz-grid-table th:nth-child(n+6)[b-s5m4k88vxb],
            .rz-grid-table td:nth-child(n+6)[b-s5m4k88vxb] {
                display: none;
            }

            /* Keep essential columns visible */
            .rz-grid-table th:nth-child(1)[b-s5m4k88vxb],
            .rz-grid-table td:nth-child(1)[b-s5m4k88vxb],
            .rz-grid-table th:nth-child(2)[b-s5m4k88vxb],
            .rz-grid-table td:nth-child(2)[b-s5m4k88vxb],
            .rz-grid-table th:nth-child(3)[b-s5m4k88vxb],
            .rz-grid-table td:nth-child(3)[b-s5m4k88vxb],
            .rz-grid-table th:last-child[b-s5m4k88vxb],
            .rz-grid-table td:last-child[b-s5m4k88vxb] {
                display: table-cell;
            }

    /* Status tags mobile responsive */
    .status-tags[b-s5m4k88vxb] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }

    .status-tag[b-s5m4k88vxb] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }

    /* Notification badge mobile adjustments */
    .notification-badge[b-s5m4k88vxb] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }

    /* Button mobile improvements - Icon only */
    .btn[b-s5m4k88vxb] {
        padding: 8px 8px;
        font-size: 0.8rem;
        min-height: 36px;
        border-radius: 6px;
        min-width: 36px;
        justify-content: center;
        position: relative;
    }



    /* Modal responsive for mobile */
    .modal-container--wide[b-s5m4k88vxb] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }

    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-s5m4k88vxb],
    .filters-container[b-s5m4k88vxb] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .table-container[b-s5m4k88vxb],
    .table-container[b-s5m4k88vxb] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Tablet Responsive Design */
@media (max-width: 1024px) and (min-width: 769px) {
    .filters-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width);
        padding: 8px;
    }

    .table-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width);
    }

    .filters-grid[b-s5m4k88vxb] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 6px;
    }

    .filter-input[b-s5m4k88vxb], .filter-select[b-s5m4k88vxb] {
        font-size: 0.75rem;
        height: 28px;
        padding: 4px 6px;
    }

    .filter-label[b-s5m4k88vxb] {
        font-size: 0.65rem;
    }

    /* Tablet grid improvements */
    .rz-grid-table[b-s5m4k88vxb] {
        font-size: 0.8rem;
    }

        .rz-grid-table th[b-s5m4k88vxb],
        .rz-grid-table td[b-s5m4k88vxb] {
            padding: 6px 8px;
            font-size: 0.8rem;
        }

            /* On tablet, hide some less important columns */
            .rz-grid-table th:nth-child(n+8)[b-s5m4k88vxb],
            .rz-grid-table td:nth-child(n+8)[b-s5m4k88vxb] {
                display: none;
            }

            .rz-grid-table th:last-child[b-s5m4k88vxb],
            .rz-grid-table td:last-child[b-s5m4k88vxb] {
                display: table-cell;
            }
}

/* Large Mobile / Small Tablet */
@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-collapsed .filters-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width);
    }

    .sidebar-collapsed .table-container[b-s5m4k88vxb] {
        left: var(--sidebar-collapsed-width);
    }
}

/* Status Tags Styles */
.status-tags[b-s5m4k88vxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-s5m4k88vxb] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-s5m4k88vxb] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* New Status Button Styles for BookContainer */
.status-waiting-orange[b-s5m4k88vxb] {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

.status-waiting-orange:hover[b-s5m4k88vxb] {
    background-color: #ffedd5;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

.status-booked-green[b-s5m4k88vxb] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-booked-green:hover[b-s5m4k88vxb] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-delivering-blue[b-s5m4k88vxb] {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

.status-delivering-blue:hover[b-s5m4k88vxb] {
    background-color: #dbeafe;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.status-completed-green[b-s5m4k88vxb] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-completed-green:hover[b-s5m4k88vxb] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-cancelled-red[b-s5m4k88vxb] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 600;
}

.status-cancelled-red:hover[b-s5m4k88vxb] {
    background-color: #fee2e2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.status-unknown-gray[b-s5m4k88vxb] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

.status-unknown-gray:hover[b-s5m4k88vxb] {
    background-color: #f3f4f6;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

/* Legacy status styles - Updated with harmonious colors */
.status-chua-thuc-hien[b-s5m4k88vxb] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.status-dang-thuc-hien[b-s5m4k88vxb] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-hoan-thanh[b-s5m4k88vxb] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-huy[b-s5m4k88vxb] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Hover effects */
.status-tag:hover[b-s5m4k88vxb] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-s5m4k88vxb] {
    animation: badge-pulse-b-s5m4k88vxb 2s infinite, badge-glow-b-s5m4k88vxb 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-s5m4k88vxb {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-s5m4k88vxb {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-s5m4k88vxb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-s5m4k88vxb 2.5s infinite;
}

@keyframes badge-shine-b-s5m4k88vxb {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-s5m4k88vxb] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* Notification Badge */
.notification-badge[b-s5m4k88vxb] {
    position: absolute;
    top: 0px;
    right: -10px;
    background-color: #ff3547;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    animation: pulse-animation-b-s5m4k88vxb 1.5s infinite;
}

@keyframes pulse-animation-b-s5m4k88vxb {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 53, 71, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0);
    }
}

/* Table Cell Alignment Classes */
.cell-center[b-s5m4k88vxb] {
    text-align: center !important;
    justify-content: center !important;
}

.cell-text-left[b-s5m4k88vxb] {
    text-align: left !important;
    justify-content: flex-start !important;
}

.cell-number-right[b-s5m4k88vxb] {
    text-align: right !important;
    justify-content: flex-end !important;
}



/* Make sure the checkbox column doesn't have any extra padding or elements */
.rz-datatable-header .cell-checkbox[b-s5m4k88vxb],
.rz-datatable-data .cell-checkbox[b-s5m4k88vxb] {
    padding-right: 8px !important;
    background-image: none !important;
}

/* Status Pills - Styled like buttons */
.status-pill[b-s5m4k88vxb] {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
    transition: all 0.2s;
    cursor: default;
    outline: none;
}

    .status-pill:disabled[b-s5m4k88vxb] {
        opacity: 1;
        cursor: default;
    }

    .status-pill:hover[b-s5m4k88vxb] {
        transform: translateY(-1px);
        box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    }

/* Status classes - Button-like style with harmonious color schemes */
.status-waiting-register[b-s5m4k88vxb] {
    background-color: #fef9f4;
    color: #d4530f;
    border: 1px solid #fed7aa;
}

.status-waiting-allocation[b-s5m4k88vxb] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-waiting-approval[b-s5m4k88vxb] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-partial-registration[b-s5m4k88vxb] {
    background-color: #f8f7ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.status-registration-completed[b-s5m4k88vxb] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-unknown[b-s5m4k88vxb] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck.razor.rz.scp.css */
/* BookTruck Page Specific Styles */

/* Modal Container Variants */
.modal-container--wide[b-msi1fpjdro] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-msi1fpjdro] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-msi1fpjdro] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

.filters-grid[b-msi1fpjdro] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px;
}

.filter-group[b-msi1fpjdro] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-input[b-msi1fpjdro], .filter-select[b-msi1fpjdro] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

.filter-input:focus[b-msi1fpjdro], .filter-select:focus[b-msi1fpjdro] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
}


/* Table and Grid Layout Styles */
.table-container[b-msi1fpjdro] {
    position: fixed;
    top: 180px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

.main-planning-grid[b-msi1fpjdro] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

.main-planning-grid .rz-datatable-data[b-msi1fpjdro] {
    height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
}

.page-content[b-msi1fpjdro] {
    padding-top: 170px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-msi1fpjdro] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .table-container[b-msi1fpjdro] {
    left: var(--sidebar-collapsed-width);
}

/* Status Tags Styles */
.status-tags[b-msi1fpjdro] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-msi1fpjdro] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-msi1fpjdro] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-msi1fpjdro] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-msi1fpjdro] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-msi1fpjdro] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-msi1fpjdro] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-msi1fpjdro] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* Legacy status styles */
.status-chua-thuc-hien[b-msi1fpjdro] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

.status-dang-thuc-hien[b-msi1fpjdro] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-hoan-thanh[b-msi1fpjdro] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-huy[b-msi1fpjdro] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #dc2626;
}

/* Hover effects */
.status-tag:hover[b-msi1fpjdro] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_NewV2.razor.rz.scp.css */
/* BookTruck Page Specific Styles */


@media (max-width: 769px) {
    [b-bvnlh7508l] .e-pager .e-mfirst, [b-bvnlh7508l] .e-pager .e-mprev, [b-bvnlh7508l] .e-pager .e-mnext, [b-bvnlh7508l] .e-pager .e-mlast {
        display: none !important;
    }

    [b-bvnlh7508l] .e-pager.e-adaptive .e-mlast {
        display: none !important;
    }

    [b-bvnlh7508l] .mainpager.e-pager.e-adaptive {
        display: none !important;
    }

    [b-bvnlh7508l] .e-pager.e-adaptive {
        display: none !important;
    }

    [b-bvnlh7508l] .e-parentmsgbar {
        display: none !important;
    }

    .e-pager.e-adaptive div.e-parentmsgbar[b-bvnlh7508l] {
        display: none !important;
    }
}

.loading-overlay[b-bvnlh7508l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner[b-bvnlh7508l] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Modal Container Variants */
.modal-container--wide[b-bvnlh7508l] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-bvnlh7508l] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-bvnlh7508l] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

/* Ensure proper sidebar responsive behavior for desktop */
@media (min-width: 769px) {
    .filters-container[b-bvnlh7508l] {
        left: var(--sidebar-width);
    }
    
    .table-container[b-bvnlh7508l] {
        left: var(--sidebar-width);
    }
    
    .sidebar-collapsed .filters-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width) !important;
    }
    
    .sidebar-collapsed .table-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width) !important;
    }
}
.filter-wrapper[b-bvnlh7508l] {
    display: flex;
    flex-direction: column;
}
.btn-fuction-container[b-bvnlh7508l] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.filters-grid[b-bvnlh7508l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-bvnlh7508l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-fuction-container .filter-group[b-bvnlh7508l] {
    flex-shrink: 0;
    min-width: auto;
}
.filter-group-btn[b-bvnlh7508l] {
    display: flex;
    align-items: flex-end;
}
.btn-group-function[b-bvnlh7508l] {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}
.filter-input[b-bvnlh7508l], .filter-select[b-bvnlh7508l] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

.filter-input:focus[b-bvnlh7508l], .filter-select:focus[b-bvnlh7508l] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
}
/* Level 2 switches styling */
.subtasks-level2[b-bvnlh7508l] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}
.switch[b-bvnlh7508l] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-bvnlh7508l] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-bvnlh7508l] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }



.cell-number-right .rz-cell-footer[b-bvnlh7508l] {
    text-align: right !important;
}
/* Table and Grid Layout Styles */
.table-container[b-bvnlh7508l] {
    position: fixed;
    /*top: 217px;*/
    top: 162px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

  @media (max-width: 1600px) {
    .table-container[b-bvnlh7508l] {
        position: fixed;
        top: 217px !important;
    }
  }

.filter-label[b-bvnlh7508l] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}
.main-planning-grid[b-bvnlh7508l] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

.main-planning-grid .rz-datatable-data[b-bvnlh7508l] {
    height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
}

.page-content[b-bvnlh7508l] {
    padding-top: 125px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-bvnlh7508l] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .table-container[b-bvnlh7508l] {
    left: var(--sidebar-collapsed-width);
}
@media (max-width: 1400px) {
    .table-container[b-bvnlh7508l] {
        position: fixed;
        top: 222px;
    }
}


/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-bvnlh7508l] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-bvnlh7508l] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-bvnlh7508l] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-bvnlh7508l] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-bvnlh7508l] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-bvnlh7508l] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-bvnlh7508l] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-bvnlh7508l] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-bvnlh7508l] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }
    
    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-bvnlh7508l] {
            display: none !important;
        }
        
        .mobile-filters-content[b-bvnlh7508l] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
        
        .btn-fuction-container[b-bvnlh7508l] {
            overflow-x: visible !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
        }
        
        .subtasks-level2[b-bvnlh7508l] {
            overflow-x: visible !important;
            width: auto !important;
        }
    }
    
    .table-container[b-bvnlh7508l] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }
    
    .page-content[b-bvnlh7508l] {
        padding-top: 0 !important;
        min-height: auto !important;
    }
    
    .filters-grid[b-bvnlh7508l] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-bvnlh7508l] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-bvnlh7508l] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .mobile-compact-filters .filter-group[b-bvnlh7508l] {
        margin-bottom: 4px;
    }
    
    .mobile-compact-filters .filter-label[b-bvnlh7508l] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
    }
    
    /* Mobile subtasks switches */
    .subtasks-level2[b-bvnlh7508l] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: center;
    }
    
    .subtasks-level2 .switch[b-bvnlh7508l] {
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
        min-width: 60px;
        flex-shrink: 0;
        white-space: nowrap;
        border-radius: 4px;
        margin: 0 2px;
    }
    
    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-bvnlh7508l] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        align-items: center;
        gap: 12px !important;
        padding: 10px 15px;
        background: rgba(248, 249, 250, 0.9);
        border-radius: 8px;
        margin-top: 8px;
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Add scrollbar styling for better UX */
    .btn-fuction-container[b-bvnlh7508l]::-webkit-scrollbar {
        height: 4px;
    }
    
    .btn-fuction-container[b-bvnlh7508l]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    
    .btn-fuction-container[b-bvnlh7508l]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }
    
    .btn-fuction-container[b-bvnlh7508l]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .btn-fuction-container .filter-group[b-bvnlh7508l] {
        flex: 0 0 auto !important;
        display: flex;
        justify-content: center;
        min-width: 45px;
        /* Prevent shrinking */
        flex-shrink: 0 !important;
        white-space: nowrap;
    }
    
    .filter-input[b-bvnlh7508l], .filter-select[b-bvnlh7508l] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }
    
    .btn-group-function[b-bvnlh7508l] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .filter-group-btn[b-bvnlh7508l] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: stretch;
    }
    
    /* Mobile switches container - horizontal scroll */
    .subtasks-level2[b-bvnlh7508l] {
        display: flex;
        background: white;
        border-radius: 6px;
        gap: 0;
        justify-content: center;
        margin: 0;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        box-sizing: border-box;
    }
    
    .subtasks-level2[b-bvnlh7508l]::-webkit-scrollbar {
        height: 3px;
    }
    
    .subtasks-level2[b-bvnlh7508l]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 2px;
    }
    
    .subtasks-level2[b-bvnlh7508l]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
    

    
    .filter-group-btn .btn[b-bvnlh7508l] {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 12px;
        min-height: 36px;
        min-width: 40px;
        margin: 0 4px;
        max-width: 100px;
    }
    
    /* Mobile button icons with tooltips */
    .btn[title][b-bvnlh7508l] {
        position: relative;
    }
    
    .btn[title]:hover[b-bvnlh7508l]::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
    }
    
    .btn[title]:hover[b-bvnlh7508l]::before {
        content: '';
        position: absolute;
        bottom: 95%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }
    
    .main-planning-grid[b-bvnlh7508l] {
        height: auto !important;
        width: 100% !important;
    }
    
    .main-planning-grid .rz-datatable-data[b-bvnlh7508l] {
        height: auto !important;
        overflow-y: visible !important;
    }
    
    /* Mobile grid adjustments */
    .rz-grid-table[b-bvnlh7508l] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .rz-grid-table th[b-bvnlh7508l], 
    .rz-grid-table td[b-bvnlh7508l] {
        padding: 6px 4px;
        font-size: 0.75rem;
        min-width: 80px;
    }
    
    /* Hide less important columns on mobile */
    .rz-grid-table th:nth-child(n+6)[b-bvnlh7508l],
    .rz-grid-table td:nth-child(n+6)[b-bvnlh7508l] {
        display: none;
    }
    
    /* Keep essential columns visible */
    .rz-grid-table th:nth-child(1)[b-bvnlh7508l],
    .rz-grid-table td:nth-child(1)[b-bvnlh7508l],
    .rz-grid-table th:nth-child(2)[b-bvnlh7508l],
    .rz-grid-table td:nth-child(2)[b-bvnlh7508l],
    .rz-grid-table th:nth-child(3)[b-bvnlh7508l],
    .rz-grid-table td:nth-child(3)[b-bvnlh7508l],
    .rz-grid-table th:last-child[b-bvnlh7508l],
    .rz-grid-table td:last-child[b-bvnlh7508l] {
        display: table-cell;
    }
    
    /* Status tags mobile responsive */
    .status-tags[b-bvnlh7508l] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }
    
    .status-tag[b-bvnlh7508l] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }
    
    /* Notification badge mobile adjustments */
    .notification-badge[b-bvnlh7508l] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }
    
    /* Button mobile improvements - Icon only */
    .btn[b-bvnlh7508l] {
        padding: 6px 6px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 6px;
        min-width: 32px;
        max-width: 40px;
        justify-content: center;
        position: relative;
    }
    
    /* Specific styles for function buttons container */
    .btn-fuction-container .btn[b-bvnlh7508l] {
        padding: 8px 8px;
        min-height: 36px;
        min-width: 36px;
        max-width: none;
        font-size: 0.75rem;
        flex-shrink: 0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-fuction-container .btn i[b-bvnlh7508l] {
        font-size: 0.9rem;
    }
    

    
    /* Modal responsive for mobile */
    .modal-container--wide[b-bvnlh7508l] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }
    
    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-bvnlh7508l],
    .filters-container[b-bvnlh7508l] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    
    .sidebar-collapsed .table-container[b-bvnlh7508l],
    .table-container[b-bvnlh7508l] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Tablet Responsive Design */
@media (max-width: 1024px) and (min-width: 769px) {
    .filters-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width);
        padding: 8px;
    }
    
    .table-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width);
    }
    
    .filters-grid[b-bvnlh7508l] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 6px;
    }
    
    .filter-input[b-bvnlh7508l], .filter-select[b-bvnlh7508l] {
        font-size: 0.75rem;
        height: 28px;
        padding: 4px 6px;
    }
    
    .filter-label[b-bvnlh7508l] {
        font-size: 0.65rem;
    }
    
    /* Tablet grid improvements */
    .rz-grid-table[b-bvnlh7508l] {
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-bvnlh7508l],
    .rz-grid-table td[b-bvnlh7508l] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    
    /* On tablet, hide some less important columns */
    .rz-grid-table th:nth-child(n+8)[b-bvnlh7508l],
    .rz-grid-table td:nth-child(n+8)[b-bvnlh7508l] {
        display: none;
    }
    
    .rz-grid-table th:last-child[b-bvnlh7508l],
    .rz-grid-table td:last-child[b-bvnlh7508l] {
        display: table-cell;
    }
}

/* Large Mobile / Small Tablet */
@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-collapsed .filters-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width);
    }
    
    .sidebar-collapsed .table-container[b-bvnlh7508l] {
        left: var(--sidebar-collapsed-width);
    }
}

/* Status Tags Styles */
.status-tags[b-bvnlh7508l] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-bvnlh7508l] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-bvnlh7508l] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-bvnlh7508l] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-bvnlh7508l] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-bvnlh7508l] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-bvnlh7508l] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-bvnlh7508l] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* Legacy status styles - Updated with harmonious colors */
.status-chua-thuc-hien[b-bvnlh7508l] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.status-dang-thuc-hien[b-bvnlh7508l] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-hoan-thanh[b-bvnlh7508l] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-huy[b-bvnlh7508l] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Hover effects */
.status-tag:hover[b-bvnlh7508l] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-bvnlh7508l] {
    animation: badge-pulse-b-bvnlh7508l 2s infinite, badge-glow-b-bvnlh7508l 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-bvnlh7508l {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-bvnlh7508l {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-bvnlh7508l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-bvnlh7508l 2.5s infinite;
}

@keyframes badge-shine-b-bvnlh7508l {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-bvnlh7508l] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* Notification Badge */
.notification-badge[b-bvnlh7508l] {
    position: absolute;
    top: 0px;
    right: -10px;
    background-color: #ff3547;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    animation: pulse-animation-b-bvnlh7508l 1.5s infinite;
}

@keyframes pulse-animation-b-bvnlh7508l {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(255, 53, 71, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 53, 71, 0);
    }
}

/* Table Cell Alignment Classes */
.cell-center[b-bvnlh7508l] {
    text-align: center !important;
    justify-content: center !important;
}

.cell-text-left[b-bvnlh7508l] {
    text-align: left !important;
    justify-content: flex-start !important;
}

.cell-number-right[b-bvnlh7508l] {
    text-align: right !important;
    justify-content: flex-end !important;
}



/* Make sure the checkbox column doesn't have any extra padding or elements */
.rz-datatable-header .cell-checkbox[b-bvnlh7508l],
.rz-datatable-data .cell-checkbox[b-bvnlh7508l] {
    padding-right: 8px !important;
    background-image: none !important;
}

/* Status Pills - Styled like buttons */
.status-pill[b-bvnlh7508l] {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
    transition: all 0.2s;
    cursor: default;
    outline: none;
}

.status-pill:disabled[b-bvnlh7508l] {
    opacity: 1;
    cursor: default;
}

.status-pill:hover[b-bvnlh7508l] {
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}

/* Status classes - Button-like style with harmonious color schemes */
.status-waiting-register[b-bvnlh7508l] {
    background-color: #fef9f4;
    color: #d4530f;
    border: 1px solid #fed7aa;
}

.status-waiting-allocation[b-bvnlh7508l] {
    background-color: #f5f9ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.status-waiting-approval[b-bvnlh7508l] {
    background-color: #fef6f6;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-partial-registration[b-bvnlh7508l] {
    background-color: #f8f7ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.status-registration-completed[b-bvnlh7508l] {
    background-color: #f0fdf9;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-unknown[b-bvnlh7508l] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* New Status Button Styles for BookTruck */
.status-waiting-orange[b-bvnlh7508l] {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

.status-waiting-orange:hover[b-bvnlh7508l] {
    background-color: #ffedd5;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

.status-booked-green[b-bvnlh7508l] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-booked-green:hover[b-bvnlh7508l] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-delivering-blue[b-bvnlh7508l] {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

.status-delivering-blue:hover[b-bvnlh7508l] {
    background-color: #dbeafe;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.status-completed-green[b-bvnlh7508l] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

.status-completed-green:hover[b-bvnlh7508l] {
    background-color: #dcfce7;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.status-cancelled-red[b-bvnlh7508l] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 600;
}

.status-cancelled-red:hover[b-bvnlh7508l] {
    background-color: #fee2e2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.status-unknown-gray[b-bvnlh7508l] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

.status-unknown-gray:hover[b-bvnlh7508l] {
    background-color: #f3f4f6;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Components/ShipmentSummaryCard_Barger.razor.rz.scp.css */
/* Shipment Summary Card Compact Styles */

/* Smaller font sizes for compact display */
.card-header h6[b-ku6sx09qh2] {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

.card-body[b-ku6sx09qh2] {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
}

.card-body small[b-ku6sx09qh2] {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
}

.card-body .fw-bold[b-ku6sx09qh2],
.card-body .fw-semibold[b-ku6sx09qh2] {
    font-size: 0.75rem !important;
}

.border-bottom[b-ku6sx09qh2] {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.form-control[b-ku6sx09qh2],
.form-select[b-ku6sx09qh2] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 28px !important;
}

.btn[b-ku6sx09qh2] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* Multi-select dropdown */
.e-multi-select-wrapper[b-ku6sx09qh2] {
    font-size: 0.7rem !important;
}

.e-multi-select-wrapper .e-input-group input[b-ku6sx09qh2] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .card[b-ku6sx09qh2] {
        margin-bottom: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .card-header[b-ku6sx09qh2] {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: none !important; /* Hide header in mobile since it's shown in collapsible header */
    }
    
    .card-body[b-ku6sx09qh2] {
        padding: 0 !important;
        background: transparent !important;
    }
    
    .border-bottom[b-ku6sx09qh2] {
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .border-bottom:last-child[b-ku6sx09qh2] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    .form-control[b-ku6sx09qh2],
    .form-select[b-ku6sx09qh2] {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        height: 36px !important;
        border-radius: 6px !important;
    }
    
    .btn[b-ku6sx09qh2] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
    }
    
    .card-body small[b-ku6sx09qh2] {
        font-size: 0.7rem !important;
    }
    
    .card-body .fw-bold[b-ku6sx09qh2],
    .card-body .fw-semibold[b-ku6sx09qh2] {
        font-size: 0.8rem !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Components/ShipmentSummaryCard_Container.razor.rz.scp.css */
/* Shipment Summary Card Compact Styles */

/* Smaller font sizes for compact display */
.card-header h6[b-nxlaj3dj9r] {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

.card-body[b-nxlaj3dj9r] {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
}

.card-body small[b-nxlaj3dj9r] {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
}

.card-body .fw-bold[b-nxlaj3dj9r],
.card-body .fw-semibold[b-nxlaj3dj9r] {
    font-size: 0.75rem !important;
}

.border-bottom[b-nxlaj3dj9r] {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.form-control[b-nxlaj3dj9r],
.form-select[b-nxlaj3dj9r] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 28px !important;
}

.btn[b-nxlaj3dj9r] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* Multi-select dropdown */
.e-multi-select-wrapper[b-nxlaj3dj9r] {
    font-size: 0.7rem !important;
}

.e-multi-select-wrapper .e-input-group input[b-nxlaj3dj9r] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .card[b-nxlaj3dj9r] {
        margin-bottom: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .card-header[b-nxlaj3dj9r] {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: none !important; /* Hide header in mobile since it's shown in collapsible header */
    }
    
    .card-body[b-nxlaj3dj9r] {
        padding: 0 !important;
        background: transparent !important;
    }
    
    .border-bottom[b-nxlaj3dj9r] {
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .border-bottom:last-child[b-nxlaj3dj9r] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    .form-control[b-nxlaj3dj9r],
    .form-select[b-nxlaj3dj9r] {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        height: 36px !important;
        border-radius: 6px !important;
    }
    
    .btn[b-nxlaj3dj9r] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
    }
    
    .card-body small[b-nxlaj3dj9r] {
        font-size: 0.7rem !important;
    }
    
    .card-body .fw-bold[b-nxlaj3dj9r],
    .card-body .fw-semibold[b-nxlaj3dj9r] {
        font-size: 0.8rem !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Components/ShipmentSummaryCard_Truck.razor.rz.scp.css */
/* Shipment Summary Card Compact Styles */

/* Smaller font sizes for compact display */
.card-header h6[b-a1wzu5tx1i] {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

.card-body[b-a1wzu5tx1i] {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
}

.card-body small[b-a1wzu5tx1i] {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
}

.card-body .fw-bold[b-a1wzu5tx1i],
.card-body .fw-semibold[b-a1wzu5tx1i] {
    font-size: 0.75rem !important;
}

.border-bottom[b-a1wzu5tx1i] {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.form-control[b-a1wzu5tx1i],
.form-select[b-a1wzu5tx1i] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 28px !important;
}

.btn[b-a1wzu5tx1i] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* Multi-select dropdown */
.e-multi-select-wrapper[b-a1wzu5tx1i] {
    font-size: 0.7rem !important;
}

.e-multi-select-wrapper .e-input-group input[b-a1wzu5tx1i] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .card[b-a1wzu5tx1i] {
        margin-bottom: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .card-header[b-a1wzu5tx1i] {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: none !important; /* Hide header in mobile since it's shown in collapsible header */
    }
    
    .card-body[b-a1wzu5tx1i] {
        padding: 0 !important;
        background: transparent !important;
    }
    
    .border-bottom[b-a1wzu5tx1i] {
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .border-bottom:last-child[b-a1wzu5tx1i] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    .form-control[b-a1wzu5tx1i],
    .form-select[b-a1wzu5tx1i] {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        height: 36px !important;
        border-radius: 6px !important;
    }
    
    .btn[b-a1wzu5tx1i] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
    }
    
    .card-body small[b-a1wzu5tx1i] {
        font-size: 0.7rem !important;
    }
    
    .card-body .fw-bold[b-a1wzu5tx1i],
    .card-body .fw-semibold[b-a1wzu5tx1i] {
        font-size: 0.8rem !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/CreateScheduleModal.razor.rz.scp.css */
.modal-container[b-ds0inv6ajm]{
	max-width:1000px;
	padding:50px;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModal.razor.rz.scp.css */
/* Transport Planning Modal Responsive Styles */

/* Desktop - Smaller font sizes and compact layout */
.scrollable-sidebar[b-v08e5ty4ss], .scrollable-content[b-v08e5ty4ss] {
    font-size: 0.8rem;
}

.scrollable-sidebar .card-body[b-v08e5ty4ss] {
    padding: 0.75rem !important;
}

.scrollable-sidebar .card-header h6[b-v08e5ty4ss] {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.scrollable-sidebar .border-bottom[b-v08e5ty4ss] {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.scrollable-sidebar small[b-v08e5ty4ss] {
    font-size: 0.65rem;
}

.scrollable-sidebar .fw-bold[b-v08e5ty4ss], 
.scrollable-sidebar .fw-semibold[b-v08e5ty4ss] {
    font-size: 0.75rem;
}

.scrollable-sidebar .form-control[b-v08e5ty4ss],
.scrollable-sidebar .form-select[b-v08e5ty4ss] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    height: 28px;
}

.scrollable-sidebar .btn[b-v08e5ty4ss] {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Change layout to vertical on mobile */
    .modal-container-large[b-v08e5ty4ss] {
        max-width: 98% !important;
        height: 98vh !important;
        margin: 1vh auto !important;
    }
    
    /* Remove padding from modal body on mobile */
    .modal-body[b-v08e5ty4ss] {
        padding: 0 !important;
    }
    
    .modal-body .container-fluid[b-v08e5ty4ss] {
        padding: 0 !important;
        height: 100% !important;
    }
    
    .modal-body .row[b-v08e5ty4ss] {
        flex-direction: column !important;
        margin: 0 !important;
        display: flex !important;
    }
    
    /* Mobile Sidebar - Collapsible Info Section */
    .col-md-3[b-v08e5ty4ss] {
        width: 100% !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        height: auto !important;
        order: 1;
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .scrollable-sidebar[b-v08e5ty4ss] {
        height: auto !important;
        overflow-y: visible !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Mobile collapsible info card */
    .mobile-info-card[b-v08e5ty4ss] {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    
    .mobile-info-header[b-v08e5ty4ss] {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #dee2e6;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-info-header:hover[b-v08e5ty4ss] {
        background: linear-gradient(135deg, #e9ecef, #dee2e6);
    }
    
    .mobile-info-title[b-v08e5ty4ss] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .mobile-info-toggle[b-v08e5ty4ss] {
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 20px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        transition: all 0.2s ease;
    }
    
    .mobile-info-toggle.collapsed[b-v08e5ty4ss] {
        background: #6c757d;
        transform: rotate(180deg);
    }
    
    .mobile-info-content[b-v08e5ty4ss] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background: white;
        position: relative;
        width: 100%;
    }
    
    .mobile-info-content.expanded[b-v08e5ty4ss] {
        max-height: 60vh; 
        transition: max-height 0.5s ease-in;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-info-body[b-v08e5ty4ss] {
        padding: 0.75rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Custom scrollbar cho phần thông tin giao hàng */
    .mobile-info-content.expanded[b-v08e5ty4ss]::-webkit-scrollbar {
        width: 4px;
    }
    
    .mobile-info-content.expanded[b-v08e5ty4ss]::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
    
    .mobile-info-content.expanded[b-v08e5ty4ss]::-webkit-scrollbar-track {
        background-color: transparent;
    }
    
    /* Mobile Main Content */
    .col-md-9[b-v08e5ty4ss] {
        width: 100% !important;
        flex: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        order: 2;
        min-height: 50vh;
        padding: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .scrollable-content[b-v08e5ty4ss] {
        flex: 1 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: white !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Custom scrollbar cho phần Book vận chuyển */
    .scrollable-content[b-v08e5ty4ss]::-webkit-scrollbar {
        width: 4px;
    }
    
    .scrollable-content[b-v08e5ty4ss]::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }
    
    .scrollable-content[b-v08e5ty4ss]::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile form adjustments */
    .scrollable-sidebar .card[b-v08e5ty4ss] {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .scrollable-sidebar .card-header[b-v08e5ty4ss] {
        display: none !important; /* Hide in mobile, will be replaced by collapsible header */
    }
    
    .scrollable-sidebar .card-body[b-v08e5ty4ss] {
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* Adjust form elements for mobile - Info section */
    .scrollable-sidebar .form-control[b-v08e5ty4ss],
    .scrollable-sidebar .form-select[b-v08e5ty4ss] {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        height: 38px;
        border-radius: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .scrollable-sidebar .btn[b-v08e5ty4ss] {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .scrollable-sidebar small[b-v08e5ty4ss] {
        font-size: 0.7rem;
    }
    
    /* Book vận chuyển section - Remove all padding */
    .scrollable-content .card[b-v08e5ty4ss] {
        margin-bottom: 0 !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        border-radius: 0 !important;
    }
    
    .scrollable-content .card-header[b-v08e5ty4ss] {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .scrollable-content .card-body[b-v08e5ty4ss] {
        padding: 0 !important;
    }
    
    .scrollable-content .p-2[b-v08e5ty4ss] {
        padding: 0.25rem !important;
    }
    
    .scrollable-content .d-flex.gap-2[b-v08e5ty4ss] {
        padding: 0.5rem !important;
        margin: 0 !important;
        gap: 0.25rem !important;
    }
    
    /* All form elements in Book section */
    .scrollable-content .form-control[b-v08e5ty4ss],
    .scrollable-content .form-select[b-v08e5ty4ss],
    .scrollable-content .rz-textbox[b-v08e5ty4ss],
    .scrollable-content .rz-dropdown[b-v08e5ty4ss] {
        font-size: 0.85rem !important;
        padding: 0.4rem !important;
        height: 36px !important;
        border-radius: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .scrollable-content .btn[b-v08e5ty4ss] {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.5rem !important;
        border-radius: 4px !important;
        margin: 0.1rem !important;
    }
    
    /* Mobile spacing adjustments */
    .scrollable-sidebar .border-bottom[b-v08e5ty4ss] {
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .scrollable-sidebar .border-bottom:last-child[b-v08e5ty4ss] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    /* Syncfusion Multi-select dropdown mobile adjustments */
    .scrollable-sidebar .e-multi-select-wrapper[b-v08e5ty4ss],
    .scrollable-content .e-multi-select-wrapper[b-v08e5ty4ss] {
        width: 100% !important;
        min-height: 38px !important;
    }
    
    .scrollable-sidebar .e-multi-select-wrapper .e-input-group[b-v08e5ty4ss],
    .scrollable-content .e-multi-select-wrapper .e-input-group[b-v08e5ty4ss] {
        font-size: 0.85rem !important;
        min-height: 38px !important;
    }
    
    .scrollable-sidebar .e-multi-select-wrapper .e-input-group input[b-v08e5ty4ss],
    .scrollable-content .e-multi-select-wrapper .e-input-group input[b-v08e5ty4ss] {
        font-size: 0.85rem !important;
        padding: 0.4rem !important;
    }
    
    /* Radzen components mobile */
    .scrollable-content .rz-datatable[b-v08e5ty4ss] {
        font-size: 0.75rem !important;
        overflow-x: auto !important;
    }
    
    .scrollable-content .rz-datatable th[b-v08e5ty4ss],
    .scrollable-content .rz-datatable td[b-v08e5ty4ss] {
        padding: 0.25rem !important;
        font-size: 0.7rem !important;
        min-width: 80px;
    }
    
    /* Ensure proper overflow handling */
    .scrollable-content .rz-grid-table[b-v08e5ty4ss] {
        min-width: 100%;
        width: 100%;
        table-layout: auto;
    }
    
    /* Modal footer mobile adjustments */
    .modal-footer[b-v08e5ty4ss] {
        padding: 0.5rem !important;
        flex-shrink: 0;
        border-top: 1px solid #dee2e6;
    }
    
    .modal-footer .btn[b-v08e5ty4ss] {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalDataGrid_Barger.razor.rz.scp.css */
/* Vehicle Rental DataGrid Responsive Styles */

/* Desktop compact styles */
.card-header h6[b-lrt1p3u401] {
    font-size: 0.85rem !important;
}

.card-body[b-lrt1p3u401] {
    font-size: 0.8rem !important;
}

.p-3[b-lrt1p3u401] {
    font-size: 0.75rem !important;
}

.form-label[b-lrt1p3u401] {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.form-control[b-lrt1p3u401],
.form-select[b-lrt1p3u401] {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 32px !important;
}

.btn[b-lrt1p3u401] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    /* Header section mobile */
    .p-3.border-bottom.bg-light[b-lrt1p3u401] {
        padding: 0.5rem !important;
        background: rgba(248, 249, 250, 0.8) !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .row.g-3[b-lrt1p3u401] {
        margin: 0 !important;
        gap: 0.5rem !important;
    }
    
    .col-md-4[b-lrt1p3u401] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Form elements mobile */
    .form-label[b-lrt1p3u401] {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .form-control[b-lrt1p3u401],
    .form-select[b-lrt1p3u401] {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
        height: 36px !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Buttons mobile */
    .btn[b-lrt1p3u401] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
        margin: 0.1rem !important;
        white-space: nowrap !important;
    }
    
    .d-flex.align-items-center.justify-content-end[b-lrt1p3u401] {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    /* Card body mobile */
    .p-4[b-lrt1p3u401] {
        padding: 0.5rem !important;
    }
    
    .card[b-lrt1p3u401] {
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .card-body[b-lrt1p3u401] {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Table responsive */
    .table-responsive[b-lrt1p3u401] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table[b-lrt1p3u401] {
        font-size: 0.7rem !important;
        min-width: 600px !important;
    }
    
    .table th[b-lrt1p3u401],
    .table td[b-lrt1p3u401] {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.65rem !important;
        vertical-align: middle !important;
    }
    
    /* Hide less important columns on mobile */
    .table th:nth-child(n+5)[b-lrt1p3u401],
    .table td:nth-child(n+5)[b-lrt1p3u401] {
        display: none;
    }
    
    /* Keep essential columns */
    .table th:nth-child(1)[b-lrt1p3u401],
    .table td:nth-child(1)[b-lrt1p3u401],
    .table th:nth-child(2)[b-lrt1p3u401],
    .table td:nth-child(2)[b-lrt1p3u401],
    .table th:nth-child(3)[b-lrt1p3u401],
    .table td:nth-child(3)[b-lrt1p3u401],
    .table th:last-child[b-lrt1p3u401],
    .table td:last-child[b-lrt1p3u401] {
        display: table-cell !important;
    }
    
    /* Input fields in table */
    .table .form-control[b-lrt1p3u401] {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
        height: 28px !important;
        min-width: 60px !important;
    }
    
    .table .btn[b-lrt1p3u401] {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.3rem !important;
        min-width: 28px !important;
    }
    
    /* Responsive spacing */
    .gap-3[b-lrt1p3u401] {
        gap: 0.5rem !important;
    }
    
    .mb-3[b-lrt1p3u401] {
        margin-bottom: 0.75rem !important;
    }
    
    .p-2[b-lrt1p3u401] {
        padding: 0.5rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .form-label[b-lrt1p3u401] {
        font-size: 0.75rem !important;
    }
    
    .btn[b-lrt1p3u401] {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    .table[b-lrt1p3u401] {
        font-size: 0.65rem !important;
    }
    
    .table th[b-lrt1p3u401],
    .table td[b-lrt1p3u401] {
        padding: 0.25rem !important;
        font-size: 0.6rem !important;
    }
    
    /* Hide even more columns on very small screens */
    .table th:nth-child(n+3)[b-lrt1p3u401],
    .table td:nth-child(n+3)[b-lrt1p3u401] {
        display: none;
    }
    
    .table th:last-child[b-lrt1p3u401],
    .table td:last-child[b-lrt1p3u401] {
        display: table-cell !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalDataGrid_Container.razor.rz.scp.css */
/* Vehicle Rental DataGrid Responsive Styles */

/* Desktop compact styles */
.card-header h6[b-x8j8rzca7b] {
    font-size: 0.85rem !important;
}

.card-body[b-x8j8rzca7b] {
    font-size: 0.8rem !important;
}

.p-3[b-x8j8rzca7b] {
    font-size: 0.75rem !important;
}

.form-label[b-x8j8rzca7b] {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.form-control[b-x8j8rzca7b],
.form-select[b-x8j8rzca7b] {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 32px !important;
}

.btn[b-x8j8rzca7b] {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    /* Header section mobile */
    .p-3.border-bottom.bg-light[b-x8j8rzca7b] {
        padding: 0.5rem !important;
        background: rgba(248, 249, 250, 0.8) !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .row.g-3[b-x8j8rzca7b] {
        margin: 0 !important;
        gap: 0.5rem !important;
    }
    
    .col-md-4[b-x8j8rzca7b] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Form elements mobile */
    .form-label[b-x8j8rzca7b] {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .form-control[b-x8j8rzca7b],
    .form-select[b-x8j8rzca7b] {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
        height: 36px !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Buttons mobile */
    .btn[b-x8j8rzca7b] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
        margin: 0.1rem !important;
        white-space: nowrap !important;
    }
    
    .d-flex.align-items-center.justify-content-end[b-x8j8rzca7b] {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    /* Card body mobile */
    .p-4[b-x8j8rzca7b] {
        padding: 0.5rem !important;
    }
    
    .card[b-x8j8rzca7b] {
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .card-body[b-x8j8rzca7b] {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Table responsive */
    .table-responsive[b-x8j8rzca7b] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table[b-x8j8rzca7b] {
        font-size: 0.7rem !important;
        min-width: 600px !important;
    }
    
    .table th[b-x8j8rzca7b],
    .table td[b-x8j8rzca7b] {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.65rem !important;
        vertical-align: middle !important;
    }
    
    /* Hide less important columns on mobile */
    .table th:nth-child(n+5)[b-x8j8rzca7b],
    .table td:nth-child(n+5)[b-x8j8rzca7b] {
        display: none;
    }
    
    /* Keep essential columns */
    .table th:nth-child(1)[b-x8j8rzca7b],
    .table td:nth-child(1)[b-x8j8rzca7b],
    .table th:nth-child(2)[b-x8j8rzca7b],
    .table td:nth-child(2)[b-x8j8rzca7b],
    .table th:nth-child(3)[b-x8j8rzca7b],
    .table td:nth-child(3)[b-x8j8rzca7b],
    .table th:last-child[b-x8j8rzca7b],
    .table td:last-child[b-x8j8rzca7b] {
        display: table-cell !important;
    }
    
    /* Input fields in table */
    .table .form-control[b-x8j8rzca7b] {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
        height: 28px !important;
        min-width: 60px !important;
    }
    
    .table .btn[b-x8j8rzca7b] {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.3rem !important;
        min-width: 28px !important;
    }
    
    /* Responsive spacing */
    .gap-3[b-x8j8rzca7b] {
        gap: 0.5rem !important;
    }
    
    .mb-3[b-x8j8rzca7b] {
        margin-bottom: 0.75rem !important;
    }
    
    .p-2[b-x8j8rzca7b] {
        padding: 0.5rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .form-label[b-x8j8rzca7b] {
        font-size: 0.75rem !important;
    }
    
    .btn[b-x8j8rzca7b] {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    .table[b-x8j8rzca7b] {
        font-size: 0.65rem !important;
    }
    
    .table th[b-x8j8rzca7b],
    .table td[b-x8j8rzca7b] {
        padding: 0.25rem !important;
        font-size: 0.6rem !important;
    }
    
    /* Hide even more columns on very small screens */
    .table th:nth-child(n+3)[b-x8j8rzca7b],
    .table td:nth-child(n+3)[b-x8j8rzca7b] {
        display: none;
    }
    
    .table th:last-child[b-x8j8rzca7b],
    .table td:last-child[b-x8j8rzca7b] {
        display: table-cell !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalDataGrid_Truck.razor.rz.scp.css */
body[b-ym5ex10995] {
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalGrid.razor.rz.scp.css */
/* Vehicle Rental Grid Responsive Styles */

/* Desktop compact styles */
.card-header h6[b-texo2lhgvt] {
    font-size: 0.85rem !important;
}

.card-body[b-texo2lhgvt] {
    font-size: 0.8rem !important;
}

.d-flex.gap-2[b-texo2lhgvt] {
    font-size: 0.75rem !important;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    /* Main card responsive */
    .card.border-2.shadow-lg[b-texo2lhgvt] {
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Card header mobile */
    .card-header[b-texo2lhgvt] {
        padding: 0.75rem 1rem !important;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    }
    
    .card-header h6[b-texo2lhgvt] {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }
    
    .card-header .fas[b-texo2lhgvt] {
        font-size: 0.8rem !important;
    }
    
    /* Card body mobile */
    .card-body[b-texo2lhgvt] {
        padding: 0.5rem !important;
    }
    
    /* Button container mobile */
    .d-flex.gap-2.p-2[b-texo2lhgvt] {
        padding: 0.75rem 1rem !important;
        background: rgba(248, 249, 250, 0.8) !important;
        border-bottom: 1px solid #dee2e6 !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* Buttons mobile */
    .d-flex.gap-2 .btn[b-texo2lhgvt] {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 6px !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }
    
    /* Individual vehicle rental sections */
    .p-2.border-bottom[b-texo2lhgvt] {
        padding: 0.75rem !important;
        border-bottom: 2px solid #f8f9fa !important;
        margin-bottom: 0.25rem !important;
    }
    
    .p-2.border-bottom:last-child[b-texo2lhgvt] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    
    /* Responsive grid adjustments for child components */
    .vehicle-rental-grid[b-texo2lhgvt] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Table responsive */
    .rz-grid-table[b-texo2lhgvt] {
        font-size: 0.75rem !important;
        min-width: 600px !important;
    }
    
    .rz-grid-table th[b-texo2lhgvt],
    .rz-grid-table td[b-texo2lhgvt] {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Hide less important columns on mobile */
    .rz-grid-table th:nth-child(n+6)[b-texo2lhgvt],
    .rz-grid-table td:nth-child(n+6)[b-texo2lhgvt] {
        display: none;
    }
    
    /* Keep essential columns */
    .rz-grid-table th:nth-child(1)[b-texo2lhgvt],
    .rz-grid-table td:nth-child(1)[b-texo2lhgvt],
    .rz-grid-table th:nth-child(2)[b-texo2lhgvt],
    .rz-grid-table td:nth-child(2)[b-texo2lhgvt],
    .rz-grid-table th:nth-child(3)[b-texo2lhgvt],
    .rz-grid-table td:nth-child(3)[b-texo2lhgvt],
    .rz-grid-table th:last-child[b-texo2lhgvt],
    .rz-grid-table td:last-child[b-texo2lhgvt] {
        display: table-cell !important;
    }
    
    /* Form elements mobile */
    .form-control[b-texo2lhgvt],
    .form-select[b-texo2lhgvt],
    .rz-textbox[b-texo2lhgvt],
    .rz-dropdown[b-texo2lhgvt] {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
        height: 36px !important;
        border-radius: 6px !important;
    }
    
    /* Multi-select and dropdown mobile */
    .rz-multiselect[b-texo2lhgvt],
    .rz-dropdown[b-texo2lhgvt] {
        font-size: 0.8rem !important;
    }
    
    .rz-multiselect .rz-multiselect-item[b-texo2lhgvt],
    .rz-dropdown .rz-dropdown-item[b-texo2lhgvt] {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    /* Button mobile styles */
    .btn[b-texo2lhgvt] {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px !important;
    }
    
    .btn-sm[b-texo2lhgvt] {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    /* Icon buttons mobile */
    .btn-icon[b-texo2lhgvt] {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .btn-icon i[b-texo2lhgvt] {
        font-size: 0.8rem !important;
    }
    
    /* Loading and modal responsive */
    .loading-overlay[b-texo2lhgvt] {
        z-index: 9999 !important;
    }
    
    .spinner[b-texo2lhgvt] {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Responsive spacing */
    .gap-1[b-texo2lhgvt] {
        gap: 0.25rem !important;
    }
    
    .gap-2[b-texo2lhgvt] {
        gap: 0.5rem !important;
    }
    
    .p-2[b-texo2lhgvt] {
        padding: 0.5rem !important;
    }
    
    .mb-2[b-texo2lhgvt] {
        margin-bottom: 0.5rem !important;
    }
    
    .mb-4[b-texo2lhgvt] {
        margin-bottom: 1rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .card-header h6[b-texo2lhgvt] {
        font-size: 0.8rem !important;
    }
    
    .card-header .fas[b-texo2lhgvt] {
        font-size: 0.7rem !important;
    }
    
    .d-flex.gap-2 .btn[b-texo2lhgvt] {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .rz-grid-table[b-texo2lhgvt] {
        font-size: 0.65rem !important;
    }
    
    .rz-grid-table th[b-texo2lhgvt],
    .rz-grid-table td[b-texo2lhgvt] {
        padding: 0.25rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Hide even more columns on very small screens */
    .rz-grid-table th:nth-child(n+4)[b-texo2lhgvt],
    .rz-grid-table td:nth-child(n+4)[b-texo2lhgvt] {
        display: none;
    }
    
    .rz-grid-table th:last-child[b-texo2lhgvt],
    .rz-grid-table td:last-child[b-texo2lhgvt] {
        display: table-cell !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/Components/BulkChangeLocationModal.razor.rz.scp.css */
/* Match ChangeLocationModal style */
[b-duwifuz8ln] .bulk-change-location-modal .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
}

.bulk-change-container[b-duwifuz8ln] {
    background: #fff;
    font-size: 12px;
}

/* Filter Section */
.filter-section[b-duwifuz8ln] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.filter-fields[b-duwifuz8ln] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.modal-header-content[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* Summary Section */
.summary-section[b-duwifuz8ln] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.section-header[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.section-header i[b-duwifuz8ln] {
    color: var(--primary-color, #ca3c19);
    font-size: 14px;
}

.record-badge[b-duwifuz8ln] {
    margin-left: auto;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.trips-summary[b-duwifuz8ln] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.trip-item[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
}

.trip-item i[b-duwifuz8ln] {
    color: var(--primary-color, #ca3c19);
    font-size: 14px;
}

.trip-code[b-duwifuz8ln] {
    font-weight: 600;
    color: #495057;
}

.trip-schedule[b-duwifuz8ln] {
    color: #6c757d;
    font-size: 11px;
}

.trip-company[b-duwifuz8ln] {
    color: #6c757d;
    margin-left: auto;
}

.trip-item.more-trips[b-duwifuz8ln] {
    background: #e9ecef;
    border-style: dashed;
    font-style: italic;
    color: #6c757d;
}

.trip-item.load-more[b-duwifuz8ln] {
    background: var(--primary-color, #ca3c19);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    justify-content: center;
    transition: all 0.2s;
}

.trip-item.load-more:hover[b-duwifuz8ln] {
    background: var(--primary-hover, #d96b47);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trip-item.load-more i[b-duwifuz8ln] {
    color: #fff;
}

/* Type Switch Section */
.type-switch-section[b-duwifuz8ln] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.switch-container[b-duwifuz8ln] {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    width: fit-content;
}

.switch-option[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

.switch-option i[b-duwifuz8ln] {
    font-size: 13px;
}

.switch-option.active[b-duwifuz8ln] {
    background: linear-gradient(135deg, var(--primary-color, #ca3c19) 0%, var(--primary-hover, #d96b47) 100%);
    color: #fff;
    font-weight: 600;
}

.switch-option:not(.active):hover[b-duwifuz8ln] {
    background: #f8f9fa;
    color: #495057;
}

/* Form Section */
.form-section[b-duwifuz8ln] {
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

.form-fields[b-duwifuz8ln] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.field-group[b-duwifuz8ln] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-duwifuz8ln] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.required[b-duwifuz8ln] {
    color: #dc3545;
    margin-left: 2px;
}

/* Warning Section */
.warning-section[b-duwifuz8ln] {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    margin: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #856404;
}

.warning-section i[b-duwifuz8ln] {
    font-size: 20px;
    color: #ffc107;
}

.warning-section strong[b-duwifuz8ln] {
    color: #856404;
    font-weight: 700;
}

/* Note Field Styles */
.field-textarea[b-duwifuz8ln] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s;
}

.field-textarea:focus[b-duwifuz8ln] {
    outline: none;
    border-color: var(--primary-color, #ca3c19);
    box-shadow: 0 0 0 2px rgba(202, 60, 25, 0.1);
}

.field-hint[b-duwifuz8ln] {
    display: block;
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/Components/ChangeLocationModal.razor.rz.scp.css */
/* Match TripDetailModal style */
[b-y0kzsypa6g] .change-location-modal .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
}

.change-location-container[b-y0kzsypa6g] {
    background: #fff;
    font-size: 12px;
}

/* Type Switch Section */
.type-switch-section[b-y0kzsypa6g] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.switch-container[b-y0kzsypa6g] {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    width: fit-content;
}

.switch-option[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

.switch-option i[b-y0kzsypa6g] {
    font-size: 13px;
}

.switch-option.active[b-y0kzsypa6g] {
    background: linear-gradient(135deg, var(--primary-color, #ca3c19) 0%, var(--primary-hover, #d96b47) 100%);
    color: #fff;
    font-weight: 600;
}

.switch-option:not(.active):hover[b-y0kzsypa6g] {
    background: #f8f9fa;
    color: #495057;
}

.switch-badge[b-y0kzsypa6g] {
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.switch-option.active .switch-badge[b-y0kzsypa6g] {
    background: rgba(255, 255, 255, 0.25);
}

.switch-option:not(.active) .switch-badge[b-y0kzsypa6g] {
    background: var(--primary-color, #ca3c19);
    color: #fff;
}

/* Add Form Section */
.add-form-section[b-y0kzsypa6g] {
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

.section-header[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.section-header i[b-y0kzsypa6g] {
    color: var(--primary-color, #ca3c19);
    font-size: 14px;
}

.record-badge[b-y0kzsypa6g] {
    margin-left: auto;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.form-fields[b-y0kzsypa6g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: end;
}

.field-group[b-y0kzsypa6g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-y0kzsypa6g] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.required[b-y0kzsypa6g] {
    color: #dc3545;
    margin-left: 2px;
}

.field-input[b-y0kzsypa6g] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    background: #f8f9fa;
    color: #6c757d;
}

.field-input:read-only[b-y0kzsypa6g] {
    cursor: not-allowed;
}

.field-textarea[b-y0kzsypa6g] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s;
}

.field-textarea:focus[b-y0kzsypa6g] {
    outline: none;
    border-color: var(--primary-color, #ca3c19);
    box-shadow: 0 0 0 2px rgba(202, 60, 25, 0.1);
}

.field-hint[b-y0kzsypa6g] {
    display: block;
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}

.field-actions[b-y0kzsypa6g] {
    display: flex;
    justify-content: flex-end;
}

.btn-add[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color, #ca3c19) 0%, var(--primary-hover, #d96b47) 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add:hover[b-y0kzsypa6g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(202, 60, 25, 0.3);
}

.btn-add:active[b-y0kzsypa6g] {
    transform: translateY(0);
}

.btn-add i[b-y0kzsypa6g] {
    font-size: 11px;
}

/* History Section */
.history-section[b-y0kzsypa6g] {
    padding: 16px;
}

.table-container[b-y0kzsypa6g] {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-top: 12px;
}

.history-table[b-y0kzsypa6g] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.history-table thead[b-y0kzsypa6g] {
    background: #f8f9fa;
}

.history-table th[b-y0kzsypa6g] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    font-size: 11px;
}

.history-table td[b-y0kzsypa6g] {
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.note-cell[b-y0kzsypa6g] {
    max-width: 200px;
}

.note-text[b-y0kzsypa6g] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #495057;
}

.history-table tbody tr[b-y0kzsypa6g] {
    transition: background 0.2s;
}

.history-table tbody tr:hover[b-y0kzsypa6g] {
    background: #f8f9fa;
}

.history-table tbody tr.row-latest[b-y0kzsypa6g] {
    background: #e7f3ff;
}

.history-table tbody tr.row-latest:hover[b-y0kzsypa6g] {
    background: #d4ebff;
}

/* Original Company Row Styling */
.history-table tbody tr.row-original[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
    font-weight: 600;
    border-left: 4px solid #ff9800;
}

.history-table tbody tr.row-original:hover[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #ffedcc 0%, #ffddb3 100%);
}

.badge-original[b-y0kzsypa6g] {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(255, 152, 0, 0.3);
}

/* Type Badges */
.badge-type[b-y0kzsypa6g] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-goc[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
}

.badge-chuyen-diem[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.badge-tra-hang[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

/* Type Selector */
.type-selector[b-y0kzsypa6g] {
    cursor: pointer;
    background-color: #fff;
}

.status-badge[b-y0kzsypa6g] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.status-latest[b-y0kzsypa6g] {
    background: #d4edda;
    color: #155724;
}

.status-old[b-y0kzsypa6g] {
    background: #f8f9fa;
    color: #6c757d;
}

.status-not-delivery[b-y0kzsypa6g] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-not-delivery i[b-y0kzsypa6g] {
    font-size: 9px;
}

.btn-delete-row[b-y0kzsypa6g] {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.btn-delete-row:hover[b-y0kzsypa6g] {
    background: #c82333;
    transform: scale(1.05);
}

.btn-delete-row i[b-y0kzsypa6g] {
    font-size: 11px;
}

.btn-cancel-row[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ffc107;
    color: #000;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-cancel-row:hover[b-y0kzsypa6g] {
    background: #e0a800;
    transform: scale(1.05);
}

.btn-toggle-notdelivery[b-y0kzsypa6g] {
    background: #17a2b8;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    margin-right: 4px;
}

.btn-toggle-notdelivery:hover[b-y0kzsypa6g] {
    background: #138496;
    transform: scale(1.05);
}

.btn-toggle-notdelivery i[b-y0kzsypa6g] {
    font-size: 11px;
}

.btn-cancel-row i[b-y0kzsypa6g] {
    font-size: 11px;
}

/* Loading State */
.loading-state[b-y0kzsypa6g] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.loading-state i[b-y0kzsypa6g] {
    font-size: 24px;
    margin-bottom: 8px;
}

.loading-state p[b-y0kzsypa6g] {
    margin: 0;
    font-size: 12px;
}

/* Empty State */
.empty-state[b-y0kzsypa6g] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-state i[b-y0kzsypa6g] {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p[b-y0kzsypa6g] {
    margin: 0;
    font-size: 12px;
}

/* Utility Classes */
.text-center[b-y0kzsypa6g] {
    text-align: center;
}

.text-muted[b-y0kzsypa6g] {
    color: #6c757d;
    font-style: italic;
}

/* Update NOT_DELIVERY Button */
.btn-update-notdelivery[b-y0kzsypa6g] {
    padding: 6px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}

.btn-update-notdelivery:hover[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.btn-update-notdelivery i[b-y0kzsypa6g] {
    font-size: 10px;
}

/* Update NOT_DELIVERY Modal */
.update-notdelivery-container[b-y0kzsypa6g] {
    padding: 20px;
}

.info-section[b-y0kzsypa6g] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
}

.info-row[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.info-row:last-child[b-y0kzsypa6g] {
    margin-bottom: 0;
}

.info-label[b-y0kzsypa6g] {
    font-weight: 600;
    color: #495057;
    font-size: 12px;
    min-width: 140px;
    margin-right: 12px;
}

.info-value[b-y0kzsypa6g] {
    color: #212529;
    font-size: 12px;
    flex: 1;
}

.edit-section[b-y0kzsypa6g] {
    padding-top: 12px;
}

.note-display[b-y0kzsypa6g] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    margin-top: 8px;
}

.note-display p[b-y0kzsypa6g] {
    margin: 0;
    font-size: 11px;
    color: #495057;
    line-height: 1.5;
}

.btn-save-update[b-y0kzsypa6g] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.btn-save-update:hover[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #218838 0%, #1ba87d 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.btn-save-update i[b-y0kzsypa6g] {
    font-size: 11px;
}

.btn-save-update.disabled[b-y0kzsypa6g] {
    background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-save-update.disabled:hover[b-y0kzsypa6g] {
    transform: none;
    box-shadow: none;
}

/* Enhanced Checkbox Container */
.checkbox-container[b-y0kzsypa6g] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 14px;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.checkbox-container:not(.disabled)[b-y0kzsypa6g] {
    border-color: #28a745;
    background: #f0f9f4;
}

.checkbox-container.disabled[b-y0kzsypa6g] {
    border-color: #dc3545;
    background: #fff5f5;
    opacity: 0.8;
}

.checkbox-label-enhanced[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.checkbox-container.disabled .checkbox-label-enhanced[b-y0kzsypa6g] {
    cursor: not-allowed;
}

.checkbox-label-enhanced input[type="checkbox"][b-y0kzsypa6g] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}

.checkbox-label-enhanced input[type="checkbox"]:disabled[b-y0kzsypa6g] {
    cursor: not-allowed;
    opacity: 0.5;
}

.checkbox-text[b-y0kzsypa6g] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    flex: 1;
}

.checkbox-container.disabled .checkbox-text[b-y0kzsypa6g] {
    color: #6c757d;
}

.checkbox-text i[b-y0kzsypa6g] {
    color: var(--primary-color, #ca3c19);
    font-size: 14px;
}

.checkbox-hint[b-y0kzsypa6g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.checkbox-hint.editable[b-y0kzsypa6g] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.checkbox-hint.editable i[b-y0kzsypa6g] {
    color: #28a745;
    font-size: 10px;
}

.checkbox-hint.locked[b-y0kzsypa6g] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.checkbox-hint.locked i[b-y0kzsypa6g] {
    color: #dc3545;
    font-size: 10px;
}

.disabled-reason[b-y0kzsypa6g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 11px;
    color: #856404;
    line-height: 1.5;
}

.disabled-reason i[b-y0kzsypa6g] {
    color: #ffc107;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.disabled-reason span[b-y0kzsypa6g] {
    flex: 1;
}

/* Edit Upload Container */
.edit-upload-container[b-y0kzsypa6g] {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    padding: 12px;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet and below */
@media (max-width: 768px) {
    .change-location-container[b-y0kzsypa6g] {
        font-size: 13px;
    }

    /* Form layout - single column */
    .form-fields[b-y0kzsypa6g] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Larger touch targets */
    .btn-add[b-y0kzsypa6g] {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    .field-input[b-y0kzsypa6g],
    .field-textarea[b-y0kzsypa6g] {
        padding: 12px;
        font-size: 14px;
        min-height: 44px;
    }

    .field-textarea[b-y0kzsypa6g] {
        min-height: 80px;
    }

    /* History table - card layout */
    .history-table[b-y0kzsypa6g] {
        display: block;
    }

    .history-table thead[b-y0kzsypa6g] {
        display: none;
    }

    .history-table tbody[b-y0kzsypa6g] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .history-table tbody tr[b-y0kzsypa6g] {
        display: block;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .history-table tbody tr.row-original[b-y0kzsypa6g] {
        border-left: 4px solid #ff9800;
    }

    .history-table tbody tr.row-latest[b-y0kzsypa6g] {
        border-left: 4px solid #28a745;
        background: #f0fff4;
    }

    .history-table tbody td[b-y0kzsypa6g] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .history-table tbody td:last-child[b-y0kzsypa6g] {
        border-bottom: none;
        padding-top: 12px;
        justify-content: flex-end;
        gap: 8px;
    }

    .history-table tbody td[b-y0kzsypa6g]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
        font-size: 11px;
        text-transform: uppercase;
    }

    /* Hide STT column on mobile */
    .history-table tbody td:first-child[b-y0kzsypa6g] {
        display: none;
    }

    .note-cell[b-y0kzsypa6g] {
        max-width: none;
    }

    .note-text[b-y0kzsypa6g] {
        white-space: normal;
        text-align: right;
    }

    /* Action buttons in card */
    .btn-delete-row[b-y0kzsypa6g],
    .btn-cancel-row[b-y0kzsypa6g],
    .btn-update-notdelivery[b-y0kzsypa6g] {
        padding: 8px 12px;
        min-height: 36px;
    }

    /* Modal header */
    .modal-header-content[b-y0kzsypa6g] {
        font-size: 14px;
    }

    /* Info section in update dialog */
    .info-row[b-y0kzsypa6g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .info-label[b-y0kzsypa6g] {
        min-width: auto;
        margin-right: 0;
    }

    /* Checkbox container */
    .checkbox-container[b-y0kzsypa6g] {
        padding: 16px;
    }

    .checkbox-text[b-y0kzsypa6g] {
        font-size: 14px;
    }

    .checkbox-label-enhanced input[type="checkbox"][b-y0kzsypa6g] {
        width: 22px;
        height: 22px;
    }

    /* Section headers */
    .section-header[b-y0kzsypa6g] {
        font-size: 14px;
    }

    /* Scrollable content */
    .history-section[b-y0kzsypa6g] {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .add-form-section[b-y0kzsypa6g],
    .history-section[b-y0kzsypa6g] {
        padding: 12px;
    }

    .field-label[b-y0kzsypa6g] {
        font-size: 13px;
    }

    /* Stack action buttons */
    .field-actions[b-y0kzsypa6g] {
        margin-top: 8px;
    }

    /* Update dialog */
    .update-notdelivery-container[b-y0kzsypa6g] {
        padding: 16px;
    }

    .info-section[b-y0kzsypa6g] {
        padding: 12px;
    }

    /* Smaller badges */
    .badge-original[b-y0kzsypa6g] {
        font-size: 8px;
        padding: 2px 6px;
    }

    .status-badge[b-y0kzsypa6g] {
        font-size: 9px;
        padding: 3px 6px;
    }

    .record-badge[b-y0kzsypa6g] {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Alert dialog content */
    .e-dialog .e-dlg-content[b-y0kzsypa6g] {
        padding: 16px !important;
    }

    /* Footer buttons */
    .btn-save-update[b-y0kzsypa6g] {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    /* Loading and empty states */
    .loading-state[b-y0kzsypa6g],
    .empty-state[b-y0kzsypa6g] {
        padding: 30px 16px;
    }

    .loading-state i[b-y0kzsypa6g],
    .empty-state i[b-y0kzsypa6g] {
        font-size: 32px;
    }

    /* Disabled reason box */
    .disabled-reason[b-y0kzsypa6g] {
        font-size: 10px;
        padding: 8px 10px;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    .modal-header-content span[b-y0kzsypa6g] {
        font-size: 13px;
    }

    .history-table tbody td[b-y0kzsypa6g] {
        font-size: 11px;
    }

    .btn-add[b-y0kzsypa6g],
    .btn-save-update[b-y0kzsypa6g] {
        font-size: 12px;
    }
}

/* Smooth transitions */
.history-table tbody tr[b-y0kzsypa6g],
.field-input[b-y0kzsypa6g],
.field-textarea[b-y0kzsypa6g],
.btn-add[b-y0kzsypa6g],
.btn-save-update[b-y0kzsypa6g],
.checkbox-container[b-y0kzsypa6g] {
    transition: all 0.2s ease;
}

/* Better focus states for accessibility */
.field-input:focus[b-y0kzsypa6g],
.field-textarea:focus[b-y0kzsypa6g] {
    outline: none;
    border-color: var(--primary-color, #ca3c19);
    box-shadow: 0 0 0 3px rgba(202, 60, 25, 0.15);
}

/* Touch-friendly spacing */
@media (hover: none) and (pointer: coarse) {
    .btn-delete-row[b-y0kzsypa6g],
    .btn-cancel-row[b-y0kzsypa6g],
    .btn-update-notdelivery[b-y0kzsypa6g] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/Components/TripDetailModal.razor.rz.scp.css */
    /* Modal Container */
    .trip-modal-container[b-sfjbrdovv1] {
        background: #fff;
        font-size: 12px;
        max-height: calc(90vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Ensure dialog content doesn't overflow */
    [b-sfjbrdovv1] .trip-detail-modal .e-dlg-content {
        overflow: hidden !important;
        padding: 0 !important;
    }

    .modal-header-content[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        font-weight: 600;
    }

    /* Header Info Bar */
    .trip-header-bar[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px 16px;
        background: linear-gradient(135deg, var(--primary-color, #ca3c19) 0%, var(--primary-hover, #d96b47) 100%);
        color: #fff;
        border-radius: 4px 4px 0 0;
    }

    .delivery-info-cancel[b-sfjbrdovv1] {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    }

    .header-item[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
    }

    .header-item.primary[b-sfjbrdovv1] {
        background: rgba(255, 255, 255, 0.25);
        font-weight: 600;
        font-size: 12px;
    }

    .header-item i[b-sfjbrdovv1] {
        font-size: 10px;
    }

    .header-item.clickable[b-sfjbrdovv1] {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .header-item.clickable:hover[b-sfjbrdovv1] {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.05);
    }

    .status-pill[b-sfjbrdovv1] {
        padding: 4px 10px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.9);
    }

    .status-pill.badge-notcheckin[b-sfjbrdovv1] { color: #856404; }
    .status-pill.badge-checked[b-sfjbrdovv1] { color: #0c5460; }
    .status-pill.badge-pickuped[b-sfjbrdovv1] { color: #155724; }
    .status-pill.badge-delivered[b-sfjbrdovv1] { color: #155724; }
    .status-pill.badge-cancel[b-sfjbrdovv1] { color: #721c24; }

    /* Info Grid - Default 2 columns for better mobile compatibility */
    .info-grid[b-sfjbrdovv1] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px 16px;
        background: #fafbfc;
        border-bottom: 1px solid #e9ecef;
    }

    /* Force consistent positioning for all info-items */
    .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; } /* Nơi Giao */
    .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; } /* Mặt hàng */
    .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; } /* Tài xế */
    .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; } /* Xe/Móc */
    .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; } /* Đội */
    
    /* Container info gets its own full-width row */
    .info-item:nth-child(6)[b-sfjbrdovv1] { 
        grid-column: span 2; 
        grid-row: 4; 
    } /* Container (full width row) */
    
    /* Export command section always spans full width on separate row */
    .export-command-section[b-sfjbrdovv1] {
        grid-column: span 2 !important;
        grid-row: 5;
    }

    .info-item[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        /*padding: 5px 6px;*/
        position: relative;
    }

    .info-item.has-replacement[b-sfjbrdovv1] {
        background: linear-gradient(135deg, #fff5f2 0%, #ffe8e0 50%, #fff5f2 100%);
        border-radius: 4px;
        padding: 6px 8px;
    }

    .info-item i[b-sfjbrdovv1] {
        color: #6c757d;
        font-size: 9px;
        width: 14px;
        flex-shrink: 0;
    }

    .info-item .label[b-sfjbrdovv1] {
        color: #6c757d;
        font-weight: 600;
        flex-shrink: 0;
    }

    .info-item .value[b-sfjbrdovv1] {
        color: #212529;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .newest-indicator[b-sfjbrdovv1] {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color, #ca3c19);
        font-size: 10px;
        animation: sparkle-b-sfjbrdovv1 2s infinite;
    }

    @keyframes sparkle-b-sfjbrdovv1 {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.1); }
    }

    /* Container Info in Info Grid */
    .info-item.container-info[b-sfjbrdovv1] {
        grid-column: span 3;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .info-item.container-info .value[b-sfjbrdovv1] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        flex: 0 1 auto;
    }

    .container-tag[b-sfjbrdovv1] {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: #fff;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
        transition: all 0.2s ease;
    }

    .container-tag:hover[b-sfjbrdovv1] {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }

    .btn-edit-inline[b-sfjbrdovv1] {
        margin-left: 8px;
        padding: 4px 10px;
        background: rgba(202, 60, 25, 0.08);
        color: var(--primary-color, #ca3c19);
        border: 1px solid rgba(202, 60, 25, 0.25);
        border-radius: 3px;
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .btn-edit-inline:hover[b-sfjbrdovv1] {
        background: rgba(202, 60, 25, 0.15);
        border-color: var(--primary-color, #ca3c19);
        color: #b83419;
        transform: translateY(-1px);
    }

    .btn-edit-inline i[b-sfjbrdovv1] {
        font-size: 9px;
    }

    .btn-edit-inline span[b-sfjbrdovv1] {
        font-size: 10px;
    }

    .text-muted[b-sfjbrdovv1] {
        color: #6c757d;
        font-style: italic;
    }

    /* Quantities Bar */
    .quantities-bar[b-sfjbrdovv1] {
        display: flex;
        gap: 10px;
        padding: 10px 16px;
        background: #fff;
        border-bottom: 1px solid #e9ecef;
    }

    .qty-box[b-sfjbrdovv1] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 10px;
        background: #f8f9fa;
        border-radius: 4px;
        border: 1px solid #e9ecef;
    }

    .qty-box.accent[b-sfjbrdovv1] {
        background: #fff5f2;
        border-color: var(--primary-color, #ca3c19);
    }

    .qty-label[b-sfjbrdovv1] {
        font-size: 10px;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .qty-num[b-sfjbrdovv1] {
        font-size: 15px;
        font-weight: 700;
        color: var(--primary-color, #ca3c19);
    }

    .qty-num[b-sfjbrdovv1]::after {
        content: ' kg';
        font-size: 9px;
        font-weight: 500;
        color: #6c757d;
        margin-left: 2px;
    }

    /* Timeline Section */
    .timeline-section[b-sfjbrdovv1] {
        padding: 14px 16px;
        background: #f8f9fa;
    }

    .timeline-track[b-sfjbrdovv1] {
        display: flex;
        position: relative;
        gap: 0;
    }

    /* Gray background line (full width) */
    .timeline-track[b-sfjbrdovv1]::after {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        top: 20px;
        height: 3px;
        background: #e9ecef;
        z-index: 0;
    }

    /* Active colored line (dynamic width) */
    .timeline-track[b-sfjbrdovv1]::before {
        content: '';
        position: absolute;
        left: 20px;
        right: auto;
        top: 20px;
        height: 3px;
        width: calc((100% - 40px) * var(--timeline-progress, 0));
        background: var(--timeline-color, #e9ecef);
        z-index: 1;
        transition: all 0.3s ease;
    }

    /* Dynamic line coloring based on progress - 2 base stages (Container) */
    .timeline-track.stage-count-2.progress-pickuped[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #155724 0%,
            #155724 50%,
            #e9ecef 50%,
            #e9ecef 100%);
    }

    .timeline-track.stage-count-2.progress-delivered[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #155724 0%,
            #155724 50%,
            #28a745 50%,
            #28a745 100%);
    }

    /* Dynamic line coloring based on progress - 3 base stages */
    .timeline-track.stage-count-3.progress-checked[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%,
            #0c5460 33.33%,
            #e9ecef 33.33%,
            #e9ecef 100%);
    }

    .timeline-track.stage-count-3.progress-pickuped[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%,
            #0c5460 33.33%,
            #155724 33.33%,
            #155724 66.66%,
            #e9ecef 66.66%,
            #e9ecef 100%);
    }

    .timeline-track.stage-count-3.progress-delivered[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%,
            #0c5460 33.33%,
            #155724 33.33%,
            #155724 100%);
    }

    /* Dynamic line coloring for additional change company stages */
    .timeline-track.stage-count-4.progress-checked[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 25%,
            #e9ecef 25%, #e9ecef 100%);
    }

    .timeline-track.stage-count-4.progress-pickuped[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 25%,
            #155724 25%, #155724 50%,
            #e9ecef 50%, #e9ecef 100%);
    }

    .timeline-track.stage-count-4.progress-delivered[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 25%,
            #155724 25%, #155724 75%,
            #e9ecef 75%, #e9ecef 100%);
    }

    .timeline-track.stage-count-4.progress-change-1[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 25%,
            #155724 25%, #155724 75%,
            #856404 75%, #856404 100%);
    }

    .timeline-track.stage-count-5.progress-checked[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 20%,
            #e9ecef 20%, #e9ecef 100%);
    }

    .timeline-track.stage-count-5.progress-pickuped[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 20%,
            #155724 20%, #155724 40%,
            #e9ecef 40%, #e9ecef 100%);
    }

    .timeline-track.stage-count-5.progress-delivered[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 20%,
            #155724 20%, #155724 60%,
            #e9ecef 60%, #e9ecef 100%);
    }

    .timeline-track.stage-count-5.progress-change-1[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 20%,
            #155724 20%, #155724 60%,
            #856404 60%, #856404 80%,
            #e9ecef 80%, #e9ecef 100%);
    }

    .timeline-track.stage-count-5.progress-change-2[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 20%,
            #155724 20%, #155724 60%,
            #856404 60%, #856404 100%);
    }

    /* Stage count 6 (3 base + 3 changes) */
    .timeline-track.stage-count-6.progress-checked[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #e9ecef 16.66%, #e9ecef 100%);
    }

    .timeline-track.stage-count-6.progress-pickuped[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #155724 16.66%, #155724 33.33%,
            #e9ecef 33.33%, #e9ecef 100%);
    }

    .timeline-track.stage-count-6.progress-delivered[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #155724 16.66%, #155724 50%,
            #e9ecef 50%, #e9ecef 100%);
    }

    .timeline-track.stage-count-6.progress-change-1[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #155724 16.66%, #155724 50%,
            #856404 50%, #856404 66.66%,
            #e9ecef 66.66%, #e9ecef 100%);
    }

    .timeline-track.stage-count-6.progress-change-2[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #155724 16.66%, #155724 50%,
            #856404 50%, #856404 83.33%,
            #e9ecef 83.33%, #e9ecef 100%);
    }

    .timeline-track.stage-count-6.progress-change-3[b-sfjbrdovv1]::before {
        background: linear-gradient(to right,
            #0c5460 0%, #0c5460 16.66%,
            #155724 16.66%, #155724 50%,
            #856404 50%, #856404 100%);
    }

    .timeline-stage[b-sfjbrdovv1] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    .timeline-stage:hover .stage-icon[b-sfjbrdovv1] {
        transform: scale(1.08);
    }

    .timeline-stage.disabled[b-sfjbrdovv1] {
        cursor: not-allowed;
        opacity: 0.5;
        pointer-events: none;
    }

    .timeline-stage.disabled .stage-icon[b-sfjbrdovv1] {
        background: #e9ecef;
        color: #adb5bd;
    }

    .timeline-stage.disabled .stage-label[b-sfjbrdovv1] {
        color: #adb5bd;
    }

    .timeline-stage.disabled:hover .stage-icon[b-sfjbrdovv1] {
        transform: none;
    }

    .stage-icon[b-sfjbrdovv1] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #dee2e6;
        color: #6c757d;
        font-size: 15px;
        z-index: 2;
        margin-bottom: 8px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Stage-specific colors matching status badges */
    .timeline-stage.stage-checked.active .stage-icon[b-sfjbrdovv1] {
        background: #0c5460;
        color: #fff;
        box-shadow: 0 2px 8px rgba(12, 84, 96, 0.3);
    }

    .timeline-stage.stage-pickuped.active .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        color: #fff;
        box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3);
    }

    .timeline-stage.stage-delivered.active .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        color: #fff;
        box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3);
    }

    .timeline-stage.stage-changed.active .stage-icon[b-sfjbrdovv1] {
        background: #856404;
        color: #fff;
        box-shadow: 0 2px 8px rgba(133, 100, 4, 0.3);
    }

    .timeline-stage.active .stage-icon[b-sfjbrdovv1] {
        background: var(--primary-color, #ca3c19);
        color: #fff;
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.3);
    }

    .stage-label[b-sfjbrdovv1] {
        font-size: 10px;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 3px;
    }

    .timeline-stage.stage-checked.active .stage-label[b-sfjbrdovv1] {
        color: #0c5460;
    }

    .timeline-stage.stage-pickuped.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .timeline-stage.stage-delivered.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .timeline-stage.stage-changed.active .stage-label[b-sfjbrdovv1] {
        color: #856404;
    }

    .timeline-stage.active .stage-label[b-sfjbrdovv1] {
        color: var(--primary-color, #ca3c19);
    }

    /* Not Delivery Stage - Special styling */
    .timeline-stage.not-delivery .stage-icon[b-sfjbrdovv1] {
        background: rgba(220, 53, 69, 0.9) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
        border: 2px solid rgba(220, 53, 69, 1);
    }

    .timeline-stage.not-delivery .stage-label[b-sfjbrdovv1] {
        color: #dc3545 !important;
        font-weight: 700;
    }

    .stage-time[b-sfjbrdovv1] {
        font-size: 11px;
        color: #495057;
        font-weight: 600;
    }

    /* Not Delivery Info Section */
    .not-delivery-info[b-sfjbrdovv1] {
        margin-top: 8px;
        padding: 8px 10px;
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid rgba(220, 53, 69, 0.3);
        border-radius: 4px;
        font-size: 10px;
        max-width: 200px;
    }

    .not-delivery-badge[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #dc3545;
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 11px;
    }

    .not-delivery-badge i[b-sfjbrdovv1] {
        font-size: 10px;
    }

    .not-delivery-detail[b-sfjbrdovv1] {
        margin-top: 4px;
        color: #6c757d;
        font-size: 9px;
        line-height: 1.4;
    }

    .not-delivery-detail span[b-sfjbrdovv1] {
        display: block;
    }

    .stage-badge[b-sfjbrdovv1] {
        position: absolute;
        top: -4px;
        right: calc(50% - 24px);
        background: var(--primary-color, #ca3c19);
        color: #fff;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: 700;
        z-index: 2;
    }

    .stage-checkin-indicator[b-sfjbrdovv1] {
        position: absolute;
        top: -4px;
        left: calc(50% - 24px);
        background: #28a745;
        color: #fff;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: 700;
        z-index: 2;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .stage-checkin-indicator i[b-sfjbrdovv1] {
        font-size: 8px;
    }

    /* Driver Arrived Stage */
    .stage-driver-arrived[b-sfjbrdovv1] {
        cursor: default !important;
    }

        .stage-driver-arrived.active .stage-icon[b-sfjbrdovv1] {
            background: #155724;
            color: #fff;
            border-color: #17a2b8;
        }

        .stage-driver-arrived .stage-label[b-sfjbrdovv1] {
            color: #155724 !important;
            font-weight: 600;
        }

    .stage-driver-arrived:hover[b-sfjbrdovv1] {
        transform: none;
    }

    /* Stage Details */
    .stage-details[b-sfjbrdovv1] {
        margin: 10px 16px;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        animation: slideDown-b-sfjbrdovv1 0.2s ease;
    }

    @keyframes slideDown-b-sfjbrdovv1 {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .details-header[b-sfjbrdovv1] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        font-weight: 600;
        font-size: 11px;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .complete-action-btn[b-sfjbrdovv1] {
        margin-left: auto;
        padding: 5px 10px;
        background: rgba(202, 60, 25, 0.12);
        color: var(--primary-color, #ca3c19);
        border: 1px solid rgba(202, 60, 25, 0.3);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
    }

    .complete-action-btn:hover[b-sfjbrdovv1] {
        background: rgba(202, 60, 25, 0.2);
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(202, 60, 25, 0.2);
    }

    .complete-action-btn:active[b-sfjbrdovv1] {
        transform: translateY(0);
        background: rgba(202, 60, 25, 0.25);
    }

    .complete-action-btn i[b-sfjbrdovv1] {
        font-size: 9px;
    }

    .details-header i[b-sfjbrdovv1] {
        color: var(--primary-color, #ca3c19);
        font-size: 10px;
    }

    .details-summary[b-sfjbrdovv1] {
        padding: 8px 12px;
        font-size: 11px;
        color: var(--primary-color, #ca3c19);
        font-weight: 600;
        background: #fff5f2;
        border-bottom: 1px solid #e9ecef;
    }

    .image-section-header[b-sfjbrdovv1] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
        font-size: 11px;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
    }

    .add-section-btn[b-sfjbrdovv1] {
        margin-left: auto;
        padding: 3px 8px;
        background: rgba(202, 60, 25, 0.1);
        color: var(--primary-color, #ca3c19);
        border: 1px solid rgba(202, 60, 25, 0.25);
        border-radius: 8px;
        font-size: 9px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 3px;
        transition: all 0.2s ease;
    }

    .add-section-btn:hover[b-sfjbrdovv1] {
        background: rgba(202, 60, 25, 0.18);
        border-color: rgba(202, 60, 25, 0.4);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.15);
    }

    .add-section-btn:active[b-sfjbrdovv1] {
        transform: translateY(0);
        background: rgba(202, 60, 25, 0.22);
    }

    .add-section-btn i[b-sfjbrdovv1] {
        font-size: 8px;
    }

    .image-section-header:first-of-type[b-sfjbrdovv1] {
        margin-top: 0;
    }

    .image-section-header i[b-sfjbrdovv1] {
        color: var(--primary-color, #ca3c19);
        font-size: 10px;
    }

    /* Image Grid Layout */
    .image-grid[b-sfjbrdovv1] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
        padding: 12px;
    }

    .image-card[b-sfjbrdovv1] {
        position: relative;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .image-card:hover[b-sfjbrdovv1] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(202, 60, 25, 0.15);
        border-color: var(--primary-color, #ca3c19);
    }

    .image-card-badge[b-sfjbrdovv1] {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--primary-color, #ca3c19);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.4);
    }

    .image-card-thumb[b-sfjbrdovv1] {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;
        cursor: pointer;
        background: #f8f9fa;
    }

    .image-card-thumb img[b-sfjbrdovv1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .image-card:hover .image-card-thumb img[b-sfjbrdovv1] {
        transform: scale(1.1);
    }

    .image-card-overlay[b-sfjbrdovv1] {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .image-card-thumb:hover .image-card-overlay[b-sfjbrdovv1] {
        opacity: 1;
    }

    .image-card-overlay i[b-sfjbrdovv1] {
        color: #fff;
        font-size: 24px;
    }

    .image-card-info[b-sfjbrdovv1] {
        padding: 10px 12px;
        background: linear-gradient(to bottom, #fff 0%, #fafbfc 100%);
        border-top: 1px solid #e9ecef;
    }

    .image-card-qty[b-sfjbrdovv1] {
        font-size: 12px;
        font-weight: 700;
        color: var(--primary-color, #ca3c19);
        margin-bottom: 4px;
    }

    .image-card-time[b-sfjbrdovv1] {
        font-size: 10px;
        color: #6c757d;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .image-card-time[b-sfjbrdovv1]::before {
        content: '\f017';
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
        font-size: 9px;
    }

    .image-card-edit[b-sfjbrdovv1] {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: var(--primary-color, #ca3c19);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: all 0.2s ease;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .image-card-edit:hover[b-sfjbrdovv1] {
        background: var(--primary-color, #ca3c19);
        color: #fff;
        transform: scale(1.1);
    }

    /* Image card actions container */
    .image-card-actions[b-sfjbrdovv1] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 2;
    }

    .image-card-actions .image-card-edit[b-sfjbrdovv1],
    .image-card-actions .image-card-history[b-sfjbrdovv1] {
        position: relative;
        top: auto;
        right: auto;
    }

    .image-card-history[b-sfjbrdovv1] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #17a2b8;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .image-card-history:hover[b-sfjbrdovv1] {
        background: #17a2b8;
        color: #fff;
        transform: scale(1.1);
    }

    /* History dialog styles */
    [b-sfjbrdovv1] .history-dialog .e-dlg-header {
        padding: 16px 20px;
        border-bottom: 1px solid #e9ecef;
    }

    [b-sfjbrdovv1] .history-dialog .dialog-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #495057;
    }

    [b-sfjbrdovv1] .history-dialog .dialog-header i {
        color: #17a2b8;
    }

    /* Replacement History - Clean Table Design */
    .replacement-history-clean[b-sfjbrdovv1] {
        margin: 10px 16px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
    }

    .replacement-table[b-sfjbrdovv1] {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .replacement-table thead[b-sfjbrdovv1] {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

    .replacement-table th[b-sfjbrdovv1] {
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 10px;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .replacement-table .th-status[b-sfjbrdovv1] {
        width: 40px;
        text-align: center;
    }

    .replacement-table .th-vehicle[b-sfjbrdovv1] {
        width: 30%;
    }

    .replacement-table .th-mooc[b-sfjbrdovv1] {
        width: 30%;
    }

    .replacement-table .th-driver[b-sfjbrdovv1] {
        width: 35%;
    }

    .replacement-table tbody tr[b-sfjbrdovv1] {
        border-bottom: 1px solid #f8f9fa;
        transition: background 0.2s ease;
    }

    .replacement-table tbody tr:hover[b-sfjbrdovv1] {
        background: #fafbfc;
    }

    .replacement-table tbody tr:last-child[b-sfjbrdovv1] {
        border-bottom: none;
    }

    .replacement-table tbody tr.row-latest[b-sfjbrdovv1] {
        background: linear-gradient(90deg, #fff5f2 0%, #fff 100%);
        border-left: 3px solid var(--primary-color, #ca3c19);
    }

    .replacement-table tbody tr.row-latest:hover[b-sfjbrdovv1] {
        background: linear-gradient(90deg, #ffe8e0 0%, #fff 100%);
    }

    .replacement-table td[b-sfjbrdovv1] {
        padding: 10px 12px;
        color: #495057;
    }

    .replacement-table .td-status[b-sfjbrdovv1] {
        text-align: center;
    }

    .status-number[b-sfjbrdovv1] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        font-size: 10px;
        font-weight: 600;
    }

    .status-current[b-sfjbrdovv1] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color, #ca3c19);
        font-size: 16px;
    }

    .value-changed[b-sfjbrdovv1] {
        color: var(--primary-color, #ca3c19);
        font-weight: 700;
        padding: 2px 6px;
        background: rgba(202, 60, 25, 0.1);
        border-radius: 3px;
    }

    .value-empty[b-sfjbrdovv1] {
        color: #adb5bd;
        font-style: italic;
    }

    /* Notes Section */
    .notes-section[b-sfjbrdovv1] {
        margin: 10px 16px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }

    .notes-content[b-sfjbrdovv1] {
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.5;
        color: #495057;
        white-space: pre-wrap;
    }

    /* Cancel Section */
    .cancel-section[b-sfjbrdovv1] {
        padding: 24px;
        text-align: center;
    }

    .cancel-icon[b-sfjbrdovv1] {
        font-size: 48px;
        color: #dc3545;
        margin-bottom: 12px;
    }

    .cancel-title[b-sfjbrdovv1] {
        font-size: 14px;
        font-weight: 700;
        color: #dc3545;
        margin-bottom: 8px;
    }

    .cancel-reason[b-sfjbrdovv1] {
        font-size: 11px;
        color: #6c757d;
        line-height: 1.4;
        white-space: pre-wrap;
    }

    /* Enhanced Cancel Section */
    .cancel-section-enhanced[b-sfjbrdovv1] {
        background: #fff;
    }

    /* Cancel Badge in Header */
    .cancel-badge-item[b-sfjbrdovv1] {
        background: rgba(255, 255, 255, 0.25) !important;
        max-width: 300px;
        border-left: 2px solid rgba(255, 255, 255, 0.5);
        cursor: help;
    }

    .cancel-badge-item i[b-sfjbrdovv1] {
        font-size: 11px;
        color: #fff;
    }

    .cancel-badge-text[b-sfjbrdovv1] {
        font-size: 10px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px;
        display: inline-block;
        vertical-align: middle;
    }

    .cancel-time-text[b-sfjbrdovv1] {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.85);
        margin-left: 4px;
        font-style: italic;
        white-space: nowrap;
    }

    .cancel-badge-item:hover[b-sfjbrdovv1] {
        background: rgba(255, 255, 255, 0.35) !important;
    }

    .cancel-info-grid[b-sfjbrdovv1] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px 16px;
        background: #fafbfc;
        border-bottom: 1px solid #e9ecef;
        opacity: 0.85;
        pointer-events: none;
    }

    /* Cancel grid positioning - same as main info grid */
    .cancel-info-grid .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
    .cancel-info-grid .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
    .cancel-info-grid .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
    .cancel-info-grid .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
    .cancel-info-grid .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
    .cancel-info-grid .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
    .cancel-info-grid .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

    .cancel-info-grid .btn-edit-inline[b-sfjbrdovv1],
    .cancel-info-grid .btn-edit-tiny[b-sfjbrdovv1],
    .cancel-info-grid .btn-delete-tiny[b-sfjbrdovv1] {
        display: none;
    }

    /* Cancel Timeline Section - Horizontal scroll enabled */
    .cancel-timeline-section[b-sfjbrdovv1] {
        padding: 12px 12px 20px 12px; /* Bottom padding for scrollbar clearance */
        background: #f8f9fa;
        margin: 12px 16px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Cancel timeline scrollbar styling */
    .cancel-timeline-section[b-sfjbrdovv1]::-webkit-scrollbar {
        height: 6px;
    }
    
    .cancel-timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        margin: 0 10px;
    }
    
    .cancel-timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #6c757d, #495057);
        border-radius: 3px;
    }

    .cancel-timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, #495057, #6c757d);
    }

    .cancel-timeline-section .section-header[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dee2e6;
    }

    .cancel-timeline-section .section-header i[b-sfjbrdovv1] {
        color: #6c757d;
    }

    .cancel-timeline-track[b-sfjbrdovv1] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 12px;
        position: relative;
        padding: 0 20px;
        min-width: 400px; /* Base min-width for horizontal scroll */
        height: 80px; /* Fixed height like main timeline */
    }

    /* Specific min-widths for cancel timeline based on stage count */
    .cancel-timeline-track.stage-count-2[b-sfjbrdovv1] {
        min-width: 300px;
    }

    .cancel-timeline-track.stage-count-3[b-sfjbrdovv1] {
        min-width: 400px;
    }

    .cancel-timeline-track.stage-count-4[b-sfjbrdovv1],
    .cancel-timeline-track.stage-count-5[b-sfjbrdovv1],
    .cancel-timeline-track.stage-count-6[b-sfjbrdovv1] {
        min-width: 600px;
    }

    .cancel-timeline-track[b-sfjbrdovv1]::after {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        top: 40px; /* Center at 40px like main timeline */
        height: 3px;
        background: #dee2e6;
        border-radius: 2px;
        z-index: 1;
    }

    .cancel-timeline-track[b-sfjbrdovv1]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 40px;
        height: 3px;
        width: calc((100% - 40px) * var(--cancel-timeline-progress, 0));
        background: var(--cancel-timeline-color, #6c757d);
        border-radius: 2px;
        z-index: 2;
        transition: all 0.3s ease;
    }

    .cancel-timeline-stage[b-sfjbrdovv1] {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: 110px !important;
        max-width: 130px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        position: relative;
        z-index: 3;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .cancel-timeline-stage.completed[b-sfjbrdovv1] {
        background: rgba(21, 87, 36, 0.05);
    }

    .cancel-timeline-stage.not-completed[b-sfjbrdovv1] {
        opacity: 0.4;
    }

    .cancel-timeline-stage .stage-icon[b-sfjbrdovv1] {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        background: #fff;
        border: 2px solid #dee2e6;
        transition: all 0.2s ease;
        position: absolute;
        top: 24px !important; /* Center at line level */
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
    }

    .cancel-timeline-stage.completed .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        border-color: #155724;
        color: #fff;
    }

    .cancel-timeline-stage .stage-label[b-sfjbrdovv1] {
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-break: break-word;
        hyphens: auto;
        font-weight: 500;
        color: #495057;
        margin-top: 60px; /* Position below the icon */
        max-width: 100px;
        padding: 0 4px;
    }

    .cancel-timeline-stage .stage-time[b-sfjbrdovv1] {
        font-size: 9px;
        color: #6c757d;
        background: #fff;
        padding: 2px 6px;
        border-radius: 3px;
        border: 1px solid #dee2e6;
    }

    .cancel-timeline-stage.completed .stage-time[b-sfjbrdovv1] {
        background: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
        font-weight: 600;
    }

    .cancel-timeline-stage .stage-badge[b-sfjbrdovv1] {
        position: absolute;
        top: 4px;
        right: 4px;
        background: #155724;
        color: #fff;
        font-size: 9px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }

    /* Responsive for cancel timeline - maintain horizontal scroll */
    @media (max-width: 768px) {
        .cancel-timeline-section[b-sfjbrdovv1] {
            margin: 8px 12px;
        }

        .cancel-timeline-track[b-sfjbrdovv1] {
            flex-direction: row !important; /* Keep horizontal layout */
            flex-wrap: nowrap !important;
            min-width: 400px !important;
            gap: 12px;
        }

        /* Cancel info grid mobile layout */
        .cancel-info-grid[b-sfjbrdovv1] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px;
            padding: 12px;
        }

        /* Cancel grid positioning for mobile */
        .cancel-info-grid .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
        .cancel-info-grid .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
        .cancel-info-grid .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
        .cancel-info-grid .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
        .cancel-info-grid .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
        .cancel-info-grid .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
        .cancel-info-grid .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

        /* Keep horizontal timeline line positioning */
        .cancel-timeline-track[b-sfjbrdovv1]::after {
            left: 75px !important;
            right: 75px !important;
            top: 40px !important;
            height: 3px !important;
            width: auto !important;
        }

        .cancel-timeline-track[b-sfjbrdovv1]::before {
            left: 75px !important;
            top: 40px !important;
            height: 3px !important;
            width: calc((100% - 150px) * var(--cancel-timeline-progress, 0)) !important;
        }

        .cancel-timeline-stage[b-sfjbrdovv1] {
            flex-direction: column !important; /* Keep vertical layout for stages */
            text-align: center !important;
            justify-content: center;
            min-width: 110px !important;
            max-width: 130px !important;
        }

        .cancel-timeline-stage .stage-label[b-sfjbrdovv1] {
            max-width: 100px;
            margin-top: 60px; /* Position below icon */
        }
    }

    /* Edit Dialog Styles */
    .edit-dialog-content[b-sfjbrdovv1] {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .edit-label[b-sfjbrdovv1] {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 4px;
        display: block;
    }

    .edit-upload-container[b-sfjbrdovv1] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .edit-preview-image[b-sfjbrdovv1] {
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
        border: 2px solid #e9ecef;
        transition: border-color 0.2s ease;
    }

    .edit-preview-image:hover[b-sfjbrdovv1] {
        border-color: var(--primary-color, #ca3c19);
    }

    /* Desktop optimization */
    @media (min-width: 1200px) {
        [b-sfjbrdovv1] .trip-detail-modal .e-dialog {
            max-width: 900px;
        }

        .image-grid[b-sfjbrdovv1] {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
    }

    @media (min-width: 1400px) {
        [b-sfjbrdovv1] .trip-detail-modal .e-dialog {
            max-width: 1000px;
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        [b-sfjbrdovv1] .trip-detail-modal .e-dialog {
            width: 95% !important;
        }

        .info-grid[b-sfjbrdovv1] {
            grid-template-columns: repeat(2, 1fr);
        }

        /* Maintain consistent grid positioning */
        .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
        .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
        .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
        .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
        .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
        .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
        .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

        .timeline-track[b-sfjbrdovv1]::before {
            display: none;
        }

        .timeline-track[b-sfjbrdovv1] {
            flex-direction: column;
            gap: 8px;
        }

        .timeline-stage[b-sfjbrdovv1] {
            flex-direction: row;
            justify-content: flex-start;
            gap: 10px;
        }

        .stage-icon[b-sfjbrdovv1] {
            width: 32px;
            height: 32px;
            font-size: 12px;
            margin-bottom: 0;
        }

        .stage-badge[b-sfjbrdovv1] {
            right: auto;
            left: 24px;
        }

        .image-grid[b-sfjbrdovv1] {
            grid-template-columns: repeat(2, 1fr);
        }

        .image-card-thumb[b-sfjbrdovv1] {
            height: 140px;
        }
    }

    @media (max-width: 480px) {
        .image-grid[b-sfjbrdovv1] {
            grid-template-columns: 1fr;
        }
    }

    /* Loading Skeleton */
    .loading-skeleton[b-sfjbrdovv1] {
        padding: 20px;
    }

    .skeleton-header[b-sfjbrdovv1] {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .skeleton-content[b-sfjbrdovv1] {
        padding: 16px;
    }

    .skeleton-section[b-sfjbrdovv1] {
        margin-bottom: 24px;
    }

    .skeleton-item[b-sfjbrdovv1] {
        background: #e9ecef;
        border-radius: 4px;
    }

    .skeleton-animate[b-sfjbrdovv1] {
        animation: skeleton-pulse-b-sfjbrdovv1 1.5s ease-in-out infinite;
    }

    @keyframes skeleton-pulse-b-sfjbrdovv1 {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

/* Change Location & Return Goods & Not Delivery Buttons */
.btn-change-location[b-sfjbrdovv1],
.btn-return-goods[b-sfjbrdovv1],
.btn-not-delivery[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.btn-change-location[b-sfjbrdovv1] {
    margin-left: auto;
}

.btn-change-location:hover[b-sfjbrdovv1],
.btn-return-goods:hover[b-sfjbrdovv1],
.btn-not-delivery:hover[b-sfjbrdovv1] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

/* Not Delivery Toggle Switch */
.not-delivery-toggle-wrapper[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
}

.not-delivery-toggle-label[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.toggle-text[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 500;
}

.toggle-text i[b-sfjbrdovv1] {
    font-size: 11px;
}

.toggle-switch[b-sfjbrdovv1] {
    position: relative;
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"][b-sfjbrdovv1] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-sfjbrdovv1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(108, 117, 125, 0.5);
    border: 1px solid rgba(108, 117, 125, 0.7);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.toggle-slider[b-sfjbrdovv1]::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-slider.active[b-sfjbrdovv1] {
    background: rgba(220, 53, 69, 0.9);
    border-color: rgba(220, 53, 69, 1);
}

.toggle-slider.active[b-sfjbrdovv1]::before {
    transform: translateX(20px);
}

.toggle-switch:hover .toggle-slider:not(.active)[b-sfjbrdovv1] {
    background: rgba(108, 117, 125, 0.6);
    border-color: rgba(108, 117, 125, 0.8);
}

.toggle-switch:hover .toggle-slider.active[b-sfjbrdovv1] {
    background: rgba(200, 35, 51, 1);
    border-color: rgba(200, 35, 51, 1);
}

.toggle-switch.disabled[b-sfjbrdovv1] {
    cursor: not-allowed;
    opacity: 0.5;
}

.toggle-switch.disabled .toggle-slider[b-sfjbrdovv1] {
    cursor: not-allowed;
}

/* Maintain old button styles for backward compatibility */
.btn-not-delivery.active:hover[b-sfjbrdovv1] {
    background: rgba(200, 35, 51, 1);
    border-color: rgba(200, 35, 51, 1);
}

.btn-not-delivery:disabled[b-sfjbrdovv1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-change-location i[b-sfjbrdovv1],
.btn-return-goods i[b-sfjbrdovv1] {
    font-size: 11px;
}

.change-location-badge[b-sfjbrdovv1] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #28a745;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-color, #ca3c19);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes pulse-badge-b-sfjbrdovv1 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Cancelled Lệnh Section Styles */
.cancelled-lenh-section[b-sfjbrdovv1] {
    margin: 10px 16px;
    border: 2px solid #FF9800;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    animation: slideDown-b-sfjbrdovv1 0.2s ease;
}

.cancelled-header[b-sfjbrdovv1] {
    background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
    color: #fff;
}

.cancelled-header i[b-sfjbrdovv1] {
    color: #fff !important;
}

.cancelled-count[b-sfjbrdovv1] {
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

.cancelled-lenh-card[b-sfjbrdovv1] {
    border-bottom: 1px solid #FFE0B2;
    background: #FFF5F0;
}

.cancelled-lenh-card:last-child[b-sfjbrdovv1] {
    border-bottom: none;
}

.cancelled-lenh-header[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(90deg, #FFF3E0 0%, #FFE0B2 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #FFCC80;
}

.cancelled-lenh-header:hover[b-sfjbrdovv1] {
    background: linear-gradient(90deg, #FFE0B2 0%, #FFCC80 100%);
}

.cancelled-lenh-badge[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #E65100;
}

.cancelled-lenh-badge i[b-sfjbrdovv1] {
    font-size: 14px;
    color: #FF5722;
}

.cancelled-lenh-info[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.image-counter[b-sfjbrdovv1] {
    font-size: 11px;
    font-weight: 600;
    color: #F57C00;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.15);
    border-radius: 12px;
}

.cancelled-lenh-info i[b-sfjbrdovv1] {
    font-size: 12px;
    color: #FF5722;
    transition: transform 0.2s ease;
}

.cancelled-lenh-content[b-sfjbrdovv1] {
    padding: 14px;
    background: #fff;
    animation: slideDown-b-sfjbrdovv1 0.2s ease;
}

.cancelled-images-grid[b-sfjbrdovv1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.cancelled-badge[b-sfjbrdovv1] {
    background: #FF5722 !important;
}

.no-images-placeholder[b-sfjbrdovv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #FAFAFA;
    border: 2px dashed #FFCC80;
    border-radius: 8px;
    color: #9E9E9E;
}

.no-images-placeholder i[b-sfjbrdovv1] {
    font-size: 32px;
    margin-bottom: 10px;
    color: #BDBDBD;
}

.no-images-placeholder span[b-sfjbrdovv1] {
    font-size: 12px;
    font-weight: 500;
}

.cancelled-lenh-reason[b-sfjbrdovv1] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #FFF8E1;
    border-left: 3px solid #FFA726;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #E65100;
}

.cancelled-lenh-reason strong[b-sfjbrdovv1] {
    font-weight: 700;
    color: #D84315;
}

/* Responsive styles for cancelled section */
@media (max-width: 768px) {
    .cancelled-images-grid[b-sfjbrdovv1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cancelled-lenh-header[b-sfjbrdovv1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cancelled-lenh-info[b-sfjbrdovv1] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .cancelled-images-grid[b-sfjbrdovv1] {
        grid-template-columns: 1fr;
    }
}

/* Export Command Section Styles */
.export-command-section[b-sfjbrdovv1] {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-command-header[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.export-command-header .header-left[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-qty-cards[b-sfjbrdovv1] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
}

.export-qty-card[b-sfjbrdovv1] {
    position: relative;
    background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
    border: 1px solid rgba(202, 60, 25, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.08);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 400px;
}

.export-qty-card:hover[b-sfjbrdovv1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(202, 60, 25, 0.15);
    border-color: var(--primary-color, #ca3c19);
}

.export-qty-card-header[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.export-qty-card-header i[b-sfjbrdovv1] {
    color: var(--primary-color, #ca3c19);
    font-size: 10px;
}

.export-qty-card-header .cmd-name[b-sfjbrdovv1] {
    font-weight: 700;
    font-size: 11px;
    color: var(--primary-color, #ca3c19);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.export-qty-card-body[b-sfjbrdovv1] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex: 1;
    align-items: center;
}

.warehouse-info[b-sfjbrdovv1],
.quantity-info[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #495057;
}

.warehouse-info i[b-sfjbrdovv1],
.quantity-info i[b-sfjbrdovv1] {
    color: #6c757d;
    font-size: 9px;
    width: 12px;
    flex-shrink: 0;
}

.warehouse-info span[b-sfjbrdovv1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quantity-info span[b-sfjbrdovv1] {
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
}

.export-qty-card-actions[b-sfjbrdovv1] {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-edit-tiny[b-sfjbrdovv1],
.btn-delete-tiny[b-sfjbrdovv1] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-edit-tiny[b-sfjbrdovv1] {
    color: #0c5460;
}

.btn-edit-tiny:hover[b-sfjbrdovv1] {
    background: #0c5460;
    color: #fff;
    transform: scale(1.1);
}

.btn-delete-tiny[b-sfjbrdovv1] {
    color: #dc3545;
}

.btn-delete-tiny:hover:not(:disabled)[b-sfjbrdovv1] {
    background: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

.btn-delete-tiny:disabled[b-sfjbrdovv1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.no-qty-data[b-sfjbrdovv1] {
    padding: 12px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 11px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px dashed #dee2e6;
}

/* Responsive for export cards */
@media (max-width: 768px) {
    .export-command-section[b-sfjbrdovv1] {
        grid-column: span 2;
    }

    .export-qty-cards[b-sfjbrdovv1] {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Dialog size optimization for mobile */
    [b-sfjbrdovv1] .responsive-modal {
        width: 95% !important;
        height: 95vh !important;
        margin: 2.5vh auto !important;
        max-width: none !important;
        left: 2.5% !important;
        top: 2.5vh !important;
    }
    
    [b-sfjbrdovv1] .responsive-modal .e-dlg-container {
        width: 100% !important;
        height: 100% !important;
    }
    
    [b-sfjbrdovv1] .trip-detail-modal .e-dlg-header-content {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Header bar - horizontal scroll */
    .trip-header-bar[b-sfjbrdovv1] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 8px 12px;
    }
    
    .trip-header-bar[b-sfjbrdovv1]::-webkit-scrollbar {
        height: 3px;
    }
    
    .trip-header-bar[b-sfjbrdovv1]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .trip-header-bar[b-sfjbrdovv1]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }

    .header-item[b-sfjbrdovv1] {
        flex-shrink: 0 !important;
        white-space: nowrap;
        font-size: 10px;
        padding: 3px 8px;
        min-width: fit-content;
    }
    
    .header-item.primary[b-sfjbrdovv1] {
        font-size: 11px;
    }

    /* Info grid - responsive grid layout for mobile */
    .info-grid[b-sfjbrdovv1] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        padding: 12px;
        background: #f8f9fa;
    }

    /* Mobile grid positioning - consistent layout */
    .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
    .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
    .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
    .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
    .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
    .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
    .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

    .info-item[b-sfjbrdovv1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14px 12px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        gap: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.2s ease;
        text-align: center;
    }

    /* Special layout for vehicle info (truck icon) */
    .info-item:nth-child(5)[b-sfjbrdovv1],
    .info-item.has-replacement[b-sfjbrdovv1] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 14px 12px;
    }

    .info-item:nth-child(5) i.fa-truck[b-sfjbrdovv1],
    .info-item.has-replacement i.fa-truck[b-sfjbrdovv1] {
        font-size: 18px;
        color: var(--primary-color, #ca3c19);
        margin-bottom: 8px;
        display: block;
    }

    /* Vehicle data rows - each label:value pair on separate line */
    .vehicle-data-row[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 4px;
        width: 100%;
    }

    .vehicle-data-row:last-of-type[b-sfjbrdovv1] {
        margin-bottom: 0;
    }

    .info-item:nth-child(5) .label[b-sfjbrdovv1],
    .info-item.has-replacement .label[b-sfjbrdovv1] {
        font-weight: 600;
        color: #6c757d;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
        white-space: nowrap;
    }

    .info-item:nth-child(5) .value[b-sfjbrdovv1],
    .info-item.has-replacement .value[b-sfjbrdovv1] {
        font-weight: 500;
        color: #2c3e50;
        font-size: 12px;
        margin: 0;
        word-break: break-word;
    }

    /* Newest indicator */
    .info-item:nth-child(5) .newest-indicator[b-sfjbrdovv1],
    .info-item.has-replacement .newest-indicator[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 6px;
        gap: 4px;
    }

    .info-item:hover[b-sfjbrdovv1] {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        border-color: #d1ecf1;
    }

    .info-item i[b-sfjbrdovv1] {
        font-size: 14px;
        color: var(--primary-color, #ca3c19);
        margin-bottom: 6px;
        display: block;
    }

    .info-item .label[b-sfjbrdovv1] {
        font-weight: 600;
        color: #6c757d;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 4px 0;
        line-height: 1.2;
    }

    .info-item .value[b-sfjbrdovv1] {
        font-weight: 500;
        color: #2c3e50;
        font-size: 12px;
        line-height: 1.4;
        margin: 0;
        word-break: break-word;
        hyphens: auto;
    }

    /* Remove any conflicting styles for better alignment */
    .info-item *:last-child[b-sfjbrdovv1] {
        margin-bottom: 0;
    }

    /* Special styling for complex info items */
    .info-item.has-replacement[b-sfjbrdovv1] {
        border-left: 3px solid #28a745;
        background: linear-gradient(135deg, #fff, #f8fff9);
    }

    .newest-indicator[b-sfjbrdovv1] {
        color: #ffc107;
        font-size: 10px;
        margin-left: 4px;
        display: inline-block;
    }

    /* Timeline - horizontal scroll optimized */
    .timeline-section[b-sfjbrdovv1] {
        padding: 12px 12px 20px 12px; /* Added bottom padding to prevent scrollbar overlap */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        background: #f8f9fa;
        border-radius: 8px;
        margin: 8px 12px;
    }

    .timeline-track[b-sfjbrdovv1] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 400px; /* Base min-width for 2-3 stages */
        overflow: visible;
        padding: 0 20px;
        align-items: center;
        position: relative;
        height: 80px; /* Fixed height for consistent positioning */
    }

    /* Specific min-widths based on stage count */
    .timeline-track.stage-count-2[b-sfjbrdovv1] {
        min-width: 300px; /* Smaller width for container (2 stages) */
    }

    .timeline-track.stage-count-3[b-sfjbrdovv1] {
        min-width: 400px; /* Medium width for truck (3 stages) */
    }

    .timeline-track.stage-count-4[b-sfjbrdovv1],
    .timeline-track.stage-count-5[b-sfjbrdovv1],
    .timeline-track.stage-count-6[b-sfjbrdovv1] {
        min-width: 600px; /* Larger width for trips with changes */
    }
    
    /* Enhanced scrollbar styling */
    .timeline-section[b-sfjbrdovv1]::-webkit-scrollbar {
        height: 6px;
    }
    
    .timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        margin: 0 10px;
    }
    
    .timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--primary-color, #ca3c19), var(--primary-hover, #d96b47));
        border-radius: 3px;
    }

    .timeline-section[b-sfjbrdovv1]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
    }

    /* Timeline stages - prevent shrinking and optimize layout */
    .timeline-stage[b-sfjbrdovv1] {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: 110px !important;
        max-width: 130px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 3;
        height: 80px; /* Fixed height to ensure consistent alignment */
    }

    .stage-content[b-sfjbrdovv1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    /* Stage icons/circles - position exactly at line level */
    .stage-icon[b-sfjbrdovv1] {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;
        position: absolute;
        top: 24px !important; /* Center at 40px - 16px (half icon height) = 24px */
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        background: #fff;
        border: 2px solid #e9ecef;
    }

    .stage-label[b-sfjbrdovv1] {
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-break: break-word;
        hyphens: auto;
        font-weight: 500;
        color: #495057;
        margin-top: 60px; /* Position below the icon */
        max-width: 100px;
        padding: 0 4px;
    }

    /* Button containers - horizontal scroll */
    .btn-change-location[b-sfjbrdovv1],
    .btn-return-goods[b-sfjbrdovv1] {
        flex-shrink: 0 !important;
        padding: 4px 8px;
        font-size: 10px;
        min-width: fit-content;
    }

    /* Change location badge */
    .change-location-badge[b-sfjbrdovv1] {
        font-size: 8px;
        padding: 2px 4px;
    }

    /* Modal container padding */
    .trip-modal-container[b-sfjbrdovv1] {
        padding: 0;
        font-size: 11px;
    }

    /* Sections padding */
    .section-title[b-sfjbrdovv1] {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Status badges */
    .status-pill[b-sfjbrdovv1] {
        font-size: 9px;
        padding: 3px 8px;
    }

    /* Replacement history mobile styles */
    .replacement-history[b-sfjbrdovv1] {
        padding: 10px 12px;
    }

    .replacement-item[b-sfjbrdovv1] {
        padding: 8px;
        margin-bottom: 8px;
    }

    /* Change location dialog mobile styles */
    [b-sfjbrdovv1] .change-location-modal {
        width: 95% !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    /* Pickup locations - better mobile layout */
    .pickup-locations[b-sfjbrdovv1] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
        padding: 8px;
    }

    .pickup-location-item[b-sfjbrdovv1] {
        padding: 8px;
        font-size: 11px;
    }

    /* Export commands section */
    .export-commands-container[b-sfjbrdovv1] {
        padding: 10px 12px;
    }

    /* Ensure timeline line positioning on mobile - optimized for horizontal scroll */
    .timeline-track[b-sfjbrdovv1]::after {
        content: '';
        position: absolute;
        left: 75px !important;
        right: 75px !important;
        top: 40px !important; /* Fixed position - center of 80px height */
        height: 3px !important;
        background: #dee2e6 !important;
        border-radius: 2px;
        z-index: 1;
    }

    .timeline-track[b-sfjbrdovv1]::before {
        content: '';
        position: absolute;
        left: 75px !important;
        top: 40px !important; /* Same as ::after */
        height: 3px !important;
        border-radius: 2px;
        transition: all 0.4s ease-in-out;
        z-index: 2;
    }

    /* Adjust progress percentages for mobile viewport with better spacing */
    /* Container (2 stages) mobile progress */
    .timeline-track.stage-count-2.progress-pickuped[b-sfjbrdovv1]::before {
        width: calc((100% - 150px) * 0.5) !important;
        background: linear-gradient(90deg, #155724 0%, #155724 100%) !important;
    }

    .timeline-track.stage-count-2.progress-delivered[b-sfjbrdovv1]::before {
        width: calc((100% - 150px) * 1) !important;
        background: linear-gradient(90deg, #155724 0%, #155724 50%, #28a745 50%, #28a745 100%) !important;
    }

    /* Truck (3+ stages) mobile progress */
    .timeline-track.stage-count-3.progress-checked[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-4.progress-checked[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-5.progress-checked[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-6.progress-checked[b-sfjbrdovv1]::before {
        width: calc((100% - 150px) * 0.33) !important;
        background: linear-gradient(90deg, #0c5460 0%, #0c5460 100%) !important;
    }

    .timeline-track.stage-count-3.progress-pickuped[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-4.progress-pickuped[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-5.progress-pickuped[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-6.progress-pickuped[b-sfjbrdovv1]::before {
        width: calc((100% - 150px) * 0.66) !important;
        background: linear-gradient(90deg, #0c5460 0%, #0c5460 50%, #155724 50%, #155724 100%) !important;
    }

    .timeline-track.stage-count-3.progress-delivered[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-4.progress-delivered[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-5.progress-delivered[b-sfjbrdovv1]::before,
    .timeline-track.stage-count-6.progress-delivered[b-sfjbrdovv1]::before {
        width: calc((100% - 150px) * 1) !important;
        background: linear-gradient(90deg, #0c5460 0%, #0c5460 33%, #155724 33%, #155724 66%, #28a745 66%, #28a745 100%) !important;
    }

    /* Additional timeline enhancements */
    .timeline-stage.completed .stage-icon[b-sfjbrdovv1] {
        background: #28a745 !important;
        color: white !important;
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 2px #28a745, 0 2px 4px rgba(40, 167, 69, 0.3);
    }

    .timeline-stage.current .stage-icon[b-sfjbrdovv1] {
        background: var(--primary-color, #ca3c19) !important;
        color: white !important;
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 2px var(--primary-color, #ca3c19), 0 2px 4px rgba(202, 60, 25, 0.3);
        animation: pulse-b-sfjbrdovv1 2s infinite;
    }

    .timeline-stage.pending .stage-icon[b-sfjbrdovv1] {
        background: #f8f9fa !important;
        color: #6c757d !important;
        border: 2px solid #e9ecef !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    @keyframes pulse-b-sfjbrdovv1 {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
}

/* Tablet and larger mobile devices */
@media (min-width: 480px) and (max-width: 768px) {
    .info-grid[b-sfjbrdovv1] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* Tablet grid positioning */
    .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
    .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
    .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
    .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
    .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
    .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
    .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

    .timeline-track[b-sfjbrdovv1] {
        min-width: 700px !important;
    }

    .timeline-stage[b-sfjbrdovv1] {
        min-width: 120px !important;
        max-width: 140px !important;
    }
}

/* Large tablets and small desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    .info-grid[b-sfjbrdovv1] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Large tablet grid positioning */
    .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
    .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
    .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
    .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
    .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
    .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
    .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

    .timeline-section[b-sfjbrdovv1] {
        overflow-x: visible !important;
    }

    .timeline-track[b-sfjbrdovv1] {
        min-width: auto !important;
    }
}

/* Desktop - consistent 2 columns layout */
@media (min-width: 1025px) {
    .info-grid[b-sfjbrdovv1] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
        padding: 16px;
    }

    /* Desktop grid positioning */
    .info-item:nth-child(1)[b-sfjbrdovv1] { grid-column: 1; grid-row: 1; }
    .info-item:nth-child(2)[b-sfjbrdovv1] { grid-column: 2; grid-row: 1; }
    .info-item:nth-child(3)[b-sfjbrdovv1] { grid-column: 1; grid-row: 2; }
    .info-item:nth-child(4)[b-sfjbrdovv1] { grid-column: 2; grid-row: 2; }
    .info-item:nth-child(5)[b-sfjbrdovv1] { grid-column: 1; grid-row: 3; }
    .info-item:nth-child(6)[b-sfjbrdovv1] { grid-column: span 2; grid-row: 4; }
    .export-command-section[b-sfjbrdovv1] { grid-column: span 2 !important; grid-row: 5; }

    .info-item[b-sfjbrdovv1] {
        /*padding: 16px;*/
    }

    .timeline-section[b-sfjbrdovv1] {
        overflow-x: visible !important;
        margin: 16px;
        padding: 16px;
    }

    .timeline-track[b-sfjbrdovv1] {
        min-width: auto !important;
        padding: 0 0px;
    }

    .timeline-stage[b-sfjbrdovv1] {
        min-width: 140px !important;
        max-width: 160px !important;
    }
}

/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/ManageBarger.razor.rz.scp.css */
/* Button icon style from BookTruck_NewV2 */
.btn[b-4wrjs6chv0] {
    padding: 6px 6px;
    font-size: 0.75rem;
    min-height: 32px;
    border-radius: 6px;
    min-width: 32px;
    max-width: 40px;
    justify-content: center;
    position: relative;
}

    .btn[title]:hover[b-4wrjs6chv0]::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
    }

    .btn[title]:hover[b-4wrjs6chv0]::before {
        content: '';
        position: absolute;
        bottom: 95%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }
/* BookTruck Page Specific Styles */

/* Sticky Table Header */
.sticky-table-header[b-4wrjs6chv0] {
    position: fixed;
    top: 172px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 90;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: left 0.3s ease;
}

.sidebar-collapsed .sticky-table-header[b-4wrjs6chv0] {
    left: var(--sidebar-collapsed-width);
}

.trips-table-header[b-4wrjs6chv0] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
}

    .trips-table-header thead[b-4wrjs6chv0] {
        background: #f8f9fa;
    }

    .trips-table-header th[b-4wrjs6chv0] {
        padding: 8px 6px;
        text-align: left;
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .trips-table-header th.sortable[b-4wrjs6chv0] {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
        }

            .trips-table-header th.sortable:hover[b-4wrjs6chv0] {
                background-color: #e9ecef;
            }

            .trips-table-header th.sortable i[b-4wrjs6chv0] {
                margin-left: 4px;
                font-size: 0.7rem;
            }

    /* Column widths for sticky header - must match trips-table */
    .trips-table-header .col-checkbox[b-4wrjs6chv0] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table-header .col-stt[b-4wrjs6chv0] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table-header .col-code[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table-header .col-vehicle-name[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table-header .col-ship-type[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table-header .col-captain[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table-header .col-phone[b-4wrjs6chv0] {
        min-width: 110px;
    }

    .trips-table-header .col-registration-photo[b-4wrjs6chv0] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table-header .col-team[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table-header .col-departure[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table-header .col-receive-date[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table-header .col-port-arrival[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table-header .col-port-departure[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table-header .col-completion[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table-header .col-notes[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table-header .col-special[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table-header .col-actions[b-4wrjs6chv0] {
        min-width: 100px;
        position: fixed;
        right: 3px;
        z-index: 10;
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
    }

/* Modal Container Variants */
.modal-container--wide[b-4wrjs6chv0] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-4wrjs6chv0] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-4wrjs6chv0] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

.filters-grid[b-4wrjs6chv0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-4wrjs6chv0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-end;
}

.filter-input[b-4wrjs6chv0], .filter-select[b-4wrjs6chv0] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

    .filter-input:focus[b-4wrjs6chv0], .filter-select:focus[b-4wrjs6chv0] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }


/* Table and Grid Layout Styles */
.manage-trips-grid-wrapper[b-4wrjs6chv0] {
    position: fixed;
    top: 215px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 61px;
    overflow-x: auto;
    overflow-y: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

    /* Custom Scrollbar Styles */
    .manage-trips-grid-wrapper[b-4wrjs6chv0]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .manage-trips-grid-wrapper[b-4wrjs6chv0]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .manage-trips-grid-wrapper[b-4wrjs6chv0]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary-color, #ca3c19), var(--primary-hover, #d96b47));
        border-radius: 10px;
        border: 2px solid #f1f1f1;
    }

        .manage-trips-grid-wrapper[b-4wrjs6chv0]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
        }

    .manage-trips-grid-wrapper[b-4wrjs6chv0]::-webkit-scrollbar-corner {
        background: #f1f1f1;
    }

/* Firefox Scrollbar */
.manage-trips-grid-wrapper[b-4wrjs6chv0] {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color, #ca3c19) #f1f1f1;
}

.main-planning-grid[b-4wrjs6chv0] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

    .main-planning-grid .rz-datatable-data[b-4wrjs6chv0] {
        height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

.page-content[b-4wrjs6chv0] {
    padding-top: 125px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-4wrjs6chv0] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .manage-trips-grid-wrapper[b-4wrjs6chv0] {
    left: var(--sidebar-collapsed-width);
}

.filter-label[b-4wrjs6chv0] {
    font-size: 0.65rem;
    margin-bottom: 2px;
    color: #6c757d;
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-4wrjs6chv0] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }

    .manage-trips-grid-wrapper[b-4wrjs6chv0] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }

    .sticky-table-header[b-4wrjs6chv0] {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent;
        box-shadow: none;
        overflow-x: visible;
        overflow-y: visible;
        transition: none !important;
    }

    .pager-container[b-4wrjs6chv0] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        border-top: 1px solid #dee2e6;
        padding: 12px 16px;
        box-shadow: none;
        transition: none !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .page-content[b-4wrjs6chv0] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-4wrjs6chv0],
    .filters-container[b-4wrjs6chv0] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .manage-trips-grid-wrapper[b-4wrjs6chv0],
    .manage-trips-grid-wrapper[b-4wrjs6chv0] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .sticky-table-header[b-4wrjs6chv0],
    .sticky-table-header[b-4wrjs6chv0] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    .sidebar-collapsed .pager-container[b-4wrjs6chv0],
    .pager-container[b-4wrjs6chv0] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-4wrjs6chv0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-4wrjs6chv0] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-4wrjs6chv0] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-4wrjs6chv0] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-4wrjs6chv0] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-4wrjs6chv0] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-4wrjs6chv0] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-4wrjs6chv0] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-4wrjs6chv0] {
            display: none !important;
        }

        .mobile-filters-content[b-4wrjs6chv0] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
    }

    .filters-grid[b-4wrjs6chv0] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-4wrjs6chv0] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-4wrjs6chv0] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }

    .mobile-compact-filters .filter-group[b-4wrjs6chv0] {
        margin-bottom: 4px;
    }

    .filter-label[b-4wrjs6chv0] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
        display: none;
    }

    .mobile-compact-filters .filter-label[b-4wrjs6chv0] {
        display: block;
    }

    /* Mobile subtasks switches */
    .subtasks-level2[b-4wrjs6chv0] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: center;
    }

        .subtasks-level2 .switch[b-4wrjs6chv0] {
            padding: 0.3rem 0.8rem;
            font-size: 0.75rem;
            min-width: 50px;
        }

    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-4wrjs6chv0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        padding: 6px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 8px;
        margin-top: 8px;
    }

        .btn-fuction-container .filter-group[b-4wrjs6chv0] {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            min-width: 40px;
        }

    .filter-input[b-4wrjs6chv0], .filter-select[b-4wrjs6chv0] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }

    .btn-group-function[b-4wrjs6chv0] {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .filter-group-btn[b-4wrjs6chv0] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }

        .filter-group-btn .btn[b-4wrjs6chv0] {
            flex: 1;
            justify-content: center;
            font-size: 0.8rem;
            padding: 8px 12px;
            min-height: 36px;
            min-width: 40px;
            margin: 0 4px;
            max-width: 100px;
        }

    /* Mobile button icons with tooltips */
    .btn[title][b-4wrjs6chv0] {
        position: relative;
    }

        .btn[title]:hover[b-4wrjs6chv0]::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }

        .btn[title]:hover[b-4wrjs6chv0]::before {
            content: '';
            position: absolute;
            bottom: 95%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }

    /* Mobile grid adjustments */
    .rz-grid-table[b-4wrjs6chv0] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }

        .rz-grid-table th[b-4wrjs6chv0],
        .rz-grid-table td[b-4wrjs6chv0] {
            padding: 6px 4px;
            font-size: 0.75rem;
            min-width: 80px;
        }

            /* Hide less important columns on mobile */
            .rz-grid-table th:nth-child(n+6)[b-4wrjs6chv0],
            .rz-grid-table td:nth-child(n+6)[b-4wrjs6chv0] {
                display: none;
            }

            /* Keep essential columns visible */
            .rz-grid-table th:nth-child(1)[b-4wrjs6chv0],
            .rz-grid-table td:nth-child(1)[b-4wrjs6chv0],
            .rz-grid-table th:nth-child(2)[b-4wrjs6chv0],
            .rz-grid-table td:nth-child(2)[b-4wrjs6chv0],
            .rz-grid-table th:nth-child(3)[b-4wrjs6chv0],
            .rz-grid-table td:nth-child(3)[b-4wrjs6chv0],
            .rz-grid-table th:last-child[b-4wrjs6chv0],
            .rz-grid-table td:last-child[b-4wrjs6chv0] {
                display: table-cell;
            }

    /* Trips table mobile scroll */
    .trips-table[b-4wrjs6chv0] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .trips-table th[b-4wrjs6chv0],
        .trips-table td[b-4wrjs6chv0] {
            white-space: nowrap;
            min-width: 100px;
        }

    /* Status tags mobile responsive */
    .status-tags[b-4wrjs6chv0] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }

    .status-tag[b-4wrjs6chv0] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }

    /* Notification badge mobile adjustments */
    .notification-badge[b-4wrjs6chv0] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }

    /* Button mobile improvements - Icon only */
    .btn[b-4wrjs6chv0] {
        padding: 6px 6px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 6px;
        min-width: 32px;
        max-width: 40px;
        justify-content: center;
        position: relative;
    }

    /* Specific styles for function buttons container */
    .btn-fuction-container .btn[b-4wrjs6chv0] {
        padding: 5px 5px;
        min-height: 30px;
        min-width: 30px;
        max-width: 35px;
        font-size: 0.7rem;
    }

        .btn-fuction-container .btn i[b-4wrjs6chv0] {
            font-size: 0.8rem;
        }

    /* Modal responsive for mobile */
    .modal-container--wide[b-4wrjs6chv0] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }
}

/* Status Tags Styles */
.status-tags[b-4wrjs6chv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-4wrjs6chv0] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* Legacy status styles */
.status-chua-thuc-hien[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

.status-dang-thuc-hien[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-hoan-thanh[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-huy[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #dc2626;
}

/* Hover effects */
.status-tag:hover[b-4wrjs6chv0] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-4wrjs6chv0] {
    animation: badge-pulse-b-4wrjs6chv0 2s infinite, badge-glow-b-4wrjs6chv0 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-4wrjs6chv0 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-4wrjs6chv0 {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-4wrjs6chv0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-4wrjs6chv0 2.5s infinite;
}

@keyframes badge-shine-b-4wrjs6chv0 {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-4wrjs6chv0] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* ManageBarger Specific Styles */
.grouped-schedules-container[b-4wrjs6chv0] {
    padding: 16px 16px 16px 16px;
    min-width: 2200px;
}

/* Radzen Grouped Grid Styles */
.radzen-grouped-grid-container[b-4wrjs6chv0] {
    padding: 16px;
    height: calc(100vh - 275px);
    overflow: hidden;
    position: relative;
}

    /* Fixed header for Radzen DataGrid */
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        border-bottom: 2px solid #dee2e6;
        flex-shrink: 0;
    }

        .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-header th {
            background: #f8f9fa !important;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
            padding: 12px 8px;
            text-align: left;
            position: relative;
        }

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data {
        flex: 1;
        overflow-y: auto;
        overflow-x: visible;
    }

    /* Group header styling */
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-group-header {
        background: #e9ecef;
        font-weight: 600;
        color: #495057;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 9;
    }

    /* Improve row styling */
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data tr {
        border-bottom: 1px solid #dee2e6;
    }

        .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data tr:hover {
            background-color: #f5f5f5;
        }

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data td {
        padding: 8px;
        vertical-align: middle;
        border-right: 1px solid #e9ecef;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .radzen-grouped-grid-container[b-4wrjs6chv0] {
        height: calc(100vh - 280px);
        padding: 8px;
    }

        .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-header th {
            padding: 8px 4px;
            font-size: 12px;
        }

        .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data td {
            padding: 6px 4px;
            font-size: 12px;
        }
}

/* Schedule display in group header */
.schedule-display[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .schedule-display .schedule-id[b-4wrjs6chv0] {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary-color, #ca3c19);
    }

    .schedule-display .schedule-type[b-4wrjs6chv0] {
        font-size: 10px;
        font-weight: 700;
        color: #495057;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 3px 9px;
        border-radius: 10px;
        border: 1px solid #dee2e6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Custom Group Header Template */
[b-4wrjs6chv0] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    width: 100%;
    gap: 16px;
}

.group-header-left[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.group-schedule-id[b-4wrjs6chv0] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
}

.group-schedule-type[b-4wrjs6chv0] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-header-center[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.group-info[b-4wrjs6chv0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.group-divider[b-4wrjs6chv0] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.group-header-right[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 250px;
    justify-content: flex-end;
}

.group-stat[b-4wrjs6chv0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark, #b8563e);
    background: rgba(202, 60, 25, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(202, 60, 25, 0.2);
}

.schedule-group-card[b-4wrjs6chv0] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

    .schedule-group-card:hover[b-4wrjs6chv0] {
        border-color: var(--primary-color, #ca3c19);
        box-shadow: 0 3px 12px rgba(202, 60, 25, 0.12);
        transform: translateY(-1px);
    }

.schedule-group-header[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    background: linear-gradient(90deg, #fafafa 0%, #ffffff 100%);
    gap: 16px;
    border-left: 4px solid var(--primary-color, #ca3c19);
    border-bottom: 1px solid #e9ecef;
}

.header-left[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
}

/* Checkbox styles removed
.group-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
    margin: 0;
}

.detail-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}
*/

.schedule-id[b-4wrjs6chv0] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    min-width: 50px;
    letter-spacing: -0.2px;
}

.schedule-type[b-4wrjs6chv0] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pending-count[b-4wrjs6chv0] {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    animation: pulse-soft-b-4wrjs6chv0 2s ease-in-out infinite;
}

@keyframes pulse-soft-b-4wrjs6chv0 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.95;
    }
}

.pending-count i[b-4wrjs6chv0] {
    font-size: 9px;
}

.header-center[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.info-item[b-4wrjs6chv0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.info-divider[b-4wrjs6chv0] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.header-right[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    justify-content: flex-end;
}

.stat-compact[b-4wrjs6chv0] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .stat-compact:hover[b-4wrjs6chv0] {
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.15);
    }

    .stat-compact.pickup[b-4wrjs6chv0] {
        background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
    }

    .stat-compact.delivery[b-4wrjs6chv0] {
        background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
        border-color: #0c5460;
    }

        .stat-compact.delivery:hover[b-4wrjs6chv0] {
            border-color: #0c5460;
        }

.stat-compact-label[b-4wrjs6chv0] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-compact-value[b-4wrjs6chv0] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark, #b8563e);
}

    .stat-compact-value[b-4wrjs6chv0]::after {
        content: ' kg';
        font-size: 9px;
        font-weight: 500;
        color: #6c757d;
        margin-left: 2px;
    }

.schedule-group-details[b-4wrjs6chv0] {
    padding: 0;
    border-top: 2px solid #f8f9fa;
    background: #fafbfc;
}

/* Table Wrapper - Enable sticky positioning */
.table-wrapper[b-4wrjs6chv0] {
    width: 100%;
    position: relative;
}

/* Trips Table Styles */
.trips-table[b-4wrjs6chv0] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
    font-size: 12px;
    background: transparent;
    position: relative;
}

    .trips-table thead[b-4wrjs6chv0] {
        background: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .trips-table th[b-4wrjs6chv0] {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 8px 12px;
        text-align: center;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .trips-table tbody tr[b-4wrjs6chv0] {
        transition: all 0.15s ease;
        border-bottom: 1px solid #f1f3f5;
    }

        .trips-table tbody tr:nth-child(even)[b-4wrjs6chv0] {
            background: #fcfcfc;
        }

        .trips-table tbody tr:hover[b-4wrjs6chv0] {
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

    .trips-table td[b-4wrjs6chv0] {
        padding: 8px 12px;
        text-align: center;
        font-size: 12px;
        vertical-align: middle;
    }

    .trips-table .col-checkbox[b-4wrjs6chv0] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table .col-stt[b-4wrjs6chv0] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table .col-code[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table .col-vehicle-name[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table .col-ship-type[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table .col-captain[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table .col-phone[b-4wrjs6chv0] {
        min-width: 110px;
    }

    .trips-table .col-registration-photo[b-4wrjs6chv0] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table .col-team[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table .col-departure[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table .col-receive-date[b-4wrjs6chv0] {
        min-width: 100px;
    }

    .trips-table .col-port-arrival[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table .col-port-departure[b-4wrjs6chv0] {
        min-width: 140px;
    }

    .trips-table .col-completion[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table .col-notes[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table .col-special[b-4wrjs6chv0] {
        min-width: 120px;
    }

    .trips-table .col-actions[b-4wrjs6chv0] {
        min-width: 100px;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table thead th.col-actions[b-4wrjs6chv0] {
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr td.col-actions[b-4wrjs6chv0] {
        background: #fff;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:nth-child(even) td.col-actions[b-4wrjs6chv0] {
        background: #fcfcfc;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:hover td.col-actions[b-4wrjs6chv0] {
        background: #fff;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

.no-trips-message[b-4wrjs6chv0] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

    .no-trips-message i[b-4wrjs6chv0] {
        margin-right: 8px;
        color: #cbd5e0;
    }

.status-badge[b-4wrjs6chv0] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
    text-transform: capitalize;
}

    .status-badge.status-notcheckin[b-4wrjs6chv0] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-checked[b-4wrjs6chv0] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-pickuped[b-4wrjs6chv0] {
        background: #ffe4c4;
        color: #e67e22;
    }

    .status-badge.status-delivered[b-4wrjs6chv0] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-cancel[b-4wrjs6chv0] {
        background: #f8d7da;
        color: #721c24;
    }

    .status-badge.status-changeddeliverycompany[b-4wrjs6chv0] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-waitingreturntowarehouse[b-4wrjs6chv0] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-returnedtowarehouse[b-4wrjs6chv0] {
        background: #d4edda;
        color: #155724;
    }

.special-status[b-4wrjs6chv0] {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

    .special-status:empty[b-4wrjs6chv0] {
        display: none;
    }

.btn-detail[b-4wrjs6chv0] {
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-detail:hover[b-4wrjs6chv0] {
        background: var(--primary-hover, #d96b47);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
    }

    .btn-detail i[b-4wrjs6chv0] {
        font-size: 10px;
    }

.btn-view-photo[b-4wrjs6chv0] {
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-view-photo:hover[b-4wrjs6chv0] {
        background: #138496;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }

    .btn-view-photo i[b-4wrjs6chv0] {
        font-size: 10px;
    }

.no-photo[b-4wrjs6chv0] {
    color: #adb5bd;
    font-style: italic;
    font-size: 11px;
}

.empty-state[b-4wrjs6chv0] {
    text-align: center;
    padding: 80px 20px;
    color: #adb5bd;
}

    .empty-state i[b-4wrjs6chv0] {
        color: #dee2e6;
        margin-bottom: 16px;
    }

    .empty-state p[b-4wrjs6chv0] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }

@media (max-width: 1400px) {
    .header-right[b-4wrjs6chv0] {
        min-width: 170px;
        gap: 8px;
    }

    .stat-compact[b-4wrjs6chv0] {
        padding: 3px 6px;
    }

    .stat-compact-value[b-4wrjs6chv0] {
        font-size: 12px;
    }

    .stat-compact-label[b-4wrjs6chv0] {
        font-size: 9px;
    }
}

@media (max-width: 1024px) {
    .schedule-group-header[b-4wrjs6chv0] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-left[b-4wrjs6chv0] {
        min-width: auto;
    }

    .header-center[b-4wrjs6chv0] {
        flex-basis: 100%;
        order: 3;
        margin-top: 4px;
        font-size: 11px;
        padding-left: 26px;
    }

    .header-right[b-4wrjs6chv0] {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .schedule-group-header[b-4wrjs6chv0] {
        padding: 8px 12px;
    }

    .schedule-id[b-4wrjs6chv0] {
        font-size: 12px;
    }

    .schedule-type[b-4wrjs6chv0] {
        font-size: 10px;
    }

    .stat-compact-label[b-4wrjs6chv0] {
        font-size: 8px;
    }

    .stat-compact-value[b-4wrjs6chv0] {
        font-size: 11px;
    }

    .header-right[b-4wrjs6chv0] {
        gap: 8px;
    }
}

/* Action Buttons */
.action-buttons[b-4wrjs6chv0] {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-change-company[b-4wrjs6chv0] {
    padding: 6px 10px;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-change-company:hover[b-4wrjs6chv0] {
        background: #b33518;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(202, 60, 25, 0.3);
    }

    .btn-change-company i[b-4wrjs6chv0] {
        font-size: 10px;
    }

.btn-cancel[b-4wrjs6chv0] {
    padding: 6px 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-cancel:hover[b-4wrjs6chv0] {
        background: #c82333;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    }

    .btn-cancel i[b-4wrjs6chv0] {
        font-size: 10px;
    }

/* Cancel Dialog Styles */
.cancel-dialog[b-4wrjs6chv0] {
    padding: 16px;
}

    .cancel-dialog textarea[b-4wrjs6chv0] {
        font-family: inherit;
        resize: vertical;
    }

/* Ensure dialog buttons are clickable */
[b-4wrjs6chv0] .e-dialog .e-footer-content button {
    pointer-events: auto !important;
    z-index: 1000;
    position: relative;
}

[b-4wrjs6chv0] .e-dialog .e-footer-content {
    pointer-events: auto !important;
}

/* Change Company Dialog */
.change-company-dialog[b-4wrjs6chv0] {
    padding: 16px;
}

    .change-company-dialog .form-group[b-4wrjs6chv0] {
        margin-bottom: 20px;
    }

    .change-company-dialog label[b-4wrjs6chv0] {
        display: block;
        font-weight: 600;
        font-size: 12px;
        color: #495057;
        margin-bottom: 8px;
    }

    .change-company-dialog .required[b-4wrjs6chv0] {
        color: #dc3545;
    }

    .change-company-dialog .arrow-container[b-4wrjs6chv0] {
        text-align: center;
        margin: 16px 0;
        color: var(--primary-color, #ca3c19);
        font-size: 24px;
    }

    /* Dropdown styles */
    .change-company-dialog[b-4wrjs6chv0]  .e-input-group,
    .change-company-dialog[b-4wrjs6chv0]  .e-ddl {
        font-size: 12px;
    }

    .change-company-dialog[b-4wrjs6chv0]  .item {
        display: flex;
        justify-content: space-between;
        padding: 8px;
    }

    .change-company-dialog[b-4wrjs6chv0]  .name {
        font-weight: 600;
        color: var(--primary-color, #ca3c19);
        min-width: 100px;
    }

    .change-company-dialog[b-4wrjs6chv0]  .city {
        color: #495057;
    }

    .change-company-dialog[b-4wrjs6chv0]  .head {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        font-weight: 700;
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

/* Pagination Styles */
.pager-container[b-4wrjs6chv0] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 50;
    background: white;
    border-top: 1px solid #dee2e6;
    padding: 12px 16px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sidebar-collapsed .pager-container[b-4wrjs6chv0] {
    left: var(--sidebar-collapsed-width);
}

.pager-left[b-4wrjs6chv0] {
    flex: 0 0 auto;
}

.pager-summary[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.summary-item[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
}

    .summary-item i[b-4wrjs6chv0] {
        color: var(--primary-color, #ca3c19);
        font-size: 14px;
    }

.summary-label[b-4wrjs6chv0] {
    color: #6c757d;
    font-weight: 600;
}

.summary-value[b-4wrjs6chv0] {
    color: #212529;
    font-weight: 700;
    font-size: 12px;
}

[b-4wrjs6chv0] .mainpager {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    position: static;
}

[b-4wrjs6chv0] .e-parentmsgbar {
    display: none;
}

@media (max-width: 768px) {
    .pager-container[b-4wrjs6chv0] {
        flex-direction: column;
        gap: 12px;
    }

    .pager-summary[b-4wrjs6chv0] {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .summary-item[b-4wrjs6chv0] {
        flex: 1;
        justify-content: center;
    }

    /* Prevent layout horizontal scroll on mobile, allow only grid to scroll */
    body[b-4wrjs6chv0], html[b-4wrjs6chv0] {
        overflow-x: hidden;
    }

    .page-content[b-4wrjs6chv0] {
        overflow-x: hidden;
    }

    .radzen-grouped-grid-container[b-4wrjs6chv0] {
        overflow-x: auto;
        overflow-y: visible;
    }
}

[b-4wrjs6chv0] .mainpager .e-pagercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-4wrjs6chv0] .mainpager .e-numericitem,
[b-4wrjs6chv0] .mainpager .e-nextpage,
[b-4wrjs6chv0] .mainpager .e-prevpage,
[b-4wrjs6chv0] .mainpager .e-firstpage,
[b-4wrjs6chv0] .mainpager .e-lastpage {
    border-radius: 4px;
    margin: 0 2px;
}

/* Loading Skeleton Styles */
.loading-skeleton[b-4wrjs6chv0] {
    padding: 16px;
}

.skeleton-schedule-card[b-4wrjs6chv0] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.skeleton-schedule-header[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.skeleton-table[b-4wrjs6chv0] {
    padding: 12px 16px;
}

.skeleton-table-row[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.skeleton-item[b-4wrjs6chv0] {
    background: #e9ecef;
    border-radius: 4px;
}

.skeleton-animate[b-4wrjs6chv0] {
    animation: skeleton-pulse-b-4wrjs6chv0 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-4wrjs6chv0 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* Custom Checkbox Styling */
.select-all-checkbox[b-4wrjs6chv0],
.trip-checkbox[b-4wrjs6chv0] {
    width: 15px;
    height: 18px;
    margin: 0 auto;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}

    .select-all-checkbox:hover[b-4wrjs6chv0],
    .trip-checkbox:hover[b-4wrjs6chv0] {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/ManageContainer.razor.rz.scp.css */
.info-icon[b-hnbqvncsbb] {
    font-size: 12px;
    color: #007bff;
    margin-left: 4px;
    transition: color 0.2s ease;
}

    .info-icon:hover[b-hnbqvncsbb] {
        color: #0056b3;
    }

.group-info:hover[b-hnbqvncsbb]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 10;
    margin-bottom: 4px;
}

.group-info:hover[b-hnbqvncsbb]::after {
    opacity: 1;
    visibility: visible;
}

.filters-grid[b-hnbqvncsbb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-hnbqvncsbb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group-btn[b-hnbqvncsbb] {
    display: flex;
    align-items: flex-end;
}
/* Level 2 switches styling */
.subtasks-level2[b-hnbqvncsbb] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-hnbqvncsbb] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-hnbqvncsbb] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-hnbqvncsbb] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }
/* Button icon style from BookTruck_NewV2 */
.btn[b-hnbqvncsbb] {
    padding: 6px 6px;
    font-size: 0.75rem;
    min-height: 32px;
    border-radius: 6px;
    min-width: 32px;
    max-width: 40px;
    justify-content: center;
    position: relative;
}

    .btn[title]:hover[b-hnbqvncsbb]::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
    }

    .btn[title]:hover[b-hnbqvncsbb]::before {
        content: '';
        position: absolute;
        bottom: 95%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }
/* BookTruck Page Specific Styles */

/* Sticky Table Header */
.sticky-table-header[b-hnbqvncsbb] {
    position: fixed;
    top: 172px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 90;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: left 0.3s ease;
}

.sidebar-collapsed .sticky-table-header[b-hnbqvncsbb] {
    left: var(--sidebar-collapsed-width);
}

.trips-table-header[b-hnbqvncsbb] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
}

    .trips-table-header thead[b-hnbqvncsbb] {
        background: #f8f9fa;
    }

    .trips-table-header th[b-hnbqvncsbb] {
        padding: 8px 6px;
        text-align: left;
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .trips-table-header th.sortable[b-hnbqvncsbb] {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
        }

            .trips-table-header th.sortable:hover[b-hnbqvncsbb] {
                background-color: #e9ecef;
            }

            .trips-table-header th.sortable i[b-hnbqvncsbb] {
                margin-left: 4px;
                font-size: 0.7rem;
            }

    /* Column widths for sticky header - must match trips-table */
    .trips-table-header .col-checkbox[b-hnbqvncsbb] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table-header .col-stt[b-hnbqvncsbb] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table-header .col-code[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table-header .col-vehicle-name[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table-header .col-ship-type[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table-header .col-captain[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table-header .col-phone[b-hnbqvncsbb] {
        min-width: 110px;
    }

    .trips-table-header .col-registration-photo[b-hnbqvncsbb] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table-header .col-team[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table-header .col-departure[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table-header .col-receive-date[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table-header .col-port-arrival[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table-header .col-port-departure[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table-header .col-completion[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table-header .col-notes[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table-header .col-special[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table-header .col-actions[b-hnbqvncsbb] {
        min-width: 100px;
        position: fixed;
        right: 3px;
        z-index: 10;
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
    }

/* Modal Container Variants */
.modal-container--wide[b-hnbqvncsbb] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-hnbqvncsbb] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-hnbqvncsbb] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

.filters-grid[b-hnbqvncsbb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-hnbqvncsbb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-end;
}

.filter-input[b-hnbqvncsbb], .filter-select[b-hnbqvncsbb] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

    .filter-input:focus[b-hnbqvncsbb], .filter-select:focus[b-hnbqvncsbb] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }


/* Table and Grid Layout Styles */
.manage-trips-grid-wrapper[b-hnbqvncsbb] {
    position: fixed;
    top: 215px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 61px;
    overflow-x: auto;
    overflow-y: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

    /* Custom Scrollbar Styles */
    .manage-trips-grid-wrapper[b-hnbqvncsbb]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .manage-trips-grid-wrapper[b-hnbqvncsbb]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .manage-trips-grid-wrapper[b-hnbqvncsbb]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary-color, #ca3c19), var(--primary-hover, #d96b47));
        border-radius: 10px;
        border: 2px solid #f1f1f1;
    }

        .manage-trips-grid-wrapper[b-hnbqvncsbb]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
        }

    .manage-trips-grid-wrapper[b-hnbqvncsbb]::-webkit-scrollbar-corner {
        background: #f1f1f1;
    }

/* Firefox Scrollbar */
.manage-trips-grid-wrapper[b-hnbqvncsbb] {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color, #ca3c19) #f1f1f1;
}

.main-planning-grid[b-hnbqvncsbb] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

    .main-planning-grid .rz-datatable-data[b-hnbqvncsbb] {
        height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

.page-content[b-hnbqvncsbb] {
    padding-top: 155px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-hnbqvncsbb] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .manage-trips-grid-wrapper[b-hnbqvncsbb] {
    left: var(--sidebar-collapsed-width);
}

.filter-label[b-hnbqvncsbb] {
    font-size: 0.65rem;
    margin-bottom: 2px;
    color: #6c757d;
}
@media (max-width: 1550px) {
    .manage-trips-grid-wrapper[b-hnbqvncsbb] {
        position: fixed;
        top: 250px;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb] {
        padding: 16px;
        height: calc(100vh - 315px);
        overflow: hidden;
        position: relative;
    }
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-hnbqvncsbb] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }

    .manage-trips-grid-wrapper[b-hnbqvncsbb] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }

    .sticky-table-header[b-hnbqvncsbb] {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent;
        box-shadow: none;
        overflow-x: visible;
        overflow-y: visible;
        transition: none !important;
    }

    .pager-container[b-hnbqvncsbb] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        border-top: 1px solid #dee2e6;
        padding: 12px 16px;
        box-shadow: none;
        transition: none !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .page-content[b-hnbqvncsbb] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-hnbqvncsbb],
    .filters-container[b-hnbqvncsbb] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .manage-trips-grid-wrapper[b-hnbqvncsbb],
    .manage-trips-grid-wrapper[b-hnbqvncsbb] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .sticky-table-header[b-hnbqvncsbb],
    .sticky-table-header[b-hnbqvncsbb] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    .sidebar-collapsed .pager-container[b-hnbqvncsbb],
    .pager-container[b-hnbqvncsbb] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-hnbqvncsbb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-hnbqvncsbb] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-hnbqvncsbb] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-hnbqvncsbb] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-hnbqvncsbb] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-hnbqvncsbb] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-hnbqvncsbb] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-hnbqvncsbb] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-hnbqvncsbb] {
            display: none !important;
        }

        .mobile-filters-content[b-hnbqvncsbb] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
    }

    .filters-grid[b-hnbqvncsbb] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-hnbqvncsbb] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-hnbqvncsbb] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }

    .mobile-compact-filters .filter-group[b-hnbqvncsbb] {
        margin-bottom: 4px;
    }

    .filter-label[b-hnbqvncsbb] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
        display: none;
    }

    .mobile-compact-filters .filter-label[b-hnbqvncsbb] {
        display: block;
    }

    /* Mobile subtasks switches */
    .subtasks-level2[b-hnbqvncsbb] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: center;
    }

        .subtasks-level2 .switch[b-hnbqvncsbb] {
            padding: 0.3rem 0.8rem;
            font-size: 0.75rem;
            min-width: 50px;
        }

    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-hnbqvncsbb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        padding: 6px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 8px;
        margin-top: 8px;
    }

        .btn-fuction-container .filter-group[b-hnbqvncsbb] {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            min-width: 40px;
        }

    .filter-input[b-hnbqvncsbb], .filter-select[b-hnbqvncsbb] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }

    .btn-group-function[b-hnbqvncsbb] {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .filter-group-btn[b-hnbqvncsbb] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }

        .filter-group-btn .btn[b-hnbqvncsbb] {
            flex: 1;
            justify-content: center;
            font-size: 0.8rem;
            padding: 8px 12px;
            min-height: 36px;
            min-width: 40px;
            margin: 0 4px;
            max-width: 100px;
        }

    /* Mobile button icons with tooltips */
    .btn[title][b-hnbqvncsbb] {
        position: relative;
    }

        .btn[title]:hover[b-hnbqvncsbb]::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }

        .btn[title]:hover[b-hnbqvncsbb]::before {
            content: '';
            position: absolute;
            bottom: 95%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }

    /* Mobile grid adjustments */
    .rz-grid-table[b-hnbqvncsbb] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }

        .rz-grid-table th[b-hnbqvncsbb],
        .rz-grid-table td[b-hnbqvncsbb] {
            padding: 6px 4px;
            font-size: 0.75rem;
            min-width: 80px;
        }

            /* Hide less important columns on mobile */
            .rz-grid-table th:nth-child(n+6)[b-hnbqvncsbb],
            .rz-grid-table td:nth-child(n+6)[b-hnbqvncsbb] {
                display: none;
            }

            /* Keep essential columns visible */
            .rz-grid-table th:nth-child(1)[b-hnbqvncsbb],
            .rz-grid-table td:nth-child(1)[b-hnbqvncsbb],
            .rz-grid-table th:nth-child(2)[b-hnbqvncsbb],
            .rz-grid-table td:nth-child(2)[b-hnbqvncsbb],
            .rz-grid-table th:nth-child(3)[b-hnbqvncsbb],
            .rz-grid-table td:nth-child(3)[b-hnbqvncsbb],
            .rz-grid-table th:last-child[b-hnbqvncsbb],
            .rz-grid-table td:last-child[b-hnbqvncsbb] {
                display: table-cell;
            }

    /* Trips table mobile scroll */
    .trips-table[b-hnbqvncsbb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .trips-table th[b-hnbqvncsbb],
        .trips-table td[b-hnbqvncsbb] {
            white-space: nowrap;
            min-width: 100px;
        }

    /* Status tags mobile responsive */
    .status-tags[b-hnbqvncsbb] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }

    .status-tag[b-hnbqvncsbb] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }

    /* Notification badge mobile adjustments */
    .notification-badge[b-hnbqvncsbb] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }

    /* Button mobile improvements - Icon only */
    .btn[b-hnbqvncsbb] {
        padding: 6px 6px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 6px;
        min-width: 32px;
        max-width: 40px;
        justify-content: center;
        position: relative;
    }

    /* Specific styles for function buttons container */
    .btn-fuction-container .btn[b-hnbqvncsbb] {
        padding: 5px 5px;
        min-height: 30px;
        min-width: 30px;
        max-width: 35px;
        font-size: 0.7rem;
    }

        .btn-fuction-container .btn i[b-hnbqvncsbb] {
            font-size: 0.8rem;
        }

    /* Modal responsive for mobile */
    .modal-container--wide[b-hnbqvncsbb] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }
}

/* Status Tags Styles */
.status-tags[b-hnbqvncsbb] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-hnbqvncsbb] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* Legacy status styles */
.status-chua-thuc-hien[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

.status-dang-thuc-hien[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-hoan-thanh[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-huy[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #dc2626;
}

/* Hover effects */
.status-tag:hover[b-hnbqvncsbb] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-hnbqvncsbb] {
    animation: badge-pulse-b-hnbqvncsbb 2s infinite, badge-glow-b-hnbqvncsbb 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-hnbqvncsbb {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-hnbqvncsbb {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-hnbqvncsbb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-hnbqvncsbb 2.5s infinite;
}

@keyframes badge-shine-b-hnbqvncsbb {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-hnbqvncsbb] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* ManageBarger Specific Styles */
.grouped-schedules-container[b-hnbqvncsbb] {
    padding: 16px 16px 16px 16px;
    min-width: 2200px;
}

/* Radzen Grouped Grid Styles */
.radzen-grouped-grid-container[b-hnbqvncsbb] {
    padding: 16px;
    height: calc(100vh - 260px);
    overflow: hidden;
    position: relative;
}

    /* Fixed header for Radzen DataGrid */
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        border-bottom: 2px solid #dee2e6;
        flex-shrink: 0;
    }

        .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-header th {
            background: #f8f9fa !important;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
            padding: 12px 8px;
            text-align: left;
            position: relative;
        }

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data {
        flex: 1;
        overflow-y: auto;
        overflow-x: visible;
    }

    /* Group header styling */
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-group-header {
        background: #e9ecef;
        font-weight: 600;
        color: #495057;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 9;
    }

    /* Improve row styling */
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data tr {
        border-bottom: 1px solid #dee2e6;
    }

        .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data tr:hover {
            background-color: #f5f5f5;
        }

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data td {
        padding: 8px;
        vertical-align: middle;
        border-right: 1px solid #e9ecef;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .radzen-grouped-grid-container[b-hnbqvncsbb] {
        height: calc(100vh - 280px);
        padding: 8px;
    }

        .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-header th {
            padding: 8px 4px;
            font-size: 12px;
        }

        .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data td {
            padding: 6px 4px;
            font-size: 12px;
        }
}

/* Schedule display in group header */
.schedule-display[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .schedule-display .schedule-id[b-hnbqvncsbb] {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary-color, #ca3c19);
    }

    .schedule-display .schedule-type[b-hnbqvncsbb] {
        font-size: 10px;
        font-weight: 700;
        color: #495057;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 3px 9px;
        border-radius: 10px;
        border: 1px solid #dee2e6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Custom Group Header Template */
[b-hnbqvncsbb] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    width: 100%;
    gap: 16px;
}

.group-header-left[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.group-schedule-id[b-hnbqvncsbb] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
}

.group-schedule-type[b-hnbqvncsbb] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-header-center[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.group-info[b-hnbqvncsbb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.group-divider[b-hnbqvncsbb] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.group-header-right[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 250px;
    justify-content: flex-end;
}

.group-stat[b-hnbqvncsbb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark, #b8563e);
    background: rgba(202, 60, 25, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(202, 60, 25, 0.2);
}

.schedule-group-card[b-hnbqvncsbb] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

    .schedule-group-card:hover[b-hnbqvncsbb] {
        border-color: var(--primary-color, #ca3c19);
        box-shadow: 0 3px 12px rgba(202, 60, 25, 0.12);
        transform: translateY(-1px);
    }

.schedule-group-header[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    background: linear-gradient(90deg, #fafafa 0%, #ffffff 100%);
    gap: 16px;
    border-left: 4px solid var(--primary-color, #ca3c19);
    border-bottom: 1px solid #e9ecef;
}

.header-left[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
}

/* Checkbox styles removed
.group-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
    margin: 0;
}

.detail-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}
*/

.schedule-id[b-hnbqvncsbb] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    min-width: 50px;
    letter-spacing: -0.2px;
}

.schedule-type[b-hnbqvncsbb] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pending-count[b-hnbqvncsbb] {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    animation: pulse-soft-b-hnbqvncsbb 2s ease-in-out infinite;
}

@keyframes pulse-soft-b-hnbqvncsbb {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.95;
    }
}

.pending-count i[b-hnbqvncsbb] {
    font-size: 9px;
}

.header-center[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.info-item[b-hnbqvncsbb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.info-divider[b-hnbqvncsbb] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.header-right[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    justify-content: flex-end;
}

.stat-compact[b-hnbqvncsbb] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .stat-compact:hover[b-hnbqvncsbb] {
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.15);
    }

    .stat-compact.pickup[b-hnbqvncsbb] {
        background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
    }

    .stat-compact.delivery[b-hnbqvncsbb] {
        background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
        border-color: #0c5460;
    }

        .stat-compact.delivery:hover[b-hnbqvncsbb] {
            border-color: #0c5460;
        }

.stat-compact-label[b-hnbqvncsbb] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-compact-value[b-hnbqvncsbb] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark, #b8563e);
}

    .stat-compact-value[b-hnbqvncsbb]::after {
        content: ' kg';
        font-size: 9px;
        font-weight: 500;
        color: #6c757d;
        margin-left: 2px;
    }

.schedule-group-details[b-hnbqvncsbb] {
    padding: 0;
    border-top: 2px solid #f8f9fa;
    background: #fafbfc;
}

/* Table Wrapper - Enable sticky positioning */
.table-wrapper[b-hnbqvncsbb] {
    width: 100%;
    position: relative;
}

/* Trips Table Styles */
.trips-table[b-hnbqvncsbb] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
    font-size: 12px;
    background: transparent;
    position: relative;
}

    .trips-table thead[b-hnbqvncsbb] {
        background: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .trips-table th[b-hnbqvncsbb] {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 8px 12px;
        text-align: center;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .trips-table tbody tr[b-hnbqvncsbb] {
        transition: all 0.15s ease;
        border-bottom: 1px solid #f1f3f5;
    }

        .trips-table tbody tr:nth-child(even)[b-hnbqvncsbb] {
            background: #fcfcfc;
        }

        .trips-table tbody tr:hover[b-hnbqvncsbb] {
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

    .trips-table td[b-hnbqvncsbb] {
        padding: 8px 12px;
        text-align: center;
        font-size: 12px;
        vertical-align: middle;
    }

    .trips-table .col-checkbox[b-hnbqvncsbb] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table .col-stt[b-hnbqvncsbb] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table .col-code[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table .col-vehicle-name[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table .col-ship-type[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table .col-captain[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table .col-phone[b-hnbqvncsbb] {
        min-width: 110px;
    }

    .trips-table .col-registration-photo[b-hnbqvncsbb] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table .col-team[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table .col-departure[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table .col-receive-date[b-hnbqvncsbb] {
        min-width: 100px;
    }

    .trips-table .col-port-arrival[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table .col-port-departure[b-hnbqvncsbb] {
        min-width: 140px;
    }

    .trips-table .col-completion[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table .col-notes[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table .col-special[b-hnbqvncsbb] {
        min-width: 120px;
    }

    .trips-table .col-actions[b-hnbqvncsbb] {
        min-width: 100px;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table thead th.col-actions[b-hnbqvncsbb] {
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr td.col-actions[b-hnbqvncsbb] {
        background: #fff;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:nth-child(even) td.col-actions[b-hnbqvncsbb] {
        background: #fcfcfc;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:hover td.col-actions[b-hnbqvncsbb] {
        background: #fff;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

.no-trips-message[b-hnbqvncsbb] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

    .no-trips-message i[b-hnbqvncsbb] {
        margin-right: 8px;
        color: #cbd5e0;
    }

.status-badge[b-hnbqvncsbb] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
    text-transform: capitalize;
}

    .status-badge.status-notcheckin[b-hnbqvncsbb] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-checked[b-hnbqvncsbb] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-pickuped[b-hnbqvncsbb] {
        background: #ffe4c4;
        color: #e67e22;
    }

    .status-badge.status-delivered[b-hnbqvncsbb] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-cancel[b-hnbqvncsbb] {
        background: #f8d7da;
        color: #721c24;
    }

    .status-badge.status-changeddeliverycompany[b-hnbqvncsbb] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-waitingreturntowarehouse[b-hnbqvncsbb] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-returnedtowarehouse[b-hnbqvncsbb] {
        background: #d4edda;
        color: #155724;
    }

.special-status[b-hnbqvncsbb] {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

    .special-status:empty[b-hnbqvncsbb] {
        display: none;
    }

.btn-detail[b-hnbqvncsbb] {
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-detail:hover[b-hnbqvncsbb] {
        background: var(--primary-hover, #d96b47);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
    }

    .btn-detail i[b-hnbqvncsbb] {
        font-size: 10px;
    }

.btn-view-photo[b-hnbqvncsbb] {
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-view-photo:hover[b-hnbqvncsbb] {
        background: #138496;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }

    .btn-view-photo i[b-hnbqvncsbb] {
        font-size: 10px;
    }

.no-photo[b-hnbqvncsbb] {
    color: #adb5bd;
    font-style: italic;
    font-size: 11px;
}

.empty-state[b-hnbqvncsbb] {
    text-align: center;
    padding: 80px 20px;
    color: #adb5bd;
}

    .empty-state i[b-hnbqvncsbb] {
        color: #dee2e6;
        margin-bottom: 16px;
    }

    .empty-state p[b-hnbqvncsbb] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }

@media (max-width: 1400px) {
    .header-right[b-hnbqvncsbb] {
        min-width: 170px;
        gap: 8px;
    }

    .stat-compact[b-hnbqvncsbb] {
        padding: 3px 6px;
    }

    .stat-compact-value[b-hnbqvncsbb] {
        font-size: 12px;
    }

    .stat-compact-label[b-hnbqvncsbb] {
        font-size: 9px;
    }
}

@media (max-width: 1024px) {
    .schedule-group-header[b-hnbqvncsbb] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-left[b-hnbqvncsbb] {
        min-width: auto;
    }

    .header-center[b-hnbqvncsbb] {
        flex-basis: 100%;
        order: 3;
        margin-top: 4px;
        font-size: 11px;
        padding-left: 26px;
    }

    .header-right[b-hnbqvncsbb] {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .schedule-group-header[b-hnbqvncsbb] {
        padding: 8px 12px;
    }

    .schedule-id[b-hnbqvncsbb] {
        font-size: 12px;
    }

    .schedule-type[b-hnbqvncsbb] {
        font-size: 10px;
    }

    .stat-compact-label[b-hnbqvncsbb] {
        font-size: 8px;
    }

    .stat-compact-value[b-hnbqvncsbb] {
        font-size: 11px;
    }

    .header-right[b-hnbqvncsbb] {
        gap: 8px;
    }
}

/* Action Buttons */
.action-buttons[b-hnbqvncsbb] {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-change-company[b-hnbqvncsbb] {
    padding: 6px 10px;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-change-company:hover[b-hnbqvncsbb] {
        background: #b33518;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(202, 60, 25, 0.3);
    }

    .btn-change-company i[b-hnbqvncsbb] {
        font-size: 10px;
    }

.btn-cancel[b-hnbqvncsbb] {
    padding: 6px 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-cancel:hover[b-hnbqvncsbb] {
        background: #c82333;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    }

    .btn-cancel i[b-hnbqvncsbb] {
        font-size: 10px;
    }

/* Cancel Dialog Styles */
.cancel-dialog[b-hnbqvncsbb] {
    padding: 16px;
}

    .cancel-dialog textarea[b-hnbqvncsbb] {
        font-family: inherit;
        resize: vertical;
    }

/* Ensure dialog buttons are clickable */
[b-hnbqvncsbb] .e-dialog .e-footer-content button {
    pointer-events: auto !important;
    z-index: 1000;
    position: relative;
}

[b-hnbqvncsbb] .e-dialog .e-footer-content {
    pointer-events: auto !important;
}

/* Change Company Dialog */
.change-company-dialog[b-hnbqvncsbb] {
    padding: 16px;
}

    .change-company-dialog .form-group[b-hnbqvncsbb] {
        margin-bottom: 20px;
    }

    .change-company-dialog label[b-hnbqvncsbb] {
        display: block;
        font-weight: 600;
        font-size: 12px;
        color: #495057;
        margin-bottom: 8px;
    }

    .change-company-dialog .required[b-hnbqvncsbb] {
        color: #dc3545;
    }

    .change-company-dialog .arrow-container[b-hnbqvncsbb] {
        text-align: center;
        margin: 16px 0;
        color: var(--primary-color, #ca3c19);
        font-size: 24px;
    }

    /* Dropdown styles */
    .change-company-dialog[b-hnbqvncsbb]  .e-input-group,
    .change-company-dialog[b-hnbqvncsbb]  .e-ddl {
        font-size: 12px;
    }

    .change-company-dialog[b-hnbqvncsbb]  .item {
        display: flex;
        justify-content: space-between;
        padding: 8px;
    }

    .change-company-dialog[b-hnbqvncsbb]  .name {
        font-weight: 600;
        color: var(--primary-color, #ca3c19);
        min-width: 100px;
    }

    .change-company-dialog[b-hnbqvncsbb]  .city {
        color: #495057;
    }

    .change-company-dialog[b-hnbqvncsbb]  .head {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        font-weight: 700;
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

/* Pagination Styles */
.pager-container[b-hnbqvncsbb] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 50;
    background: white;
    border-top: 1px solid #dee2e6;
    padding: 12px 16px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sidebar-collapsed .pager-container[b-hnbqvncsbb] {
    left: var(--sidebar-collapsed-width);
}

.pager-left[b-hnbqvncsbb] {
    flex: 0 0 auto;
}

.pager-summary[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.summary-item[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
}

    .summary-item i[b-hnbqvncsbb] {
        color: var(--primary-color, #ca3c19);
        font-size: 14px;
    }

.summary-label[b-hnbqvncsbb] {
    color: #6c757d;
    font-weight: 600;
}

.summary-value[b-hnbqvncsbb] {
    color: #212529;
    font-weight: 700;
    font-size: 12px;
}

[b-hnbqvncsbb] .mainpager {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    position: static;
}

[b-hnbqvncsbb] .e-parentmsgbar {
    display: none;
}

@media (max-width: 768px) {
    .pager-container[b-hnbqvncsbb] {
        flex-direction: column;
        gap: 12px;
    }

    .pager-summary[b-hnbqvncsbb] {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .summary-item[b-hnbqvncsbb] {
        flex: 1;
        justify-content: center;
    }

    /* Prevent layout horizontal scroll on mobile, allow only grid to scroll */
    body[b-hnbqvncsbb], html[b-hnbqvncsbb] {
        overflow-x: hidden;
    }

    .page-content[b-hnbqvncsbb] {
        overflow-x: hidden;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb] {
        overflow-x: auto;
        overflow-y: visible;
    }
}

[b-hnbqvncsbb] .mainpager .e-pagercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-hnbqvncsbb] .mainpager .e-numericitem,
[b-hnbqvncsbb] .mainpager .e-nextpage,
[b-hnbqvncsbb] .mainpager .e-prevpage,
[b-hnbqvncsbb] .mainpager .e-firstpage,
[b-hnbqvncsbb] .mainpager .e-lastpage {
    border-radius: 4px;
    margin: 0 2px;
}

/* Loading Skeleton Styles */
.loading-skeleton[b-hnbqvncsbb] {
    padding: 16px;
}

.skeleton-schedule-card[b-hnbqvncsbb] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.skeleton-schedule-header[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.skeleton-table[b-hnbqvncsbb] {
    padding: 12px 16px;
}

.skeleton-table-row[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.skeleton-item[b-hnbqvncsbb] {
    background: #e9ecef;
    border-radius: 4px;
}

.skeleton-animate[b-hnbqvncsbb] {
    animation: skeleton-pulse-b-hnbqvncsbb 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-hnbqvncsbb {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* Custom Checkbox Styling */
.select-all-checkbox[b-hnbqvncsbb],
.trip-checkbox[b-hnbqvncsbb] {
    width: 15px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}

    .select-all-checkbox:hover[b-hnbqvncsbb],
    .trip-checkbox:hover[b-hnbqvncsbb] {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
.group-filter-button[b-hnbqvncsbb] {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.filters-grid-btn[b-hnbqvncsbb] {
    display: flex;
    flex-direction: row;
}

/* Mobile responsive styles */
@media (max-width: 769px) {
    /* Mobile horizontal scroll for button groups */
    .group-filter-button[b-hnbqvncsbb] {
        display: flex;
        flex-direction: column !important;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-group-btn[b-hnbqvncsbb] {
        order: 1; /* KAB/KHTB/All ở trên */
    }
    
    .btn-fuction-container[b-hnbqvncsbb] {
        order: 2; /* Các button chức năng xuống dòng */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
    }
    
    .btn-fuction-container[b-hnbqvncsbb]::-webkit-scrollbar {
        height: 4px;
    }
    
    .btn-fuction-container[b-hnbqvncsbb]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .btn-fuction-container[b-hnbqvncsbb]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .filter-group-btn .subtasks-level2[b-hnbqvncsbb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        min-width: max-content;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    
    .filter-group-btn .subtasks-level2[b-hnbqvncsbb]::-webkit-scrollbar {
        height: 4px;
    }
    
    .filter-group-btn .subtasks-level2[b-hnbqvncsbb]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .filter-group-btn .subtasks-level2[b-hnbqvncsbb]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .btn-fuction-container .filters-grid-btn[b-hnbqvncsbb] {
        display: flex;
        flex-wrap: nowrap !important;
        min-width: max-content;
        gap: 8px;
    }
    
    .filter-group-btn .subtasks-level2 button[b-hnbqvncsbb],
    .btn-fuction-container .filters-grid-btn .filter-group[b-hnbqvncsbb] {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Transport/Manage/ManageTruckV2.razor.rz.scp.css */
.info-icon[b-pc2l3nkqs9] {
    font-size: 12px;
    color: #007bff;
    margin-left: 4px; 
    transition: color 0.2s ease;
}

    .info-icon:hover[b-pc2l3nkqs9] {
        color: #0056b3;
    }

.group-info:hover[b-pc2l3nkqs9]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 10;
    margin-bottom: 4px;
}

.group-info:hover[b-pc2l3nkqs9]::after {
    opacity: 1;
    visibility: visible;
}

.filters-grid[b-pc2l3nkqs9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group-btn[b-pc2l3nkqs9] {
    display: flex;
    align-items: flex-end;
}
/* Level 2 switches styling */
.subtasks-level2[b-pc2l3nkqs9] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-pc2l3nkqs9] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-pc2l3nkqs9] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-pc2l3nkqs9] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }
/* Button icon style from BookTruck_NewV2 */
.btn[b-pc2l3nkqs9] {
    padding: 6px 6px;
    font-size: 0.75rem;
    min-height: 32px;
    border-radius: 6px;
    min-width: 32px;
    max-width: 40px;
    justify-content: center;
    position: relative;
}
.btn[title]:hover[b-pc2l3nkqs9]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}
.btn[title]:hover[b-pc2l3nkqs9]::before {
    content: '';
    position: absolute;
    bottom: 95%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}
/* BookTruck Page Specific Styles */

/* Sticky Table Header */
.sticky-table-header[b-pc2l3nkqs9] {
    position: fixed;
    top: 172px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 90;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: left 0.3s ease;
}

.sidebar-collapsed .sticky-table-header[b-pc2l3nkqs9] {
    left: var(--sidebar-collapsed-width);
}

.trips-table-header[b-pc2l3nkqs9] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
}

    .trips-table-header thead[b-pc2l3nkqs9] {
        background: #f8f9fa;
    }

    .trips-table-header th[b-pc2l3nkqs9] {
        padding: 8px 6px;
        text-align: left;
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .trips-table-header th.sortable[b-pc2l3nkqs9] {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
        }

            .trips-table-header th.sortable:hover[b-pc2l3nkqs9] {
                background-color: #e9ecef;
            }

            .trips-table-header th.sortable i[b-pc2l3nkqs9] {
                margin-left: 4px;
                font-size: 0.7rem;
            }

    /* Column widths for sticky header - must match trips-table */
    .trips-table-header .col-checkbox[b-pc2l3nkqs9] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table-header .col-stt[b-pc2l3nkqs9] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table-header .col-code[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table-header .col-vehicle-name[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table-header .col-ship-type[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table-header .col-captain[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table-header .col-phone[b-pc2l3nkqs9] {
        min-width: 110px;
    }

    .trips-table-header .col-registration-photo[b-pc2l3nkqs9] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table-header .col-team[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table-header .col-departure[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table-header .col-receive-date[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table-header .col-port-arrival[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table-header .col-port-departure[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table-header .col-completion[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table-header .col-notes[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table-header .col-special[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table-header .col-actions[b-pc2l3nkqs9] {
        min-width: 100px;
        position: fixed;
        right: 3px;
        z-index: 10;
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
    }

/* Modal Container Variants */
.modal-container--wide[b-pc2l3nkqs9] {
    max-width: 900px !important;
    width: 90% !important;
}

/* Filter Section Styles */
.filters-section[b-pc2l3nkqs9] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-container[b-pc2l3nkqs9] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

.filters-grid[b-pc2l3nkqs9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-end;
}

.filter-input[b-pc2l3nkqs9], .filter-select[b-pc2l3nkqs9] {
    padding: 3px 5px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    background: white;
    height: 26px;
}

    .filter-input:focus[b-pc2l3nkqs9], .filter-select:focus[b-pc2l3nkqs9] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }


/* Table and Grid Layout Styles */
.manage-trips-grid-wrapper[b-pc2l3nkqs9] {
    position: fixed;
    top: 215px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 61px;
    overflow-x: auto;
    overflow-y: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

    /* Custom Scrollbar Styles */
    .manage-trips-grid-wrapper[b-pc2l3nkqs9]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .manage-trips-grid-wrapper[b-pc2l3nkqs9]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .manage-trips-grid-wrapper[b-pc2l3nkqs9]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--primary-color, #ca3c19), var(--primary-hover, #d96b47));
        border-radius: 10px;
        border: 2px solid #f1f1f1;
    }

        .manage-trips-grid-wrapper[b-pc2l3nkqs9]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
        }

    .manage-trips-grid-wrapper[b-pc2l3nkqs9]::-webkit-scrollbar-corner {
        background: #f1f1f1;
    }

/* Firefox Scrollbar */
.manage-trips-grid-wrapper[b-pc2l3nkqs9] {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color, #ca3c19) #f1f1f1;
}

.main-planning-grid[b-pc2l3nkqs9] {
    height: calc(100vh - 190px) !important;
    width: 100% !important;
}

    .main-planning-grid .rz-datatable-data[b-pc2l3nkqs9] {
        height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

.page-content[b-pc2l3nkqs9] {
    padding-top: 125px;
}

/* Responsive Design */
.sidebar-collapsed .filters-container[b-pc2l3nkqs9] {
    left: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .manage-trips-grid-wrapper[b-pc2l3nkqs9] {
    left: var(--sidebar-collapsed-width);
}

.filter-label[b-pc2l3nkqs9] {
    font-size: 0.65rem;
    margin-bottom: 2px;
    color: #6c757d;
}
@media (max-width: 1550px) {
    .manage-trips-grid-wrapper[b-pc2l3nkqs9] {
        position: fixed;
        top: 250px;
    }
    .radzen-grouped-grid-container[b-pc2l3nkqs9] {
        padding: 16px;
        height: calc(100vh - 315px);
        overflow: hidden;
        position: relative;
    }
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-pc2l3nkqs9] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none !important;
    }

    .manage-trips-grid-wrapper[b-pc2l3nkqs9] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        background: #f8f9fa;
        padding: 0;
        margin: 0;
        transition: none !important;
    }

    .sticky-table-header[b-pc2l3nkqs9] {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent;
        box-shadow: none;
        overflow-x: visible;
        overflow-y: visible;
        transition: none !important;
    }

    .pager-container[b-pc2l3nkqs9] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        border-top: 1px solid #dee2e6;
        padding: 12px 16px;
        box-shadow: none;
        transition: none !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .page-content[b-pc2l3nkqs9] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    /* Sidebar responsive overrides for mobile */
    .sidebar-collapsed .filters-container[b-pc2l3nkqs9],
    .filters-container[b-pc2l3nkqs9] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .manage-trips-grid-wrapper[b-pc2l3nkqs9],
    .manage-trips-grid-wrapper[b-pc2l3nkqs9] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .sticky-table-header[b-pc2l3nkqs9],
    .sticky-table-header[b-pc2l3nkqs9] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    .sidebar-collapsed .pager-container[b-pc2l3nkqs9],
    .pager-container[b-pc2l3nkqs9] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-pc2l3nkqs9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-pc2l3nkqs9] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-pc2l3nkqs9] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-pc2l3nkqs9] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-pc2l3nkqs9] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-pc2l3nkqs9] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-pc2l3nkqs9] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-pc2l3nkqs9] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }
    
    /* Desktop - always show filters */
    @media (min-width: 769px) {
        .mobile-filter-header[b-pc2l3nkqs9] {
            display: none !important;
        }
        
        .mobile-filters-content[b-pc2l3nkqs9] {
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            padding: 0 !important;
        }
    }

    .filters-grid[b-pc2l3nkqs9] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-pc2l3nkqs9] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-pc2l3nkqs9] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .mobile-compact-filters .filter-group[b-pc2l3nkqs9] {
        margin-bottom: 4px;
    }
    
    .filter-label[b-pc2l3nkqs9] {
        font-size: 0.65rem;
        margin-bottom: 2px;
        color: #6c757d;
        display: none;
    }

    .mobile-compact-filters .filter-label[b-pc2l3nkqs9] {
        display: block;
    }
    
    /* Mobile subtasks switches */
    .subtasks-level2[b-pc2l3nkqs9] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
    }
    
    .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar {
        height: 4px;
    }
    
    .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .subtasks-level2 .switch[b-pc2l3nkqs9] {
        padding: 0.3rem 0.8rem;
        font-size: 0.75rem;
        min-width: 50px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Mobile button container for icon-only buttons */
    .btn-fuction-container[b-pc2l3nkqs9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 8px;
        margin-top: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar {
        height: 4px;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .btn-fuction-container .filters-grid-btn[b-pc2l3nkqs9] {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: max-content;
    }
    
    .btn-fuction-container .filter-group[b-pc2l3nkqs9] {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        min-width: 40px;
    }
    
    .filter-input[b-pc2l3nkqs9], .filter-select[b-pc2l3nkqs9] {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 12px;
        height: 36px;
    }
    
    .btn-group-function[b-pc2l3nkqs9] {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    
    .filter-group-btn[b-pc2l3nkqs9] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    
    .filter-group-btn .btn[b-pc2l3nkqs9] {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 12px;
        min-height: 36px;
        min-width: 40px;
        margin: 0 4px;
        max-width: 100px;
    }
    
    /* Mobile button icons with tooltips */
    .btn[title][b-pc2l3nkqs9] {
        position: relative;
    }
    
    .btn[title]:hover[b-pc2l3nkqs9]::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
    }
    
    .btn[title]:hover[b-pc2l3nkqs9]::before {
        content: '';
        position: absolute;
        bottom: 95%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }
    
    /* Mobile grid adjustments */
    .rz-grid-table[b-pc2l3nkqs9] {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .rz-grid-table th[b-pc2l3nkqs9], 
    .rz-grid-table td[b-pc2l3nkqs9] {
        padding: 6px 4px;
        font-size: 0.75rem;
        min-width: 80px;
    }
    
    /* Hide less important columns on mobile */
    .rz-grid-table th:nth-child(n+6)[b-pc2l3nkqs9],
    .rz-grid-table td:nth-child(n+6)[b-pc2l3nkqs9] {
        display: none;
    }
    
    /* Keep essential columns visible */
    .rz-grid-table th:nth-child(1)[b-pc2l3nkqs9],
    .rz-grid-table td:nth-child(1)[b-pc2l3nkqs9],
    .rz-grid-table th:nth-child(2)[b-pc2l3nkqs9],
    .rz-grid-table td:nth-child(2)[b-pc2l3nkqs9],
    .rz-grid-table th:nth-child(3)[b-pc2l3nkqs9],
    .rz-grid-table td:nth-child(3)[b-pc2l3nkqs9],
    .rz-grid-table th:last-child[b-pc2l3nkqs9],
    .rz-grid-table td:last-child[b-pc2l3nkqs9] {
        display: table-cell;
    }

    /* Trips table mobile scroll */
    .trips-table[b-pc2l3nkqs9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .trips-table th[b-pc2l3nkqs9],
    .trips-table td[b-pc2l3nkqs9] {
        white-space: nowrap;
        min-width: 100px;
    }
    
    /* Status tags mobile responsive */
    .status-tags[b-pc2l3nkqs9] {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }
    
    .status-tag[b-pc2l3nkqs9] {
        font-size: 0.65rem;
        padding: 2px 6px;
        min-width: 60px;
    }
    
    /* Notification badge mobile adjustments */
    .notification-badge[b-pc2l3nkqs9] {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -2px;
        right: -8px;
    }
    
    /* Button mobile improvements - Icon only */
    .btn[b-pc2l3nkqs9] {
        padding: 6px 6px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 6px;
        min-width: 32px;
        max-width: 40px;
        justify-content: center;
        position: relative;
    }
    
    /* Specific styles for function buttons container */
    .btn-fuction-container .btn[b-pc2l3nkqs9] {
        padding: 5px 5px;
        min-height: 30px;
        min-width: 30px;
        max-width: 35px;
        font-size: 0.7rem;
    }
    
    .btn-fuction-container .btn i[b-pc2l3nkqs9] {
        font-size: 0.8rem;
    }
    
    /* Modal responsive for mobile */
    .modal-container--wide[b-pc2l3nkqs9] {
        max-width: 95% !important;
        width: 95% !important;
        height: 90vh;
        margin: 5vh auto;
    }
}

/* Status Tags Styles */
.status-tags[b-pc2l3nkqs9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.status-tag[b-pc2l3nkqs9] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.status-waiting-register[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-waiting-allocation[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-waiting-approval[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #fed7d7, #fbb6ce);
    color: #b91c1c;
    border: 1px solid #ef4444;
}

.status-partial-registration[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

.status-registration-completed[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-unknown[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

/* Legacy status styles */
.status-chua-thuc-hien[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
}

.status-dang-thuc-hien[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-hoan-thanh[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #10b981;
}

.status-huy[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #dc2626;
}

/* Hover effects */
.status-tag:hover[b-pc2l3nkqs9] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.approval-badge-animated[b-pc2l3nkqs9] {
    animation: badge-pulse-b-pc2l3nkqs9 2s infinite, badge-glow-b-pc2l3nkqs9 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes badge-pulse-b-pc2l3nkqs9 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes badge-glow-b-pc2l3nkqs9 {
    0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), 0 0 15px rgba(220, 53, 69, 0.6);
    }
}

.approval-badge-animated[b-pc2l3nkqs9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badge-shine-b-pc2l3nkqs9 2.5s infinite;
}

@keyframes badge-shine-b-pc2l3nkqs9 {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Hover effect for extra attention */
.approval-badge-animated:hover[b-pc2l3nkqs9] {
    animation-duration: 1s;
    transform: scale(1.15);
}

/* ManageBarger Specific Styles */
.grouped-schedules-container[b-pc2l3nkqs9] {
    padding: 16px 16px 16px 16px;
    min-width: 2200px;
}

/* Radzen Grouped Grid Styles */
.radzen-grouped-grid-container[b-pc2l3nkqs9] {
    padding: 16px;
    height: calc(100vh - 280px);
    overflow: hidden;
    position: relative;
}

/* Fixed header for Radzen DataGrid */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-header th {
    background: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    padding: 12px 8px;
    text-align: left;
    position: relative;
}

.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
}

/* Group header styling */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-group-header {
    background: #e9ecef;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 9;
}

/* Improve row styling */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data tr {
    border-bottom: 1px solid #dee2e6;
}

.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data tr:hover {
    background-color: #f5f5f5;
}

.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data td {
    padding: 8px;
    vertical-align: middle;
    border-right: 1px solid #e9ecef;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .radzen-grouped-grid-container[b-pc2l3nkqs9] {
        height: calc(100vh - 280px);
        padding: 8px;
    }
    
    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-header th {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data td {
        padding: 6px 4px;
        font-size: 12px;
    }
}

/* Schedule display in group header */
.schedule-display[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-display .schedule-id[b-pc2l3nkqs9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
}

.schedule-display .schedule-type[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Custom Group Header Template */
[b-pc2l3nkqs9] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    width: 100%;
    gap: 16px;
}

.group-header-left[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.group-schedule-id[b-pc2l3nkqs9] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
}

.group-schedule-type[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-header-center[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.group-info[b-pc2l3nkqs9] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.group-divider[b-pc2l3nkqs9] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.group-header-right[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 250px;
    justify-content: flex-end;
}

.group-stat[b-pc2l3nkqs9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark, #b8563e);
    background: rgba(202, 60, 25, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(202, 60, 25, 0.2);
}

.schedule-group-card[b-pc2l3nkqs9] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

    .schedule-group-card:hover[b-pc2l3nkqs9] {
        border-color: var(--primary-color, #ca3c19);
        box-shadow: 0 3px 12px rgba(202, 60, 25, 0.12);
        transform: translateY(-1px);
    }

.schedule-group-header[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    background: linear-gradient(90deg, #fafafa 0%, #ffffff 100%);
    gap: 16px;
    border-left: 4px solid var(--primary-color, #ca3c19);
    border-bottom: 1px solid #e9ecef;
}

.header-left[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
}

/* Checkbox styles removed
.group-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
    margin: 0;
}

.detail-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}
*/

.schedule-id[b-pc2l3nkqs9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    min-width: 50px;
    letter-spacing: -0.2px;
}

.schedule-type[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 700;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pending-count[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    animation: pulse-soft-b-pc2l3nkqs9 2s ease-in-out infinite;
}

@keyframes pulse-soft-b-pc2l3nkqs9 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.95;
    }
}

.pending-count i[b-pc2l3nkqs9] {
    font-size: 9px;
}

.header-center[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

.info-item[b-pc2l3nkqs9] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.info-divider[b-pc2l3nkqs9] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.header-right[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    justify-content: flex-end;
}

.stat-compact[b-pc2l3nkqs9] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .stat-compact:hover[b-pc2l3nkqs9] {
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.15);
    }

    .stat-compact.pickup[b-pc2l3nkqs9] {
        background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
    }

    .stat-compact.delivery[b-pc2l3nkqs9] {
        background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
        border-color: #0c5460;
    }

        .stat-compact.delivery:hover[b-pc2l3nkqs9] {
            border-color: #0c5460;
        }

.stat-compact-label[b-pc2l3nkqs9] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-compact-value[b-pc2l3nkqs9] {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark, #b8563e);
}

    .stat-compact-value[b-pc2l3nkqs9]::after {
        content: ' kg';
        font-size: 9px;
        font-weight: 500;
        color: #6c757d;
        margin-left: 2px;
    }

.schedule-group-details[b-pc2l3nkqs9] {
    padding: 0;
    border-top: 2px solid #f8f9fa;
    background: #fafbfc;
}

/* Table Wrapper - Enable sticky positioning */
.table-wrapper[b-pc2l3nkqs9] {
    width: 100%;
    position: relative;
}

/* Trips Table Styles */
.trips-table[b-pc2l3nkqs9] {
    width: auto;
    min-width: 2200px;
    border-collapse: collapse;
    font-size: 12px;
    background: transparent;
    position: relative;
}

    .trips-table thead[b-pc2l3nkqs9] {
        background: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .trips-table th[b-pc2l3nkqs9] {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 8px 12px;
        text-align: center;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .trips-table tbody tr[b-pc2l3nkqs9] {
        transition: all 0.15s ease;
        border-bottom: 1px solid #f1f3f5;
    }

        .trips-table tbody tr:nth-child(even)[b-pc2l3nkqs9] {
            background: #fcfcfc;
        }

        .trips-table tbody tr:hover[b-pc2l3nkqs9] {
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

    .trips-table td[b-pc2l3nkqs9] {
        padding: 8px 12px;
        text-align: center;
        font-size: 12px;
        vertical-align: middle;
    }

    .trips-table .col-checkbox[b-pc2l3nkqs9] {
        width: 40px;
        min-width: 40px;
        text-align: center;
    }

    .trips-table .col-stt[b-pc2l3nkqs9] {
        width: 50px;
        min-width: 50px;
        text-align: center;
    }

    .trips-table .col-code[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table .col-vehicle-name[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table .col-ship-type[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table .col-captain[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table .col-phone[b-pc2l3nkqs9] {
        min-width: 110px;
    }

    .trips-table .col-registration-photo[b-pc2l3nkqs9] {
        min-width: 100px;
        text-align: center;
    }

    .trips-table .col-team[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table .col-departure[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table .col-receive-date[b-pc2l3nkqs9] {
        min-width: 100px;
    }

    .trips-table .col-port-arrival[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table .col-port-departure[b-pc2l3nkqs9] {
        min-width: 140px;
    }

    .trips-table .col-completion[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table .col-notes[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table .col-special[b-pc2l3nkqs9] {
        min-width: 120px;
    }

    .trips-table .col-actions[b-pc2l3nkqs9] {
        min-width: 100px;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table thead th.col-actions[b-pc2l3nkqs9] {
        background: #f8f9fa;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr td.col-actions[b-pc2l3nkqs9] {
        background: #fff;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:nth-child(even) td.col-actions[b-pc2l3nkqs9] {
        background: #fcfcfc;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

    .trips-table tbody tr:hover td.col-actions[b-pc2l3nkqs9] {
        background: #fff;
        position: fixed;
        right: 17px;
        z-index: 15;
    }

.no-trips-message[b-pc2l3nkqs9] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

    .no-trips-message i[b-pc2l3nkqs9] {
        margin-right: 8px;
        color: #cbd5e0;
    }

.status-badge[b-pc2l3nkqs9] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
    text-transform: capitalize;
}

    .status-badge.status-notcheckin[b-pc2l3nkqs9] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-checked[b-pc2l3nkqs9] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-pickuped[b-pc2l3nkqs9] {
        background: #ffe4c4;
        color: #e67e22;
    }

    .status-badge.status-delivered[b-pc2l3nkqs9] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-cancel[b-pc2l3nkqs9] {
        background: #f8d7da;
        color: #721c24;
    }

    .status-badge.status-changeddeliverycompany[b-pc2l3nkqs9] {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-waitingreturntowarehouse[b-pc2l3nkqs9] {
        background: #d1ecf1;
        color: #0c5460;
    }

    .status-badge.status-returnedtowarehouse[b-pc2l3nkqs9] {
        background: #d4edda;
        color: #155724;
    }

.special-status[b-pc2l3nkqs9] {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

    .special-status:empty[b-pc2l3nkqs9] {
        display: none;
    }

.btn-detail[b-pc2l3nkqs9] {
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-detail:hover[b-pc2l3nkqs9] {
        background: var(--primary-hover, #d96b47);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
    }

    .btn-detail i[b-pc2l3nkqs9] {
        font-size: 10px;
    }

.btn-view-photo[b-pc2l3nkqs9] {
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn-view-photo:hover[b-pc2l3nkqs9] {
        background: #138496;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }

    .btn-view-photo i[b-pc2l3nkqs9] {
        font-size: 10px;
    }

.no-photo[b-pc2l3nkqs9] {
    color: #adb5bd;
    font-style: italic;
    font-size: 11px;
}

.empty-state[b-pc2l3nkqs9] {
    text-align: center;
    padding: 80px 20px;
    color: #adb5bd;
}

    .empty-state i[b-pc2l3nkqs9] {
        color: #dee2e6;
        margin-bottom: 16px;
    }

    .empty-state p[b-pc2l3nkqs9] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }

@media (max-width: 1400px) {
    .header-right[b-pc2l3nkqs9] {
        min-width: 170px;
        gap: 8px;
    }

    .stat-compact[b-pc2l3nkqs9] {
        padding: 3px 6px;
    }

    .stat-compact-value[b-pc2l3nkqs9] {
        font-size: 12px;
    }

    .stat-compact-label[b-pc2l3nkqs9] {
        font-size: 9px;
    }
}

@media (max-width: 1024px) {
    .schedule-group-header[b-pc2l3nkqs9] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-left[b-pc2l3nkqs9] {
        min-width: auto;
    }

    .header-center[b-pc2l3nkqs9] {
        flex-basis: 100%;
        order: 3;
        margin-top: 4px;
        font-size: 11px;
        padding-left: 26px;
    }

    .header-right[b-pc2l3nkqs9] {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .schedule-group-header[b-pc2l3nkqs9] {
        padding: 8px 12px;
    }

    .schedule-id[b-pc2l3nkqs9] {
        font-size: 12px;
    }

    .schedule-type[b-pc2l3nkqs9] {
        font-size: 10px;
    }

    .stat-compact-label[b-pc2l3nkqs9] {
        font-size: 8px;
    }

    .stat-compact-value[b-pc2l3nkqs9] {
        font-size: 11px;
    }

    .header-right[b-pc2l3nkqs9] {
        gap: 8px;
    }
}

/* Action Buttons */
.action-buttons[b-pc2l3nkqs9] {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-change-company[b-pc2l3nkqs9] {
    padding: 6px 10px;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-change-company:hover[b-pc2l3nkqs9] {
        background: #b33518;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(202, 60, 25, 0.3);
    }

    .btn-change-company i[b-pc2l3nkqs9] {
        font-size: 10px;
    }

.btn-cancel[b-pc2l3nkqs9] {
    padding: 6px 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-cancel:hover[b-pc2l3nkqs9] {
        background: #c82333;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    }

    .btn-cancel i[b-pc2l3nkqs9] {
        font-size: 10px;
    }

/* Cancel Dialog Styles */
.cancel-dialog[b-pc2l3nkqs9] {
    padding: 16px;
}

    .cancel-dialog textarea[b-pc2l3nkqs9] {
        font-family: inherit;
        resize: vertical;
    }

/* Ensure dialog buttons are clickable */
[b-pc2l3nkqs9] .e-dialog .e-footer-content button {
    pointer-events: auto !important;
    z-index: 1000;
    position: relative;
}

[b-pc2l3nkqs9] .e-dialog .e-footer-content {
    pointer-events: auto !important;
}

/* Change Company Dialog */
.change-company-dialog[b-pc2l3nkqs9] {
    padding: 16px;
}

    .change-company-dialog .form-group[b-pc2l3nkqs9] {
        margin-bottom: 20px;
    }

    .change-company-dialog label[b-pc2l3nkqs9] {
        display: block;
        font-weight: 600;
        font-size: 12px;
        color: #495057;
        margin-bottom: 8px;
    }

    .change-company-dialog .required[b-pc2l3nkqs9] {
        color: #dc3545;
    }

    .change-company-dialog .arrow-container[b-pc2l3nkqs9] {
        text-align: center;
        margin: 16px 0;
        color: var(--primary-color, #ca3c19);
        font-size: 24px;
    }

    /* Dropdown styles */
    .change-company-dialog[b-pc2l3nkqs9]  .e-input-group,
    .change-company-dialog[b-pc2l3nkqs9]  .e-ddl {
        font-size: 12px;
    }

    .change-company-dialog[b-pc2l3nkqs9]  .item {
        display: flex;
        justify-content: space-between;
        padding: 8px;
    }

    .change-company-dialog[b-pc2l3nkqs9]  .name {
        font-weight: 600;
        color: var(--primary-color, #ca3c19);
        min-width: 100px;
    }

    .change-company-dialog[b-pc2l3nkqs9]  .city {
        color: #495057;
    }

    .change-company-dialog[b-pc2l3nkqs9]  .head {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        font-weight: 700;
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }

/* Pagination Styles */
.pager-container[b-pc2l3nkqs9] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 50;
    background: white;
    border-top: 1px solid #dee2e6;
    padding: 12px 16px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sidebar-collapsed .pager-container[b-pc2l3nkqs9] {
    left: var(--sidebar-collapsed-width);
}

.pager-left[b-pc2l3nkqs9] {
    flex: 0 0 auto;
}

.pager-summary[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.summary-item[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
}

    .summary-item i[b-pc2l3nkqs9] {
        color: var(--primary-color, #ca3c19);
        font-size: 14px;
    }

.summary-label[b-pc2l3nkqs9] {
    color: #6c757d;
    font-weight: 600;
}

.summary-value[b-pc2l3nkqs9] {
    color: #212529;
    font-weight: 700;
    font-size: 12px;
}

[b-pc2l3nkqs9] .mainpager {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    position: static;
}

[b-pc2l3nkqs9] .e-parentmsgbar {
    display: none;
}

@media (max-width: 768px) {
    .pager-container[b-pc2l3nkqs9] {
        flex-direction: column;
        gap: 12px;
    }

    .pager-summary[b-pc2l3nkqs9] {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .summary-item[b-pc2l3nkqs9] {
        flex: 1;
        justify-content: center;
    }

    /* Prevent layout horizontal scroll on mobile, allow only grid to scroll */
    body[b-pc2l3nkqs9], html[b-pc2l3nkqs9] {
        overflow-x: hidden;
    }

    .page-content[b-pc2l3nkqs9] {
        overflow-x: hidden;
    }

    .radzen-grouped-grid-container[b-pc2l3nkqs9] {
        overflow-x: auto;
        overflow-y: visible;
    }
}

[b-pc2l3nkqs9] .mainpager .e-pagercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-pc2l3nkqs9] .mainpager .e-numericitem,
[b-pc2l3nkqs9] .mainpager .e-nextpage,
[b-pc2l3nkqs9] .mainpager .e-prevpage,
[b-pc2l3nkqs9] .mainpager .e-firstpage,
[b-pc2l3nkqs9] .mainpager .e-lastpage {
    border-radius: 4px;
    margin: 0 2px;
}

/* Loading Skeleton Styles */
.loading-skeleton[b-pc2l3nkqs9] {
    padding: 16px;
}

.skeleton-schedule-card[b-pc2l3nkqs9] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.skeleton-schedule-header[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.skeleton-table[b-pc2l3nkqs9] {
    padding: 12px 16px;
}

.skeleton-table-row[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.skeleton-item[b-pc2l3nkqs9] {
    background: #e9ecef;
    border-radius: 4px;
}

.skeleton-animate[b-pc2l3nkqs9] {
    animation: skeleton-pulse-b-pc2l3nkqs9 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-pc2l3nkqs9 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* Custom Checkbox Styling */
.select-all-checkbox[b-pc2l3nkqs9],
.trip-checkbox[b-pc2l3nkqs9] {
    width: 15px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color, #ca3c19);
}

    .select-all-checkbox:hover[b-pc2l3nkqs9],
    .trip-checkbox:hover[b-pc2l3nkqs9] {
        transform: scale(1.1);
        transition: transform 0.2s ease;
    }
.group-filter-button[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.filters-grid-btn[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: row;
}

/* Mobile horizontal scroll for button groups */
@media (max-width: 768px) {
    .group-filter-button[b-pc2l3nkqs9] {
        display: flex;
        flex-direction: column !important;
        gap: 8px;
    }
    /* Enable horizontal scroll for button groups on mobile */
    .group-filter-button[b-pc2l3nkqs9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-group-btn .subtasks-level2[b-pc2l3nkqs9],
    .btn-fuction-container .filters-grid-btn[b-pc2l3nkqs9] {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: max-content;
    }

        .filter-group-btn .subtasks-level2 button[b-pc2l3nkqs9],
        .btn-fuction-container .filters-grid-btn .filter-group[b-pc2l3nkqs9] {
            flex-shrink: 0;
            white-space: nowrap;
        }
    .filter-group-btn[b-pc2l3nkqs9] {
        order: 1; /* KAB/KHTB/All ở trên */
    }
    
    .btn-fuction-container[b-pc2l3nkqs9] {
        order: 2; /* Các button chức năng xuống dòng */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar {
        height: 4px;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .btn-fuction-container[b-pc2l3nkqs9]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .filter-group-btn .subtasks-level2[b-pc2l3nkqs9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        min-width: max-content;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #ca3c19) transparent;
    }
    
    .filter-group-btn .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar {
        height: 4px;
    }
    
    .filter-group-btn .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .filter-group-btn .subtasks-level2[b-pc2l3nkqs9]::-webkit-scrollbar-thumb {
        background: var(--primary-color, #ca3c19);
        border-radius: 2px;
    }
    
    .btn-fuction-container .filters-grid-btn[b-pc2l3nkqs9] {
        flex-wrap: nowrap !important;
        min-width: max-content;
    }
    
    .filter-group-btn .subtasks-level2 button[b-pc2l3nkqs9],
    .btn-fuction-container .filters-grid-btn .filter-group[b-pc2l3nkqs9] {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanning.razor.rz.scp.css */
/* Main tabs styling */
.tabs[b-gftz3wf7gr] {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab[b-gftz3wf7gr] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tab:hover[b-gftz3wf7gr] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.05);
        transform: translateY(-1px);
    }

    .tab.active[b-gftz3wf7gr] {
        color: var(--primary-color);
        font-weight: 600;
        background: rgba(202, 60, 25, 0.08);
    }

        .tab.active[b-gftz3wf7gr]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px 2px 0 0;
        }

/* Subtabs styling */
.subtabs[b-gftz3wf7gr] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.subtab[b-gftz3wf7gr] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 6px;
    margin: 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .subtab:hover[b-gftz3wf7gr] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.15);
    }

    .subtab.active[b-gftz3wf7gr] {
        color: var(--primary-color);
        font-weight: 500;
        background: linear-gradient(135deg, rgba(202, 60, 25, 0.12), rgba(202, 60, 25, 0.08));
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

        .subtab.active[b-gftz3wf7gr]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 0 0 2px 2px;
        }

/* Responsive design */
@media (max-width: 768px) {
    .tabs[b-gftz3wf7gr] {
        flex-wrap: wrap;
    }

    .tab[b-gftz3wf7gr] {
        min-width: 120px;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .subtabs[b-gftz3wf7gr] {
        flex-wrap: wrap;
        padding: 0.5rem 0.25rem;
    }

    .subtab[b-gftz3wf7gr] {
        min-width: 100px;
        margin: 0.125rem;
        font-size: 0.85rem;
    }
}

/* Animation for tab switching */
.tab-content[b-gftz3wf7gr] {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .tab-content.active[b-gftz3wf7gr] {
        opacity: 1;
        transform: translateY(0);
    }

/* Enhanced visual hierarchy */
.tabs-container[b-gftz3wf7gr] {
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-wrapper[b-gftz3wf7gr] {
    background: white;
    min-height: 400px;
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TripCargoPlanningDateCustomerReceive.razor.rz.scp.css */
.rz-data-grid[b-yvpiomx4zz]{
    min-height:650px !important;
}
.etrans-container[b-yvpiomx4zz] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-yvpiomx4zz] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-yvpiomx4zz] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-yvpiomx4zz] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-yvpiomx4zz] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-yvpiomx4zz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-yvpiomx4zz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-yvpiomx4zz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-yvpiomx4zz] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-yvpiomx4zz], .filter-select[b-yvpiomx4zz] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-yvpiomx4zz], .filter-select:focus[b-yvpiomx4zz] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-yvpiomx4zz] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-yvpiomx4zz] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-yvpiomx4zz] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-yvpiomx4zz] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-yvpiomx4zz] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-yvpiomx4zz] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-yvpiomx4zz] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-yvpiomx4zz] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-yvpiomx4zz] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-yvpiomx4zz] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-yvpiomx4zz], .rz-grid-table td[b-yvpiomx4zz] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-yvpiomx4zz] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-yvpiomx4zz] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-yvpiomx4zz] {
    background-color: #e9ecef;
}

.status-badge[b-yvpiomx4zz] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-yvpiomx4zz] {
    background-color: #28a745;
}

.status-pending[b-yvpiomx4zz] {
    background-color: #ffc107;
}

.status-completed[b-yvpiomx4zz] {
    background-color: #17a2b8;
}

.status-default[b-yvpiomx4zz] {
    background-color: #6c757d;
}

.quantity-cell[b-yvpiomx4zz], .date-cell[b-yvpiomx4zz] {
    text-align: right;
}

@keyframes fadeIn-b-yvpiomx4zz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-yvpiomx4zz] {
        padding: 12px;
    }

    .filters-grid[b-yvpiomx4zz] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-yvpiomx4zz] {
        justify-content: stretch;
    }

    .btn[b-yvpiomx4zz] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-yvpiomx4zz] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-yvpiomx4zz] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-yvpiomx4zz], .rz-grid-table td[b-yvpiomx4zz] {
            padding: 8px;
        }

    .data-table th[b-yvpiomx4zz],
    .data-table td[b-yvpiomx4zz] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-yvpiomx4zz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-yvpiomx4zz 0.3s ease;
    padding: 20px;
}

.modal-container[b-yvpiomx4zz] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-yvpiomx4zz 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-yvpiomx4zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-yvpiomx4zz] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-yvpiomx4zz] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-yvpiomx4zz] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-yvpiomx4zz] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-yvpiomx4zz] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-yvpiomx4zz] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-yvpiomx4zz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-yvpiomx4zz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-yvpiomx4zz] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-yvpiomx4zz] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-yvpiomx4zz] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-yvpiomx4zz] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-yvpiomx4zz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-yvpiomx4zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-yvpiomx4zz] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-yvpiomx4zz] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-yvpiomx4zz] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-yvpiomx4zz] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-yvpiomx4zz] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-yvpiomx4zz] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-yvpiomx4zz] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-yvpiomx4zz] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-yvpiomx4zz] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-yvpiomx4zz] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-yvpiomx4zz] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-yvpiomx4zz] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-yvpiomx4zz] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-yvpiomx4zz] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-yvpiomx4zz] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-yvpiomx4zz] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-yvpiomx4zz] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-yvpiomx4zz] {
        max-width: 95%;
    }

    .info-grid[b-yvpiomx4zz] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-yvpiomx4zz] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-yvpiomx4zz] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-yvpiomx4zz] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-yvpiomx4zz] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-yvpiomx4zz] {
        padding: 10px;
    }

    .modal-container[b-yvpiomx4zz] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-yvpiomx4zz] {
        padding: 16px 20px;
    }

    .modal-title[b-yvpiomx4zz] {
        font-size: 1rem;
    }

    .info-bar[b-yvpiomx4zz] {
        padding: 12px 16px;
    }

    .info-grid[b-yvpiomx4zz] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-yvpiomx4zz] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-yvpiomx4zz] {
        padding: 12px 16px;
    }

    .grid-header[b-yvpiomx4zz] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-yvpiomx4zz] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-yvpiomx4zz],
    .transport-grid-full .rz-grid-table td[b-yvpiomx4zz] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-yvpiomx4zz] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-yvpiomx4zz] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-yvpiomx4zz] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-yvpiomx4zz] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-yvpiomx4zz] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-yvpiomx4zz], .rz-textbox[b-yvpiomx4zz], .rz-numeric[b-yvpiomx4zz], .rz-textarea[b-yvpiomx4zz] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-yvpiomx4zz] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-yvpiomx4zz] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-yvpiomx4zz] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-yvpiomx4zz] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-yvpiomx4zz] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-yvpiomx4zz] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-yvpiomx4zz],
.rz-numeric.rz-state-invalid[b-yvpiomx4zz],
.rz-dropdown.rz-state-invalid[b-yvpiomx4zz] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-yvpiomx4zz] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-yvpiomx4zz] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-yvpiomx4zz]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-yvpiomx4zz]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-yvpiomx4zz]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-yvpiomx4zz]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-yvpiomx4zz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-yvpiomx4zz {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-yvpiomx4zz] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-yvpiomx4zz] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-yvpiomx4zz] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-yvpiomx4zz] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-yvpiomx4zz] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-yvpiomx4zz],
    .modal-footer[b-yvpiomx4zz] {
        display: none;
    }

    .action-buttons[b-yvpiomx4zz] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-yvpiomx4zz] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-yvpiomx4zz] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    margin-top: 1px;
}

/* Header styles */
.header[b-yvpiomx4zz] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-yvpiomx4zz] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-yvpiomx4zz] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-yvpiomx4zz] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-yvpiomx4zz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-yvpiomx4zz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-yvpiomx4zz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-yvpiomx4zz] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-yvpiomx4zz], .filter-select[b-yvpiomx4zz] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-yvpiomx4zz], .filter-select:focus[b-yvpiomx4zz] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-yvpiomx4zz] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-yvpiomx4zz] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-yvpiomx4zz] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-yvpiomx4zz] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-yvpiomx4zz] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-yvpiomx4zz] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-yvpiomx4zz] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-yvpiomx4zz] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

/* Radzen DataGrid styles */
.rz-data-grid[b-yvpiomx4zz] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-yvpiomx4zz], .rz-grid-table td[b-yvpiomx4zz] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-yvpiomx4zz] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-yvpiomx4zz] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-yvpiomx4zz] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-yvpiomx4zz] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-yvpiomx4zz] {
    background-color: #28a745;
}

.status-pending[b-yvpiomx4zz] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-yvpiomx4zz] {
    background-color: #17a2b8;
}

.status-cancelled[b-yvpiomx4zz] {
    background-color: #dc3545;
}

.status-default[b-yvpiomx4zz] {
    background-color: #6c757d;
}

.quantity-cell[b-yvpiomx4zz], .date-cell[b-yvpiomx4zz] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-yvpiomx4zz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-yvpiomx4zz 0.3s ease;
}

.modal-container[b-yvpiomx4zz] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-yvpiomx4zz 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-yvpiomx4zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-yvpiomx4zz] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-yvpiomx4zz] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-yvpiomx4zz] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-yvpiomx4zz] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-yvpiomx4zz] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-yvpiomx4zz] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-yvpiomx4zz] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-yvpiomx4zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-yvpiomx4zz] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-yvpiomx4zz] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-yvpiomx4zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-yvpiomx4zz] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-yvpiomx4zz] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-yvpiomx4zz] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-yvpiomx4zz] {
        background: #f8f9fa;
    }

.highlight-row[b-yvpiomx4zz] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-yvpiomx4zz] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-yvpiomx4zz] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-yvpiomx4zz] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-yvpiomx4zz] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-yvpiomx4zz] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-yvpiomx4zz] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-yvpiomx4zz] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-yvpiomx4zz] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-yvpiomx4zz] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-yvpiomx4zz] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-yvpiomx4zz] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-yvpiomx4zz] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-yvpiomx4zz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-yvpiomx4zz {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-yvpiomx4zz] {
        width: 98%;
    }

    .detail-layout[b-yvpiomx4zz] {
        flex-direction: column;
    }

    .left-panel[b-yvpiomx4zz] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-yvpiomx4zz] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-yvpiomx4zz] {
        padding: 12px;
    }

    .filters-grid[b-yvpiomx4zz] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-yvpiomx4zz] {
        justify-content: stretch;
    }

    .btn[b-yvpiomx4zz] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-yvpiomx4zz] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-yvpiomx4zz] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-yvpiomx4zz], .rz-grid-table td[b-yvpiomx4zz] {
            padding: 8px;
        }

    .data-table th[b-yvpiomx4zz],
    .data-table td[b-yvpiomx4zz] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-yvpiomx4zz] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-yvpiomx4zz] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-yvpiomx4zz],
        .transport-grid .rz-grid-table td[b-yvpiomx4zz] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-yvpiomx4zz] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-yvpiomx4zz] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-yvpiomx4zz] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-yvpiomx4zz] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-yvpiomx4zz], .rz-textbox[b-yvpiomx4zz], .rz-numeric[b-yvpiomx4zz], .rz-textarea[b-yvpiomx4zz] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-yvpiomx4zz] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-yvpiomx4zz] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-yvpiomx4zz] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-yvpiomx4zz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-yvpiomx4zz] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-yvpiomx4zz] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-yvpiomx4zz] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-yvpiomx4zz] {
        background-color: #dc3545;
    }


.time-grid[b-yvpiomx4zz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 12px;
}

.time-week-header[b-yvpiomx4zz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.week-label[b-yvpiomx4zz] {
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
}

.week-value[b-yvpiomx4zz] {
    font-weight: 600;
    color: #1976d2;
}

.time-edit-grid[b-yvpiomx4zz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* Weekly Details Container Horizontal Layout */
.weekly-details-container[b-yvpiomx4zz] {
    padding: 6px;
    background: #f8f9fa;
    border-radius: 4px;
    margin: 4px 0;
}

.weeks-simple[b-yvpiomx4zz] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.week-item[b-yvpiomx4zz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: white;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

.week-item:hover[b-yvpiomx4zz] {
    border-color: #0d6efd;
}

.week-label[b-yvpiomx4zz] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .weeks-simple[b-yvpiomx4zz] {
        flex-direction: column;
        gap: 4px;
    }
    
    .week-item[b-yvpiomx4zz] {
        min-width: auto;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TripCargoPlanningDateFactory.razor.rz.scp.css */

.filters-section[b-0vholnexwm] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-0vholnexwm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-0vholnexwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-0vholnexwm] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-0vholnexwm], .filter-select[b-0vholnexwm] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-0vholnexwm], .filter-select:focus[b-0vholnexwm] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-0vholnexwm] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.status-circle[b-0vholnexwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    background: linear-gradient(145deg, #ffffff33, #00000022);
    backdrop-filter: blur(4px);
    position: relative;
    line-height: 1;
}

.status-circle-record[b-0vholnexwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1;
}

.status-default[b-0vholnexwm],
.status-notstarted[b-0vholnexwm] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-0vholnexwm] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-0vholnexwm],
.status-canceled[b-0vholnexwm] {
    background: linear-gradient(145deg, #e55353, #dc3545);
}

.status-executed[b-0vholnexwm],
.status-completed[b-0vholnexwm] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-0vholnexwm] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-0vholnexwm] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.rz-data-grid[b-0vholnexwm] {
    min-height: 650px !important;
    height: calc(100vh - 150px)!important;
}
.etrans-container[b-0vholnexwm] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-0vholnexwm] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-0vholnexwm] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-0vholnexwm] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-0vholnexwm] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-0vholnexwm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-0vholnexwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-0vholnexwm] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-0vholnexwm], .filter-select[b-0vholnexwm] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-0vholnexwm], .filter-select:focus[b-0vholnexwm] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-0vholnexwm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-0vholnexwm] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-0vholnexwm] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-0vholnexwm] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-0vholnexwm] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-0vholnexwm] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-0vholnexwm] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-0vholnexwm] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-0vholnexwm] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /*height: calc(100vh - 270px)!important;*/
}

.rz-data-grid[b-0vholnexwm] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 225px) !important;
}

.rz-grid-table th[b-0vholnexwm], .rz-grid-table td[b-0vholnexwm] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-0vholnexwm] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-0vholnexwm] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-0vholnexwm] {
    background-color: #e9ecef;
}

.status-badge[b-0vholnexwm] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-0vholnexwm] {
    background-color: #28a745;
}

.status-pending[b-0vholnexwm] {
    background-color: #ffc107;
}

.status-completed[b-0vholnexwm] {
    background-color: #17a2b8;
}

.status-default[b-0vholnexwm] {
    background-color: #6c757d;
}

.quantity-cell[b-0vholnexwm], .date-cell[b-0vholnexwm] {
    text-align: right;
}

@keyframes fadeIn-b-0vholnexwm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-0vholnexwm] {
        padding: 12px;
    }

    .filters-grid[b-0vholnexwm] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-0vholnexwm] {
        justify-content: stretch;
    }

    .btn[b-0vholnexwm] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-0vholnexwm] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-0vholnexwm] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-0vholnexwm], .rz-grid-table td[b-0vholnexwm] {
            padding: 8px;
        }

    .data-table th[b-0vholnexwm],
    .data-table td[b-0vholnexwm] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-0vholnexwm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-0vholnexwm 0.3s ease;
    padding: 20px;
}

.modal-container[b-0vholnexwm] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-0vholnexwm 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-0vholnexwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-0vholnexwm] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-0vholnexwm] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-0vholnexwm] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-0vholnexwm] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-0vholnexwm] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-0vholnexwm] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-0vholnexwm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-0vholnexwm] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-0vholnexwm] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-0vholnexwm] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-0vholnexwm] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-0vholnexwm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-0vholnexwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-0vholnexwm] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-0vholnexwm] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-0vholnexwm] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-0vholnexwm] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-0vholnexwm] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-0vholnexwm] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-0vholnexwm] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-0vholnexwm] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-0vholnexwm] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-0vholnexwm] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-0vholnexwm] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-0vholnexwm] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-0vholnexwm] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-0vholnexwm] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-0vholnexwm] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-0vholnexwm] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-0vholnexwm] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-0vholnexwm] {
        max-width: 95%;
    }

    .info-grid[b-0vholnexwm] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-0vholnexwm] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-0vholnexwm] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-0vholnexwm] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-0vholnexwm] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-0vholnexwm] {
        padding: 10px;
    }

    .modal-container[b-0vholnexwm] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-0vholnexwm] {
        padding: 16px 20px;
    }

    .modal-title[b-0vholnexwm] {
        font-size: 1rem;
    }

    .info-bar[b-0vholnexwm] {
        padding: 12px 16px;
    }

    .info-grid[b-0vholnexwm] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-0vholnexwm] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-0vholnexwm] {
        padding: 12px 16px;
    }

    .grid-header[b-0vholnexwm] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-0vholnexwm] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-0vholnexwm],
    .transport-grid-full .rz-grid-table td[b-0vholnexwm] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-0vholnexwm] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-0vholnexwm] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-0vholnexwm] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-0vholnexwm] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-0vholnexwm] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-0vholnexwm], .rz-textbox[b-0vholnexwm], .rz-numeric[b-0vholnexwm], .rz-textarea[b-0vholnexwm] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-0vholnexwm] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-0vholnexwm] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-0vholnexwm] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-0vholnexwm] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-0vholnexwm] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-0vholnexwm] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-0vholnexwm],
.rz-numeric.rz-state-invalid[b-0vholnexwm],
.rz-dropdown.rz-state-invalid[b-0vholnexwm] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-0vholnexwm] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-0vholnexwm] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-0vholnexwm]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-0vholnexwm]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-0vholnexwm]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-0vholnexwm]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-0vholnexwm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-0vholnexwm {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-0vholnexwm] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-0vholnexwm] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-0vholnexwm] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-0vholnexwm] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-0vholnexwm] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-0vholnexwm],
    .modal-footer[b-0vholnexwm] {
        display: none;
    }

    .action-buttons[b-0vholnexwm] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-0vholnexwm] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-0vholnexwm] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-0vholnexwm] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-0vholnexwm] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-0vholnexwm] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-0vholnexwm] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-0vholnexwm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-0vholnexwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-0vholnexwm] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-0vholnexwm], .filter-select[b-0vholnexwm] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-0vholnexwm], .filter-select:focus[b-0vholnexwm] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-0vholnexwm] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-0vholnexwm] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-0vholnexwm] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-0vholnexwm] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-0vholnexwm] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-0vholnexwm] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-0vholnexwm] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-0vholnexwm] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-0vholnexwm] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-0vholnexwm], .rz-grid-table td[b-0vholnexwm] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-0vholnexwm] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-0vholnexwm] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-0vholnexwm] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-0vholnexwm] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-0vholnexwm] {
    background-color: #28a745;
}

.status-pending[b-0vholnexwm] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-0vholnexwm] {
    background-color: #17a2b8;
}

.status-cancelled[b-0vholnexwm] {
    background-color: #dc3545;
}

.status-default[b-0vholnexwm] {
    background-color: #6c757d;
}

.quantity-cell[b-0vholnexwm], .date-cell[b-0vholnexwm] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-0vholnexwm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-0vholnexwm 0.3s ease;
}

.modal-container[b-0vholnexwm] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-0vholnexwm 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-0vholnexwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-0vholnexwm] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-0vholnexwm] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-0vholnexwm] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-0vholnexwm] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-0vholnexwm] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-0vholnexwm] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-0vholnexwm] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-0vholnexwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-0vholnexwm] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-0vholnexwm] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-0vholnexwm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-0vholnexwm] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-0vholnexwm] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-0vholnexwm] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-0vholnexwm] {
        background: #f8f9fa;
    }

.highlight-row[b-0vholnexwm] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-0vholnexwm] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-0vholnexwm] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-0vholnexwm] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-0vholnexwm] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-0vholnexwm] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-0vholnexwm] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-0vholnexwm] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-0vholnexwm] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-0vholnexwm] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-0vholnexwm] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-0vholnexwm] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-0vholnexwm] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-0vholnexwm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-0vholnexwm {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-0vholnexwm] {
        width: 98%;
    }

    .detail-layout[b-0vholnexwm] {
        flex-direction: column;
    }

    .left-panel[b-0vholnexwm] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-0vholnexwm] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-0vholnexwm] {
        padding: 12px;
    }

    .filters-grid[b-0vholnexwm] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-0vholnexwm] {
        justify-content: stretch;
    }

    .btn[b-0vholnexwm] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-0vholnexwm] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-0vholnexwm] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-0vholnexwm], .rz-grid-table td[b-0vholnexwm] {
            padding: 8px;
        }

    .data-table th[b-0vholnexwm],
    .data-table td[b-0vholnexwm] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-0vholnexwm] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-0vholnexwm] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-0vholnexwm],
        .transport-grid .rz-grid-table td[b-0vholnexwm] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-0vholnexwm] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-0vholnexwm] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-0vholnexwm] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-0vholnexwm] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-0vholnexwm], .rz-textbox[b-0vholnexwm], .rz-numeric[b-0vholnexwm], .rz-textarea[b-0vholnexwm] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-0vholnexwm] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-0vholnexwm] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-0vholnexwm] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-0vholnexwm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-0vholnexwm] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-0vholnexwm] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-0vholnexwm] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-0vholnexwm] {
        background-color: #dc3545;
    }


.time-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 12px;
}

.time-week-header[b-0vholnexwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.week-label[b-0vholnexwm] {
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
}

.week-value[b-0vholnexwm] {
    font-weight: 600;
    color: #1976d2;
}

.time-edit-grid[b-0vholnexwm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* Weekly Details Container Horizontal Layout */
.weekly-details-container[b-0vholnexwm] {
    padding: 6px;
    background: #f8f9fa;
    border-radius: 4px;
    margin: 4px 0;
}

.weeks-simple[b-0vholnexwm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.week-item[b-0vholnexwm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: white;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

.week-item:hover[b-0vholnexwm] {
    border-color: #0d6efd;
}

.week-label[b-0vholnexwm] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .weeks-simple[b-0vholnexwm] {
        flex-direction: column;
        gap: 4px;
    }
    
    .week-item[b-0vholnexwm] {
        min-width: auto;
    }
}
.action-buttons-container[b-0vholnexwm] {
    display: flex;
    flex-direction: row;
}

/* Filter wrapper */
.filter-wrapper[b-0vholnexwm] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-0vholnexwm] {
        display: none !important;
    }
    
    .mobile-filters-content[b-0vholnexwm] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile responsive styles for TripCargoPlanningDateFactory */
@media (max-width: 768px) {
    .container[b-0vholnexwm] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-0vholnexwm] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-0vholnexwm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-0vholnexwm] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-0vholnexwm] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-0vholnexwm] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-0vholnexwm] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-0vholnexwm] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-0vholnexwm] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-0vholnexwm] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-0vholnexwm] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-0vholnexwm] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-0vholnexwm] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .mobile-compact-filters .filter-group[b-0vholnexwm] {
        margin-bottom: 4px;
    }

    .mobile-filters-content .row[b-0vholnexwm] {
        margin: 0;
        padding: 8px 0;
    }

    .mobile-filters-content .col-6[b-0vholnexwm],
    .mobile-filters-content .col-md-3[b-0vholnexwm],
    .mobile-filters-content .col-md-4[b-0vholnexwm],
    .mobile-filters-content .col-12[b-0vholnexwm] {
        padding: 4px 8px;
        margin-bottom: 6px;
    }

    /* Form controls mobile responsive */
    .mobile-filters-content .filter-input[b-0vholnexwm],
    .mobile-filters-content .filter-select[b-0vholnexwm],
    .mobile-filters-content .rz-dropdown[b-0vholnexwm],
    .mobile-filters-content .rz-textbox[b-0vholnexwm] {
        width: 100% !important;
        min-height: 32px;
        font-size: 0.85rem;
        padding: 6px 8px;
    }

    .mobile-filters-content .btn[b-0vholnexwm] {
        width: 100%;
        margin-bottom: 6px;
        padding: 8px;
        font-size: 0.8rem;
        min-height: 36px;
    }

    .mobile-filters-content .btn-group[b-0vholnexwm] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .mobile-filters-content .btn-group .btn[b-0vholnexwm] {
        flex: 1;
        min-width: 48%;
        margin: 0;
    }

    /* Hide desktop filter layout on mobile */
    .desktop-filters[b-0vholnexwm] {
        display: none !important;
    }

    /* Grid responsive adjustments */
    .rz-data-grid[b-0vholnexwm] {
        font-size: 0.8rem;
        margin-top: 8px;
    }

    .rz-data-grid .rz-cell-data[b-0vholnexwm] {
        padding: 6px 4px;
    }

    .rz-data-grid th[b-0vholnexwm] {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    /* Button adjustments for mobile */
    .btn-sm[b-0vholnexwm] {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* Ensure proper spacing for mobile cards */
    .card[b-0vholnexwm] {
        margin-bottom: 12px;
        border-radius: 6px;
    }

    .card-body[b-0vholnexwm] {
        padding: 12px;
    }

    /* Form controls spacing */
    .form-group[b-0vholnexwm] {
        margin-bottom: 12px;
    }

    /* Responsive table scrolling */
    .table-responsive[b-0vholnexwm] {
        -webkit-overflow-scrolling: touch;
        margin: 8px 0;
    }

    /* Mobile-friendly pagination */
    .rz-paginator[b-0vholnexwm] {
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px;
    }

    .rz-paginator .rz-paginator-pages[b-0vholnexwm] {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
}

/* Desktop styles - show desktop filters, hide mobile toggle */
@media (min-width: 769px) {
    .mobile-filter-header[b-0vholnexwm],
    .mobile-filter-toggle[b-0vholnexwm] {
        display: none !important;
    }
    
    .desktop-filters[b-0vholnexwm] {
        display: block !important;
    }
    
    .mobile-filters-content[b-0vholnexwm] {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile action column styling */
@media (max-width: 768px) {
    .action-header[b-0vholnexwm],
    .action-cell[b-0vholnexwm] {
        background: white !important;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .action-header[b-0vholnexwm] {
        background: #e9ecef !important;
    }
    
    .rz-grid-table tr:nth-child(even) .action-cell[b-0vholnexwm] {
        background: #f8f9fa !important;
    }
    
    .rz-grid-table tr:hover .action-cell[b-0vholnexwm] {
        background: #e9ecef !important;
    }
    
    .action-buttons-container[b-0vholnexwm] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 2px;
    }
    
    .action-buttons[b-0vholnexwm] {
        gap: 2px;
    }
    
    .action-buttons .rz-button[b-0vholnexwm] {
        min-width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        font-size: 0.7rem !important;
    }
}

/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TripCargoPlanningWeeklyModal.razor.rz.scp.css */
/* Status Pills - Styled like buttons */
.status-pill[b-qmgl6329az] {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
    transition: all 0.2s;
    cursor: pointer;
    outline: none;
}

.status-pill:disabled[b-qmgl6329az] {
    opacity: 1;
    cursor: default;
}

.status-pill:hover[b-qmgl6329az] {
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}

/* Status Button Styles for TripCargoPlanningWeeklyModal */
.status-waiting-orange[b-qmgl6329az] {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

    .status-waiting-orange:hover[b-qmgl6329az] {
        background-color: #ffedd5;
        box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
    }

.status-booked-green[b-qmgl6329az] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

    .status-booked-green:hover[b-qmgl6329az] {
        background-color: #dcfce7;
        box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    }

.status-delivering-blue[b-qmgl6329az] {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

    .status-delivering-blue:hover[b-qmgl6329az] {
        background-color: #dbeafe;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

.status-completed-green[b-qmgl6329az] {
    background-color: #064e3b;
    color: #ffffff;
    border: 1px solid #047857;
    font-weight: 600;
}

    .status-completed-green:hover[b-qmgl6329az] {
        background-color: #065f46;
        box-shadow: 0 2px 4px rgba(6, 78, 59, 0.3);
    }

.status-cancelled-red[b-qmgl6329az] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 600;
}

    .status-cancelled-red:hover[b-qmgl6329az] {
        background-color: #fee2e2;
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }

.status-unknown-gray[b-qmgl6329az] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

    .status-unknown-gray:hover[b-qmgl6329az] {
        background-color: #f3f4f6;
        box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
    }


/* Base modal styles */
.modal-overlay[b-qmgl6329az] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-qmgl6329az] {
    background: #fff;
    border-radius: 8px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-qmgl6329az] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h3[b-qmgl6329az] {
    margin: 0;
    font-size: 1.4rem;
}

.month-selector[b-qmgl6329az], .week-selector[b-qmgl6329az], .ship-selector[b-qmgl6329az] {
    display: flex;
    gap: 8px;
}

.modal-close[b-qmgl6329az] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
}

.modal-body[b-qmgl6329az] {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.sticky-sidebar[b-qmgl6329az] {
    position: sticky;
    top: 15px;
    height: fit-content;
    z-index: 1;
}

.shipment-summary-card[b-qmgl6329az] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 15px;
}

.shipment-summary-card .card-header[b-qmgl6329az] {
    background-color: #e9ecef;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
}

.shipment-summary-card .card-body p[b-qmgl6329az] {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.grid-section[b-qmgl6329az] {
    margin-bottom: 15px;
}

.grid-header[b-qmgl6329az] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.grid-container[b-qmgl6329az] {
    min-width: 0;
}

.transport-grid-full :deep .rz-column-title[b-qmgl6329az],
.transport-grid-full :deep .transport-cell-value[b-qmgl6329az] {
    text-align: center !important;
    white-space: nowrap;
    font-size: 0.85rem;
}

.item-quantity-container[b-qmgl6329az] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-quantity-row[b-qmgl6329az] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-quantity-row span[b-qmgl6329az] {
    width: 150px;
    text-align: left;
}

.modal-footer[b-qmgl6329az] {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.loading-overlay[b-qmgl6329az] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner[b-qmgl6329az] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-qmgl6329az 1s linear infinite;
}

.spinner-small[b-qmgl6329az] {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-qmgl6329az 1s linear infinite;
}

@keyframes spin-b-qmgl6329az {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Responsive Styles */

/* Mobile First - Base responsive modal */
@media (max-width: 768px) {
    /* Modal overlay and container mobile optimization */
    .modal-overlay[b-qmgl6329az] {
        padding: 8px;
    }
    
    .weekly-planning-modal[b-qmgl6329az] {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Modal Header Mobile */
    .modal-header[b-qmgl6329az] {
        padding: 8px 12px !important;
        flex-direction: column;
        gap: 8px;
        align-items: stretch !important;
    }
    
    .modal-header h3[b-qmgl6329az] {
        font-size: 1rem !important;
        text-align: center;
        margin: 0;
    }
    
    .modal-close[b-qmgl6329az] {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 1.2rem;
        z-index: 10;
    }
    
    /* Month/Week selector mobile optimization */
    .month-selector[b-qmgl6329az],
    .week-selector[b-qmgl6329az],
    .ship-selector[b-qmgl6329az] {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .month-selector .rz-dropdown[b-qmgl6329az],
    .week-selector .btn[b-qmgl6329az],
    .ship-selector .btn[b-qmgl6329az] {
        width: 100% !important;
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
        text-align: center;
    }
    
    /* Week buttons mobile layout */
    .week-selector[b-qmgl6329az] {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
        gap: 4px !important;
    }
    
    .week-selector .btn[b-qmgl6329az] {
        font-size: 0.75rem !important;
        padding: 4px 6px !important;
        white-space: nowrap;
    }
    
    /* Modal Body Mobile */
    .modal-body[b-qmgl6329az] {
        padding: 8px !important;
        overflow-y: auto;
        flex: 1;
    }
    
    .modal-body .container-fluid[b-qmgl6329az] {
        padding: 0 !important;
    }
    
    /* Mobile Layout - Stack elements vertically */
    .modal-body .row[b-qmgl6329az] {
        margin: 0 !important;
        flex-direction: column !important;
    }
    
    .modal-body .col-3[b-qmgl6329az],
    .modal-body .col-9[b-qmgl6329az] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 12px;
    }
    
    /* Sticky sidebar mobile transformation */
    .sticky-sidebar[b-qmgl6329az] {
        position: static !important;
        margin-bottom: 12px;
        order: 1;
    }
    
    /* Shipment summary card mobile */
    .shipment-summary-card[b-qmgl6329az] {
        margin-bottom: 8px !important;
        font-size: 0.8rem;
    }
    
    .shipment-summary-card .card-header[b-qmgl6329az] {
        padding: 6px 8px !important;
        font-size: 0.9rem !important;
        text-align: center;
    }
    
    .shipment-summary-card .card-body[b-qmgl6329az] {
        padding: 8px !important;
    }
    
    .shipment-summary-card .card-body p[b-qmgl6329az] {
        margin-bottom: 3px !important;
        font-size: 0.75rem !important;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    /* Item quantity container mobile */
    .item-quantity-container[b-qmgl6329az] {
        gap: 4px !important;
    }
    
    .item-quantity-row[b-qmgl6329az] {
        flex-direction: column !important;
        gap: 2px !important;
        align-items: stretch !important;
    }
    
    .item-quantity-row span[b-qmgl6329az] {
        width: 100% !important;
        text-align: left !important;
        font-size: 0.75rem !important;
        padding: 2px 4px;
        background: #f8f9fa;
        border-radius: 3px;
    }
    
    /* Grid section mobile */
    .grid-section[b-qmgl6329az] {
        margin-bottom: 8px !important;
        order: 2;
    }
    
    .grid-header[b-qmgl6329az] {
        flex-direction: column !important;
        gap: 6px;
        margin-bottom: 6px !important;
    }
    
    .grid-header h5[b-qmgl6329az] {
        font-size: 0.9rem !important;
        text-align: center;
        margin: 0;
    }
    
    /* Grid actions mobile */
    .grid-header .d-flex[b-qmgl6329az] {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .grid-header .btn[b-qmgl6329az] {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }
    
    /* Transport grid mobile optimization */
    .transport-grid-full[b-qmgl6329az] {
        font-size: 0.7rem !important;
        overflow-x: auto;
    }
    
    .transport-grid-full .rz-data-grid[b-qmgl6329az] {
        min-width: 600px;
    }
    
    .transport-grid-full .rz-grid-table th[b-qmgl6329az],
    .transport-grid-full .rz-grid-table td[b-qmgl6329az] {
        padding: 4px 2px !important;
        font-size: 0.65rem !important;
        white-space: nowrap;
    }
    
    .transport-grid-full .rz-column-title[b-qmgl6329az] {
        font-size: 0.7rem !important;
    }
    
    /* Modal Footer Mobile */
    .modal-footer[b-qmgl6329az] {
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 6px;
        border-top: 2px solid #dee2e6;
    }
    
    .modal-footer .d-flex[b-qmgl6329az] {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }
    
    .modal-footer .btn[b-qmgl6329az] {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        min-width: 80px;
    }
    
    /* Form controls mobile */
    .rz-dropdown[b-qmgl6329az],
    .rz-textbox[b-qmgl6329az],
    .rz-numeric[b-qmgl6329az] {
        font-size: 0.8rem !important;
        height: 32px !important;
    }
    
    /* Loading overlay mobile */
    .loading-overlay[b-qmgl6329az] {
        z-index: 10000 !important;
    }
    
    .spinner[b-qmgl6329az] {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Responsive utilities */
    .mobile-hide[b-qmgl6329az] {
        display: none !important;
    }
    
    .mobile-show[b-qmgl6329az] {
        display: block !important;
    }
    
    /* Compact spacing for mobile */
    .mb-2[b-qmgl6329az] {
        margin-bottom: 6px !important;
    }
    
    .mb-3[b-qmgl6329az] {
        margin-bottom: 8px !important;
    }
    
    .p-2[b-qmgl6329az] {
        padding: 6px !important;
    }
    
    .p-3[b-qmgl6329az] {
        padding: 8px !important;
    }
}

/* Desktop styles - preserve original layout */
@media (min-width: 769px) {
    .mobile-hide[b-qmgl6329az] {
        display: initial !important;
    }
    
    .mobile-show[b-qmgl6329az] {
        display: none !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonths.razor.rz.scp.css */
/* Main tabs styling */
.tabs[b-ivg11wzzr1] {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab[b-ivg11wzzr1] {
    flex: 1;
    padding: 0.2rem;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tab:hover[b-ivg11wzzr1] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.05);
        transform: translateY(-1px);
    }

    .tab.active[b-ivg11wzzr1] {
        color: var(--primary-color);
        font-weight: 600;
        background: rgba(202, 60, 25, 0.08);
    }

        .tab.active[b-ivg11wzzr1]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px 2px 0 0;
        }

/* Subtabs styling */
.subtabs[b-ivg11wzzr1] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.subtab[b-ivg11wzzr1] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 6px;
    margin: 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .subtab:hover[b-ivg11wzzr1] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.15);
    }

    .subtab.active[b-ivg11wzzr1] {
        color: var(--primary-color);
        font-weight: 500;
        background: linear-gradient(135deg, rgba(202, 60, 25, 0.12), rgba(202, 60, 25, 0.08));
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

        .subtab.active[b-ivg11wzzr1]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 0 0 2px 2px;
        }

/* Level 1 subtasks styling */
.subtasks-level1[b-ivg11wzzr1] {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 0.25rem;
    justify-content: space-around;
}

.subtask[b-ivg11wzzr1] {
    padding: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    min-width: 500px;
}

    .subtask:hover[b-ivg11wzzr1] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
    }

    .subtask.active[b-ivg11wzzr1] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.12);
        font-weight: 500;
    }

        .subtask.active[b-ivg11wzzr1]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 1px 1px 0 0;
        }

/* Level 2 switches styling */
.subtasks-level2[b-ivg11wzzr1] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-ivg11wzzr1] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-ivg11wzzr1] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-ivg11wzzr1] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }

/* Planning content area */
.planning[b-ivg11wzzr1] {
    background: white;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.planning-content[b-ivg11wzzr1] {
    min-height: 500px;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
}

/* Responsive design */
@media (max-width: 768px) {
    .tabs[b-ivg11wzzr1] {
        flex-wrap: wrap;
    }

    .tab[b-ivg11wzzr1] {
        min-width: 120px;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .subtabs[b-ivg11wzzr1] {
        flex-wrap: wrap;
        padding: 0.5rem 0.25rem;
    }

    .subtab[b-ivg11wzzr1] {
        min-width: 100px;
        margin: 0.125rem;
        font-size: 0.85rem;
    }

    .subtasks-level1[b-ivg11wzzr1] {
        flex-wrap: wrap;
        gap: 0.2rem;
    }

    .subtask[b-ivg11wzzr1] {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .subtasks-level2[b-ivg11wzzr1] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .switch[b-ivg11wzzr1] {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .planning-content[b-ivg11wzzr1] {
        padding: 1rem;
    }
}

/* Animation for tab switching */
.tab-content[b-ivg11wzzr1] {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .tab-content.active[b-ivg11wzzr1] {
        opacity: 1;
        transform: translateY(0);
    }

/* Enhanced visual hierarchy */
.tabs-container[b-ivg11wzzr1] {
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-wrapper[b-ivg11wzzr1] {
    background: white;
    min-height: 400px;
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.cell-number-right[b-ivg11wzzr1] {
    text-align: right !important;
    justify-content: flex-end !important;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Override sticky positioning on mobile - let tabs scroll with content */
    .tabs[b-ivg11wzzr1] {
        position: static !important;
        z-index: 1 !important;
    }
    
    /* Ensure smooth scrolling on mobile */
    .tab[b-ivg11wzzr1] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Adjust content wrapper for mobile */
    .content-wrapper[b-ivg11wzzr1] {
        padding: 1rem;
        min-height: auto;
    }
    
    /* Make tabs more touch-friendly */
    .tab:hover[b-ivg11wzzr1] {
        transform: none;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsCustomerReceive.razor.rz.scp.css */

.etrans-container[b-b51drvyavp] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-b51drvyavp] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-b51drvyavp] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-b51drvyavp] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-b51drvyavp] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-b51drvyavp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-b51drvyavp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-b51drvyavp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-b51drvyavp] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-b51drvyavp], .filter-select[b-b51drvyavp] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-b51drvyavp], .filter-select:focus[b-b51drvyavp] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-b51drvyavp] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-b51drvyavp] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-b51drvyavp] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-b51drvyavp] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-b51drvyavp] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-b51drvyavp] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-b51drvyavp] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-b51drvyavp] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-b51drvyavp] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-b51drvyavp] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-b51drvyavp], .rz-grid-table td[b-b51drvyavp] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-b51drvyavp] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-b51drvyavp] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-b51drvyavp] {
    background-color: #e9ecef;
}

.status-badge[b-b51drvyavp] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-b51drvyavp] {
    background-color: #28a745;
}

.status-pending[b-b51drvyavp] {
    background-color: #ffc107;
}

.status-completed[b-b51drvyavp] {
    background-color: #17a2b8;
}

.status-default[b-b51drvyavp] {
    background-color: #6c757d;
}

.quantity-cell[b-b51drvyavp], .date-cell[b-b51drvyavp] {
    text-align: right;
}

@keyframes fadeIn-b-b51drvyavp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-b51drvyavp] {
        padding: 12px;
    }

    .filters-grid[b-b51drvyavp] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-b51drvyavp] {
        justify-content: stretch;
    }

    .btn[b-b51drvyavp] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-b51drvyavp] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-b51drvyavp] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-b51drvyavp], .rz-grid-table td[b-b51drvyavp] {
            padding: 8px;
        }

    .data-table th[b-b51drvyavp],
    .data-table td[b-b51drvyavp] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-b51drvyavp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-b51drvyavp 0.3s ease;
    padding: 20px;
}

.modal-container[b-b51drvyavp] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-b51drvyavp 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-b51drvyavp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-b51drvyavp] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-b51drvyavp] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-b51drvyavp] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-b51drvyavp] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-b51drvyavp] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-b51drvyavp] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-b51drvyavp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-b51drvyavp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-b51drvyavp] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-b51drvyavp] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-b51drvyavp] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-b51drvyavp] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-b51drvyavp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-b51drvyavp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-b51drvyavp] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-b51drvyavp] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-b51drvyavp] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-b51drvyavp] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-b51drvyavp] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-b51drvyavp] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-b51drvyavp] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-b51drvyavp] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-b51drvyavp] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-b51drvyavp] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-b51drvyavp] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-b51drvyavp] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-b51drvyavp] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-b51drvyavp] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-b51drvyavp] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-b51drvyavp] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-b51drvyavp] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-b51drvyavp] {
        max-width: 95%;
    }

    .info-grid[b-b51drvyavp] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-b51drvyavp] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-b51drvyavp] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-b51drvyavp] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-b51drvyavp] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-b51drvyavp] {
        padding: 10px;
    }

    .modal-container[b-b51drvyavp] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-b51drvyavp] {
        padding: 16px 20px;
    }

    .modal-title[b-b51drvyavp] {
        font-size: 1rem;
    }

    .info-bar[b-b51drvyavp] {
        padding: 12px 16px;
    }

    .info-grid[b-b51drvyavp] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-b51drvyavp] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-b51drvyavp] {
        padding: 12px 16px;
    }

    .grid-header[b-b51drvyavp] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-b51drvyavp] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-b51drvyavp],
    .transport-grid-full .rz-grid-table td[b-b51drvyavp] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-b51drvyavp] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-b51drvyavp] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-b51drvyavp] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-b51drvyavp] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-b51drvyavp] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-b51drvyavp], .rz-textbox[b-b51drvyavp], .rz-numeric[b-b51drvyavp], .rz-textarea[b-b51drvyavp] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-b51drvyavp] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-b51drvyavp] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-b51drvyavp] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-b51drvyavp] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-b51drvyavp] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-b51drvyavp] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-b51drvyavp],
.rz-numeric.rz-state-invalid[b-b51drvyavp],
.rz-dropdown.rz-state-invalid[b-b51drvyavp] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-b51drvyavp] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-b51drvyavp] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-b51drvyavp]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-b51drvyavp]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-b51drvyavp]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-b51drvyavp]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-b51drvyavp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-b51drvyavp {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-b51drvyavp] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-b51drvyavp] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-b51drvyavp] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-b51drvyavp] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-b51drvyavp] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-b51drvyavp],
    .modal-footer[b-b51drvyavp] {
        display: none;
    }

    .action-buttons[b-b51drvyavp] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-b51drvyavp] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-b51drvyavp] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-b51drvyavp] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-b51drvyavp] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-b51drvyavp] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-b51drvyavp] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-b51drvyavp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-b51drvyavp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-b51drvyavp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-b51drvyavp] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-b51drvyavp], .filter-select[b-b51drvyavp] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-b51drvyavp], .filter-select:focus[b-b51drvyavp] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-b51drvyavp] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-b51drvyavp] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-b51drvyavp] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-b51drvyavp] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-b51drvyavp] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-b51drvyavp] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-b51drvyavp] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-b51drvyavp] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-b51drvyavp] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-b51drvyavp], .rz-grid-table td[b-b51drvyavp] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-b51drvyavp] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-b51drvyavp] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-b51drvyavp] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-b51drvyavp] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-b51drvyavp] {
    background-color: #28a745;
}

.status-pending[b-b51drvyavp] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-b51drvyavp] {
    background-color: #17a2b8;
}

.status-cancelled[b-b51drvyavp] {
    background-color: #dc3545;
}

.status-default[b-b51drvyavp] {
    background-color: #6c757d;
}

.quantity-cell[b-b51drvyavp], .date-cell[b-b51drvyavp] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-b51drvyavp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-b51drvyavp 0.3s ease;
}

.modal-container[b-b51drvyavp] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-b51drvyavp 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-b51drvyavp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-b51drvyavp] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-b51drvyavp] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-b51drvyavp] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-b51drvyavp] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-b51drvyavp] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-b51drvyavp] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-b51drvyavp] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-b51drvyavp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-b51drvyavp] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-b51drvyavp] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-b51drvyavp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-b51drvyavp] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-b51drvyavp] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-b51drvyavp] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-b51drvyavp] {
        background: #f8f9fa;
    }

.highlight-row[b-b51drvyavp] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-b51drvyavp] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-b51drvyavp] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-b51drvyavp] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-b51drvyavp] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-b51drvyavp] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-b51drvyavp] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-b51drvyavp] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-b51drvyavp] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-b51drvyavp] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-b51drvyavp] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-b51drvyavp] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-b51drvyavp] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-b51drvyavp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-b51drvyavp {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-b51drvyavp] {
        width: 98%;
    }

    .detail-layout[b-b51drvyavp] {
        flex-direction: column;
    }

    .left-panel[b-b51drvyavp] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-b51drvyavp] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-b51drvyavp] {
        padding: 12px;
    }

    .filters-grid[b-b51drvyavp] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-b51drvyavp] {
        justify-content: stretch;
    }

    .btn[b-b51drvyavp] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-b51drvyavp] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-b51drvyavp] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-b51drvyavp], .rz-grid-table td[b-b51drvyavp] {
            padding: 8px;
        }

    .data-table th[b-b51drvyavp],
    .data-table td[b-b51drvyavp] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-b51drvyavp] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-b51drvyavp] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-b51drvyavp],
        .transport-grid .rz-grid-table td[b-b51drvyavp] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-b51drvyavp] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-b51drvyavp] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-b51drvyavp] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-b51drvyavp] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-b51drvyavp], .rz-textbox[b-b51drvyavp], .rz-numeric[b-b51drvyavp], .rz-textarea[b-b51drvyavp] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-b51drvyavp] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-b51drvyavp] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-b51drvyavp] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-b51drvyavp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-b51drvyavp] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-b51drvyavp] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-b51drvyavp] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-b51drvyavp] {
        background-color: #dc3545;
    }


.time-grid[b-b51drvyavp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 12px;
}

.time-week-header[b-b51drvyavp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.week-label[b-b51drvyavp] {
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
}

.week-value[b-b51drvyavp] {
    font-weight: 600;
    color: #1976d2;
}

.time-edit-grid[b-b51drvyavp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsFactory.razor.rz.scp.css */
.status-circle[b-nluj6r0vq2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    background: linear-gradient(145deg, #ffffff33, #00000022);
    backdrop-filter: blur(4px);
    position: relative;
    line-height: 1;
}

.status-circle-record[b-nluj6r0vq2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1;
}

.status-default[b-nluj6r0vq2],
.status-notstarted[b-nluj6r0vq2] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-nluj6r0vq2] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-nluj6r0vq2],
.status-canceled[b-nluj6r0vq2] {
    background: linear-gradient(145deg, #e55353, #dc3545);
}

.status-executed[b-nluj6r0vq2],
.status-completed[b-nluj6r0vq2] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-nluj6r0vq2] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-nluj6r0vq2] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.etrans-container[b-nluj6r0vq2] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-nluj6r0vq2] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-nluj6r0vq2] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-nluj6r0vq2] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-nluj6r0vq2] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
    position: relative;
    z-index: 0;
}

.filters-title[b-nluj6r0vq2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-nluj6r0vq2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-nluj6r0vq2] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-nluj6r0vq2], .filter-select[b-nluj6r0vq2] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-nluj6r0vq2], .filter-select:focus[b-nluj6r0vq2] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-nluj6r0vq2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.btn[b-nluj6r0vq2] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-nluj6r0vq2] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-nluj6r0vq2] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-nluj6r0vq2] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-nluj6r0vq2] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-nluj6r0vq2] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-nluj6r0vq2] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }


.rz-data-grid[b-nluj6r0vq2] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 40px;
   
}

.rz-grid-table th[b-nluj6r0vq2], .rz-grid-table td[b-nluj6r0vq2] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-nluj6r0vq2] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-nluj6r0vq2] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-nluj6r0vq2] {
    background-color: #e9ecef;
}

.status-badge[b-nluj6r0vq2] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-nluj6r0vq2] {
    background-color: #28a745;
}

.status-pending[b-nluj6r0vq2] {
    background-color: #ffc107;
}

.status-completed[b-nluj6r0vq2] {
    background-color: #17a2b8;
}

.status-default[b-nluj6r0vq2] {
    background-color: #6c757d;
}

.quantity-cell[b-nluj6r0vq2], .date-cell[b-nluj6r0vq2] {
    text-align: right;
}

@keyframes fadeIn-b-nluj6r0vq2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-nluj6r0vq2] {
        padding: 12px;
    }

    .filters-grid[b-nluj6r0vq2] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-nluj6r0vq2] {
        justify-content: stretch;
    }

    .btn[b-nluj6r0vq2] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-nluj6r0vq2] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-nluj6r0vq2] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-nluj6r0vq2], .rz-grid-table td[b-nluj6r0vq2] {
            padding: 8px;
        }

    .data-table th[b-nluj6r0vq2],
    .data-table td[b-nluj6r0vq2] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-nluj6r0vq2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-nluj6r0vq2 0.3s ease;
    padding: 20px;
}

.modal-container[b-nluj6r0vq2] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-nluj6r0vq2 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-nluj6r0vq2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-nluj6r0vq2] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-nluj6r0vq2] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-nluj6r0vq2] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-nluj6r0vq2] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-nluj6r0vq2] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-nluj6r0vq2] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-nluj6r0vq2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-nluj6r0vq2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-nluj6r0vq2] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-nluj6r0vq2] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-nluj6r0vq2] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-nluj6r0vq2] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-nluj6r0vq2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-nluj6r0vq2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-nluj6r0vq2] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-nluj6r0vq2] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-nluj6r0vq2] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-nluj6r0vq2] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-nluj6r0vq2] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-nluj6r0vq2] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-nluj6r0vq2] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-nluj6r0vq2] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-nluj6r0vq2] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-nluj6r0vq2] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-nluj6r0vq2] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-nluj6r0vq2] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-nluj6r0vq2] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-nluj6r0vq2] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-nluj6r0vq2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-nluj6r0vq2] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-nluj6r0vq2] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-nluj6r0vq2] {
        max-width: 95%;
    }

    .info-grid[b-nluj6r0vq2] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-nluj6r0vq2] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-nluj6r0vq2] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-nluj6r0vq2] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-nluj6r0vq2] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-nluj6r0vq2] {
        padding: 10px;
    }

    .modal-container[b-nluj6r0vq2] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-nluj6r0vq2] {
        padding: 16px 20px;
    }

    .modal-title[b-nluj6r0vq2] {
        font-size: 1rem;
    }

    .info-bar[b-nluj6r0vq2] {
        padding: 12px 16px;
    }

    .info-grid[b-nluj6r0vq2] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-nluj6r0vq2] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-nluj6r0vq2] {
        padding: 12px 16px;
    }

    .grid-header[b-nluj6r0vq2] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-nluj6r0vq2] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-nluj6r0vq2],
    .transport-grid-full .rz-grid-table td[b-nluj6r0vq2] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-nluj6r0vq2] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-nluj6r0vq2] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-nluj6r0vq2] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-nluj6r0vq2] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-nluj6r0vq2] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-nluj6r0vq2], .rz-textbox[b-nluj6r0vq2], .rz-numeric[b-nluj6r0vq2], .rz-textarea[b-nluj6r0vq2] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-nluj6r0vq2] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-nluj6r0vq2] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-nluj6r0vq2] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-nluj6r0vq2] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-nluj6r0vq2] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-nluj6r0vq2] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-nluj6r0vq2],
.rz-numeric.rz-state-invalid[b-nluj6r0vq2],
.rz-dropdown.rz-state-invalid[b-nluj6r0vq2] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-nluj6r0vq2] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-nluj6r0vq2] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-nluj6r0vq2]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-nluj6r0vq2]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-nluj6r0vq2]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-nluj6r0vq2]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-nluj6r0vq2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-nluj6r0vq2 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-nluj6r0vq2] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-nluj6r0vq2] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-nluj6r0vq2] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-nluj6r0vq2] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-nluj6r0vq2] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-nluj6r0vq2],
    .modal-footer[b-nluj6r0vq2] {
        display: none;
    }

    .action-buttons[b-nluj6r0vq2] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-nluj6r0vq2] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-nluj6r0vq2] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-nluj6r0vq2] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-nluj6r0vq2] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-nluj6r0vq2] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-nluj6r0vq2] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-nluj6r0vq2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-nluj6r0vq2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-nluj6r0vq2] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-nluj6r0vq2], .filter-select[b-nluj6r0vq2] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-nluj6r0vq2], .filter-select:focus[b-nluj6r0vq2] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-nluj6r0vq2] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-nluj6r0vq2] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-nluj6r0vq2] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-nluj6r0vq2] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-nluj6r0vq2] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-nluj6r0vq2] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-nluj6r0vq2] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }



/* Radzen DataGrid styles */
.rz-data-grid[b-nluj6r0vq2] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-nluj6r0vq2], .rz-grid-table td[b-nluj6r0vq2] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-nluj6r0vq2] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-nluj6r0vq2] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-nluj6r0vq2] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-nluj6r0vq2] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-nluj6r0vq2] {
    background-color: #28a745;
}

.status-pending[b-nluj6r0vq2] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-nluj6r0vq2] {
    background-color: #17a2b8;
}

.status-cancelled[b-nluj6r0vq2] {
    background-color: #dc3545;
}

.status-default[b-nluj6r0vq2] {
    background-color: #6c757d;
}

.quantity-cell[b-nluj6r0vq2], .date-cell[b-nluj6r0vq2] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-nluj6r0vq2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-nluj6r0vq2 0.3s ease;
}

.modal-container[b-nluj6r0vq2] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-nluj6r0vq2 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-nluj6r0vq2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-nluj6r0vq2] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-nluj6r0vq2] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-nluj6r0vq2] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-nluj6r0vq2] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-nluj6r0vq2] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-nluj6r0vq2] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-nluj6r0vq2] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-nluj6r0vq2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-nluj6r0vq2] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-nluj6r0vq2] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-nluj6r0vq2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-nluj6r0vq2] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-nluj6r0vq2] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-nluj6r0vq2] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-nluj6r0vq2] {
        background: #f8f9fa;
    }

.highlight-row[b-nluj6r0vq2] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-nluj6r0vq2] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-nluj6r0vq2] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-nluj6r0vq2] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-nluj6r0vq2] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-nluj6r0vq2] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-nluj6r0vq2] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-nluj6r0vq2] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-nluj6r0vq2] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-nluj6r0vq2] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-nluj6r0vq2] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-nluj6r0vq2] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-nluj6r0vq2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-nluj6r0vq2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-nluj6r0vq2 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-nluj6r0vq2] {
        width: 98%;
    }

    .detail-layout[b-nluj6r0vq2] {
        flex-direction: column;
    }

    .left-panel[b-nluj6r0vq2] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-nluj6r0vq2] {
        flex: 1;
    }
}

/* Filter wrapper */
.filter-wrapper[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-nluj6r0vq2] {
        display: none !important;
    }
    
    .mobile-filters-content[b-nluj6r0vq2] {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0 !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-nluj6r0vq2] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-nluj6r0vq2] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-nluj6r0vq2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-nluj6r0vq2] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-nluj6r0vq2] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-nluj6r0vq2] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-nluj6r0vq2] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-nluj6r0vq2] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-nluj6r0vq2] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-nluj6r0vq2] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-nluj6r0vq2] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-nluj6r0vq2] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .mobile-compact-filters .filters-grid[b-nluj6r0vq2] {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    
    .mobile-compact-filters .filter-group[b-nluj6r0vq2] {
        margin-bottom: 4px;
    }
    
    .mobile-compact-filters .filter-label[b-nluj6r0vq2] {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }

    .filter-actions[b-nluj6r0vq2] {
        justify-content: stretch;
        flex-direction: row;
        gap: 6px;
        margin-top: 8px;
    }

    .btn[b-nluj6r0vq2] {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 12px;
        min-height: 36px;
    }

    .filter-input[b-nluj6r0vq2], .filter-select[b-nluj6r0vq2] {
        padding: 8px;
        font-size: 0.8rem;
        height: 36px;
        border-radius: 6px;
    }

    .table-header[b-nluj6r0vq2] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-nluj6r0vq2] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-nluj6r0vq2], .rz-grid-table td[b-nluj6r0vq2] {
            padding: 8px 4px;
            font-size: 0.7rem;
        }

    .data-table th[b-nluj6r0vq2],
    .data-table td[b-nluj6r0vq2] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-nluj6r0vq2] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-nluj6r0vq2] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-nluj6r0vq2],
        .transport-grid .rz-grid-table td[b-nluj6r0vq2] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-nluj6r0vq2] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-nluj6r0vq2] {
            text-align: center;
        }
    
    /* Mobile grid adjustments */
    .rz-grid-table[b-nluj6r0vq2] {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .rz-grid-table th[b-nluj6r0vq2], 
    .rz-grid-table td[b-nluj6r0vq2] {
        padding: 6px 4px !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Hide less important columns on mobile */
    .rz-grid-table th:nth-child(n+6)[b-nluj6r0vq2],
    .rz-grid-table td:nth-child(n+6)[b-nluj6r0vq2] {
        display: none;
    }
    
    /* Keep essential columns visible */
    .rz-grid-table th:nth-child(1)[b-nluj6r0vq2],
    .rz-grid-table td:nth-child(1)[b-nluj6r0vq2],
    .rz-grid-table th:nth-child(2)[b-nluj6r0vq2],
    .rz-grid-table td:nth-child(2)[b-nluj6r0vq2],
    .rz-grid-table th:nth-child(3)[b-nluj6r0vq2],
    .rz-grid-table td:nth-child(3)[b-nluj6r0vq2],
    .rz-grid-table th:last-child[b-nluj6r0vq2],
    .rz-grid-table td:last-child[b-nluj6r0vq2] {
        display: table-cell !important;
    }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-nluj6r0vq2] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-nluj6r0vq2] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-nluj6r0vq2], .rz-textbox[b-nluj6r0vq2], .rz-numeric[b-nluj6r0vq2], .rz-textarea[b-nluj6r0vq2] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-nluj6r0vq2] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-nluj6r0vq2] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-nluj6r0vq2] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-nluj6r0vq2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-nluj6r0vq2] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-nluj6r0vq2] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-nluj6r0vq2] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-nluj6r0vq2] {
        background-color: #dc3545;
    }


.time-grid[b-nluj6r0vq2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 12px;
}

.time-week-header[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.week-label[b-nluj6r0vq2] {
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
}

.week-value[b-nluj6r0vq2] {
    font-weight: 600;
    color: #1976d2;
}

.time-edit-grid[b-nluj6r0vq2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.action-buttons-container[b-nluj6r0vq2] {
    display: flex;
    flex-direction : row;
}

/* Mobile action column styling */
@media (max-width: 768px) {
    .action-header[b-nluj6r0vq2],
    .action-cell[b-nluj6r0vq2] {
        background: white !important;
        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .action-header[b-nluj6r0vq2] {
        background: #e9ecef !important;
    }
    
    .rz-grid-table tr:nth-child(even) .action-cell[b-nluj6r0vq2] {
        background: #f8f9fa !important;
    }
    
    .rz-grid-table tr:hover .action-cell[b-nluj6r0vq2] {
        background: #e9ecef !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsSTS.razor.rz.scp.css */
.filters-section[b-oxpfednc2t] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-oxpfednc2t] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-oxpfednc2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-oxpfednc2t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-oxpfednc2t] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-oxpfednc2t], .filter-select[b-oxpfednc2t] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-oxpfednc2t], .filter-select:focus[b-oxpfednc2t] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-oxpfednc2t] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.etrans-container[b-oxpfednc2t] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-oxpfednc2t] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-oxpfednc2t] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-oxpfednc2t] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-oxpfednc2t] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-oxpfednc2t] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-oxpfednc2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-oxpfednc2t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-oxpfednc2t] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-oxpfednc2t], .filter-select[b-oxpfednc2t] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-oxpfednc2t], .filter-select:focus[b-oxpfednc2t] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-oxpfednc2t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-oxpfednc2t] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-oxpfednc2t] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-oxpfednc2t] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-oxpfednc2t] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-oxpfednc2t] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-oxpfednc2t] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-oxpfednc2t] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-oxpfednc2t] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-oxpfednc2t] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-oxpfednc2t], .rz-grid-table td[b-oxpfednc2t] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-oxpfednc2t] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-oxpfednc2t] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-oxpfednc2t] {
    background-color: #e9ecef;
}

.status-badge[b-oxpfednc2t] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-oxpfednc2t] {
    background-color: #28a745;
}

.status-pending[b-oxpfednc2t] {
    background-color: #ffc107;
}

.status-completed[b-oxpfednc2t] {
    background-color: #17a2b8;
}

.status-default[b-oxpfednc2t] {
    background-color: #6c757d;
}

.quantity-cell[b-oxpfednc2t], .date-cell[b-oxpfednc2t] {
    text-align: right;
}

@keyframes fadeIn-b-oxpfednc2t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-oxpfednc2t] {
        padding: 12px;
    }

    .filters-grid[b-oxpfednc2t] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-oxpfednc2t] {
        justify-content: stretch;
    }

    .btn[b-oxpfednc2t] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-oxpfednc2t] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-oxpfednc2t] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-oxpfednc2t], .rz-grid-table td[b-oxpfednc2t] {
            padding: 8px;
        }

    .data-table th[b-oxpfednc2t],
    .data-table td[b-oxpfednc2t] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-oxpfednc2t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-oxpfednc2t 0.3s ease;
    padding: 20px;
}

.modal-container[b-oxpfednc2t] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-oxpfednc2t 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-oxpfednc2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-oxpfednc2t] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-oxpfednc2t] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-oxpfednc2t] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-oxpfednc2t] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-oxpfednc2t] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-oxpfednc2t] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-oxpfednc2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-oxpfednc2t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-oxpfednc2t] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-oxpfednc2t] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-oxpfednc2t] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-oxpfednc2t] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-oxpfednc2t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-oxpfednc2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-oxpfednc2t] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-oxpfednc2t] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-oxpfednc2t] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-oxpfednc2t] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-oxpfednc2t] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-oxpfednc2t] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-oxpfednc2t] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-oxpfednc2t] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-oxpfednc2t] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-oxpfednc2t] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-oxpfednc2t] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-oxpfednc2t] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-oxpfednc2t] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-oxpfednc2t] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-oxpfednc2t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-oxpfednc2t] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-oxpfednc2t] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-oxpfednc2t] {
        max-width: 95%;
    }

    .info-grid[b-oxpfednc2t] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-oxpfednc2t] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-oxpfednc2t] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-oxpfednc2t] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-oxpfednc2t] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-oxpfednc2t] {
        padding: 10px;
    }

    .modal-container[b-oxpfednc2t] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-oxpfednc2t] {
        padding: 16px 20px;
    }

    .modal-title[b-oxpfednc2t] {
        font-size: 1rem;
    }

    .info-bar[b-oxpfednc2t] {
        padding: 12px 16px;
    }

    .info-grid[b-oxpfednc2t] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-oxpfednc2t] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-oxpfednc2t] {
        padding: 12px 16px;
    }

    .grid-header[b-oxpfednc2t] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-oxpfednc2t] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-oxpfednc2t],
    .transport-grid-full .rz-grid-table td[b-oxpfednc2t] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-oxpfednc2t] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-oxpfednc2t] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-oxpfednc2t] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-oxpfednc2t] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-oxpfednc2t] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-oxpfednc2t], .rz-textbox[b-oxpfednc2t], .rz-numeric[b-oxpfednc2t], .rz-textarea[b-oxpfednc2t] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-oxpfednc2t] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-oxpfednc2t] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-oxpfednc2t] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-oxpfednc2t] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-oxpfednc2t] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-oxpfednc2t] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-oxpfednc2t],
.rz-numeric.rz-state-invalid[b-oxpfednc2t],
.rz-dropdown.rz-state-invalid[b-oxpfednc2t] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-oxpfednc2t] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-oxpfednc2t] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-oxpfednc2t]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-oxpfednc2t]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-oxpfednc2t]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-oxpfednc2t]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-oxpfednc2t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-oxpfednc2t {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-oxpfednc2t] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-oxpfednc2t] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-oxpfednc2t] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-oxpfednc2t] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-oxpfednc2t] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-oxpfednc2t],
    .modal-footer[b-oxpfednc2t] {
        display: none;
    }

    .action-buttons[b-oxpfednc2t] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-oxpfednc2t] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-oxpfednc2t] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-oxpfednc2t] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-oxpfednc2t] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-oxpfednc2t] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-oxpfednc2t] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-oxpfednc2t] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-oxpfednc2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-oxpfednc2t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-oxpfednc2t] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-oxpfednc2t], .filter-select[b-oxpfednc2t] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-oxpfednc2t], .filter-select:focus[b-oxpfednc2t] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-oxpfednc2t] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-oxpfednc2t] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-oxpfednc2t] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-oxpfednc2t] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-oxpfednc2t] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-oxpfednc2t] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-oxpfednc2t] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-oxpfednc2t] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-oxpfednc2t] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-oxpfednc2t], .rz-grid-table td[b-oxpfednc2t] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-oxpfednc2t] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-oxpfednc2t] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-oxpfednc2t] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-oxpfednc2t] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-oxpfednc2t] {
    background-color: #28a745;
}

.status-pending[b-oxpfednc2t] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-oxpfednc2t] {
    background-color: #17a2b8;
}

.status-cancelled[b-oxpfednc2t] {
    background-color: #dc3545;
}

.status-default[b-oxpfednc2t] {
    background-color: #6c757d;
}

.quantity-cell[b-oxpfednc2t], .date-cell[b-oxpfednc2t] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-oxpfednc2t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-oxpfednc2t 0.3s ease;
}

.modal-container[b-oxpfednc2t] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-oxpfednc2t 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-oxpfednc2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-oxpfednc2t] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-oxpfednc2t] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-oxpfednc2t] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-oxpfednc2t] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-oxpfednc2t] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-oxpfednc2t] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-oxpfednc2t] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-oxpfednc2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-oxpfednc2t] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-oxpfednc2t] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-oxpfednc2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-oxpfednc2t] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-oxpfednc2t] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-oxpfednc2t] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-oxpfednc2t] {
        background: #f8f9fa;
    }

.highlight-row[b-oxpfednc2t] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-oxpfednc2t] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-oxpfednc2t] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-oxpfednc2t] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-oxpfednc2t] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-oxpfednc2t] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-oxpfednc2t] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-oxpfednc2t] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-oxpfednc2t] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-oxpfednc2t] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-oxpfednc2t] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-oxpfednc2t] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-oxpfednc2t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-oxpfednc2t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-oxpfednc2t {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-oxpfednc2t] {
        width: 98%;
    }

    .detail-layout[b-oxpfednc2t] {
        flex-direction: column;
    }

    .left-panel[b-oxpfednc2t] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-oxpfednc2t] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-oxpfednc2t] {
        padding: 12px;
    }

    .filters-grid[b-oxpfednc2t] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-oxpfednc2t] {
        justify-content: stretch;
    }

    .btn[b-oxpfednc2t] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-oxpfednc2t] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-oxpfednc2t] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-oxpfednc2t], .rz-grid-table td[b-oxpfednc2t] {
            padding: 8px;
        }

    .data-table th[b-oxpfednc2t],
    .data-table td[b-oxpfednc2t] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-oxpfednc2t] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-oxpfednc2t] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-oxpfednc2t],
        .transport-grid .rz-grid-table td[b-oxpfednc2t] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-oxpfednc2t] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-oxpfednc2t] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-oxpfednc2t] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-oxpfednc2t] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-oxpfednc2t], .rz-textbox[b-oxpfednc2t], .rz-numeric[b-oxpfednc2t], .rz-textarea[b-oxpfednc2t] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-oxpfednc2t] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-oxpfednc2t] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-oxpfednc2t] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-oxpfednc2t] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-oxpfednc2t] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-oxpfednc2t] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-oxpfednc2t] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-oxpfednc2t] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-oxpfednc2t] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-oxpfednc2t] {
        display: none !important;
    }
    
    .mobile-filters-content[b-oxpfednc2t] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-oxpfednc2t] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-oxpfednc2t] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-oxpfednc2t] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-oxpfednc2t] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-oxpfednc2t] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-oxpfednc2t] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-oxpfednc2t] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-oxpfednc2t] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-oxpfednc2t] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-oxpfednc2t] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-oxpfednc2t] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-oxpfednc2t] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-oxpfednc2t] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-oxpfednc2t], .filter-select[b-oxpfednc2t] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-oxpfednc2t] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-oxpfednc2t] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-oxpfednc2t] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-oxpfednc2t],
    .rz-grid-table td[b-oxpfednc2t] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-oxpfednc2t] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsWarehouseShip.razor.rz.scp.css */
.filters-section[b-p4pgxwqc42] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-p4pgxwqc42] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-p4pgxwqc42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-p4pgxwqc42] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-p4pgxwqc42] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-p4pgxwqc42], .filter-select[b-p4pgxwqc42] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-p4pgxwqc42], .filter-select:focus[b-p4pgxwqc42] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-p4pgxwqc42] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Override Radzen default styles */
.rz-textbox.form-input[b-p4pgxwqc42],
.rz-numeric.form-input[b-p4pgxwqc42],
.rz-dropdown.form-input[b-p4pgxwqc42],
.rz-datepicker.form-input[b-p4pgxwqc42] {
    width: 100% !important;
    height: 36px !important;
}

.rz-dropdown-panel[b-p4pgxwqc42] {
    z-index: 10000 !important;
}

/* Make dropdowns more attractive */
.rz-dropdown.form-input .rz-dropdown-label[b-p4pgxwqc42] {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-grid[b-p4pgxwqc42] {
        grid-template-columns: 1fr;
    }

    .domestic-form[b-p4pgxwqc42] {
        padding: 12px;
    }

    .form-header h4[b-p4pgxwqc42] {
        font-size: 14px;
    }
}

/* Grid styling improvements */
.transport-grid[b-p4pgxwqc42] {
    font-size: 13px;
}

    .transport-grid .rz-datatable-data td[b-p4pgxwqc42] {
        padding: 8px 6px !important;
        vertical-align: middle;
    }

.quantity-highlight[b-p4pgxwqc42] {
    font-weight: bold;
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.transport-value[b-p4pgxwqc42] {
    text-align: right;
    font-weight: 500;
}

/* Remaining quantity styling */
.remaining-quantity[b-p4pgxwqc42] {
    background-color: #f0f8ff !important;
    color: #0066cc !important;
    font-weight: bold !important;
    border: 1px solid #b3d9ff !important;
}

.detail-value.remaining-quantity[b-p4pgxwqc42] {
    background-color: #f0f8ff;
    color: #0066cc;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #b3d9ff;
}

/* Disabled field styling */
.disabled-field[b-p4pgxwqc42] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
}

.buttons-grid[b-p4pgxwqc42] {
    display: flex;
    justify-content: flex-end; /* đẩy sang bên phải */
    gap: 8px; /* khoảng cách giữa các button-group */
}

.button-group[b-p4pgxwqc42] {
    display: inline-flex;
}

.etrans-container[b-p4pgxwqc42] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-p4pgxwqc42] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-p4pgxwqc42] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-p4pgxwqc42] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-p4pgxwqc42] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-p4pgxwqc42] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-p4pgxwqc42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-p4pgxwqc42] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-p4pgxwqc42] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-p4pgxwqc42], .filter-select[b-p4pgxwqc42] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-p4pgxwqc42], .filter-select:focus[b-p4pgxwqc42] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-p4pgxwqc42] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-p4pgxwqc42] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-p4pgxwqc42] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-p4pgxwqc42] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-p4pgxwqc42] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-p4pgxwqc42] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-p4pgxwqc42] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-p4pgxwqc42] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-p4pgxwqc42] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-p4pgxwqc42] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-p4pgxwqc42], .rz-grid-table td[b-p4pgxwqc42] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-p4pgxwqc42] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-p4pgxwqc42] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-p4pgxwqc42] {
    background-color: #e9ecef;
}

.status-badge[b-p4pgxwqc42] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-p4pgxwqc42] {
    background-color: #28a745;
}

.status-pending[b-p4pgxwqc42] {
    background-color: #ffc107;
}

.status-completed[b-p4pgxwqc42] {
    background-color: #17a2b8;
}

.status-default[b-p4pgxwqc42] {
    background-color: #6c757d;
}

.quantity-cell[b-p4pgxwqc42], .date-cell[b-p4pgxwqc42] {
    text-align: right;
}

@keyframes fadeIn-b-p4pgxwqc42 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-p4pgxwqc42] {
        padding: 12px;
    }

    .filters-grid[b-p4pgxwqc42] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-p4pgxwqc42] {
        justify-content: stretch;
    }

    .btn[b-p4pgxwqc42] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-p4pgxwqc42] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-p4pgxwqc42] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-p4pgxwqc42], .rz-grid-table td[b-p4pgxwqc42] {
            padding: 8px;
        }

    .data-table th[b-p4pgxwqc42],
    .data-table td[b-p4pgxwqc42] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-p4pgxwqc42] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-p4pgxwqc42 0.3s ease;
    padding: 20px;
}

.modal-container[b-p4pgxwqc42] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-p4pgxwqc42 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-p4pgxwqc42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-p4pgxwqc42] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-p4pgxwqc42] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-p4pgxwqc42] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-p4pgxwqc42] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-p4pgxwqc42] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-p4pgxwqc42] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-p4pgxwqc42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-p4pgxwqc42] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-p4pgxwqc42] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-p4pgxwqc42] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-p4pgxwqc42] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-p4pgxwqc42] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-p4pgxwqc42] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-p4pgxwqc42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-p4pgxwqc42] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-p4pgxwqc42] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-p4pgxwqc42] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-p4pgxwqc42] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-p4pgxwqc42] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-p4pgxwqc42] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-p4pgxwqc42] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-p4pgxwqc42] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-p4pgxwqc42] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-p4pgxwqc42] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-p4pgxwqc42] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-p4pgxwqc42] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-p4pgxwqc42] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-p4pgxwqc42] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-p4pgxwqc42] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-p4pgxwqc42] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-p4pgxwqc42] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-p4pgxwqc42] {
        max-width: 95%;
    }

    .info-grid[b-p4pgxwqc42] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-p4pgxwqc42] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-p4pgxwqc42] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-p4pgxwqc42] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-p4pgxwqc42] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-p4pgxwqc42] {
        padding: 10px;
    }

    .modal-container[b-p4pgxwqc42] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-p4pgxwqc42] {
        padding: 16px 20px;
    }

    .modal-title[b-p4pgxwqc42] {
        font-size: 1rem;
    }

    .info-bar[b-p4pgxwqc42] {
        padding: 12px 16px;
    }

    .info-grid[b-p4pgxwqc42] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-p4pgxwqc42] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-p4pgxwqc42] {
        padding: 12px 16px;
    }

    .grid-header[b-p4pgxwqc42] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-p4pgxwqc42] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-p4pgxwqc42],
    .transport-grid-full .rz-grid-table td[b-p4pgxwqc42] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-p4pgxwqc42] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-p4pgxwqc42] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-p4pgxwqc42] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-p4pgxwqc42] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-p4pgxwqc42] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-p4pgxwqc42], .rz-textbox[b-p4pgxwqc42], .rz-numeric[b-p4pgxwqc42], .rz-textarea[b-p4pgxwqc42] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-p4pgxwqc42] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-p4pgxwqc42] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-p4pgxwqc42] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-p4pgxwqc42] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-p4pgxwqc42] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-p4pgxwqc42] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-p4pgxwqc42],
.rz-numeric.rz-state-invalid[b-p4pgxwqc42],
.rz-dropdown.rz-state-invalid[b-p4pgxwqc42] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-p4pgxwqc42] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-p4pgxwqc42] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-p4pgxwqc42]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-p4pgxwqc42]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-p4pgxwqc42]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-p4pgxwqc42]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-p4pgxwqc42 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-p4pgxwqc42 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-p4pgxwqc42] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-p4pgxwqc42] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-p4pgxwqc42] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-p4pgxwqc42] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-p4pgxwqc42] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-p4pgxwqc42],
    .modal-footer[b-p4pgxwqc42] {
        display: none;
    }

    .action-buttons[b-p4pgxwqc42] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-p4pgxwqc42] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-p4pgxwqc42] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    margin-top: 1px;
}

/* Header styles */
.header[b-p4pgxwqc42] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-p4pgxwqc42] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-p4pgxwqc42] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-p4pgxwqc42] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-p4pgxwqc42] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-p4pgxwqc42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-p4pgxwqc42] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-p4pgxwqc42] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-p4pgxwqc42], .filter-select[b-p4pgxwqc42] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-p4pgxwqc42], .filter-select:focus[b-p4pgxwqc42] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-p4pgxwqc42] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-p4pgxwqc42] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-p4pgxwqc42] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-p4pgxwqc42] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-p4pgxwqc42] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-p4pgxwqc42] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-p4pgxwqc42] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-p4pgxwqc42] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-p4pgxwqc42] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-p4pgxwqc42], .rz-grid-table td[b-p4pgxwqc42] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-p4pgxwqc42] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-p4pgxwqc42] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-p4pgxwqc42] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-p4pgxwqc42] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-p4pgxwqc42] {
    background-color: #28a745;
}

.status-pending[b-p4pgxwqc42] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-p4pgxwqc42] {
    background-color: #17a2b8;
}

.status-cancelled[b-p4pgxwqc42] {
    background-color: #dc3545;
}

.status-default[b-p4pgxwqc42] {
    background-color: #6c757d;
}

.quantity-cell[b-p4pgxwqc42], .date-cell[b-p4pgxwqc42] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-p4pgxwqc42] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-p4pgxwqc42 0.3s ease;
}

.modal-container[b-p4pgxwqc42] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-p4pgxwqc42 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-p4pgxwqc42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-p4pgxwqc42] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-p4pgxwqc42] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-p4pgxwqc42] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-p4pgxwqc42] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-p4pgxwqc42] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-p4pgxwqc42] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-p4pgxwqc42] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-p4pgxwqc42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-p4pgxwqc42] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-p4pgxwqc42] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-p4pgxwqc42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-p4pgxwqc42] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-p4pgxwqc42] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-p4pgxwqc42] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-p4pgxwqc42] {
        background: #f8f9fa;
    }

.highlight-row[b-p4pgxwqc42] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-p4pgxwqc42] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-p4pgxwqc42] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-p4pgxwqc42] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-p4pgxwqc42] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-p4pgxwqc42] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-p4pgxwqc42] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-p4pgxwqc42] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-p4pgxwqc42] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-p4pgxwqc42] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-p4pgxwqc42] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-p4pgxwqc42] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-p4pgxwqc42] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-p4pgxwqc42 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-p4pgxwqc42 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-p4pgxwqc42] {
        width: 98%;
    }

    .detail-layout[b-p4pgxwqc42] {
        flex-direction: column;
    }

    .left-panel[b-p4pgxwqc42] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-p4pgxwqc42] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-p4pgxwqc42] {
        padding: 12px;
    }

    .filters-grid[b-p4pgxwqc42] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-p4pgxwqc42] {
        justify-content: stretch;
    }

    .btn[b-p4pgxwqc42] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-p4pgxwqc42] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-p4pgxwqc42] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-p4pgxwqc42], .rz-grid-table td[b-p4pgxwqc42] {
            padding: 8px;
        }

    .data-table th[b-p4pgxwqc42],
    .data-table td[b-p4pgxwqc42] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-p4pgxwqc42] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-p4pgxwqc42] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-p4pgxwqc42],
        .transport-grid .rz-grid-table td[b-p4pgxwqc42] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-p4pgxwqc42] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-p4pgxwqc42] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-p4pgxwqc42] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-p4pgxwqc42] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-p4pgxwqc42], .rz-textbox[b-p4pgxwqc42], .rz-numeric[b-p4pgxwqc42], .rz-textarea[b-p4pgxwqc42] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-p4pgxwqc42] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-p4pgxwqc42] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-p4pgxwqc42] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-p4pgxwqc42] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-p4pgxwqc42] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-p4pgxwqc42] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-p4pgxwqc42] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-p4pgxwqc42] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-p4pgxwqc42] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-p4pgxwqc42] {
        display: none !important;
    }
    
    .mobile-filters-content[b-p4pgxwqc42] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-p4pgxwqc42] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-p4pgxwqc42] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-p4pgxwqc42] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-p4pgxwqc42] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-p4pgxwqc42] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-p4pgxwqc42] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-p4pgxwqc42] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-p4pgxwqc42] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-p4pgxwqc42] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-p4pgxwqc42] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-p4pgxwqc42] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-p4pgxwqc42] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-p4pgxwqc42] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-p4pgxwqc42], .filter-select[b-p4pgxwqc42] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-p4pgxwqc42] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-p4pgxwqc42] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-p4pgxwqc42] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-p4pgxwqc42],
    .rz-grid-table td[b-p4pgxwqc42] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-p4pgxwqc42] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsWarehouseSupplier.razor.rz.scp.css */

.etrans-container[b-pvtcbti6sk] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-pvtcbti6sk] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-pvtcbti6sk] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-pvtcbti6sk] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-pvtcbti6sk] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-pvtcbti6sk] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-pvtcbti6sk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-pvtcbti6sk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-pvtcbti6sk] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-pvtcbti6sk], .filter-select[b-pvtcbti6sk] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-pvtcbti6sk], .filter-select:focus[b-pvtcbti6sk] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-pvtcbti6sk] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-pvtcbti6sk] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-pvtcbti6sk] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-pvtcbti6sk] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-pvtcbti6sk] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-pvtcbti6sk] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-pvtcbti6sk] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-pvtcbti6sk] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-pvtcbti6sk] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-pvtcbti6sk] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-pvtcbti6sk], .rz-grid-table td[b-pvtcbti6sk] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-pvtcbti6sk] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-pvtcbti6sk] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-pvtcbti6sk] {
    background-color: #e9ecef;
}

.status-badge[b-pvtcbti6sk] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-pvtcbti6sk] {
    background-color: #28a745;
}

.status-pending[b-pvtcbti6sk] {
    background-color: #ffc107;
}

.status-completed[b-pvtcbti6sk] {
    background-color: #17a2b8;
}

.status-default[b-pvtcbti6sk] {
    background-color: #6c757d;
}

.quantity-cell[b-pvtcbti6sk], .date-cell[b-pvtcbti6sk] {
    text-align: right;
}

@keyframes fadeIn-b-pvtcbti6sk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-pvtcbti6sk] {
        padding: 12px;
    }

    .filters-grid[b-pvtcbti6sk] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-pvtcbti6sk] {
        justify-content: stretch;
    }

    .btn[b-pvtcbti6sk] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-pvtcbti6sk] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-pvtcbti6sk] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-pvtcbti6sk], .rz-grid-table td[b-pvtcbti6sk] {
            padding: 8px;
        }

    .data-table th[b-pvtcbti6sk],
    .data-table td[b-pvtcbti6sk] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-pvtcbti6sk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-pvtcbti6sk 0.3s ease;
    padding: 20px;
}

.modal-container[b-pvtcbti6sk] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-pvtcbti6sk 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-pvtcbti6sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-pvtcbti6sk] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-pvtcbti6sk] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-pvtcbti6sk] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-pvtcbti6sk] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-pvtcbti6sk] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-pvtcbti6sk] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-pvtcbti6sk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-pvtcbti6sk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-pvtcbti6sk] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-pvtcbti6sk] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-pvtcbti6sk] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-pvtcbti6sk] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-pvtcbti6sk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-pvtcbti6sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-pvtcbti6sk] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-pvtcbti6sk] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-pvtcbti6sk] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-pvtcbti6sk] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-pvtcbti6sk] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-pvtcbti6sk] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-pvtcbti6sk] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-pvtcbti6sk] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-pvtcbti6sk] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-pvtcbti6sk] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-pvtcbti6sk] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-pvtcbti6sk] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-pvtcbti6sk] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-pvtcbti6sk] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-pvtcbti6sk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-pvtcbti6sk] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-pvtcbti6sk] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-pvtcbti6sk] {
        max-width: 95%;
    }

    .info-grid[b-pvtcbti6sk] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-pvtcbti6sk] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-pvtcbti6sk] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-pvtcbti6sk] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-pvtcbti6sk] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-pvtcbti6sk] {
        padding: 10px;
    }

    .modal-container[b-pvtcbti6sk] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-pvtcbti6sk] {
        padding: 16px 20px;
    }

    .modal-title[b-pvtcbti6sk] {
        font-size: 1rem;
    }

    .info-bar[b-pvtcbti6sk] {
        padding: 12px 16px;
    }

    .info-grid[b-pvtcbti6sk] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-pvtcbti6sk] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-pvtcbti6sk] {
        padding: 12px 16px;
    }

    .grid-header[b-pvtcbti6sk] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-pvtcbti6sk] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-pvtcbti6sk],
    .transport-grid-full .rz-grid-table td[b-pvtcbti6sk] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-pvtcbti6sk] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-pvtcbti6sk] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-pvtcbti6sk] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-pvtcbti6sk] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-pvtcbti6sk] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-pvtcbti6sk], .rz-textbox[b-pvtcbti6sk], .rz-numeric[b-pvtcbti6sk], .rz-textarea[b-pvtcbti6sk] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-pvtcbti6sk] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-pvtcbti6sk] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-pvtcbti6sk] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-pvtcbti6sk] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-pvtcbti6sk] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-pvtcbti6sk] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-pvtcbti6sk],
.rz-numeric.rz-state-invalid[b-pvtcbti6sk],
.rz-dropdown.rz-state-invalid[b-pvtcbti6sk] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-pvtcbti6sk] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-pvtcbti6sk] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-pvtcbti6sk]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-pvtcbti6sk]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-pvtcbti6sk]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-pvtcbti6sk]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-pvtcbti6sk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-pvtcbti6sk {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-pvtcbti6sk] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-pvtcbti6sk] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-pvtcbti6sk] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-pvtcbti6sk] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-pvtcbti6sk] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-pvtcbti6sk],
    .modal-footer[b-pvtcbti6sk] {
        display: none;
    }

    .action-buttons[b-pvtcbti6sk] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-pvtcbti6sk] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-pvtcbti6sk] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    margin-top: 1px;
}

/* Header styles */
.header[b-pvtcbti6sk] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-pvtcbti6sk] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-pvtcbti6sk] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-pvtcbti6sk] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-pvtcbti6sk] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-pvtcbti6sk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-pvtcbti6sk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-pvtcbti6sk] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-pvtcbti6sk], .filter-select[b-pvtcbti6sk] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-pvtcbti6sk], .filter-select:focus[b-pvtcbti6sk] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-pvtcbti6sk] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-pvtcbti6sk] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-pvtcbti6sk] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-pvtcbti6sk] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-pvtcbti6sk] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-pvtcbti6sk] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-pvtcbti6sk] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-pvtcbti6sk] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

/* Radzen DataGrid styles */
.rz-data-grid[b-pvtcbti6sk] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-pvtcbti6sk], .rz-grid-table td[b-pvtcbti6sk] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-pvtcbti6sk] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-pvtcbti6sk] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-pvtcbti6sk] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-pvtcbti6sk] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-pvtcbti6sk] {
    background-color: #28a745;
}

.status-pending[b-pvtcbti6sk] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-pvtcbti6sk] {
    background-color: #17a2b8;
}

.status-cancelled[b-pvtcbti6sk] {
    background-color: #dc3545;
}

.status-default[b-pvtcbti6sk] {
    background-color: #6c757d;
}

.quantity-cell[b-pvtcbti6sk], .date-cell[b-pvtcbti6sk] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-pvtcbti6sk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-pvtcbti6sk 0.3s ease;
}

.modal-container[b-pvtcbti6sk] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-pvtcbti6sk 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-pvtcbti6sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-pvtcbti6sk] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-pvtcbti6sk] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-pvtcbti6sk] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-pvtcbti6sk] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-pvtcbti6sk] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-pvtcbti6sk] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-pvtcbti6sk] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-pvtcbti6sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-pvtcbti6sk] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-pvtcbti6sk] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-pvtcbti6sk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-pvtcbti6sk] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-pvtcbti6sk] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-pvtcbti6sk] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-pvtcbti6sk] {
        background: #f8f9fa;
    }

.highlight-row[b-pvtcbti6sk] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-pvtcbti6sk] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-pvtcbti6sk] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-pvtcbti6sk] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-pvtcbti6sk] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-pvtcbti6sk] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-pvtcbti6sk] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-pvtcbti6sk] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-pvtcbti6sk] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-pvtcbti6sk] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-pvtcbti6sk] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-pvtcbti6sk] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-pvtcbti6sk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-pvtcbti6sk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-pvtcbti6sk {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-pvtcbti6sk] {
        width: 98%;
    }

    .detail-layout[b-pvtcbti6sk] {
        flex-direction: column;
    }

    .left-panel[b-pvtcbti6sk] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-pvtcbti6sk] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-pvtcbti6sk] {
        padding: 12px;
    }

    .filters-grid[b-pvtcbti6sk] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-pvtcbti6sk] {
        justify-content: stretch;
    }

    .btn[b-pvtcbti6sk] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-pvtcbti6sk] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-pvtcbti6sk] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-pvtcbti6sk], .rz-grid-table td[b-pvtcbti6sk] {
            padding: 8px;
        }

    .data-table th[b-pvtcbti6sk],
    .data-table td[b-pvtcbti6sk] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-pvtcbti6sk] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-pvtcbti6sk] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-pvtcbti6sk],
        .transport-grid .rz-grid-table td[b-pvtcbti6sk] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-pvtcbti6sk] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-pvtcbti6sk] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-pvtcbti6sk] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-pvtcbti6sk] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-pvtcbti6sk], .rz-textbox[b-pvtcbti6sk], .rz-numeric[b-pvtcbti6sk], .rz-textarea[b-pvtcbti6sk] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-pvtcbti6sk] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-pvtcbti6sk] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-pvtcbti6sk] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-pvtcbti6sk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-pvtcbti6sk] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-pvtcbti6sk] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-pvtcbti6sk] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-pvtcbti6sk] {
        background-color: #dc3545;
    }
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningServiceModal.razor.rz.scp.css */
.grid-container-info-PO[b-nypcqpuy5z] {
    display: grid;
    grid-template-columns: 7fr 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
}

.grid-left[b-nypcqpuy5z] {
    width: 100%;
}

.grid-right[b-nypcqpuy5z] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.notes[b-nypcqpuy5z] {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 100%;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    padding: 5px;
}

.note-item[b-nypcqpuy5z] {
    font-size: var(--font-size-base);
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px; 
    padding-left: 1rem;
}

.note-label[b-nypcqpuy5z] {
    font-weight: 600;
    color: var(--bg-primary);
}
.transport-grid-full[b-nypcqpuy5z] {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile Information Panel Styles */
.mobile-info-toggle[b-nypcqpuy5z] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-info-toggle:hover[b-nypcqpuy5z] {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.info-toggle-header[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--primary-color);
}

.toggle-icon[b-nypcqpuy5z] {
    transition: transform 0.3s ease;
}

.toggle-icon.collapsed[b-nypcqpuy5z] {
    transform: rotate(180deg);
}

.info-panel-container[b-nypcqpuy5z] {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    margin-bottom: 16px;
}

.info-panel-container.collapsed[b-nypcqpuy5z] {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.info-panel-container.expanded[b-nypcqpuy5z] {
    max-height: 1000px;
    opacity: 1;
}

.info-card[b-nypcqpuy5z] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}

.info-card .card-header[b-nypcqpuy5z] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.info-card .card-header h5[b-nypcqpuy5z] {
    margin: 0;
    font-size: 1rem;
}

.info-grid[b-nypcqpuy5z] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.info-item[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
    flex-wrap: wrap;
}

.info-item:last-child[b-nypcqpuy5z] {
    border-bottom: none;
}

.info-label[b-nypcqpuy5z] {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    min-width: 120px;
}

.info-value[b-nypcqpuy5z] {
    color: #212529;
    font-size: 0.875rem;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.info-value.highlight[b-nypcqpuy5z] {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #155724;
}

/* Ship Detail Cards Mobile Optimization */
.ship-detail-card[b-nypcqpuy5z] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.ship-detail-card:hover[b-nypcqpuy5z] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ship-detail-card .form-label[b-nypcqpuy5z] {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    margin-bottom: 6px;
}

.ship-detail-card .form-control.bg-light.text-muted[b-nypcqpuy5z] {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
    color: #6c757d !important;
    font-size: 0.875rem;
    padding: 8px 12px;
}

.ship-detail-card .highlight[b-nypcqpuy5z] {
    background-color: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    color: #856404 !important;
    font-weight: 600;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Modal adjustments for mobile */
    .modal-container[b-nypcqpuy5z] {
        width: 95vw;
        height: 95vh;
        margin: 2.5vh auto;
        border-radius: 12px;
    }

    .modal-header[b-nypcqpuy5z] {
        padding: 16px;
    }

    .modal-title[b-nypcqpuy5z] {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .modal-body[b-nypcqpuy5z] {
        padding: 12px;
        max-height: calc(95vh - 120px);
    }

    /* Grid adjustments */
    .container-fluid[b-nypcqpuy5z] {
        padding: 0;
    }

    .row[b-nypcqpuy5z] {
        margin: 0;
    }

    .col-12[b-nypcqpuy5z] {
        padding: 4px;
    }

    /* Information cards mobile optimization */
    .info-card .card-body[b-nypcqpuy5z] {
        padding: 12px;
    }

    .info-item[b-nypcqpuy5z] {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 0;
    }

    .info-label[b-nypcqpuy5z] {
        margin-bottom: 4px;
        min-width: auto;
    }

    .info-value[b-nypcqpuy5z] {
        text-align: left;
        width: 100%;
    }

    /* Warehouse grid mobile optimization */
    .grid-section[b-nypcqpuy5z] {
        margin-bottom: 20px;
    }

    .grid-header[b-nypcqpuy5z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .grid-header h4[b-nypcqpuy5z] {
        font-size: 1.1rem;
        margin: 0;
    }

    .grid-container[b-nypcqpuy5z] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .transport-grid-full[b-nypcqpuy5z] {
        font-size: 0.75rem;
    }

    .transport-grid-full .rz-grid-table th[b-nypcqpuy5z],
    .transport-grid-full .rz-grid-table td[b-nypcqpuy5z] {
        padding: 6px 4px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* Ship forms mobile optimization */
    .ship-forms-container[b-nypcqpuy5z] {
        margin-top: 16px;
    }

    .ship-detail-card[b-nypcqpuy5z] {
        margin-bottom: 16px;
    }

    .ship-detail-card .card-body[b-nypcqpuy5z] {
        padding: 16px;
    }

    .ship-detail-card .row[b-nypcqpuy5z] {
        margin: 0;
    }

    .ship-detail-card .col-12[b-nypcqpuy5z] {
        margin-bottom: 12px;
        padding: 0;
    }

    .ship-detail-card .col-12:last-child[b-nypcqpuy5z] {
        margin-bottom: 0;
    }

    .ship-detail-card .form-label[b-nypcqpuy5z] {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    .ship-detail-card .form-control[b-nypcqpuy5z] {
        font-size: 0.875rem;
        padding: 8px 10px;
    }

    /* Button adjustments */
    .modal-footer[b-nypcqpuy5z] {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .text-end[b-nypcqpuy5z] {
        text-align: center !important;
    }

    /* RadzenDropDown and RadzenNumeric mobile styles */
    .rz-dropdown[b-nypcqpuy5z],
    .rz-numeric[b-nypcqpuy5z],
    .rz-textbox[b-nypcqpuy5z] {
        font-size: 0.875rem !important;
        height: auto !important;
        min-height: 36px !important;
    }

    /* Custom dropdown mobile optimization */
    .rz-dropdown-panel[b-nypcqpuy5z] {
        max-height: 200px !important;
        font-size: 0.8rem !important;
    }
}

/* Tablet responsive design */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-container[b-nypcqpuy5z] {
        width: 90vw;
        height: 90vh;
    }

    .ship-detail-card .row .col-md-6[b-nypcqpuy5z] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Desktop enhancements */
@media (min-width: 1025px) {
    .info-panel-container[b-nypcqpuy5z] {
        display: none !important;
    }

    .mobile-info-toggle[b-nypcqpuy5z] {
        display: none !important;
    }
}
.spinner[b-nypcqpuy5z] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.spinner-small[b-nypcqpuy5z] {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShips.razor.rz.scp.css */
.filters-section[b-muy1wfvxyu] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-muy1wfvxyu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-muy1wfvxyu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-muy1wfvxyu] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-muy1wfvxyu], .filter-select[b-muy1wfvxyu] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-muy1wfvxyu], .filter-select:focus[b-muy1wfvxyu] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-muy1wfvxyu] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.status-circle[b-muy1wfvxyu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    background: linear-gradient(145deg, #ffffff33, #00000022);
    backdrop-filter: blur(4px);
    position: relative;
    line-height: 1; 
}

.status-circle-record[b-muy1wfvxyu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px; 
    height: 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1;

}

.status-default[b-muy1wfvxyu],
.status-notstarted[b-muy1wfvxyu] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-muy1wfvxyu] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-muy1wfvxyu],
.status-canceled[b-muy1wfvxyu] {
    background: linear-gradient(145deg, #e55353, #dc3545);
}

.status-executed[b-muy1wfvxyu],
.status-completed[b-muy1wfvxyu] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-muy1wfvxyu] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-muy1wfvxyu] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

/* Đảm bảo căn chỉnh trong cột trạng thái của RadzenDataGrid */
.transport-grid .rz-data-grid td .status-pending[b-muy1wfvxyu],
.transport-grid .rz-data-grid td .status-active[b-muy1wfvxyu],
.transport-grid .rz-data-grid td .status-canceled[b-muy1wfvxyu],
.transport-grid .rz-data-grid td .status-default[b-muy1wfvxyu] {
    width: 100%;
    display: block;
    line-height: 1.5;
}

/* Tùy chỉnh giao diện checkbox trong cột Chọn */
.transport-grid .rz-checkbox[b-muy1wfvxyu] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tùy chỉnh cột trạng thái để căn giữa */
.transport-grid .rz-data-grid td.status-column[b-muy1wfvxyu] {
    text-align: center;
    vertical-align: middle;
}

.domestic-form-container[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.fixed-header[b-muy1wfvxyu] {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.form-content[b-muy1wfvxyu] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.fixed-footer[b-muy1wfvxyu] {
    position: sticky;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    text-align: right;
}

.form-group[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label[b-muy1wfvxyu] {
    font-weight: bold;
}

.form-input[b-muy1wfvxyu] {
    width: 100%;
}

.required[b-muy1wfvxyu] {
    color: red;
}

.domestic-form[b-muy1wfvxyu] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 100%;
    overflow-y: auto;
}

.form-header[b-muy1wfvxyu] {
    border-bottom: 2px solid #007bff;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

    .form-header h4[b-muy1wfvxyu] {
        color: #007bff;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .form-header i[b-muy1wfvxyu] {
        margin-right: 8px;
    }

.form-grid[b-muy1wfvxyu] {
    display: grid;
    gap: 12px;
}

.form-group[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-muy1wfvxyu] {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin-bottom: 4px;
}

.required[b-muy1wfvxyu] {
    color: #dc3545;
    font-weight: bold;
}

.form-input[b-muy1wfvxyu] {
    padding: 8px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-input:focus[b-muy1wfvxyu] {
        border-color: #007bff !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    }

/* Override Radzen default styles */
.rz-textbox.form-input[b-muy1wfvxyu],
.rz-numeric.form-input[b-muy1wfvxyu],
.rz-dropdown.form-input[b-muy1wfvxyu],
.rz-datepicker.form-input[b-muy1wfvxyu] {
    width: 100% !important;
    height: 36px !important;
}

.rz-dropdown-panel[b-muy1wfvxyu] {
    z-index: 10000 !important;
}

/* Make dropdowns more attractive */
.rz-dropdown.form-input .rz-dropdown-label[b-muy1wfvxyu] {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-grid[b-muy1wfvxyu] {
        grid-template-columns: 1fr;
    }

    .domestic-form[b-muy1wfvxyu] {
        padding: 12px;
    }

    .form-header h4[b-muy1wfvxyu] {
        font-size: 14px;
    }
}

/* Grid styling improvements */
.transport-grid[b-muy1wfvxyu] {
    font-size: 13px;
}

    .transport-grid .rz-datatable-data td[b-muy1wfvxyu] {
        padding: 8px 6px !important;
        vertical-align: middle;
    }

.quantity-highlight[b-muy1wfvxyu] {
    font-weight: bold;
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.transport-value[b-muy1wfvxyu] {
    text-align: right;
    font-weight: 500;
}

/* Remaining quantity styling */
.remaining-quantity[b-muy1wfvxyu] {
    background-color: #f0f8ff !important;
    color: #0066cc !important;
    font-weight: bold !important;
    border: 1px solid #b3d9ff !important;
}

.detail-value.remaining-quantity[b-muy1wfvxyu] {
    background-color: #f0f8ff;
    color: #0066cc;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #b3d9ff;
}

/* Disabled field styling */
.disabled-field[b-muy1wfvxyu] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
}

.buttons-grid[b-muy1wfvxyu] {
    display: flex;
    justify-content: flex-end; /* đẩy sang bên phải */
    gap: 8px; /* khoảng cách giữa các button-group */
}

.button-group[b-muy1wfvxyu] {
    display: inline-flex;
}


.etrans-btn[b-muy1wfvxyu] {
    max-width: 150px;
}
.etrans-container[b-muy1wfvxyu] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}
.header[b-muy1wfvxyu] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-muy1wfvxyu] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-muy1wfvxyu] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-muy1wfvxyu] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-muy1wfvxyu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-muy1wfvxyu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-muy1wfvxyu] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-muy1wfvxyu], .filter-select[b-muy1wfvxyu] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-muy1wfvxyu], .filter-select:focus[b-muy1wfvxyu] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-muy1wfvxyu] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.etrans-btn[b-muy1wfvxyu] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-muy1wfvxyu] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-muy1wfvxyu] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-muy1wfvxyu] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-muy1wfvxyu] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-muy1wfvxyu] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-muy1wfvxyu] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-muy1wfvxyu] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 160px)!important;
}

.rz-data-grid[b-muy1wfvxyu] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-muy1wfvxyu], .rz-grid-table td[b-muy1wfvxyu] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

    .rz-grid-table th[b-muy1wfvxyu] {
        background-color: #e9ecef;
        font-weight: 600;
        color: #333;
    }

    .rz-grid-table tr:nth-child(even)[b-muy1wfvxyu] {
        background-color: #f8f9fa;
    }

    .rz-grid-table tr:hover[b-muy1wfvxyu] {
        background-color: #e9ecef;
    }

.status-badge[b-muy1wfvxyu] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-muy1wfvxyu] {
    background-color: #28a745;
}

.status-pending[b-muy1wfvxyu] {
    background-color: #ffc107;
}

.status-completed[b-muy1wfvxyu] {
    background-color: #17a2b8;
}

.status-default[b-muy1wfvxyu] {
    background-color: #6c757d;
}

.quantity-cell[b-muy1wfvxyu], .date-cell[b-muy1wfvxyu] {
    text-align: right;
}

@keyframes fadeIn-b-muy1wfvxyu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@media (max-width: 1500px) {
    .table-container[b-muy1wfvxyu] {
        overflow-x: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        height: calc(100vh - 220px) !important;
    }
}
@media (max-width: 768px) {
    .container[b-muy1wfvxyu] {
        padding: 12px;
    }

    .filters-grid[b-muy1wfvxyu] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-muy1wfvxyu] {
        justify-content: stretch;
    }

    .btn[b-muy1wfvxyu] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-muy1wfvxyu] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .rz-grid-table[b-muy1wfvxyu] {
        font-size: 12px;
        margin:6px;
    }

        .rz-grid-table th[b-muy1wfvxyu], .rz-grid-table td[b-muy1wfvxyu] {
            padding: 8px;
        }
    .data-table th[b-muy1wfvxyu],
    .data-table td[b-muy1wfvxyu] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-muy1wfvxyu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-muy1wfvxyu 0.3s ease;
    
}

.modal-container[b-muy1wfvxyu] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-muy1wfvxyu 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-muy1wfvxyu] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color:white;
}

.modal-close-btn[b-muy1wfvxyu] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-muy1wfvxyu] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-muy1wfvxyu] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-muy1wfvxyu] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-muy1wfvxyu] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-muy1wfvxyu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-muy1wfvxyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-muy1wfvxyu] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-muy1wfvxyu] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-muy1wfvxyu] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-muy1wfvxyu] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-muy1wfvxyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-muy1wfvxyu] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-muy1wfvxyu] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-muy1wfvxyu] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-muy1wfvxyu] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-muy1wfvxyu] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-muy1wfvxyu] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-muy1wfvxyu] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-muy1wfvxyu] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-muy1wfvxyu] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-muy1wfvxyu] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-muy1wfvxyu] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-muy1wfvxyu] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-muy1wfvxyu] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-muy1wfvxyu] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-muy1wfvxyu] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-muy1wfvxyu] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-muy1wfvxyu] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-muy1wfvxyu] {
        max-width: 100%;
    }

    .info-grid[b-muy1wfvxyu] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-muy1wfvxyu] {
        width: 100%;
        height: 85vh;
    }

    .info-grid[b-muy1wfvxyu] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-muy1wfvxyu] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-muy1wfvxyu] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-muy1wfvxyu] {
        padding: 10px;
    }

    .modal-container[b-muy1wfvxyu] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-muy1wfvxyu] {
        padding: 16px 20px;
    }

    .modal-title[b-muy1wfvxyu] {
        font-size: 1rem;
    }

    .info-bar[b-muy1wfvxyu] {
        padding: 12px 16px;
    }

    .info-grid[b-muy1wfvxyu] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-muy1wfvxyu] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-muy1wfvxyu] {
        padding: 12px 16px;
    }

    .grid-header[b-muy1wfvxyu] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-muy1wfvxyu] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-muy1wfvxyu],
    .transport-grid-full .rz-grid-table td[b-muy1wfvxyu] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-muy1wfvxyu] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-muy1wfvxyu] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-muy1wfvxyu] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-muy1wfvxyu] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-muy1wfvxyu] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-muy1wfvxyu], .rz-textbox[b-muy1wfvxyu], .rz-numeric[b-muy1wfvxyu], .rz-textarea[b-muy1wfvxyu] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-muy1wfvxyu] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-muy1wfvxyu] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-muy1wfvxyu] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-muy1wfvxyu] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-muy1wfvxyu] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-muy1wfvxyu] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-muy1wfvxyu],
.rz-numeric.rz-state-invalid[b-muy1wfvxyu],
.rz-dropdown.rz-state-invalid[b-muy1wfvxyu] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-muy1wfvxyu] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-muy1wfvxyu] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-muy1wfvxyu]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-muy1wfvxyu]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-muy1wfvxyu]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-muy1wfvxyu]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-muy1wfvxyu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-muy1wfvxyu {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-muy1wfvxyu] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-muy1wfvxyu] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-muy1wfvxyu] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-muy1wfvxyu] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-muy1wfvxyu] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-muy1wfvxyu],
    .modal-footer[b-muy1wfvxyu] {
        display: none;
    }

    .action-buttons[b-muy1wfvxyu] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-muy1wfvxyu] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-muy1wfvxyu] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    margin-top: 1px;
}

/* Header styles */
.header[b-muy1wfvxyu] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-muy1wfvxyu] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-muy1wfvxyu] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-muy1wfvxyu] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-muy1wfvxyu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-muy1wfvxyu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-muy1wfvxyu] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-muy1wfvxyu], .filter-select[b-muy1wfvxyu] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-muy1wfvxyu], .filter-select:focus[b-muy1wfvxyu] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-muy1wfvxyu] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-muy1wfvxyu] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-muy1wfvxyu] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-muy1wfvxyu] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-muy1wfvxyu] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-muy1wfvxyu] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-muy1wfvxyu] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-muy1wfvxyu] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-muy1wfvxyu] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-muy1wfvxyu], .rz-grid-table td[b-muy1wfvxyu] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-muy1wfvxyu] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-muy1wfvxyu] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-muy1wfvxyu] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-muy1wfvxyu] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.driver-badge-1[b-muy1wfvxyu] {
    color: #33b266;
    font-weight: 700; 
    letter-spacing: 0.5px; 
    text-transform: uppercase;
}

.driver-badge-2[b-muy1wfvxyu] {
    color: #5983ff;
    font-weight: 700;
    letter-spacing: 0.5px; 
    text-transform: uppercase;
}

.status-completed[b-muy1wfvxyu] {
    background-color: #17a2b8;
}

.status-cancelled[b-muy1wfvxyu] {
    background-color: #dc3545;
}

.status-default[b-muy1wfvxyu] {
    background-color: #6c757d;
}

.quantity-cell[b-muy1wfvxyu], .date-cell[b-muy1wfvxyu] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-muy1wfvxyu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-muy1wfvxyu 0.3s ease;
}

.modal-container[b-muy1wfvxyu] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-muy1wfvxyu 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-muy1wfvxyu] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-muy1wfvxyu] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-muy1wfvxyu] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-muy1wfvxyu] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-muy1wfvxyu] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-muy1wfvxyu] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-muy1wfvxyu] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-muy1wfvxyu] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-muy1wfvxyu] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-muy1wfvxyu] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-muy1wfvxyu] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-muy1wfvxyu] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-muy1wfvxyu] {
        background: #f8f9fa;
    }

.highlight-row[b-muy1wfvxyu] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-muy1wfvxyu] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-muy1wfvxyu] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-muy1wfvxyu] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-muy1wfvxyu] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-muy1wfvxyu] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-muy1wfvxyu] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-muy1wfvxyu] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-muy1wfvxyu] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-muy1wfvxyu] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-muy1wfvxyu] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-muy1wfvxyu] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-muy1wfvxyu] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-muy1wfvxyu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-muy1wfvxyu {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-muy1wfvxyu] {
        width: 98%;
    }

    .detail-layout[b-muy1wfvxyu] {
        flex-direction: column;
    }

    .left-panel[b-muy1wfvxyu] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-muy1wfvxyu] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-muy1wfvxyu] {
        padding: 12px;
    }

    .filters-grid[b-muy1wfvxyu] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-muy1wfvxyu] {
        justify-content: stretch;
    }

    .btn[b-muy1wfvxyu] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-muy1wfvxyu] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-muy1wfvxyu] {
        font-size: 12px;
        margin: 6px;
    }

        .rz-grid-table th[b-muy1wfvxyu], .rz-grid-table td[b-muy1wfvxyu] {
            padding: 8px;
        }

    .data-table th[b-muy1wfvxyu],
    .data-table td[b-muy1wfvxyu] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-muy1wfvxyu] {
        width: 100%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-muy1wfvxyu] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-muy1wfvxyu],
        .transport-grid .rz-grid-table td[b-muy1wfvxyu] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-muy1wfvxyu] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-muy1wfvxyu] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-muy1wfvxyu] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-muy1wfvxyu] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-muy1wfvxyu], .rz-textbox[b-muy1wfvxyu], .rz-numeric[b-muy1wfvxyu], .rz-textarea[b-muy1wfvxyu] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-muy1wfvxyu] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-muy1wfvxyu] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-muy1wfvxyu] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-muy1wfvxyu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-muy1wfvxyu] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-muy1wfvxyu] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-muy1wfvxyu] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-muy1wfvxyu] {
        background-color: #dc3545;
    }
.rz-pager .rz-dropdown[b-muy1wfvxyu] {
    font-size: var(--font-size-sm-base);
    max-height: 35px;
}
.rz-textbox.form-input[b-muy1wfvxyu], .rz-numeric.form-input[b-muy1wfvxyu], .rz-dropdown.form-input[b-muy1wfvxyu], .rz-datepicker.form-input[b-muy1wfvxyu]{
    height:45px !important;
}

/* Filter wrapper */
.filter-wrapper[b-muy1wfvxyu] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-muy1wfvxyu] {
        display: none !important;
    }
    
    .mobile-filters-content[b-muy1wfvxyu] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-muy1wfvxyu] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-muy1wfvxyu] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-muy1wfvxyu] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-muy1wfvxyu] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-muy1wfvxyu] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-muy1wfvxyu] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-muy1wfvxyu] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-muy1wfvxyu] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-muy1wfvxyu] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-muy1wfvxyu] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-muy1wfvxyu] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-muy1wfvxyu] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-muy1wfvxyu] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-muy1wfvxyu], .filter-select[b-muy1wfvxyu] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-muy1wfvxyu] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-muy1wfvxyu] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-muy1wfvxyu] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-muy1wfvxyu],
    .rz-grid-table td[b-muy1wfvxyu] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-muy1wfvxyu] {
        position: static !important;
    }

    /* Mobile Modal Optimization */
    .modal-container[b-muy1wfvxyu] {
        width: 95vw !important;
        height: 95vh !important;
        margin: 0;
        border-radius: 8px;
    }
    
    .modal-header[b-muy1wfvxyu] {
        padding: 6px 8px;
        flex-shrink: 0;
    }
    
    .modal-title[b-muy1wfvxyu] {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }
    
    .modal-close-btn[b-muy1wfvxyu] {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .modal-body[b-muy1wfvxyu] {
        padding: 0;
        overflow: hidden;
        flex: 1;
    }
    
    /* Mobile Detail Layout - Stack vertically */
    .detail-layout[b-muy1wfvxyu] {
        flex-direction: column !important;
        height: 100%;
        overflow: hidden;
    }
    
    /* Mobile Left Panel - Transform to collapsible info panel */
    .left-panel[b-muy1wfvxyu] {
        width: 100% !important;
        flex-shrink: 0;
        max-height: none;
        order: 1;
        padding: 0;
        background: white;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        overflow: visible;
    }
    
    /* Mobile info toggle panel */
    .mobile-info-toggle[b-muy1wfvxyu] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        cursor: pointer;
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--text-dark);
        transition: background-color 0.2s ease;
    }
    
    .mobile-info-toggle:hover[b-muy1wfvxyu] {
        background: #e9ecef;
    }
    
    .mobile-info-toggle i[b-muy1wfvxyu] {
        font-size: 0.8rem;
        transition: transform 0.2s ease;
    }
    
    .mobile-info-toggle.collapsed i[b-muy1wfvxyu] {
        transform: rotate(180deg);
    }
    
    /* Mobile info content - collapsible */
    .mobile-info-content[b-muy1wfvxyu] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }
    
    .mobile-info-content.expanded[b-muy1wfvxyu] {
        max-height: 400px;
    }
    
    /* Mobile form container adjustments */
    .domestic-form-container[b-muy1wfvxyu] {
        height: auto !important;
        max-height: 350px;
        display: flex;
        flex-direction: column;
    }
    
    .form-header.fixed-header[b-muy1wfvxyu] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        flex-shrink: 0;
    }
    
    .form-header.fixed-header h4[b-muy1wfvxyu] {
        font-size: 0.85rem;
        margin: 0;
        color: var(--text-dark);
    }
    
    .form-content[b-muy1wfvxyu] {
        flex: 1;
        overflow-y: auto;
        padding: 8px 12px;
    }
    
    .form-group[b-muy1wfvxyu] {
        margin-bottom: 8px !important;
    }
    
    .form-label[b-muy1wfvxyu] {
        font-size: 0.75rem !important;
        margin-bottom: 3px;
    }
    
    .form-input[b-muy1wfvxyu] {
        font-size: 0.8rem !important;
        height: 32px !important;
        padding: 4px 8px !important;
    }
    
    /* Mobile Right Panel - Main content area */
    .right-panel[b-muy1wfvxyu] {
        flex: 1;
        order: 2;
        padding: 8px;
        overflow: auto;
    }
    
    /* Mobile transport header */
    .transport-header-actions[b-muy1wfvxyu] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }
    
    .transport-header-actions h4[b-muy1wfvxyu] {
        font-size: 0.9rem;
        text-align: center;
    }
    
    /* Mobile transport grid */
    .transport-grid[b-muy1wfvxyu] {
        font-size: 0.75rem !important;
    }
    
    .transport-grid .rz-grid-table th[b-muy1wfvxyu],
    .transport-grid .rz-grid-table td[b-muy1wfvxyu] {
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
    }
    
    /* Mobile detail table adjustments */
    .detail-table[b-muy1wfvxyu] {
        margin-bottom: 8px;
    }
    
    .detail-row-item[b-muy1wfvxyu] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .detail-label[b-muy1wfvxyu],
    .detail-value[b-muy1wfvxyu] {
        font-size: 0.75rem !important;
    }
    
    .detail-value.important[b-muy1wfvxyu] {
        font-size: 0.8rem !important;
    }
}

/* Desktop styles - ensure mobile-only elements are hidden on desktop */
@media (min-width: 769px) {
    .mobile-info-toggle[b-muy1wfvxyu] {
        display: none !important;
    }
    
    .mobile-info-content[b-muy1wfvxyu] {
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
}

/* Modal footer responsive styles */
.modal-footer[b-muy1wfvxyu] {
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .modal-footer[b-muy1wfvxyu] {
        padding: 8px;
    }
    
    /* Mobile footer adjustments */
    .modal-footer .px-2[b-muy1wfvxyu] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripCargoPlanning/TripCargoPlanningWeek.razor.rz.scp.css */
/* Main tabs styling */
.tabs[b-mzfza2ddwe] {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab[b-mzfza2ddwe] {
    flex: 1;
    padding: 0.2rem;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tab:hover[b-mzfza2ddwe] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.05);
        transform: translateY(-1px);
    }

    .tab.active[b-mzfza2ddwe] {
        color: var(--primary-color);
        font-weight: 600;
        background: rgba(202, 60, 25, 0.08);
    }

        .tab.active[b-mzfza2ddwe]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px 2px 0 0;
        }

/* Subtabs styling */
.subtabs[b-mzfza2ddwe] {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border-light);
    padding: 0.25rem 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.subtab[b-mzfza2ddwe] {
    flex: 1;
    padding: 0.2rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 6px;
    margin: 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .subtab:hover[b-mzfza2ddwe] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.15);
    }

    .subtab.active[b-mzfza2ddwe] {
        color: var(--primary-color);
        font-weight: 500;
        background: linear-gradient(135deg, rgba(202, 60, 25, 0.12), rgba(202, 60, 25, 0.08));
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

        .subtab.active[b-mzfza2ddwe]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 0 0 2px 2px;
        }

/* Level 1 subtasks styling */
.subtasks-level1[b-mzfza2ddwe] {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 0.25rem;
    position: sticky;
    top: 0;
    z-index: 9;
    justify-content: space-around;
}

.subtask[b-mzfza2ddwe] {
    padding: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    flex: 1;
    text-align: center;
}

    .subtask:hover[b-mzfza2ddwe] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.08);
    }

    .subtask.active[b-mzfza2ddwe] {
        color: var(--primary-color);
        background: rgba(202, 60, 25, 0.12);
        font-weight: 500;
    }

        .subtask.active[b-mzfza2ddwe]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: var(--primary-color);
            border-radius: 1px 1px 0 0;
        }

/* Level 2 switches styling */
.subtasks-level2[b-mzfza2ddwe] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
    z-index: 8;
    flex-shrink: 0;
}

.switch[b-mzfza2ddwe] {
    padding: 0.2rem 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .switch:hover[b-mzfza2ddwe] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-mzfza2ddwe] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }

/* Planning content area */
.planning[b-mzfza2ddwe] {
    background: white;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.planning-content[b-mzfza2ddwe] {
    min-height: 500px;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    overflow: hidden;
    flex: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    /* Main tabs - remove sticky positioning on mobile */
    .tabs[b-mzfza2ddwe] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tabs[b-mzfza2ddwe]::-webkit-scrollbar {
        display: none;
    }

    .tab[b-mzfza2ddwe] {
        min-width: 120px;
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
        flex-shrink: 0;
        border-bottom: 2px solid transparent;
    }

    .tab.active[b-mzfza2ddwe] {
        border-bottom: 2px solid var(--primary-color);
    }

    .tab.active[b-mzfza2ddwe]::after {
        display: none;
    }

    /* Level 1 subtasks - fix width overflow */
    .subtasks-level1[b-mzfza2ddwe] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding: 0.5rem;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .subtasks-level1[b-mzfza2ddwe]::-webkit-scrollbar {
        display: none;
    }

    .subtask[b-mzfza2ddwe] {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 0;
        white-space: nowrap;
        border-radius: 20px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
    }

    .subtask.active[b-mzfza2ddwe] {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .subtask.active[b-mzfza2ddwe]::after {
        display: none;
    }

    /* Level 2 switches */
    .subtasks-level2[b-mzfza2ddwe] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding: 0.5rem;
        margin-left: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: static !important;
    }

    .subtasks-level2[b-mzfza2ddwe]::-webkit-scrollbar {
        display: none;
    }

    .switch[b-mzfza2ddwe] {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        flex-shrink: 0;
        min-width: 60px;
        border-radius: 15px;
    }

    .switch.active[b-mzfza2ddwe] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 600;
    }

    /* Content area */
    .planning-content[b-mzfza2ddwe] {
        padding: 0.5rem;
        height: calc(100vh - 250px);
        min-height: 400px;
    }

    /* Ship planning container */
    .ship-planning[b-mzfza2ddwe] {
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .content[b-mzfza2ddwe] {
        padding: 0;
        flex: 1;
        overflow: hidden;
    }

    .planning[b-mzfza2ddwe] {
        border-radius: 0;
        margin: 0;
        overflow: hidden;
    }

    /* Add scroll indicators */
    .subtasks-level1[b-mzfza2ddwe]::after,
    .subtasks-level2[b-mzfza2ddwe]::after,
    .tabs[b-mzfza2ddwe]::after {
        content: '→';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to right, transparent, white 50%);
        padding: 0 10px;
        font-size: 12px;
        color: #6c757d;
        pointer-events: none;
    }

    /* Hide scroll indicators when not needed */
    .subtasks-level1:not(.scrollable)[b-mzfza2ddwe]::after,
    .subtasks-level2:not(.scrollable)[b-mzfza2ddwe]::after,
    .tabs:not(.scrollable)[b-mzfza2ddwe]::after {
        display: none;
    }
}



/* Animation for tab switching */
.tab-content[b-mzfza2ddwe] {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .tab-content.active[b-mzfza2ddwe] {
        opacity: 1;
        transform: translateY(0);
    }

/* Enhanced visual hierarchy */
.ship-planning[b-mzfza2ddwe] {
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tabs-container[b-mzfza2ddwe] {
    background: white;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.content[b-mzfza2ddwe] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content-wrapper[b-mzfza2ddwe] {
    background: white;
    height: calc(100vh - 200px);
    padding: 1.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    flex: 1;
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripPlanReport/TripPlanReport.razor.rz.scp.css */
.filters-section[b-gacc6xj04e] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gacc6xj04e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gacc6xj04e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gacc6xj04e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gacc6xj04e] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gacc6xj04e], .filter-select[b-gacc6xj04e] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gacc6xj04e], .filter-select:focus[b-gacc6xj04e] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filters-grid[b-gacc6xj04e] {
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: end;
    gap: 8px;
}

.filter-actions[b-gacc6xj04e] {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .filter-actions .etrans-button[b-gacc6xj04e],
    .filter-actions button[b-gacc6xj04e] {
        height: 32px;
    }

.filters-inline[b-gacc6xj04e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .filters-inline .filter-input[b-gacc6xj04e],
    .filters-inline .etrans-button[b-gacc6xj04e],
    .filters-inline button[b-gacc6xj04e] {
        height: 32px;
    }

.filter-actions[b-gacc6xj04e] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.etrans-container[b-gacc6xj04e] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-gacc6xj04e] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-gacc6xj04e] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-gacc6xj04e] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-gacc6xj04e] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gacc6xj04e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gacc6xj04e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gacc6xj04e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gacc6xj04e] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gacc6xj04e], .filter-select[b-gacc6xj04e] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gacc6xj04e], .filter-select:focus[b-gacc6xj04e] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-gacc6xj04e] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-gacc6xj04e] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-gacc6xj04e] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-gacc6xj04e] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-gacc6xj04e] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-gacc6xj04e] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-gacc6xj04e] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-gacc6xj04e] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-gacc6xj04e] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-gacc6xj04e] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-gacc6xj04e], .rz-grid-table td[b-gacc6xj04e] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-gacc6xj04e] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-gacc6xj04e] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-gacc6xj04e] {
    background-color: #e9ecef;
}

.status-badge[b-gacc6xj04e] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-gacc6xj04e] {
    background-color: #28a745;
}

.status-pending[b-gacc6xj04e] {
    background-color: #ffc107;
}

.status-completed[b-gacc6xj04e] {
    background-color: #17a2b8;
}

.status-default[b-gacc6xj04e] {
    background-color: #6c757d;
}

.quantity-cell[b-gacc6xj04e], .date-cell[b-gacc6xj04e] {
    text-align: right;
}

@keyframes fadeIn-b-gacc6xj04e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-gacc6xj04e] {
        padding: 12px;
    }

    .filters-grid[b-gacc6xj04e] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-gacc6xj04e] {
        justify-content: stretch;
    }

    .btn[b-gacc6xj04e] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-gacc6xj04e] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-gacc6xj04e] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-gacc6xj04e], .rz-grid-table td[b-gacc6xj04e] {
            padding: 8px;
        }

    .data-table th[b-gacc6xj04e],
    .data-table td[b-gacc6xj04e] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-gacc6xj04e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-gacc6xj04e 0.3s ease;
    padding: 20px;
}

.modal-container[b-gacc6xj04e] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-gacc6xj04e 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-gacc6xj04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-gacc6xj04e] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-gacc6xj04e] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-gacc6xj04e] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-gacc6xj04e] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-gacc6xj04e] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-gacc6xj04e] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-gacc6xj04e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-gacc6xj04e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-gacc6xj04e] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-gacc6xj04e] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-gacc6xj04e] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-gacc6xj04e] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-gacc6xj04e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-gacc6xj04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-gacc6xj04e] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-gacc6xj04e] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-gacc6xj04e] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-gacc6xj04e] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-gacc6xj04e] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-gacc6xj04e] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-gacc6xj04e] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-gacc6xj04e] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-gacc6xj04e] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-gacc6xj04e] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-gacc6xj04e] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-gacc6xj04e] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-gacc6xj04e] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-gacc6xj04e] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-gacc6xj04e] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-gacc6xj04e] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-gacc6xj04e] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-gacc6xj04e] {
        max-width: 95%;
    }

    .info-grid[b-gacc6xj04e] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-gacc6xj04e] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-gacc6xj04e] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-gacc6xj04e] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-gacc6xj04e] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-gacc6xj04e] {
        padding: 10px;
    }

    .modal-container[b-gacc6xj04e] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-gacc6xj04e] {
        padding: 16px 20px;
    }

    .modal-title[b-gacc6xj04e] {
        font-size: 1rem;
    }

    .info-bar[b-gacc6xj04e] {
        padding: 12px 16px;
    }

    .info-grid[b-gacc6xj04e] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-gacc6xj04e] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-gacc6xj04e] {
        padding: 12px 16px;
    }

    .grid-header[b-gacc6xj04e] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-gacc6xj04e] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-gacc6xj04e],
    .transport-grid-full .rz-grid-table td[b-gacc6xj04e] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-gacc6xj04e] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-gacc6xj04e] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-gacc6xj04e] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-gacc6xj04e] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-gacc6xj04e] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-gacc6xj04e], .rz-textbox[b-gacc6xj04e], .rz-numeric[b-gacc6xj04e], .rz-textarea[b-gacc6xj04e] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-gacc6xj04e] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-gacc6xj04e] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-gacc6xj04e] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-gacc6xj04e] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-gacc6xj04e] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-gacc6xj04e] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-gacc6xj04e],
.rz-numeric.rz-state-invalid[b-gacc6xj04e],
.rz-dropdown.rz-state-invalid[b-gacc6xj04e] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-gacc6xj04e] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-gacc6xj04e] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-gacc6xj04e]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-gacc6xj04e]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-gacc6xj04e]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-gacc6xj04e]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-gacc6xj04e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-gacc6xj04e {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-gacc6xj04e] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-gacc6xj04e] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-gacc6xj04e] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-gacc6xj04e] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-gacc6xj04e] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-gacc6xj04e],
    .modal-footer[b-gacc6xj04e] {
        display: none;
    }

    .action-buttons[b-gacc6xj04e] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-gacc6xj04e] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-gacc6xj04e] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-gacc6xj04e] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-gacc6xj04e] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-gacc6xj04e] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-gacc6xj04e] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gacc6xj04e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gacc6xj04e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gacc6xj04e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gacc6xj04e] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gacc6xj04e], .filter-select[b-gacc6xj04e] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gacc6xj04e], .filter-select:focus[b-gacc6xj04e] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-gacc6xj04e] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-gacc6xj04e] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-gacc6xj04e] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-gacc6xj04e] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-gacc6xj04e] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-gacc6xj04e] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-gacc6xj04e] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-gacc6xj04e] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-gacc6xj04e] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-gacc6xj04e], .rz-grid-table td[b-gacc6xj04e] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-gacc6xj04e] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-gacc6xj04e] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-gacc6xj04e] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-gacc6xj04e] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-gacc6xj04e] {
    background-color: #28a745;
}

.status-pending[b-gacc6xj04e] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-gacc6xj04e] {
    background-color: #17a2b8;
}

.status-cancelled[b-gacc6xj04e] {
    background-color: #dc3545;
}

.status-default[b-gacc6xj04e] {
    background-color: #6c757d;
}

.quantity-cell[b-gacc6xj04e], .date-cell[b-gacc6xj04e] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-gacc6xj04e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-gacc6xj04e 0.3s ease;
}

.modal-container[b-gacc6xj04e] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-gacc6xj04e 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-gacc6xj04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-gacc6xj04e] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-gacc6xj04e] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-gacc6xj04e] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-gacc6xj04e] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-gacc6xj04e] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-gacc6xj04e] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-gacc6xj04e] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-gacc6xj04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-gacc6xj04e] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-gacc6xj04e] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-gacc6xj04e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-gacc6xj04e] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-gacc6xj04e] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-gacc6xj04e] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-gacc6xj04e] {
        background: #f8f9fa;
    }

.highlight-row[b-gacc6xj04e] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-gacc6xj04e] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-gacc6xj04e] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-gacc6xj04e] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-gacc6xj04e] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-gacc6xj04e] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-gacc6xj04e] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-gacc6xj04e] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-gacc6xj04e] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-gacc6xj04e] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-gacc6xj04e] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-gacc6xj04e] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-gacc6xj04e] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-gacc6xj04e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-gacc6xj04e {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-gacc6xj04e] {
        width: 98%;
    }

    .detail-layout[b-gacc6xj04e] {
        flex-direction: column;
    }

    .left-panel[b-gacc6xj04e] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-gacc6xj04e] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-gacc6xj04e] {
        padding: 12px;
    }

    .filters-grid[b-gacc6xj04e] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-gacc6xj04e] {
        justify-content: stretch;
    }

    .btn[b-gacc6xj04e] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-gacc6xj04e] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-gacc6xj04e] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-gacc6xj04e], .rz-grid-table td[b-gacc6xj04e] {
            padding: 8px;
        }

    .data-table th[b-gacc6xj04e],
    .data-table td[b-gacc6xj04e] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-gacc6xj04e] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-gacc6xj04e] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-gacc6xj04e],
        .transport-grid .rz-grid-table td[b-gacc6xj04e] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-gacc6xj04e] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-gacc6xj04e] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-gacc6xj04e] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-gacc6xj04e] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-gacc6xj04e], .rz-textbox[b-gacc6xj04e], .rz-numeric[b-gacc6xj04e], .rz-textarea[b-gacc6xj04e] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-gacc6xj04e] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-gacc6xj04e] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-gacc6xj04e] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-gacc6xj04e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-gacc6xj04e] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-gacc6xj04e] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-gacc6xj04e] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-gacc6xj04e] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-gacc6xj04e] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-gacc6xj04e] {
        display: none !important;
    }
    
    .mobile-filters-content[b-gacc6xj04e] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-gacc6xj04e] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-gacc6xj04e] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-gacc6xj04e] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-gacc6xj04e] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-gacc6xj04e] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-gacc6xj04e] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-gacc6xj04e] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-gacc6xj04e] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-gacc6xj04e] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-gacc6xj04e] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-gacc6xj04e] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-gacc6xj04e] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-gacc6xj04e] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-gacc6xj04e], .filter-select[b-gacc6xj04e] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-gacc6xj04e] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-gacc6xj04e] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-gacc6xj04e] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-gacc6xj04e],
    .rz-grid-table td[b-gacc6xj04e] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-gacc6xj04e] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/TripPlanWeeklyReport/TripPlanWeeklyReport.razor.rz.scp.css */
.filters-section[b-enq02yf33u] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-enq02yf33u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-enq02yf33u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-enq02yf33u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-enq02yf33u] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-enq02yf33u], .filter-select[b-enq02yf33u] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-enq02yf33u], .filter-select:focus[b-enq02yf33u] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-enq02yf33u] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.etrans-container[b-enq02yf33u] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-enq02yf33u] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-enq02yf33u] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-enq02yf33u] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-enq02yf33u] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-enq02yf33u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-enq02yf33u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-enq02yf33u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-enq02yf33u] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-enq02yf33u], .filter-select[b-enq02yf33u] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-enq02yf33u], .filter-select:focus[b-enq02yf33u] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-enq02yf33u] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-enq02yf33u] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-enq02yf33u] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-enq02yf33u] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-enq02yf33u] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-enq02yf33u] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-enq02yf33u] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-enq02yf33u] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-enq02yf33u] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px)!important;
}

.rz-data-grid[b-enq02yf33u] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-enq02yf33u], .rz-grid-table td[b-enq02yf33u] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-enq02yf33u] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-enq02yf33u] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-enq02yf33u] {
    background-color: #e9ecef;
}

.status-badge[b-enq02yf33u] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-enq02yf33u] {
    background-color: #28a745;
}

.status-pending[b-enq02yf33u] {
    background-color: #ffc107;
}

.status-completed[b-enq02yf33u] {
    background-color: #17a2b8;
}

.status-default[b-enq02yf33u] {
    background-color: #6c757d;
}

.quantity-cell[b-enq02yf33u], .date-cell[b-enq02yf33u] {
    text-align: right;
}

@keyframes fadeIn-b-enq02yf33u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-enq02yf33u] {
        padding: 12px;
    }

    .filters-grid[b-enq02yf33u] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-enq02yf33u] {
        justify-content: stretch;
    }

    .btn[b-enq02yf33u] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-enq02yf33u] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-enq02yf33u] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-enq02yf33u], .rz-grid-table td[b-enq02yf33u] {
            padding: 8px;
        }

    .data-table th[b-enq02yf33u],
    .data-table td[b-enq02yf33u] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-enq02yf33u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-enq02yf33u 0.3s ease;
    padding: 20px;
}

.modal-container[b-enq02yf33u] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-enq02yf33u 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-enq02yf33u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-enq02yf33u] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-enq02yf33u] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-enq02yf33u] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-enq02yf33u] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-enq02yf33u] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-enq02yf33u] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-enq02yf33u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-enq02yf33u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-enq02yf33u] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-enq02yf33u] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-enq02yf33u] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-enq02yf33u] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-enq02yf33u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-enq02yf33u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-enq02yf33u] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-enq02yf33u] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-enq02yf33u] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-enq02yf33u] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-enq02yf33u] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-enq02yf33u] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-enq02yf33u] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-enq02yf33u] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-enq02yf33u] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-enq02yf33u] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-enq02yf33u] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-enq02yf33u] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-enq02yf33u] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-enq02yf33u] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-enq02yf33u] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-enq02yf33u] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-enq02yf33u] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-enq02yf33u] {
        max-width: 95%;
    }

    .info-grid[b-enq02yf33u] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-enq02yf33u] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-enq02yf33u] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-enq02yf33u] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-enq02yf33u] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-enq02yf33u] {
        padding: 10px;
    }

    .modal-container[b-enq02yf33u] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-enq02yf33u] {
        padding: 16px 20px;
    }

    .modal-title[b-enq02yf33u] {
        font-size: 1rem;
    }

    .info-bar[b-enq02yf33u] {
        padding: 12px 16px;
    }

    .info-grid[b-enq02yf33u] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-enq02yf33u] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-enq02yf33u] {
        padding: 12px 16px;
    }

    .grid-header[b-enq02yf33u] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-enq02yf33u] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-enq02yf33u],
    .transport-grid-full .rz-grid-table td[b-enq02yf33u] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-enq02yf33u] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-enq02yf33u] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-enq02yf33u] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-enq02yf33u] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-enq02yf33u] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-enq02yf33u], .rz-textbox[b-enq02yf33u], .rz-numeric[b-enq02yf33u], .rz-textarea[b-enq02yf33u] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-enq02yf33u] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-enq02yf33u] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-enq02yf33u] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-enq02yf33u] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-enq02yf33u] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-enq02yf33u] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-enq02yf33u],
.rz-numeric.rz-state-invalid[b-enq02yf33u],
.rz-dropdown.rz-state-invalid[b-enq02yf33u] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-enq02yf33u] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-enq02yf33u] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-enq02yf33u]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-enq02yf33u]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-enq02yf33u]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-enq02yf33u]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-enq02yf33u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-enq02yf33u {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-enq02yf33u] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-enq02yf33u] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-enq02yf33u] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-enq02yf33u] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-enq02yf33u] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-enq02yf33u],
    .modal-footer[b-enq02yf33u] {
        display: none;
    }

    .action-buttons[b-enq02yf33u] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-enq02yf33u] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-enq02yf33u] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-enq02yf33u] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-enq02yf33u] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-enq02yf33u] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-enq02yf33u] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-enq02yf33u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-enq02yf33u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-enq02yf33u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-enq02yf33u] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-enq02yf33u], .filter-select[b-enq02yf33u] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-enq02yf33u], .filter-select:focus[b-enq02yf33u] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-enq02yf33u] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-enq02yf33u] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-enq02yf33u] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-enq02yf33u] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-enq02yf33u] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-enq02yf33u] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-enq02yf33u] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-enq02yf33u] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-enq02yf33u] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-enq02yf33u], .rz-grid-table td[b-enq02yf33u] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-enq02yf33u] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-enq02yf33u] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-enq02yf33u] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-enq02yf33u] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-enq02yf33u] {
    background-color: #28a745;
}

.status-pending[b-enq02yf33u] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-enq02yf33u] {
    background-color: #17a2b8;
}

.status-cancelled[b-enq02yf33u] {
    background-color: #dc3545;
}

.status-default[b-enq02yf33u] {
    background-color: #6c757d;
}

.quantity-cell[b-enq02yf33u], .date-cell[b-enq02yf33u] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-enq02yf33u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-enq02yf33u 0.3s ease;
}

.modal-container[b-enq02yf33u] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-enq02yf33u 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-enq02yf33u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-enq02yf33u] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-enq02yf33u] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-enq02yf33u] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-enq02yf33u] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-enq02yf33u] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-enq02yf33u] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-enq02yf33u] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-enq02yf33u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-enq02yf33u] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-enq02yf33u] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-enq02yf33u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-enq02yf33u] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-enq02yf33u] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-enq02yf33u] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-enq02yf33u] {
        background: #f8f9fa;
    }

.highlight-row[b-enq02yf33u] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-enq02yf33u] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-enq02yf33u] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-enq02yf33u] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-enq02yf33u] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-enq02yf33u] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-enq02yf33u] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-enq02yf33u] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-enq02yf33u] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-enq02yf33u] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-enq02yf33u] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-enq02yf33u] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-enq02yf33u] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-enq02yf33u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-enq02yf33u {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-enq02yf33u] {
        width: 98%;
    }

    .detail-layout[b-enq02yf33u] {
        flex-direction: column;
    }

    .left-panel[b-enq02yf33u] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-enq02yf33u] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-enq02yf33u] {
        padding: 12px;
    }

    .filters-grid[b-enq02yf33u] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-enq02yf33u] {
        justify-content: stretch;
    }

    .btn[b-enq02yf33u] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-enq02yf33u] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-enq02yf33u] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-enq02yf33u], .rz-grid-table td[b-enq02yf33u] {
            padding: 8px;
        }

    .data-table th[b-enq02yf33u],
    .data-table td[b-enq02yf33u] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-enq02yf33u] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-enq02yf33u] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-enq02yf33u],
        .transport-grid .rz-grid-table td[b-enq02yf33u] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-enq02yf33u] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-enq02yf33u] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-enq02yf33u] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-enq02yf33u] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-enq02yf33u], .rz-textbox[b-enq02yf33u], .rz-numeric[b-enq02yf33u], .rz-textarea[b-enq02yf33u] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-enq02yf33u] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-enq02yf33u] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-enq02yf33u] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-enq02yf33u] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-enq02yf33u] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-enq02yf33u] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-enq02yf33u] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-enq02yf33u] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-enq02yf33u] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-enq02yf33u] {
        display: none !important;
    }
    
    .mobile-filters-content[b-enq02yf33u] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-enq02yf33u] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-enq02yf33u] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }
    
    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-enq02yf33u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .mobile-filter-title[b-enq02yf33u] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-enq02yf33u] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-filter-toggle:hover[b-enq02yf33u] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-enq02yf33u] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-enq02yf33u] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-enq02yf33u] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }
    
    .mobile-filters-content.expanded[b-enq02yf33u] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-enq02yf33u] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-enq02yf33u] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-enq02yf33u] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-enq02yf33u], .filter-select[b-enq02yf33u] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-enq02yf33u] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
    
    /* Mobile grid adjustments */
    .table-container[b-enq02yf33u] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-enq02yf33u] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-enq02yf33u],
    .rz-grid-table td[b-enq02yf33u] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-enq02yf33u] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/VolumeLossReport/VolumeLossReport.razor.rz.scp.css */
.filters-section[b-gfy3y8iir5] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gfy3y8iir5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gfy3y8iir5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gfy3y8iir5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gfy3y8iir5] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gfy3y8iir5], .filter-select[b-gfy3y8iir5] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gfy3y8iir5], .filter-select:focus[b-gfy3y8iir5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-gfy3y8iir5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.etrans-container[b-gfy3y8iir5] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-gfy3y8iir5] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-gfy3y8iir5] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-gfy3y8iir5] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-gfy3y8iir5] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gfy3y8iir5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gfy3y8iir5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gfy3y8iir5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gfy3y8iir5] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gfy3y8iir5], .filter-select[b-gfy3y8iir5] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gfy3y8iir5], .filter-select:focus[b-gfy3y8iir5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-gfy3y8iir5] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-gfy3y8iir5] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-gfy3y8iir5] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-gfy3y8iir5] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-gfy3y8iir5] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-gfy3y8iir5] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-gfy3y8iir5] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-gfy3y8iir5] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-gfy3y8iir5] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px) !important;
}

.rz-data-grid[b-gfy3y8iir5] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-gfy3y8iir5], .rz-grid-table td[b-gfy3y8iir5] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-gfy3y8iir5] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-gfy3y8iir5] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-gfy3y8iir5] {
    background-color: #e9ecef;
}

.status-badge[b-gfy3y8iir5] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-gfy3y8iir5] {
    background-color: #28a745;
}

.status-pending[b-gfy3y8iir5] {
    background-color: #ffc107;
}

.status-completed[b-gfy3y8iir5] {
    background-color: #17a2b8;
}

.status-default[b-gfy3y8iir5] {
    background-color: #6c757d;
}

.quantity-cell[b-gfy3y8iir5], .date-cell[b-gfy3y8iir5] {
    text-align: right;
}

@keyframes fadeIn-b-gfy3y8iir5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-gfy3y8iir5] {
        padding: 12px;
    }

    .filters-grid[b-gfy3y8iir5] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-gfy3y8iir5] {
        justify-content: stretch;
    }

    .btn[b-gfy3y8iir5] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-gfy3y8iir5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-gfy3y8iir5] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-gfy3y8iir5], .rz-grid-table td[b-gfy3y8iir5] {
            padding: 8px;
        }

    .data-table th[b-gfy3y8iir5],
    .data-table td[b-gfy3y8iir5] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-gfy3y8iir5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-gfy3y8iir5 0.3s ease;
    padding: 20px;
}

.modal-container[b-gfy3y8iir5] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-gfy3y8iir5 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-gfy3y8iir5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-gfy3y8iir5] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-gfy3y8iir5] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-gfy3y8iir5] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-gfy3y8iir5] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-gfy3y8iir5] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-gfy3y8iir5] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-gfy3y8iir5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-gfy3y8iir5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-gfy3y8iir5] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-gfy3y8iir5] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-gfy3y8iir5] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-gfy3y8iir5] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-gfy3y8iir5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-gfy3y8iir5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-gfy3y8iir5] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-gfy3y8iir5] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-gfy3y8iir5] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-gfy3y8iir5] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-gfy3y8iir5] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-gfy3y8iir5] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-gfy3y8iir5] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-gfy3y8iir5] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-gfy3y8iir5] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-gfy3y8iir5] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-gfy3y8iir5] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-gfy3y8iir5] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-gfy3y8iir5] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-gfy3y8iir5] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-gfy3y8iir5] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-gfy3y8iir5] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-gfy3y8iir5] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-gfy3y8iir5] {
        max-width: 95%;
    }

    .info-grid[b-gfy3y8iir5] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-gfy3y8iir5] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-gfy3y8iir5] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-gfy3y8iir5] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-gfy3y8iir5] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-gfy3y8iir5] {
        padding: 10px;
    }

    .modal-container[b-gfy3y8iir5] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-gfy3y8iir5] {
        padding: 16px 20px;
    }

    .modal-title[b-gfy3y8iir5] {
        font-size: 1rem;
    }

    .info-bar[b-gfy3y8iir5] {
        padding: 12px 16px;
    }

    .info-grid[b-gfy3y8iir5] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-gfy3y8iir5] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-gfy3y8iir5] {
        padding: 12px 16px;
    }

    .grid-header[b-gfy3y8iir5] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-gfy3y8iir5] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-gfy3y8iir5],
    .transport-grid-full .rz-grid-table td[b-gfy3y8iir5] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-gfy3y8iir5] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-gfy3y8iir5] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-gfy3y8iir5] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-gfy3y8iir5] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-gfy3y8iir5] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-gfy3y8iir5], .rz-textbox[b-gfy3y8iir5], .rz-numeric[b-gfy3y8iir5], .rz-textarea[b-gfy3y8iir5] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-gfy3y8iir5] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-gfy3y8iir5] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-gfy3y8iir5] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-gfy3y8iir5] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-gfy3y8iir5] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-gfy3y8iir5] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-gfy3y8iir5],
.rz-numeric.rz-state-invalid[b-gfy3y8iir5],
.rz-dropdown.rz-state-invalid[b-gfy3y8iir5] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-gfy3y8iir5] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-gfy3y8iir5] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-gfy3y8iir5]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-gfy3y8iir5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-gfy3y8iir5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-gfy3y8iir5]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-gfy3y8iir5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-gfy3y8iir5 {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-gfy3y8iir5] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-gfy3y8iir5] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-gfy3y8iir5] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-gfy3y8iir5] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-gfy3y8iir5] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-gfy3y8iir5],
    .modal-footer[b-gfy3y8iir5] {
        display: none;
    }

    .action-buttons[b-gfy3y8iir5] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-gfy3y8iir5] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-gfy3y8iir5] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-gfy3y8iir5] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-gfy3y8iir5] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-gfy3y8iir5] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-gfy3y8iir5] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-gfy3y8iir5] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-gfy3y8iir5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-gfy3y8iir5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-gfy3y8iir5] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-gfy3y8iir5], .filter-select[b-gfy3y8iir5] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-gfy3y8iir5], .filter-select:focus[b-gfy3y8iir5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-gfy3y8iir5] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-gfy3y8iir5] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-gfy3y8iir5] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-gfy3y8iir5] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-gfy3y8iir5] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-gfy3y8iir5] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-gfy3y8iir5] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-gfy3y8iir5] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-gfy3y8iir5] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-gfy3y8iir5], .rz-grid-table td[b-gfy3y8iir5] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-gfy3y8iir5] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-gfy3y8iir5] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-gfy3y8iir5] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-gfy3y8iir5] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-gfy3y8iir5] {
    background-color: #28a745;
}

.status-pending[b-gfy3y8iir5] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-gfy3y8iir5] {
    background-color: #17a2b8;
}

.status-cancelled[b-gfy3y8iir5] {
    background-color: #dc3545;
}

.status-default[b-gfy3y8iir5] {
    background-color: #6c757d;
}

.quantity-cell[b-gfy3y8iir5], .date-cell[b-gfy3y8iir5] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-gfy3y8iir5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-gfy3y8iir5 0.3s ease;
}

.modal-container[b-gfy3y8iir5] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-gfy3y8iir5 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-gfy3y8iir5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-gfy3y8iir5] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-gfy3y8iir5] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-gfy3y8iir5] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-gfy3y8iir5] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-gfy3y8iir5] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-gfy3y8iir5] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-gfy3y8iir5] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-gfy3y8iir5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-gfy3y8iir5] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-gfy3y8iir5] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-gfy3y8iir5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-gfy3y8iir5] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-gfy3y8iir5] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-gfy3y8iir5] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-gfy3y8iir5] {
        background: #f8f9fa;
    }

.highlight-row[b-gfy3y8iir5] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-gfy3y8iir5] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-gfy3y8iir5] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-gfy3y8iir5] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-gfy3y8iir5] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-gfy3y8iir5] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-gfy3y8iir5] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-gfy3y8iir5] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-gfy3y8iir5] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-gfy3y8iir5] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-gfy3y8iir5] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-gfy3y8iir5] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-gfy3y8iir5] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-gfy3y8iir5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-gfy3y8iir5 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-gfy3y8iir5] {
        width: 98%;
    }

    .detail-layout[b-gfy3y8iir5] {
        flex-direction: column;
    }

    .left-panel[b-gfy3y8iir5] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-gfy3y8iir5] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-gfy3y8iir5] {
        padding: 12px;
    }

    .filters-grid[b-gfy3y8iir5] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-gfy3y8iir5] {
        justify-content: stretch;
    }

    .btn[b-gfy3y8iir5] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-gfy3y8iir5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-gfy3y8iir5] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-gfy3y8iir5], .rz-grid-table td[b-gfy3y8iir5] {
            padding: 8px;
        }

    .data-table th[b-gfy3y8iir5],
    .data-table td[b-gfy3y8iir5] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-gfy3y8iir5] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-gfy3y8iir5] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-gfy3y8iir5],
        .transport-grid .rz-grid-table td[b-gfy3y8iir5] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-gfy3y8iir5] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-gfy3y8iir5] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-gfy3y8iir5] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-gfy3y8iir5] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-gfy3y8iir5], .rz-textbox[b-gfy3y8iir5], .rz-numeric[b-gfy3y8iir5], .rz-textarea[b-gfy3y8iir5] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-gfy3y8iir5] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-gfy3y8iir5] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-gfy3y8iir5] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-gfy3y8iir5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-gfy3y8iir5] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-gfy3y8iir5] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-gfy3y8iir5] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-gfy3y8iir5] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-gfy3y8iir5] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-gfy3y8iir5] {
        display: none !important;
    }

    .mobile-filters-content[b-gfy3y8iir5] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-gfy3y8iir5] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-gfy3y8iir5] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-gfy3y8iir5] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-gfy3y8iir5] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-gfy3y8iir5] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-gfy3y8iir5] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-gfy3y8iir5] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-gfy3y8iir5] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-gfy3y8iir5] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-gfy3y8iir5] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-gfy3y8iir5] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-gfy3y8iir5] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .filter-label[b-gfy3y8iir5] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-gfy3y8iir5], .filter-select[b-gfy3y8iir5] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    /* Mobile filter actions */
    .filter-actions[b-gfy3y8iir5] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }

    /* Mobile grid adjustments */
    .table-container[b-gfy3y8iir5] {
        padding: 0;
        margin: 0;
    }

    .rz-data-grid[b-gfy3y8iir5] {
        margin: 0 !important;
        font-size: 0.8rem;
    }

    .rz-grid-table th[b-gfy3y8iir5],
    .rz-grid-table td[b-gfy3y8iir5] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .rz-grid-table th[b-gfy3y8iir5] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Pages/V2/Warehouse/WarehouseReport.razor.rz.scp.css */
.filters-section[b-sxf7mob4yx] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-sxf7mob4yx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-sxf7mob4yx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-sxf7mob4yx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-sxf7mob4yx] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-sxf7mob4yx], .filter-select[b-sxf7mob4yx] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-sxf7mob4yx], .filter-select:focus[b-sxf7mob4yx] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-sxf7mob4yx] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.etrans-container[b-sxf7mob4yx] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-sxf7mob4yx] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-sxf7mob4yx] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-sxf7mob4yx] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-sxf7mob4yx] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-sxf7mob4yx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-sxf7mob4yx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-sxf7mob4yx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-sxf7mob4yx] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-sxf7mob4yx], .filter-select[b-sxf7mob4yx] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-sxf7mob4yx], .filter-select:focus[b-sxf7mob4yx] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-sxf7mob4yx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-sxf7mob4yx] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-sxf7mob4yx] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-sxf7mob4yx] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-sxf7mob4yx] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-sxf7mob4yx] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-sxf7mob4yx] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-sxf7mob4yx] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-sxf7mob4yx] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 150px) !important;
}

.rz-data-grid[b-sxf7mob4yx] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-sxf7mob4yx], .rz-grid-table td[b-sxf7mob4yx] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-sxf7mob4yx] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-sxf7mob4yx] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-sxf7mob4yx] {
    background-color: #e9ecef;
}

.status-badge[b-sxf7mob4yx] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-sxf7mob4yx] {
    background-color: #28a745;
}

.status-pending[b-sxf7mob4yx] {
    background-color: #ffc107;
}

.status-completed[b-sxf7mob4yx] {
    background-color: #17a2b8;
}

.status-default[b-sxf7mob4yx] {
    background-color: #6c757d;
}

.quantity-cell[b-sxf7mob4yx], .date-cell[b-sxf7mob4yx] {
    text-align: right;
}

@keyframes fadeIn-b-sxf7mob4yx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-sxf7mob4yx] {
        padding: 12px;
    }

    .filters-grid[b-sxf7mob4yx] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-sxf7mob4yx] {
        justify-content: stretch;
    }

    .btn[b-sxf7mob4yx] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-sxf7mob4yx] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-sxf7mob4yx] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-sxf7mob4yx], .rz-grid-table td[b-sxf7mob4yx] {
            padding: 8px;
        }

    .data-table th[b-sxf7mob4yx],
    .data-table td[b-sxf7mob4yx] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-sxf7mob4yx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-sxf7mob4yx 0.3s ease;
    padding: 20px;
}

.modal-container[b-sxf7mob4yx] {
    background: white;
    border-radius: 12px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-sxf7mob4yx 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-sxf7mob4yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-sxf7mob4yx] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-sxf7mob4yx] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-sxf7mob4yx] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-sxf7mob4yx] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-sxf7mob4yx] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-sxf7mob4yx] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-sxf7mob4yx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-sxf7mob4yx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .info-item.highlight[b-sxf7mob4yx] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-sxf7mob4yx] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-sxf7mob4yx] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-sxf7mob4yx] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-sxf7mob4yx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-sxf7mob4yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-sxf7mob4yx] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-sxf7mob4yx] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-sxf7mob4yx] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-sxf7mob4yx] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-sxf7mob4yx] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-sxf7mob4yx] {
            background: linear-gradient(135deg, #f1f3f4, #e8eaed);
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            color: #2c3e50;
            white-space: nowrap;
            border-bottom: 2px solid #dee2e6;
            font-size: 0.8rem;
        }

        .transport-grid-full .rz-grid-table td[b-sxf7mob4yx] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-sxf7mob4yx] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-sxf7mob4yx] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-sxf7mob4yx] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-sxf7mob4yx] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-sxf7mob4yx] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-sxf7mob4yx] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-sxf7mob4yx] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-sxf7mob4yx] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

    .modal-footer .btn[b-sxf7mob4yx] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-sxf7mob4yx] {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .modal-container[b-sxf7mob4yx] {
        max-width: 95%;
    }

    .info-grid[b-sxf7mob4yx] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-sxf7mob4yx] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-sxf7mob4yx] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-sxf7mob4yx] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-sxf7mob4yx] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-sxf7mob4yx] {
        padding: 10px;
    }

    .modal-container[b-sxf7mob4yx] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-sxf7mob4yx] {
        padding: 16px 20px;
    }

    .modal-title[b-sxf7mob4yx] {
        font-size: 1rem;
    }

    .info-bar[b-sxf7mob4yx] {
        padding: 12px 16px;
    }

    .info-grid[b-sxf7mob4yx] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-sxf7mob4yx] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-sxf7mob4yx] {
        padding: 12px 16px;
    }

    .grid-header[b-sxf7mob4yx] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-sxf7mob4yx] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-sxf7mob4yx],
    .transport-grid-full .rz-grid-table td[b-sxf7mob4yx] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-sxf7mob4yx] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-sxf7mob4yx] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-sxf7mob4yx] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-sxf7mob4yx] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-sxf7mob4yx] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-sxf7mob4yx], .rz-textbox[b-sxf7mob4yx], .rz-numeric[b-sxf7mob4yx], .rz-textarea[b-sxf7mob4yx] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-sxf7mob4yx] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-sxf7mob4yx] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-sxf7mob4yx] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-sxf7mob4yx] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-sxf7mob4yx] {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9rem;
}

/* Loading state */
.transport-grid-full .rz-datatable-loading-overlay[b-sxf7mob4yx] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-sxf7mob4yx],
.rz-numeric.rz-state-invalid[b-sxf7mob4yx],
.rz-dropdown.rz-state-invalid[b-sxf7mob4yx] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-sxf7mob4yx] {
    font-size: 0.8rem;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

/* Column resize indicators */
.transport-grid-full .rz-grid-table th.rz-unselectable-text[b-sxf7mob4yx] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-sxf7mob4yx]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-sxf7mob4yx]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-sxf7mob4yx]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-sxf7mob4yx]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-sxf7mob4yx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-sxf7mob4yx {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Row highlight on edit */
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-sxf7mob4yx] {
    background-color: #fff3cd !important;
    border-color: #ffc107;
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.transport-grid-full .rz-grid-table tbody tr:focus[b-sxf7mob4yx] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-sxf7mob4yx] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-sxf7mob4yx] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-sxf7mob4yx] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-sxf7mob4yx],
    .modal-footer[b-sxf7mob4yx] {
        display: none;
    }

    .action-buttons[b-sxf7mob4yx] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-sxf7mob4yx] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-sxf7mob4yx] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-sxf7mob4yx] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .header h1[b-sxf7mob4yx] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-sxf7mob4yx] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-sxf7mob4yx] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-sxf7mob4yx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-sxf7mob4yx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-sxf7mob4yx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-sxf7mob4yx] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-sxf7mob4yx], .filter-select[b-sxf7mob4yx] {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    transition: all 0.2s ease;
    background: white;
    height: 32px;
}

    .filter-input:focus[b-sxf7mob4yx], .filter-select:focus[b-sxf7mob4yx] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-sxf7mob4yx] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.btn-primary[b-sxf7mob4yx] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-sxf7mob4yx] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-sxf7mob4yx] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-sxf7mob4yx] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-sxf7mob4yx] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-sxf7mob4yx] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-sxf7mob4yx] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-sxf7mob4yx] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-sxf7mob4yx], .rz-grid-table td[b-sxf7mob4yx] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-sxf7mob4yx] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-sxf7mob4yx] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-sxf7mob4yx] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-sxf7mob4yx] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-sxf7mob4yx] {
    background-color: #28a745;
}

.status-pending[b-sxf7mob4yx] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-sxf7mob4yx] {
    background-color: #17a2b8;
}

.status-cancelled[b-sxf7mob4yx] {
    background-color: #dc3545;
}

.status-default[b-sxf7mob4yx] {
    background-color: #6c757d;
}

.quantity-cell[b-sxf7mob4yx], .date-cell[b-sxf7mob4yx] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-sxf7mob4yx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-sxf7mob4yx 0.3s ease;
}

.modal-container[b-sxf7mob4yx] {
    background: white;
    border-radius: 8px;
    width: 95%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-sxf7mob4yx 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-sxf7mob4yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.modal-title[b-sxf7mob4yx] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-sxf7mob4yx] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .modal-close-btn:hover[b-sxf7mob4yx] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-sxf7mob4yx] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-sxf7mob4yx] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-sxf7mob4yx] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-sxf7mob4yx] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-sxf7mob4yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

    .transport-header-actions h4[b-sxf7mob4yx] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-sxf7mob4yx] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-sxf7mob4yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.85rem;
}

    .detail-row-item:last-child[b-sxf7mob4yx] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-sxf7mob4yx] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-sxf7mob4yx] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-sxf7mob4yx] {
        background: #f8f9fa;
    }

.highlight-row[b-sxf7mob4yx] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-sxf7mob4yx] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-sxf7mob4yx] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-sxf7mob4yx] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-sxf7mob4yx] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-sxf7mob4yx] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-sxf7mob4yx] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-sxf7mob4yx] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-sxf7mob4yx] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-sxf7mob4yx] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-sxf7mob4yx] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-sxf7mob4yx] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-sxf7mob4yx] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #f8f9fa;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-sxf7mob4yx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-sxf7mob4yx {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .modal-container[b-sxf7mob4yx] {
        width: 98%;
    }

    .detail-layout[b-sxf7mob4yx] {
        flex-direction: column;
    }

    .left-panel[b-sxf7mob4yx] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-sxf7mob4yx] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-sxf7mob4yx] {
        padding: 12px;
    }

    .filters-grid[b-sxf7mob4yx] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-sxf7mob4yx] {
        justify-content: stretch;
    }

    .btn[b-sxf7mob4yx] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-sxf7mob4yx] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-sxf7mob4yx] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-sxf7mob4yx], .rz-grid-table td[b-sxf7mob4yx] {
            padding: 8px;
        }

    .data-table th[b-sxf7mob4yx],
    .data-table td[b-sxf7mob4yx] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-sxf7mob4yx] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-sxf7mob4yx] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-sxf7mob4yx],
        .transport-grid .rz-grid-table td[b-sxf7mob4yx] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-sxf7mob4yx] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-sxf7mob4yx] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-sxf7mob4yx] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-sxf7mob4yx] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-sxf7mob4yx], .rz-textbox[b-sxf7mob4yx], .rz-numeric[b-sxf7mob4yx], .rz-textarea[b-sxf7mob4yx] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-sxf7mob4yx] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-sxf7mob4yx] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-sxf7mob4yx] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-sxf7mob4yx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-sxf7mob4yx] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-sxf7mob4yx] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-sxf7mob4yx] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-sxf7mob4yx] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-sxf7mob4yx] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-sxf7mob4yx] {
        display: none !important;
    }

    .mobile-filters-content[b-sxf7mob4yx] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-sxf7mob4yx] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-sxf7mob4yx] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 0;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-sxf7mob4yx] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-sxf7mob4yx] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-sxf7mob4yx] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-sxf7mob4yx] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-sxf7mob4yx] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-sxf7mob4yx] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-sxf7mob4yx] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        opacity: 0;
        padding: 0;
    }

        .mobile-filters-content.expanded[b-sxf7mob4yx] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-sxf7mob4yx] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-sxf7mob4yx] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .filter-label[b-sxf7mob4yx] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-sxf7mob4yx], .filter-select[b-sxf7mob4yx] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    /* Mobile filter actions */
    .filter-actions[b-sxf7mob4yx] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }

    /* Mobile grid adjustments */
    .table-container[b-sxf7mob4yx] {
        padding: 0;
        margin: 0;
    }

    .rz-data-grid[b-sxf7mob4yx] {
        margin: 0 !important;
        font-size: 0.8rem;
    }

    .rz-grid-table th[b-sxf7mob4yx],
    .rz-grid-table td[b-sxf7mob4yx] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .rz-grid-table th[b-sxf7mob4yx] {
        position: static !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Shared/ChatModal.razor.rz.scp.css */
/* Chat Modal Overlay */
.chat-modal-overlay[b-0x0z7qjrdm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn-b-0x0z7qjrdm 0.2s ease-out;
}

.chat-modal-content[b-0x0z7qjrdm] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    height: 80vh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-0x0z7qjrdm 0.3s ease-out;
}

@keyframes fadeIn-b-0x0z7qjrdm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-0x0z7qjrdm {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Chat Header */
.chat-header[b-0x0z7qjrdm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.chat-title[b-0x0z7qjrdm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
}

.chat-title i[b-0x0z7qjrdm] {
    font-size: 18px;
}

.online-count[b-0x0z7qjrdm] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 12px;
}

.chat-close-btn[b-0x0z7qjrdm] {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.chat-close-btn:hover[b-0x0z7qjrdm] {
    background: rgba(255, 255, 255, 0.2);
}

/* Messages Area */
.chat-messages[b-0x0z7qjrdm] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-messages[b-0x0z7qjrdm]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-0x0z7qjrdm]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat-messages[b-0x0z7qjrdm]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.chat-messages[b-0x0z7qjrdm]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Loading State */
.chat-loading[b-0x0z7qjrdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #666;
}

.chat-loading i[b-0x0z7qjrdm] {
    font-size: 24px;
    color: #667eea;
}

/* Empty State */
.chat-empty[b-0x0z7qjrdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: #666;
    text-align: center;
}

.chat-empty i[b-0x0z7qjrdm] {
    font-size: 48px;
    color: #ddd;
}

.chat-empty p[b-0x0z7qjrdm] {
    margin: 0;
    font-size: 14px;
}

/* Load More Button */
.load-more-container[b-0x0z7qjrdm] {
    text-align: center;
    margin-bottom: 8px;
}

.load-more-btn[b-0x0z7qjrdm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.load-more-btn:hover:not(:disabled)[b-0x0z7qjrdm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.load-more-btn:disabled[b-0x0z7qjrdm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Chat Messages */
.chat-message[b-0x0z7qjrdm] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    animation: messageAppear-b-0x0z7qjrdm 0.3s ease-out;
}

@keyframes messageAppear-b-0x0z7qjrdm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.own-message[b-0x0z7qjrdm] {
    flex-direction: row-reverse;
}

.chat-message.own-message .message-content[b-0x0z7qjrdm] {
    align-items: flex-end;
}

.chat-message.own-message .message-body[b-0x0z7qjrdm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.message-avatar[b-0x0z7qjrdm] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 24px;
}

.message-content[b-0x0z7qjrdm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 70%;
}

.message-header[b-0x0z7qjrdm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.sender-name[b-0x0z7qjrdm] {
    font-weight: 600;
    color: #333;
}
.role-name[b-0x0z7qjrdm] {
    font-weight: 600;
    color: green;
}

.message-time[b-0x0z7qjrdm] {
    color: #999;
}

.own-message .message-header[b-0x0z7qjrdm] {
    flex-direction: row-reverse;
}

.message-body[b-0x0z7qjrdm] {
    background: white;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    line-height: 1.4;
    font-size: 14px;
}

.message-attachment[b-0x0z7qjrdm] {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-size: 12px;
}

.message-attachment a[b-0x0z7qjrdm] {
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.message-attachment a:hover[b-0x0z7qjrdm] {
    text-decoration: underline;
}

/* Typing Indicator */
.typing-indicator[b-0x0z7qjrdm] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    animation: messageAppear-b-0x0z7qjrdm 0.3s ease-out;
}

.typing-avatar[b-0x0z7qjrdm] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
}

.typing-content[b-0x0z7qjrdm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.typing-text[b-0x0z7qjrdm] {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.typing-animation[b-0x0z7qjrdm] {
    background: white;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 4px;
    width: fit-content;
}

.typing-animation span[b-0x0z7qjrdm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    animation: typingDots-b-0x0z7qjrdm 1.4s infinite;
}

.typing-animation span:nth-child(2)[b-0x0z7qjrdm] {
    animation-delay: 0.2s;
}

.typing-animation span:nth-child(3)[b-0x0z7qjrdm] {
    animation-delay: 0.4s;
}

@keyframes typingDots-b-0x0z7qjrdm {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    30% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Chat Input Area */
.chat-input-area[b-0x0z7qjrdm] {
    padding: 16px 20px;
    border-top: 1px solid #e1e5e9;
    background: white;
    border-radius: 0 0 12px 12px;
}

.input-container[b-0x0z7qjrdm] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.message-input[b-0x0z7qjrdm] {
    flex: 1;
    border: 1px solid #e1e5e9;
    border-radius: 24px;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: #f8f9fa;
}

.message-input:focus[b-0x0z7qjrdm] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.message-input:disabled[b-0x0z7qjrdm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.send-btn[b-0x0z7qjrdm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
}

.send-btn:hover:not(:disabled)[b-0x0z7qjrdm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.send-btn:disabled[b-0x0z7qjrdm] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-modal-content[b-0x0z7qjrdm] {
        width: 95%;
        height: 90vh;
        margin: 20px;
    }
    
    .chat-header[b-0x0z7qjrdm] {
        padding: 12px 16px;
    }
    
    .chat-title[b-0x0z7qjrdm] {
        font-size: 14px;
    }
    
    .chat-messages[b-0x0z7qjrdm] {
        padding: 12px;
    }
    
    .message-content[b-0x0z7qjrdm] {
        max-width: 85%;
    }
    
    .chat-input-area[b-0x0z7qjrdm] {
        padding: 12px 16px;
    }
    
    .message-input[b-0x0z7qjrdm] {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

@media (max-width: 480px) {
    .chat-modal-content[b-0x0z7qjrdm] {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }
    
    .chat-header[b-0x0z7qjrdm] {
        border-radius: 0;
    }
    
    .chat-input-area[b-0x0z7qjrdm] {
        border-radius: 0;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Shared/ETransButton.razor.rz.scp.css */
/* Base button styles */
.etrans-btn[b-plc2v9a0wp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
/*    gap: 0.5rem;*/
    font-family: var(--font-family);
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .etrans-btn:focus[b-plc2v9a0wp] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(202, 60, 25, 0.12);
    }

    .etrans-btn:disabled[b-plc2v9a0wp] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        transform: none !important;
    }

/* Variants */
.etrans-btn-primary[b-plc2v9a0wp] {
    background: linear-gradient(135deg, var(--primary-color) 0%, #b33517 100%);
    color: var(--primary-text);
}

    .etrans-btn-primary:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, var(--primary-hover) 0%, #cc4a2a 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(202, 60, 25, 0.25);
    }

    .etrans-btn-primary:active[b-plc2v9a0wp] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
    }

.etrans-btn-secondary[b-plc2v9a0wp] {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #9a9494 100%);
    color: var(--secondary-text);
}

    .etrans-btn-secondary:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, var(--secondary-hover) 0%, #404750 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(173, 167, 167, 0.25);
    }

.etrans-btn-outline[b-plc2v9a0wp] {
    background: transparent;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}

    .etrans-btn-outline:hover:not(:disabled)[b-plc2v9a0wp] {
        background: var(--primary-color);
        color: var(--primary-text);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(202, 60, 25, 0.2);
    }

.etrans-btn-ghost[b-plc2v9a0wp] {
    background: transparent;
    color: var(--primary-color);
}

    .etrans-btn-ghost:hover:not(:disabled)[b-plc2v9a0wp] {
        background: rgba(202, 60, 25, 0.08);
        transform: translateY(-1px);
    }

.etrans-btn-success[b-plc2v9a0wp] {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
}

    .etrans-btn-success:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, #218838 0%, #155724 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
    }

.etrans-btn-successicon[b-plc2v9a0wp] {
    background: white;
    font-size: 14px !important;
    color: #76CF90;
}

    .etrans-btn-successicon:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #C5E8CE;
        transform: translateY(-1px);
        color: #1A9940;
    }


.etrans-btn-editicon[b-plc2v9a0wp] {
    background: white;
    font-size: 14px !important;
    color: #f59e0b;
}

    .etrans-btn-editicon:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #fef3c7;
        transform: translateY(-1px);
        color: #b45309;
    }


.etrans-btn-warning[b-plc2v9a0wp] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #212529;
}

    .etrans-btn-warning:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
    }

.etrans-btn-info[b-plc2v9a0wp] {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    color: white;
}

    .etrans-btn-info:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, #138496 0%, #0c5460 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.25);
    }

.etrans-btn-light[b-plc2v9a0wp] {
    background: #ffffff;
    color: #495057;
    border: 1px solid #e9ecef;
}

    .etrans-btn-light:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #f8f9fa;
        border-color: #dee2e6;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.etrans-btn-dark[b-plc2v9a0wp] {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
    color: white;
}

    .etrans-btn-dark:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, #23272b 0%, #16181b 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 58, 64, 0.25);
    }

.etrans-btn-danger[b-plc2v9a0wp] {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    color: white;
}

    .etrans-btn-danger:hover:not(:disabled)[b-plc2v9a0wp] {
        background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
    }

/* Sizes - Refined proportions */
.etrans-btn-sm[b-plc2v9a0wp] {
    padding:6px 8px;
    font-size: var(--font-size-sm-base);
    border-radius: 5px;
    margin-right: 0.2rem;
}

/* Sizes - Refined proportions */
.etrans-btn-ms[b-plc2v9a0wp] {
    padding: 6px 8px;
    font-size: var(--font-size-sm-base);
    border-radius: 5px;
    margin-right: 0.2rem;
    min-width: 4rem;
    height: 2rem;
}


.etrans-btn-md[b-plc2v9a0wp] {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    height: 1.625rem;
    border-radius: 6px;
}

.etrans-btn-lg[b-plc2v9a0wp] {
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
    min-height: 3.125rem;
    border-radius: 7px;
}

/* Loading spinner - Smoother animation */
.spinner[b-plc2v9a0wp] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-plc2v9a0wp 0.8s linear infinite;
}

@keyframes spin-b-plc2v9a0wp {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Icon and text spacing */
.etrans-btn .me-2[b-plc2v9a0wp] {
    margin-right: 0.5rem;
}

.etrans-btn i[b-plc2v9a0wp] {
    line-height: 1;
    font-size: 0.875em;
    display: inline-flex;
    align-items: center;
}

/* Remove button focus ring on mobile */
@media (max-width: 768px) {
    .etrans-btn:focus[b-plc2v9a0wp] {
        box-shadow: none;
    }

    .etrans-btn-lg[b-plc2v9a0wp] {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        min-height: 2.875rem;
    }

    .etrans-btn-md[b-plc2v9a0wp] {
        padding: 0.5625rem 1.125rem;
        font-size: 0.8125rem;
        min-height: 2.5rem;
    }

    .etrans-btn-sm[b-plc2v9a0wp] {
        padding: 0.3125rem 0.75rem;
        font-size: 0.75rem;
        min-height: 2rem;
    }
}

/* Icon Only Button Styles */
.etrans-btn-icon-only[b-plc2v9a0wp] {
    padding: 0.5rem !important;
    min-width: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon Only Success Button - Xuất Excel (Outline primary) */
.etrans-btn-icon-only-success[b-plc2v9a0wp] {
    padding: 0.5rem !important;
    min-width: 4rem;
    width: 4rem;
    height: 1.875rem;
    font-size: 1rem;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.etrans-btn-icon-only-success:hover[b-plc2v9a0wp] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Icon Only Primary Button - Đăng ký (Xanh lá bình thường) */
.etrans-btn-icon-only-primary[b-plc2v9a0wp] {
    padding: 0.5rem !important;
    min-width: 4rem;
    width: 4rem;
    height: 1.875rem;
    font-size: 1rem;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.etrans-btn-icon-only-primary:hover[b-plc2v9a0wp] {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: white !important;
}

/* Icon Only Warning Button - Tạo lịch (Primary color) */
.etrans-btn-icon-only-warning[b-plc2v9a0wp] {
    padding: 0.5rem !important;
    min-width: 4rem;
    width: 4rem;
    height: 1.875rem;
    font-size: 1rem;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FFB914 !important;
    border-color: #FFB914 !important;
    color: white !important;
}

    .etrans-btn-icon-only-warning:hover[b-plc2v9a0wp] {
        background-color: #FFB303 !important;
        border-color: #FFB303 !important;
        color: white !important;
    }

/* Icon Only Warning Button - Tạo lịch (Primary color) */
.etrans-btn-icon-only-orange[b-plc2v9a0wp] {
    padding: 0.5rem !important;
    min-width: 4rem;
    width: 4rem;
    height: 1.875rem;
    font-size: 1rem;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

    .etrans-btn-icon-only-orange:hover[b-plc2v9a0wp] {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: white !important;
    }

/* Icon sizing for different button sizes when icon-only */
.etrans-btn-icon-only.etrans-btn-xs[b-plc2v9a0wp] {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0.25rem !important;
}

        .etrans-btn-icon-only.etrans-btn-xs i[b-plc2v9a0wp] {
            font-size: 0.75rem !important;
        }

    .etrans-btn-icon-only.etrans-btn-ms[b-plc2v9a0wp] {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        padding: 0.375rem !important;
    }

        .etrans-btn-icon-only.etrans-btn-ms i[b-plc2v9a0wp] {
            font-size: 0.875rem !important;
        }

    .etrans-btn-icon-only.etrans-btn-sm[b-plc2v9a0wp] {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        padding: 0.5rem !important;
    }

        .etrans-btn-icon-only.etrans-btn-sm i[b-plc2v9a0wp] {
            font-size: 1rem !important;
        }

    .etrans-btn-icon-only.etrans-btn-md[b-plc2v9a0wp] {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.625rem !important;
    }

        .etrans-btn-icon-only.etrans-btn-md i[b-plc2v9a0wp] {
            font-size: 1.125rem !important;
        }

    .etrans-btn-icon-only.etrans-btn-lg[b-plc2v9a0wp] {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        padding: 0.75rem !important;
    }

        .etrans-btn-icon-only.etrans-btn-lg i[b-plc2v9a0wp] {
            font-size: 1.25rem !important;
        }

/* Remove margin from icon when it's the only content */
.etrans-btn-icon-only i[b-plc2v9a0wp] {
    margin: 0 !important;
}

/* Mobile responsive for icon-only buttons */
@media (max-width: 768px) {
    .etrans-btn-icon-only[b-plc2v9a0wp] {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        padding: 0.5rem !important;
    }

        .etrans-btn-icon-only i[b-plc2v9a0wp] {
            font-size: 1rem !important;
        }

    /* Ensure consistent sizing on mobile regardless of original size */
    .etrans-btn-icon-only.etrans-btn-xs[b-plc2v9a0wp],
    .etrans-btn-icon-only.etrans-btn-ms[b-plc2v9a0wp],
    .etrans-btn-icon-only.etrans-btn-sm[b-plc2v9a0wp],
    .etrans-btn-icon-only.etrans-btn-md[b-plc2v9a0wp],
    .etrans-btn-icon-only.etrans-btn-lg[b-plc2v9a0wp] {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        padding: 0.5rem !important;
    }

        .etrans-btn-icon-only.etrans-btn-xs i[b-plc2v9a0wp],
        .etrans-btn-icon-only.etrans-btn-ms i[b-plc2v9a0wp],
        .etrans-btn-icon-only.etrans-btn-sm i[b-plc2v9a0wp],
        .etrans-btn-icon-only.etrans-btn-md i[b-plc2v9a0wp],
        .etrans-btn-icon-only.etrans-btn-lg i[b-plc2v9a0wp] {
            font-size: 1.1rem !important;
        }

    /* Mobile styles for icon-only variant buttons */
    .etrans-btn-icon-only-success[b-plc2v9a0wp] {
        padding: 0.375rem !important;
        min-width: 3.25rem !important;
        width: 3.25rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }

    .etrans-btn-icon-only-primary[b-plc2v9a0wp] {
        padding: 0.375rem !important;
        min-width: 3.25rem !important;
        width: 3.25rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }

    .etrans-btn-icon-only-warning[b-plc2v9a0wp] {
        padding: 0.375rem !important;
        min-width: 3.25rem !important;
        width: 3.25rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }

    .etrans-btn-icon-only-orange[b-plc2v9a0wp] {
        padding: 0.375rem !important;
        min-width: 3.25rem !important;
        width: 3.25rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }

    /* Icon sizing for mobile icon-only variant buttons */
    .etrans-btn-icon-only-success i[b-plc2v9a0wp],
    .etrans-btn-icon-only-primary i[b-plc2v9a0wp],
    .etrans-btn-icon-only-warning i[b-plc2v9a0wp],
    .etrans-btn-icon-only-orange i[b-plc2v9a0wp] {
        font-size: 0.9rem !important;
    }
}
/* _content/Admin_KA_Transport_Blazor/Components/Shared/ETransDropDownDataGrid.razor.rz.scp.css */
.rz-pager-element[b-4ukukodgrq], .rz-button[b-4ukukodgrq] {
	color: var(--text-dark) !important;
	background: var(--bg-light) !important;
}
/* _content/Admin_KA_Transport_Blazor/Components/Shared/ExportCommandManager.razor.rz.scp.css */
.export-command-manager[b-ywywj1zulz] {
    display: flex;
    align-items: center;
    width: 100%;
}

.info-value[b-ywywj1zulz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    width: 100%;
}

    .info-value span[b-ywywj1zulz] {
        flex: 1;
        font-size: 14px;
        color: #333;
    }

.edit-icon-btn[b-ywywj1zulz] {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .edit-icon-btn:hover[b-ywywj1zulz] {
        background-color: #e7f3ff;
        color: #0056b3;
    }

    .edit-icon-btn i[b-ywywj1zulz] {
        font-size: 14px;
    }

.edit-mode-container[b-ywywj1zulz] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.command-dropdown[b-ywywj1zulz] {
    flex: 1;
    min-width: 250px;
}

.edit-actions[b-ywywj1zulz] {
    display: flex;
    gap: 6px;
}

.add-new-btn[b-ywywj1zulz],
.save-btn[b-ywywj1zulz],
.cancel-btn[b-ywywj1zulz] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    white-space: nowrap;
}

.add-new-btn[b-ywywj1zulz] {
    background-color: #28a745;
    color: white;
}

    .add-new-btn:hover[b-ywywj1zulz] {
        background-color: #218838;
    }

.save-btn[b-ywywj1zulz] {
    background-color: #007bff;
    color: white;
}

    .save-btn:hover[b-ywywj1zulz] {
        background-color: #0056b3;
    }

    .save-btn:disabled[b-ywywj1zulz] {
        background-color: #6c757d;
        cursor: not-allowed;
        opacity: 0.6;
    }

.cancel-btn[b-ywywj1zulz] {
    background-color: #dc3545;
    color: white;
}

    .cancel-btn:hover[b-ywywj1zulz] {
        background-color: #c82333;
    }

    .cancel-btn:disabled[b-ywywj1zulz] {
        background-color: #6c757d;
        cursor: not-allowed;
        opacity: 0.6;
    }

.command-item[b-ywywj1zulz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
}

.command-info[b-ywywj1zulz] {
    flex: 1;
}

.command-name[b-ywywj1zulz] {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.command-code[b-ywywj1zulz] {
    font-size: 12px;
    color: #6c757d;
}

.command-actions[b-ywywj1zulz] {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

.item-edit-btn[b-ywywj1zulz],
.item-delete-btn[b-ywywj1zulz] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
}

.item-edit-btn[b-ywywj1zulz] {
    color: #007bff;
}

    .item-edit-btn:hover[b-ywywj1zulz] {
        background-color: #e7f3ff;
        color: #0056b3;
    }

.item-delete-btn[b-ywywj1zulz] {
    color: #dc3545;
}

    .item-delete-btn:hover[b-ywywj1zulz] {
        background-color: #ffe7e7;
        color: #c82333;
    }

/* Dialog Styles */
.export-command-dialog .dialog-header-custom[b-ywywj1zulz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

    .export-command-dialog .dialog-header-custom i[b-ywywj1zulz] {
        color: #007bff;
    }

.command-form[b-ywywj1zulz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.form-group[b-ywywj1zulz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-ywywj1zulz] {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .form-group .required[b-ywywj1zulz] {
        color: #dc3545;
    }

    .form-group .form-control[b-ywywj1zulz] {
        width: 100%;
    }

.validation-error[b-ywywj1zulz] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 2px;
}

.dialog-footer[b-ywywj1zulz] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}

    .dialog-footer button[b-ywywj1zulz] {
        padding: 8px 16px;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .edit-mode-container[b-ywywj1zulz] {
        flex-direction: column;
        align-items: stretch;
    }

    .command-dropdown[b-ywywj1zulz] {
        width: 100%;
        min-width: unset;
    }

    .edit-actions[b-ywywj1zulz] {
        width: 100%;
        justify-content: flex-start;
    }

    .add-new-btn[b-ywywj1zulz],
    .save-btn[b-ywywj1zulz],
    .cancel-btn[b-ywywj1zulz] {
        flex: 1;
    }

    .export-command-dialog[b-ywywj1zulz] {
        width: 90% !important;
        max-width: 500px;
    }
}

/* Animation for dropdown items */
.command-item:hover[b-ywywj1zulz] {
    background-color: #f8f9fa;
}

/* Loading spinner animation */
@keyframes spin-b-ywywj1zulz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fa-spinner[b-ywywj1zulz] {
    animation: spin-b-ywywj1zulz 1s linear infinite;
}
/* _content/Admin_KA_Transport_Blazor/Components/Shared/LoadingComponent.razor.rz.scp.css */
/* LoadingComponent.razor.css */

/* CSS Custom Properties */
.loading-container[b-824cnx9twk] {
    /* Default Theme - Uses CSS custom properties from :root */
    --loading-primary: var(--primary-color, #ca3c19);
    --loading-secondary: var(--secondary-color, #ADA7A7);
    --loading-background: var(--bg-light, #f8f9fa);
    --loading-text: var(--text-dark, #2d3748);
    --loading-muted: var(--text-muted, #666666);
    /* Overlay */
    --loading-backdrop: var(--loading-backdrop, rgba(0, 0, 0, 0.6));
    --loading-shadow: var(--loading-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
    /* Border Radius */
    --loading-radius: var(--loading-radius, 12px);
    --loading-radius-sm: 8px;
    /* Transitions */
    --loading-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --loading-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Base Styles */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Layout Styles */
.loading-overlay[b-824cnx9twk] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-backdrop[b-824cnx9twk] {
    position: absolute;
    inset: 0;
    background: var(--loading-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: loading-fade-in-b-824cnx9twk 0.3s ease-out;
    cursor: default;
}

    .loading-backdrop:focus[b-824cnx9twk] {
        outline: 2px solid var(--loading-primary);
        outline-offset: -2px;
    }

.loading-modal[b-824cnx9twk] {
    position: relative;
    background: var(--loading-background);
    border-radius: var(--loading-radius);
    padding: 2rem;
    box-shadow: var(--loading-shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: min(90vw, 20rem);
    width: 100%;
    animation: loading-scale-in-b-824cnx9twk 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-dismiss[b-824cnx9twk] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    border-radius: var(--loading-radius-sm);
    color: var(--loading-muted);
    cursor: pointer;
    transition: var(--loading-transition);
}

    .loading-dismiss:hover[b-824cnx9twk] {
        color: var(--loading-text);
        background: rgba(0, 0, 0, 0.05);
    }

    .loading-dismiss:focus[b-824cnx9twk] {
        outline: 2px solid var(--loading-primary);
        outline-offset: 2px;
    }

.loading-content[b-824cnx9twk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.loading-animation[b-824cnx9twk] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loading-primary);
    flex-shrink: 0;
}

.loading-text[b-824cnx9twk] {
    margin: 0;
    color: var(--loading-text);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Animation Variants */

/* Spinner */
.loading-spinner svg[b-824cnx9twk] {
    animation: loading-spin-b-824cnx9twk 1s linear infinite;
}

/* Dots */
.loading-dots-container[b-824cnx9twk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-dot[b-824cnx9twk] {
    border-radius: 50%;
    background: currentColor;
    animation: loading-dot-bounce-b-824cnx9twk 1.4s infinite ease-in-out both;
}

/* Bars */
.loading-bars-container[b-824cnx9twk] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
}

.loading-bar[b-824cnx9twk] {
    background: currentColor;
    border-radius: 2px;
    animation: loading-bar-stretch-b-824cnx9twk 1.2s infinite ease-in-out;
}

/* Pulse */
.loading-pulse-container[b-824cnx9twk] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-pulse[b-824cnx9twk] {
    border-radius: 50%;
    background: currentColor;
    position: relative;
    animation: loading-pulse-scale-b-824cnx9twk 2s infinite ease-in-out;
}

    .loading-pulse[b-824cnx9twk]::before,
    .loading-pulse[b-824cnx9twk]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: currentColor;
        animation: loading-pulse-ripple-b-824cnx9twk 2s infinite ease-in-out;
    }

    .loading-pulse[b-824cnx9twk]::before {
        animation-delay: -0.5s;
    }

/* Ring */
.loading-ring svg[b-824cnx9twk] {
    animation: loading-ring-rotate-b-824cnx9twk 2s linear infinite;
}

.loading-ring circle[b-824cnx9twk] {
    animation: loading-ring-dash-b-824cnx9twk 1.5s ease-in-out infinite;
}

/* Size Variations */
.loading-small[b-824cnx9twk] {
    --size-base: 1.25rem;
    --size-dot: 0.375rem;
    --size-bar-width: 0.1875rem;
    --size-bar-height: 1rem;
    --text-size: 0.875rem;
}

.loading-medium[b-824cnx9twk] {
    --size-base: 1.75rem;
    --size-dot: 0.5rem;
    --size-bar-width: 0.25rem;
    --size-bar-height: 1.5rem;
    --text-size: 1rem;
}

.loading-large[b-824cnx9twk] {
    --size-base: 2.5rem;
    --size-dot: 0.75rem;
    --size-bar-width: 0.375rem;
    --size-bar-height: 2rem;
    --text-size: 1.125rem;
}

.loading-extralarge[b-824cnx9twk] {
    --size-base: 3.5rem;
    --size-dot: 1rem;
    --size-bar-width: 0.5rem;
    --size-bar-height: 2.5rem;
    --text-size: 1.25rem;
}

/* Apply sizes */
.loading-spinner svg[b-824cnx9twk],
.loading-ring svg[b-824cnx9twk] {
    width: var(--size-base);
    height: var(--size-base);
}

.loading-dot[b-824cnx9twk] {
    width: var(--size-dot);
    height: var(--size-dot);
}

.loading-bar[b-824cnx9twk] {
    width: var(--size-bar-width);
    height: var(--size-bar-height);
}

.loading-pulse[b-824cnx9twk] {
    width: var(--size-base);
    height: var(--size-base);
}

.loading-text[b-824cnx9twk] {
    font-size: var(--text-size);
}

/* Theme Variations */
.loading-primary[b-824cnx9twk] {
    --loading-primary: var(--primary-color, #ca3c19);
    --loading-text: var(--text-dark, #2d3748);
}

.loading-secondary[b-824cnx9twk] {
    --loading-primary: var(--secondary-color, #ADA7A7);
    --loading-text: var(--text-dark, #2d3748);
}

.loading-success[b-824cnx9twk] {
    --loading-primary: var(--loading-accent-primary, #10b981);
    --loading-text: var(--loading-accent-text, #059669);
}

.loading-warning[b-824cnx9twk] {
    --loading-primary: #f59e0b;
    --loading-text: #d97706;
}

.loading-error[b-824cnx9twk] {
    --loading-primary: #ef4444;
    --loading-text: #dc2626;
}

.loading-dark[b-824cnx9twk] {
    --loading-primary: var(--loading-dark-primary, #60a5fa);
    --loading-background: var(--loading-dark-background, #1f2937);
    --loading-text: var(--loading-dark-text, #d1d5db);
    --loading-muted: #9ca3af;
}

.loading-light[b-824cnx9twk] {
    --loading-primary: var(--loading-light-primary, #2563eb);
    --loading-background: var(--loading-light-background, #f9fafb);
    --loading-text: var(--loading-light-text, #4b5563);
    --loading-muted: #6b7280;
}

/* Keyframe Animations */
@keyframes loading-spin-b-824cnx9twk {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-dot-bounce-b-824cnx9twk {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes loading-bar-stretch-b-824cnx9twk {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        opacity: 0.6;
    }

    20% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes loading-pulse-scale-b-824cnx9twk {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes loading-pulse-ripple-b-824cnx9twk {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes loading-ring-rotate-b-824cnx9twk {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-ring-dash-b-824cnx9twk {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes loading-fade-in-b-824cnx9twk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loading-scale-in-b-824cnx9twk {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Accessibility & Performance */
@media (prefers-reduced-motion: reduce) {
    .loading-animation[b-824cnx9twk],
    .loading-backdrop[b-824cnx9twk],
    .loading-modal[b-824cnx9twk],
    .loading-pulse[b-824cnx9twk]::before,
    .loading-pulse[b-824cnx9twk]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .loading-spinner svg[b-824cnx9twk],
    .loading-ring svg[b-824cnx9twk] {
        animation: loading-spin-b-824cnx9twk 2s linear infinite;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .loading-container[b-824cnx9twk] {
        --loading-primary: currentColor;
        --loading-backdrop: rgba(0, 0, 0, 0.8);
    }

    .loading-modal[b-824cnx9twk] {
        border: 2px solid currentColor;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .loading-container:not([class*="loading-light"])[b-824cnx9twk] {
        --loading-primary: #60a5fa;
        --loading-background: #1f2937;
        --loading-text: #e5e7eb;
        --loading-muted: #9ca3af;
        --loading-backdrop: rgba(0, 0, 0, 0.8);
    }
}

/* Responsive design */
@media (max-width: 640px) {
    .loading-modal[b-824cnx9twk] {
        padding: 1.5rem;
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }

    .loading-content[b-824cnx9twk] {
        gap: 1rem;
    }
}

/* Focus management */
.loading-backdrop:focus-within .loading-dismiss:focus[b-824cnx9twk] {
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .loading-overlay[b-824cnx9twk] {
        display: none !important;
    }
}