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

main[b-03bu738ils] {
    flex: 1;
}
/*.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;
    }

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

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

main[b-aooo7onsf2] {
    flex: 1;
}
/*.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;
    }

/* /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;
    }

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

main[b-l490buuok2] {
    flex: 1;
}
/*.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;
    }

/* /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);
    }
/* /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;
   
}
.navmenu-accordion .fas[b-lhou8dbrme] {
    display: inline-block;
    width: 1.15rem;
    text-align: center;
    margin-right: 4px;
    color: var(--primary-color, #ca3c19);
}

.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;
    }
}


/* /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;
}

/* ──────────────────────────────────────────────────────────────────────
   Mobile (≤ 768px) — convert the dropdown into a bottom sheet.
   The desktop "anchored to the bell button" pattern fails on phones:
   a 340px-wide dropdown anchored to a top-right bell either spills off
   the left edge of a 360px viewport or gets clipped at the right. The
   bottom sheet is the standard mobile pattern (Gmail, Slack, iOS Mail)
   — predictable, full-width, large hit areas, no anchoring math.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .notification-dropdown[b-so837dqw3m] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;       /* sheet — only top corners rounded */
        max-height: 85vh;                   /* leave a little of the page peeking */
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        z-index: 1100;
        animation: notif-sheet-slide-up-b-so837dqw3m 0.22s ease-out;
    }
    .notification-dropdown[b-so837dqw3m]::before {
        /* iOS-style drag handle — purely visual, signals "swipe to dismiss" affordance. */
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        margin: 8px auto 0;
    }
    .notification-dropdown-header[b-so837dqw3m] {
        padding: 12px 16px;
    }
    .notification-dropdown-body[b-so837dqw3m] {
        max-height: calc(85vh - 120px);     /* leave room for header + footer + handle */
    }
    .notification-item[b-so837dqw3m] {
        padding: 14px 16px;                 /* tighter side padding on phone */
    }
    .notification-icon[b-so837dqw3m] {
        width: 40px; height: 40px;          /* larger hit area */
        font-size: 18px;
    }
    .notification-title[b-so837dqw3m] { font-size: 15px; }
    .notification-message[b-so837dqw3m] { font-size: 13.5px; }
    .notification-dropdown-footer[b-so837dqw3m] {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));   /* respect iOS home-bar */
    }
    .btn-view-all[b-so837dqw3m] {
        padding: 12px;                      /* tappable */
        font-size: 15px;
    }

    /* Dim the page underneath so the sheet has visual weight + tappable dismiss area. */
    .notification-overlay[b-so837dqw3m] {
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1099;
    }
}

@keyframes notif-sheet-slide-up-b-so837dqw3m {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* 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;
}
/* /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-light);
    border-top: var(--border-width) solid rgb(255 9 9 / 59%);
    text-align: center;
}

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

.etrans-copyright[b-7z87ezovhg] {
    font-size: 0.65rem;
    color: var(--primary-color);
    font-weight: 500;
}

/* Hide footer when collapsed */
.etrans-collapsed .etrans-sidebar-footer[b-7z87ezovhg] {
    display: none;
}
/* /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-light);
    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;
    color: var(--primary-color);
}

.etrans-breadcrumb-link[b-35ivd8p3pb] {
    color: var(--primary-color);
    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: var(--primary-color);
}

/* 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 */
}

/* ::deep is required so the same styling reaches `.etrans-action-btn` elements rendered by
   child components (PwaInstallPrompt). Without ::deep, Blazor CSS isolation scopes each
   selector to elements rendered by THIS component, and the PWA buttons render as default
   browser buttons — leading to the inconsistent topbar look (pale install/permission
   buttons vs orange in-app bell). */
.etrans-topbar-actions[b-35ivd8p3pb]  .etrans-action-btn,
.etrans-action-btn[b-35ivd8p3pb] {
    width: 34px; /* Smaller size */
    height: 34px; /* Smaller size */
    background: var(--primary-color);
    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;
}

    .etrans-topbar-actions[b-35ivd8p3pb]  .etrans-action-btn:hover,
    .etrans-action-btn:hover[b-35ivd8p3pb] {
        background: var(--rz-danger-light);
        transform: translateY(-1px);
    }

    .etrans-topbar-actions[b-35ivd8p3pb]  .etrans-action-btn i,
    .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: var(--primary-color);
    /*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);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

    .etrans-user-trigger:hover[b-35ivd8p3pb] {
        background: var(--rz-danger-light);
    }

.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;
}

/* Critical = unread KHTB_REGISTRATION_CREATED whose underlying registration is still pending.
   Overrides .unread tint so the row visually demands action. Auto-approved rows stay on the
   normal .unread style — there's nothing to act on. */
.notification-item.critical[b-35ivd8p3pb] {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}

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

.notification-critical-badge[b-35ivd8p3pb] {
    display: inline-block;
    background: #dc2626;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 6px;
    text-transform: uppercase;
    vertical-align: middle;
    animation: topnav-critical-pulse-b-35ivd8p3pb 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}

@keyframes topnav-critical-pulse-b-35ivd8p3pb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* 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: var(--text-dark);
    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 */
        /* CRITICAL: backdrop-filter creates a new containing block for `position: fixed`
           descendants. Without this override, the notification bottom-sheet would anchor
           to the topbar (45px tall) instead of the viewport, causing only the footer to
           render at top of screen with the rest clipped (see Screenshot_12.jpg). The
           topbar has a solid background so removing the blur is visually harmless. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .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-topbar-actions[b-35ivd8p3pb]  .etrans-action-btn,
    .etrans-action-btn[b-35ivd8p3pb] {
        width: 30px;
        height: 30px;
    }

    /* Mobile bottom-sheet — same pattern as NotificationBell.razor.css.
       The desktop "absolute, anchored to bell, right: -60px" math overflows the
       left edge of small viewports (see Screenshot_8.jpg). Detaching from the
       bell and pinning to the viewport bottom is the safe mobile pattern. */
    .etrans-notification-panel[b-35ivd8p3pb] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);            /* slide-up animation start state */
        z-index: 1100;
    }

    .etrans-notification-dropdown.active .etrans-notification-panel[b-35ivd8p3pb] {
        transform: translateY(0);                /* slide-up animation end state */
    }

    /* Kill the desktop arrow — it's absolute-positioned for the popover context
       and would float oddly above the sheet's top edge. */
    .etrans-notification-panel[b-35ivd8p3pb]::before { display: none; }

    /* iOS-style drag handle — purely visual, signals "tap outside to dismiss". */
    .etrans-notification-panel[b-35ivd8p3pb]::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* Let the list fill the sheet — desktop's max-height: 380px is too small for
       a bottom-sheet that already caps at 85vh. Subtract header (~56px) + footer (~52px). */
    .etrans-notification-panel .notification-list[b-35ivd8p3pb] {
        max-height: calc(85vh - 120px);
    }

    /* Footer respects iOS home-bar so "Xem tất cả" isn't sitting under the gesture indicator. */
    .etrans-notification-panel .notification-footer[b-35ivd8p3pb] {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Backdrop — dim the page so the sheet has visual weight + clear dismiss target.
       pointer-events delay: when the user taps the bell, the browser dispatches the
       synthesized `click` event at the original tap coordinates. By the time it lands,
       the overlay has already rendered at `inset: 0` and would catch the same tap,
       immediately closing the sheet that just opened. The keyframe animation locks
       pointer-events to "none" for the first 350ms so the opening tap can't reach
       it. After that window, real tap-outside-to-close works as expected. */
    .etrans-notification-overlay[b-35ivd8p3pb] {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1099;
        pointer-events: none;
        animation: etrans-overlay-arm-b-35ivd8p3pb 350ms forwards;
    }

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

@keyframes etrans-overlay-arm-b-35ivd8p3pb {
    0%, 99% { pointer-events: none; }
    100%    { pointer-events: auto; }
}

/* Desktop: overlay is rendered (when open) but should be invisible — the panel is a
   popover, not a modal, and clicking outside is handled by existing logic. */
@media (min-width: 769px) {
    .etrans-notification-overlay[b-35ivd8p3pb] { display: none; }
}

/* Mobile Menu Button Styles */
.etrans-mobile-menu-btn[b-35ivd8p3pb] {
    background: none;
    border: none;
    color: var(--primary-color);
    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;
    }
}


/* /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); }
}
/* /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;
}

/* ========================================
   TAB SWITCHER
   ======================================== */
.checkin-tabs[b-qz18bwbbc1] {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #e9ecef;
}

.checkin-tab[b-qz18bwbbc1] {
    padding: 10px 24px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    background: transparent;
    color: #6c757d;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkin-tab:hover[b-qz18bwbbc1] {
    color: #343a40;
    border-bottom-color: #adb5bd;
}

.checkin-tab.active[b-qz18bwbbc1] {
    color: #ca3c19;
    font-weight: 600;
    border-bottom-color: #ca3c19;
    background: transparent;
}

.checkin-tab.active i[b-qz18bwbbc1] {
    color: #ca3c19;
}

/* ========================================
   KHTB INPUT SECTION
   ======================================== */
.khtb-subtitle[b-qz18bwbbc1] {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 12px;
}

.khtb-input-section[b-qz18bwbbc1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    max-width: 600px;
}

.khtb-input-section .khtb-checkin-options[b-qz18bwbbc1],
.khtb-input-section .e-btn-wrapper[b-qz18bwbbc1] {
    grid-column: 1 / -1;
}

.khtb-schedule-picker-wrapper[b-qz18bwbbc1] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets the dropdown shrink to fit the grid column on narrow viewports */
}

.khtb-schedule-picker-label[b-qz18bwbbc1] {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 6px;
    line-height: 1.5;
}

.khtb-schedule-picker[b-qz18bwbbc1] {
    width: 100%;
}

.khtb-checkin-options[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.khtb-result[b-qz18bwbbc1] {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.khtb-result-success[b-qz18bwbbc1] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.khtb-result-error[b-qz18bwbbc1] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.khtb-quaydau-badge[b-qz18bwbbc1] {
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

/* ========================================
   KHTB CANDIDATE PICKER — clean, matches parent page
   ======================================== */
.khtb-picker-content[b-qz18bwbbc1] {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.25);
}

.khtb-picker-header[b-qz18bwbbc1] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 20px;
}

.khtb-picker-header .modal-title[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.khtb-picker-title-label[b-qz18bwbbc1] {
    color: #475569;
    font-weight: 500;
}

.khtb-picker-title-plate[b-qz18bwbbc1] {
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.khtb-picker-title-count[b-qz18bwbbc1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 2px 10px;
}

.khtb-picker-body[b-qz18bwbbc1] {
    padding: 18px 20px;
    max-height: 72vh;
    overflow-y: auto;
}

.khtb-picker-hint[b-qz18bwbbc1] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 14px 0;
    padding-left: 10px;
    border-left: 3px solid #c7d2fe;
}

/* --- CANDIDATE CARDS --- */
.khtb-candidate-list[b-qz18bwbbc1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.khtb-candidate-card[b-qz18bwbbc1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.khtb-candidate-card:hover[b-qz18bwbbc1] {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
    transform: translateY(-1px);
}

.khtb-candidate-head[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
}

.khtb-candidate-index[b-qz18bwbbc1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.khtb-candidate-driver[b-qz18bwbbc1] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 1rem;
    color: #0f172a;
    word-break: break-word;
}

.khtb-candidate-qty[b-qz18bwbbc1] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.khtb-candidate-qd[b-qz18bwbbc1] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Existing NOTCHECKIN trip markers (created but not checked in yet) */
.khtb-existing-badge[b-qz18bwbbc1] {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.khtb-existing-banner[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #7dd3fc;
    font-size: 0.9rem;
    font-weight: 500;
}

/* FIELD GRID */
.khtb-candidate-grid[b-qz18bwbbc1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 2px;
    margin: 0 0 12px 0;
}

.khtb-candidate-field[b-qz18bwbbc1] {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dotted #e2e8f0;
    min-width: 0;
}

.khtb-candidate-label[b-qz18bwbbc1] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
}

.khtb-candidate-value[b-qz18bwbbc1] {
    font-size: 0.88rem;
    font-weight: 500;
    color: #0f172a;
    margin: 0;
    word-break: break-word;
    line-height: 1.35;
}

.khtb-candidate-arrow[b-qz18bwbbc1] {
    color: #94a3b8;
    margin: 0 6px;
    font-weight: 600;
}

.khtb-candidate-actions[b-qz18bwbbc1] {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.khtb-candidate-select[b-qz18bwbbc1] {
    min-width: 140px;
}

/* MOBILE */
@media (max-width: 576px) {
    .khtb-picker-body[b-qz18bwbbc1] { padding: 14px; }
    .khtb-candidate-card[b-qz18bwbbc1] { padding: 12px 14px; }
    .khtb-candidate-grid[b-qz18bwbbc1] { grid-template-columns: 1fr; }
    .khtb-candidate-field[b-qz18bwbbc1] { grid-template-columns: 80px 1fr; }
    .khtb-candidate-actions[b-qz18bwbbc1] { justify-content: stretch; }
    .khtb-candidate-select[b-qz18bwbbc1] { width: 100%; }
    .khtb-candidate-driver[b-qz18bwbbc1] { font-size: 0.95rem; }
    .khtb-picker-title[b-qz18bwbbc1] { font-size: 0.95rem; }
}

/* ========================================
   QR SCANNER SECTION
   ======================================== */
.qr-scanner-wrapper[b-qz18bwbbc1] {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.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;
}

/* "Xem chứng từ" pill button — sits inside the orange gradient header.
   White-translucent so it pops against the warm background, with a soft
   icon chip on the left for emphasis. */
.btn-view-docs[b-qz18bwbbc1] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    user-select: none;
}

.btn-view-docs:hover[b-qz18bwbbc1] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: #ca3c19;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.btn-view-docs:hover .btn-view-docs__icon[b-qz18bwbbc1] {
    background: #ca3c19;
    color: #fff;
}

.btn-view-docs:active[b-qz18bwbbc1] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-view-docs:focus-visible[b-qz18bwbbc1] {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.btn-view-docs__icon[b-qz18bwbbc1] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    font-size: 0.72rem;
    transition: background 180ms ease, color 180ms ease;
    flex-shrink: 0;
}

.btn-view-docs__label[b-qz18bwbbc1] {
    line-height: 1;
}

@media (max-width: 480px) {
    .btn-view-docs[b-qz18bwbbc1] {
        padding: 4px 12px 4px 4px;
        font-size: 0.75rem;
        gap: 6px;
    }
    .btn-view-docs__icon[b-qz18bwbbc1] {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}

.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;
    }

    .checkin-tab[b-qz18bwbbc1] {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

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

    .khtb-input-section[b-qz18bwbbc1] {
        max-width: 100%;
        grid-template-columns: 1fr;
    }

    .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;
    }

    /* Responsive SfDialog */
    [b-qz18bwbbc1] .responsive-dialog.e-dialog {
        max-width: 95vw !important;
    }

    .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;
    }

    .checkin-tab[b-qz18bwbbc1] {
        padding: 8px 10px;
        font-size: 12px;
        flex: 1;
        justify-content: center;
    }

    .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;
}

/* ========================================
   CHECKIN MODAL (replaces SfDialog warehouse modals)
   ======================================== */
.checkin-modal-backdrop[b-qz18bwbbc1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.checkin-modal[b-qz18bwbbc1] {
    background: #fff;
    width: min(400px, 95vw);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.checkin-modal-header[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    gap: 8px;
}

.checkin-modal-header > span[b-qz18bwbbc1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkin-modal-close[b-qz18bwbbc1] {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 28px;
    height: 28px;
}

.checkin-modal-close:hover[b-qz18bwbbc1] {
    color: #212529;
}

.checkin-modal-body[b-qz18bwbbc1] {
    padding: 20px;
    overflow-y: auto;
}

.checkin-modal-footer[b-qz18bwbbc1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

/* ========================================
   KHTB NƠI LẤY (Export Qty cards) — ported from TripDetailModal
   ======================================== */
.khtb-qty-loading[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 13px;
    padding: 8px 0;
}

.export-qty-cards[b-qz18bwbbc1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.export-qty-card[b-qz18bwbbc1] {
    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;
}

.export-qty-card:hover[b-qz18bwbbc1] {
    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-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.export-qty-card-header i[b-qz18bwbbc1] {
    color: var(--primary-color, #ca3c19);
    font-size: 10px;
}

.export-qty-card-header .cmd-name[b-qz18bwbbc1] {
    font-weight: 700;
    font-size: 12px;
    color: var(--primary-color, #ca3c19);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.export-qty-card-body[b-qz18bwbbc1] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1;
    align-items: center;
}

.warehouse-info[b-qz18bwbbc1],
.quantity-info[b-qz18bwbbc1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #495057;
}

.warehouse-info i[b-qz18bwbbc1],
.quantity-info i[b-qz18bwbbc1] {
    color: #6c757d;
    font-size: 10px;
    width: 12px;
    flex-shrink: 0;
}

.warehouse-info span[b-qz18bwbbc1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quantity-info span[b-qz18bwbbc1] {
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
}

.export-qty-card-actions[b-qz18bwbbc1] {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .export-qty-card[b-qz18bwbbc1] {
        flex-direction: column;
        align-items: stretch;
    }

    .export-qty-card-header .cmd-name[b-qz18bwbbc1] {
        max-width: none;
    }

    .export-qty-card-body[b-qz18bwbbc1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .export-qty-card-actions[b-qz18bwbbc1] {
        margin-left: 0;
        justify-content: flex-end;
    }
}

.btn-edit-tiny[b-qz18bwbbc1],
.btn-delete-tiny[b-qz18bwbbc1] {
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    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-qz18bwbbc1] {
    color: #0c5460;
    border-color: rgba(12, 84, 96, 0.35);
}

.btn-edit-tiny:hover[b-qz18bwbbc1] {
    background: #0c5460;
    color: #fff;
}

.btn-delete-tiny[b-qz18bwbbc1] {
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.35);
}

.btn-delete-tiny:hover[b-qz18bwbbc1] {
    background: #dc3545;
    color: #fff;
}

.khtb-qty-hint[b-qz18bwbbc1] {
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 10px 0;
}

/* Ghim nút Xác Nhận CheckIn cố định ở đáy, canh đúng theo vùng .checkin-page (max-width 1400px, căn giữa) */
.khtb-checkin-sticky[b-qz18bwbbc1] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 1400px;   /* khớp .checkin-page */
    margin: 0 auto;      /* căn giữa như .checkin-page */
    z-index: 1000;
    display: flex;
    justify-content: center;
    background: #ffffff;
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.10);
}

/* Chừa chỗ để nội dung cuối không bị nút fixed che */
.khtb-checkin-spacer[b-qz18bwbbc1] {
    height: 84px;
}
/* /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;
        }
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data.razor.rz.scp.css */
.datamail-filter-bar[b-aj9cd83tys] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.filter-field[b-aj9cd83tys] {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.filter-actions[b-aj9cd83tys] {
    display: flex;
    gap: 0.5rem;
}

.datamail-grid-wrapper[b-aj9cd83tys] {
    position: relative;
    min-height: 360px;
    margin-top: 0.5rem;
}

.datamail-loading-overlay[b-aj9cd83tys] {
    position: absolute;
    inset: 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.92);
    z-index: 2;
    overflow: hidden;
}

.datamail-loading-skeleton[b-aj9cd83tys] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.mail-skeleton-row[b-aj9cd83tys] {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1.2fr 0.8fr 1.5fr 0.8fr 1.2fr;
    gap: 0.75rem;
    width: 100%;
}

.mail-skeleton-cell[b-aj9cd83tys] {
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 400% 100%;
    animation: mailSkeletonPulse-b-aj9cd83tys 1.2s ease-in-out infinite;
}

.mail-skeleton-cell.w-wide[b-aj9cd83tys] {
    grid-column: span 1;
}

.mail-skeleton-cell.w-medium[b-aj9cd83tys] {
    grid-column: span 1;
}

.mail-skeleton-cell.w-narrow[b-aj9cd83tys] {
    grid-column: span 1;
}

.grid-empty-state[b-aj9cd83tys] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
}

.grid-empty-state i[b-aj9cd83tys] {
    color: #9e9e9e;
}

@keyframes mailSkeletonPulse-b-aj9cd83tys {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.ka-mail-grid .rz-column-title[b-aj9cd83tys],
.ka-mail-grid .rz-cell-data[b-aj9cd83tys] {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.ka-mail-grid .rz-sortable-column[b-aj9cd83tys],
.ka-mail-grid .rz-header-cell[b-aj9cd83tys],
.ka-mail-grid .rz-cell[b-aj9cd83tys] {
    text-align: center;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Compare.razor.rz.scp.css */
#ControlRegion[b-07kk03ybbq] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    height: calc(100vh - 72px);
    min-height: 640px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, 0.08), transparent 28rem),
        #f3f6fb;
}

.compare-root-card[b-07kk03ybbq],
.mail-tab-content[b-07kk03ybbq],
.compare-native-layout[b-07kk03ybbq],
.mail-detail-panel[b-07kk03ybbq] {
    min-height: 0;
}

.compare-root-card[b-07kk03ybbq] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(28, 50, 92, 0.11);
}

.mail-native-tabs[b-07kk03ybbq] {
    display: inline-flex;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mail-native-tab[b-07kk03ybbq] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f6f82;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mail-native-tab:hover[b-07kk03ybbq] {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(56, 189, 248, 0.16);
}

.mail-native-tab--active[b-07kk03ybbq] {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, 0.35);
}

.mail-tab-content[b-07kk03ybbq],
.compare-native-layout[b-07kk03ybbq],
.mail-detail-panel[b-07kk03ybbq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-filter-header[b-07kk03ybbq] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 20px 24px 15px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.comparison-filter-bar[b-07kk03ybbq],
.queue-filter-actions[b-07kk03ybbq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.comparison-filter-bar[b-07kk03ybbq] {
    flex: 1 1 760px;
    gap: 12px;
    margin-bottom: 0;
}

.queue-filter-actions[b-07kk03ybbq] {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.filter-field[b-07kk03ybbq] {
    display: flex;
    flex: 1 1 150px;
    min-width: 135px;
    max-width: 220px;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-07kk03ybbq] {
    color: #475569;
    font-size: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.025em;
}

.filter-field > input[b-07kk03ybbq],
.native-multiselect > summary[b-07kk03ybbq] {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #d5dee8;
    border-radius: 9px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 0.76rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.filter-field > input[b-07kk03ybbq] {
    padding: 0 10px;
}

.filter-field > input:focus[b-07kk03ybbq],
.native-multiselect[open] > summary[b-07kk03ybbq] {
    outline: none;
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
}

.mail-action--daily-report[b-07kk03ybbq] {
    margin-left: auto;
}

.daily-issue-modal-backdrop[b-07kk03ybbq] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-07kk03ybbq] {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-07kk03ybbq] { margin: 0; font-size: 1rem; }

.daily-issue-modal__filters[b-07kk03ybbq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__body[b-07kk03ybbq] { min-height: 260px; overflow: auto; padding: 14px 16px 16px; }
.daily-issue-table-wrap[b-07kk03ybbq] { max-height: calc(100vh - 205px); overflow: auto; border: 1px solid #dbe3ec; border-radius: 8px; }
.daily-issue-table[b-07kk03ybbq] { width: 100%; min-width: 2100px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.daily-issue-table th[b-07kk03ybbq], .daily-issue-table td[b-07kk03ybbq] { padding: 7px 8px; border-right: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; text-align: center; white-space: nowrap; }
.daily-issue-table th[b-07kk03ybbq] { position: sticky; top: 0; z-index: 4; background: #eef4f8; color: #334155; font-weight: 800; }
.daily-issue-table th:first-child[b-07kk03ybbq], .daily-issue-table td:first-child[b-07kk03ybbq] { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; }
.daily-issue-table th:first-child[b-07kk03ybbq] { z-index: 6; background: #e8f1f3; }
.daily-issue-date[b-07kk03ybbq] { color: #0f172a; font-weight: 700; }
.daily-issue-number[b-07kk03ybbq] { color: #1e293b; font-variant-numeric: tabular-nums; }
.daily-issue-number--warning[b-07kk03ybbq] { color: #b42318; background: #fff4ed; font-weight: 800; }
.daily-issue-value[b-07kk03ybbq] { width: 100%; min-width: 58px; padding: 3px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: inherit; }
.daily-issue-value--clickable[b-07kk03ybbq] { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; cursor: pointer; }
.daily-issue-number--warning .daily-issue-value--clickable[b-07kk03ybbq] { color: #b42318; background: #fff7ed; border-color: #fed7aa; }
.daily-issue-value:disabled[b-07kk03ybbq] { opacity: 1; }
.daily-issue-reference-cell[b-07kk03ybbq] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.daily-issue-reference[b-07kk03ybbq] { color: #94a3b8; font-weight: 600; }
.daily-issue-value--diff[b-07kk03ybbq] { width: auto; min-width: 42px; padding-inline: 6px; font-weight: 800; }
.daily-issue-loading[b-07kk03ybbq], .daily-issue-empty[b-07kk03ybbq] { display: flex; min-height: 210px; align-items: center; justify-content: center; color: #64748b; border: 1px dashed #cbd5e1; border-radius: 8px; }
.daily-issue-group-row th[b-07kk03ybbq] { top: 0; }
.daily-issue-table thead tr:nth-child(2) th[b-07kk03ybbq] { top: 35px; z-index: 5; }
.daily-issue-group--info[b-07kk03ybbq] { background: #eef6ff !important; }
.daily-issue-group--status[b-07kk03ybbq] { background: #f0fdf4 !important; }
.daily-issue-group--data[b-07kk03ybbq] { background: #fff7ed !important; }
.daily-issue-group--documents[b-07kk03ybbq] { background: #fdf2f8 !important; }
.daily-issue-number.daily-issue-group--info[b-07kk03ybbq] { background: #f8fbff !important; }
.daily-issue-number.daily-issue-group--status[b-07kk03ybbq] { background: #f7fef9 !important; }
.daily-issue-number.daily-issue-group--data[b-07kk03ybbq] { background: #fffaf3 !important; }
.daily-issue-number.daily-issue-group--documents[b-07kk03ybbq] { background: #fff8fb !important; }
.daily-issue-number--warning.daily-issue-group--info[b-07kk03ybbq] { background: #eaf3ff !important; }
.daily-issue-number--warning.daily-issue-group--status[b-07kk03ybbq] { background: #ecfdf3 !important; }
.daily-issue-number--warning.daily-issue-group--data[b-07kk03ybbq] { background: #fff4e6 !important; }
.daily-issue-number--warning.daily-issue-group--documents[b-07kk03ybbq] { background: #fce7f3 !important; }

[b-07kk03ybbq] .compare-filter-bar-native .rz-datepicker,
[b-07kk03ybbq] .compare-filter-bar-native .rz-picker,
[b-07kk03ybbq] .compare-filter-bar-native .rz-inputtext {
    width: 100% !important;
}

[b-07kk03ybbq] .compare-filter-bar-native .rz-datepicker,
[b-07kk03ybbq] .compare-filter-bar-native .rz-picker {
    min-height: 34px;
    border: 1px solid #d5dee8 !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

[b-07kk03ybbq] .compare-filter-bar-native .rz-state-focus,
[b-07kk03ybbq] .compare-filter-bar-native .rz-focus {
    border-color: #8aa8f4 !important;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1) !important;
}

.native-multiselect[b-07kk03ybbq] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-07kk03ybbq]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-07kk03ybbq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-07kk03ybbq]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease;
}

.native-multiselect[open] .native-multiselect__arrow[b-07kk03ybbq]::before {
    transform: rotate(-135deg) translateY(-1px);
}

.native-multiselect__menu[b-07kk03ybbq] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5ee;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.native-multiselect__header[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 8px;
    font-size: 0.75rem;
}

.native-multiselect__header button[b-07kk03ybbq] {
    border: 0;
    background: none;
    color: var(--mail-primary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.native-multiselect__search-wrap[b-07kk03ybbq] { padding: 6px 4px 2px; }

.native-multiselect__search[b-07kk03ybbq] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}

.native-multiselect__search:focus[b-07kk03ybbq] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.native-multiselect__options[b-07kk03ybbq] {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    overflow: auto;
}

.native-multiselect__select-all[b-07kk03ybbq] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 2px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.native-multiselect__no-results[b-07kk03ybbq] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.native-multiselect__options label[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 5px;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.76rem;
}

.native-multiselect__options label:hover[b-07kk03ybbq] {
    background: #eef4ff;
}

.native-multiselect__empty[b-07kk03ybbq] {
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.mail-action[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
}

.mail-action:hover:not(:disabled)[b-07kk03ybbq] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-07kk03ybbq] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mail-action--primary[b-07kk03ybbq] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.mail-action--secondary[b-07kk03ybbq] {
    color: #344256;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--export[b-07kk03ybbq] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
    box-shadow: 0 7px 16px rgba(18, 150, 111, 0.18);
}

.mail-action--toggle[b-07kk03ybbq] {
    color: #4b5a6d;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--toggle:hover:not(:disabled)[b-07kk03ybbq] {
    border-color: #9db2dd;
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.12);
}

.mail-action--toggle-active[b-07kk03ybbq] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.filter-extra-panel[b-07kk03ybbq] {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(760px, calc(100vw - 60px));
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--mail-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.queue-view-toolbar[b-07kk03ybbq] {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.queue-view-overall-stats[b-07kk03ybbq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(146px, 0.8fr)) minmax(390px, 3.3fr);
    gap: 8px;
    width: 100%;
}

.overall-stat-card[b-07kk03ybbq] {
    position: relative;
    display: flex;
    height: 60px;
    min-height: 60px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.overall-stat-card[b-07kk03ybbq]::before {
    display: none;
}

.overall-stat-card--total[b-07kk03ybbq] {
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.08);
}

.overall-stat-card--clickable[b-07kk03ybbq] {
    cursor: pointer;
}

.overall-stat-card--clickable:hover[b-07kk03ybbq] {
    z-index: 1;
    border-color: #7ea2f3;
    box-shadow: 0 8px 20px rgba(36, 87, 230, 0.12);
    transform: translateY(-1px);
}

.overall-stat-card--highlight[b-07kk03ybbq] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, 0.09),
        0 0 8px rgba(125, 211, 252, 0.12) !important;
}

.overall-stat-card--highlight *[b-07kk03ybbq] {
    color: #0c4a6e !important;
}

/* ===== Tone của alert (theo layout issue): đậm = cần lưu ý, nhạt = tham khảo. =====
   Đặt SAU --highlight để thắng màu highlight, và TRƯỚC --active để ô đang chọn vẫn nổi bật. */
.overall-stat-card--mini.overall-stat-card--tone-warning[b-07kk03ybbq] {
    color: #b42318 !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-color: #fdba74 !important;
    box-shadow: 0 4px 10px rgba(194, 65, 12, 0.10) !important;
}

.overall-stat-card--mini.overall-stat-card--tone-warning *[b-07kk03ybbq] {
    color: #b42318 !important;
}

.overall-stat-card--mini.overall-stat-card--tone-warning .overall-stat-label[b-07kk03ybbq] {
    font-weight: 900;
}

.overall-stat-card--mini.overall-stat-card--tone-warning .stat-line-count[b-07kk03ybbq] {
    font-weight: 900;
}

.overall-stat-card--mini.overall-stat-card--tone-info[b-07kk03ybbq] {
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #dbe4ef !important;
    box-shadow: none !important;
}

.overall-stat-card--mini.overall-stat-card--tone-info *[b-07kk03ybbq] {
    color: #475569 !important;
}

.overall-stat-card--mini.overall-stat-card--tone-info .overall-stat-label[b-07kk03ybbq] {
    font-weight: 700;
}

.overall-stat-card--active[b-07kk03ybbq] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--active *[b-07kk03ybbq] {
    color: #083b5c !important;
}

/* Alert đang được chọn: giữ đúng màu tone của nó nhưng đậm/nổi hơn (thắng specificity của rule tone ở trên). */
.overall-stat-card--mini.overall-stat-card--tone-warning.overall-stat-card--active[b-07kk03ybbq] {
    color: #7c2d12 !important;
    background: linear-gradient(135deg, #ffedd5 0%, #fdba74 55%, #fb923c 100%) !important;
    border-color: #ea580c !important;
    box-shadow:
        0 9px 20px rgba(234, 88, 12, 0.26),
        0 0 14px rgba(251, 146, 60, 0.26) !important;
}

.overall-stat-card--mini.overall-stat-card--tone-warning.overall-stat-card--active *[b-07kk03ybbq] {
    color: #7c2d12 !important;
}

.overall-stat-card--mini.overall-stat-card--tone-info.overall-stat-card--active[b-07kk03ybbq] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--mini.overall-stat-card--tone-info.overall-stat-card--active *[b-07kk03ybbq] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-07kk03ybbq]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, 0.25) 260deg,
        #67e8f9 292deg,
        #fff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.95));
    animation: overall-neon-border-b-07kk03ybbq 1.8s linear infinite;
}

@keyframes overall-neon-border-b-07kk03ybbq {
    to { --overall-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-07kk03ybbq]::after { animation: none; }
}

.overall-stat-card--disabled[b-07kk03ybbq] {
    pointer-events: none;
    opacity: 0.54;
}

/* Khi đã chọn 1 alert -> các alert còn lại mờ hẳn đi (kể cả alert đậm) để ô đang chọn nổi bật. */
.overall-stat-card--mini.overall-stat-card--dimmed[b-07kk03ybbq],
.overall-stat-card--mini.overall-stat-card--dimmed.overall-stat-card--tone-warning[b-07kk03ybbq],
.overall-stat-card--mini.overall-stat-card--dimmed.overall-stat-card--tone-info[b-07kk03ybbq] {
    opacity: 0.32;
    filter: grayscale(0.55);
    box-shadow: none !important;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.overall-stat-label[b-07kk03ybbq],
.overall-stat-lines[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-stat-label[b-07kk03ybbq] {
    justify-content: center;
    min-width: 52px;
    padding: 4px 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.overall-stat-lines[b-07kk03ybbq] {
    flex: 1;
    flex-direction: column;
    padding: 4px 7px;
}

.stat-line-count[b-07kk03ybbq] {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.stat-line-kg[b-07kk03ybbq] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-line-perc[b-07kk03ybbq] {
    margin-top: 4px;
    color: #718096;
    font-size: 0.64rem;
}

.compare-mini-row[b-07kk03ybbq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.compare-overall-filter-link[b-07kk03ybbq] {
    min-height: 20px;
    padding: 0.06rem 0.42rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.compare-overall-filter-link--active[b-07kk03ybbq] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.compare-overall-filter-link:disabled[b-07kk03ybbq] {
    opacity: 0.55;
}

/* 6 alert xếp 2 dòng x 3 cột: dòng trên là nhóm cần lưu ý (đậm), dòng dưới là nhóm tham khảo (nhạt). */
.overall-stat-card-group[b-07kk03ybbq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    gap: 7px;
}

.overall-stat-card--mini[b-07kk03ybbq] {
    min-width: 0;
    height: 28px;
    min-height: 28px;
    box-shadow: none;
    border-radius: 8px;
    background: #fff;
}

.overall-stat-card--mini .overall-stat-lines[b-07kk03ybbq] {
    min-width: 0;
    padding: 3px 7px;
}

.overall-stat-card--mini .overall-stat-label[b-07kk03ybbq] {
    justify-content: flex-start;
    padding: 3px 7px;
    color: #526174;
    background: #fbfcfe;
    font-size: 0.58rem;
    text-align: left;
}

.overall-stat-card--mini .stat-line-count[b-07kk03ybbq] {
    color: #c94e2d;
    font-size: 0.76rem;
}

.compare-grid-wrapper[b-07kk03ybbq] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: #fff;
}

.datamail-grid-scroll[b-07kk03ybbq] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-07kk03ybbq] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-07kk03ybbq],
.mail-native-table td[b-07kk03ybbq] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead th[b-07kk03ybbq] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 24px;
    color: #536174;
    background: #f3f6fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.mail-native-table thead .compare-main-header th[colspan][b-07kk03ybbq] {
    color: #9a4f1e;
    background: #fff5e8;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-di[b-07kk03ybbq],
.mail-native-table thead .compare-main-header th.compare-group-noi-di[colspan][b-07kk03ybbq],
.mail-native-table thead th.compare-group-noi-di[b-07kk03ybbq] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-den[b-07kk03ybbq],
.mail-native-table thead .compare-main-header th.compare-group-noi-den[colspan][b-07kk03ybbq],
.mail-native-table thead th.compare-group-noi-den[b-07kk03ybbq] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table thead .compare-main-header th[rowspan][b-07kk03ybbq] {
    border-bottom-color: #d7dee7;
}

.mail-native-table .compare-subheader th[b-07kk03ybbq] {
    top: 24px;
    z-index: 4;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff5e8;
    border-top: 0;
    color: #9a4f1e;
}

.mail-native-table .compare-subheader th.compare-group-noi-di[b-07kk03ybbq] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table .compare-subheader th.compare-group-noi-den[b-07kk03ybbq] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table tbody tr:nth-child(even)[b-07kk03ybbq] {
    background: #fbfcfe;
}

.mail-native-table tbody td.compare-group-noi-di[b-07kk03ybbq] {
    background: #f5fcfa;
}

.mail-native-table tbody td.compare-group-noi-den[b-07kk03ybbq] {
    background: #fffaf0;
}

.mail-native-table .compare-hidden-column[b-07kk03ybbq] {
    display: none;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-di[b-07kk03ybbq] {
    background: #eef8f5;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-den[b-07kk03ybbq] {
    background: #fff4dc;
}

.mail-native-table tbody tr:hover[b-07kk03ybbq],
.mail-native-table tbody tr.mail-row-selected[b-07kk03ybbq] {
    background: #edf3ff;
}

.mail-native-table tbody tr:hover td.compare-group-noi-di[b-07kk03ybbq],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-di[b-07kk03ybbq] {
    background: #def7ef;
}

.mail-native-table tbody tr:hover td.compare-group-noi-den[b-07kk03ybbq],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-den[b-07kk03ybbq] {
    background: #ffedc2;
}

.mail-native-table tbody td[b-07kk03ybbq] {
    height: 27px;
}

.mail-cell-warehouse[b-07kk03ybbq] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.mail-cell-plate[b-07kk03ybbq],
.mail-code[b-07kk03ybbq],
.mail-direction[b-07kk03ybbq],
.mail-cell-mono[b-07kk03ybbq] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-plate[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f3f6fa;
    color: #24415f;
    letter-spacing: 0.04em;
}

.mail-code[b-07kk03ybbq],
.mail-direction[b-07kk03ybbq] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
    color: #174ea6;
}

.queue-status-badge[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.queue-status-badge--error[b-07kk03ybbq] {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-07kk03ybbq] {
    background-color: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-07kk03ybbq] {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-07kk03ybbq] {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-07kk03ybbq] {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #1f2937;
}

.return-goods-badge[b-07kk03ybbq] {
    display: inline-flex;
    min-width: 58px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-goods-badge--yes[b-07kk03ybbq] {
    color: #b42318;
    background: #fff1f2;
    border-color: #fda4af;
}

.qty-diff-badge[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.loss-quantity-value[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.loss-quantity-value--positive[b-07kk03ybbq] {
    color: #b91c1c;
}

.loss-quantity-value--negative[b-07kk03ybbq] {
    color: #047857;
}

.loss-quantity-value--neutral[b-07kk03ybbq] {
    color: #64748b;
    font-weight: 700;
}

/* SL HÓA ĐƠN: KH có sử dụng PNK nhưng chưa có hình ảnh phiếu nhập kho */
.invoice-quantity-missing[b-07kk03ybbq] {
    color: #dc2626;
    font-weight: 700;
}

.document-link-list[b-07kk03ybbq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.document-link-list--multi[b-07kk03ybbq] {
    gap: 10px;
}

.document-link-list--multi .document-link-item + .document-link-item[b-07kk03ybbq] {
    margin-left: 4px;
}

.document-link-item[b-07kk03ybbq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #c8daf7;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.document-link-item:hover[b-07kk03ybbq] {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}

.document-link-item--primary[b-07kk03ybbq] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-07kk03ybbq] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.document-link-item--disabled[b-07kk03ybbq],
.document-link-item--disabled:hover[b-07kk03ybbq] {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.62;
    pointer-events: none;
    transform: none;
}

.mail-native-pager[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-07kk03ybbq] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager select[b-07kk03ybbq],
.mail-native-pager button[b-07kk03ybbq] {
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.mail-native-pager button[b-07kk03ybbq] {
    min-width: 30px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-07kk03ybbq] {
    opacity: 0.4;
    cursor: default;
}

.comparison-loading-overlay[b-07kk03ybbq] {
    position: absolute;
    inset: 0 0 45px;
    z-index: 10;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.comparison-loading-skeleton[b-07kk03ybbq] {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px;
}

.comparison-skeleton-row[b-07kk03ybbq] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.comparison-skeleton-cell[b-07kk03ybbq] {
    height: 13px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 300% 100%;
    animation: compareSkeletonPulse-b-07kk03ybbq 1.2s infinite;
}

.grid-empty-state[b-07kk03ybbq] {
    margin: 0 24px 14px;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes compareSkeletonPulse-b-07kk03ybbq {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-07kk03ybbq] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .overall-stat-card-group[b-07kk03ybbq] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-07kk03ybbq] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .compare-root-card[b-07kk03ybbq],
    .mail-tab-content[b-07kk03ybbq],
    .compare-native-layout[b-07kk03ybbq],
    .mail-detail-panel[b-07kk03ybbq] {
        overflow: visible;
    }

    .queue-filter-header[b-07kk03ybbq] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
    }

    .comparison-filter-bar[b-07kk03ybbq],
    .queue-filter-actions[b-07kk03ybbq] {
        width: 100%;
        margin-left: 0;
    }

    .comparison-filter-bar[b-07kk03ybbq] {
        gap: 8px;
    }

    .filter-field[b-07kk03ybbq] {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-extra-panel[b-07kk03ybbq] {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .queue-view-toolbar[b-07kk03ybbq] {
        padding: 14px 12px;
    }

    .queue-view-overall-stats[b-07kk03ybbq] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .overall-stat-card-group[b-07kk03ybbq] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .compare-grid-wrapper[b-07kk03ybbq] {
        min-height: 480px;
        margin: 0 8px;
    }

    .grid-empty-state[b-07kk03ybbq],
    .mail-native-pager[b-07kk03ybbq] {
        margin-right: 8px;
        margin-left: 8px;
    }

    .mail-native-pager[b-07kk03ybbq] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Compare_Summary.razor.rz.scp.css */
:global(body)[b-fc9q0ecfv7] {
    overflow: hidden;
}

#ControlRegion[b-fc9q0ecfv7] {
    height: calc(100dvh - 112px);
    min-height: 540px;
    overflow: hidden;
    padding: 0 10px 10px;
    color: #2f3d4f;
    background:
        radial-gradient(circle at 10% 0%, rgba(112, 169, 196, 0.11), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(255, 206, 160, 0.15), transparent 20rem),
        linear-gradient(180deg, #fffefd 0%, #f9fbff 100%);
}

[b-fc9q0ecfv7] .summary-page-card {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e6edf4;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(48, 79, 108, 0.08);
}

.mapping-summary-section[b-fc9q0ecfv7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    gap: 10px;
}

.mapping-summary-stats[b-fc9q0ecfv7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    flex: 0 0 auto;
    gap: 8px;
}

.mapping-summary-stat-item[b-fc9q0ecfv7] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 10px;
    padding: 9px 12px 9px 15px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 10px 20px rgba(50, 82, 111, 0.1);
}

.mapping-summary-stat-item[b-fc9q0ecfv7]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
    content: "";
}

.mapping-summary-stat-item label[b-fc9q0ecfv7] {
    max-width: 125px;
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-fc9q0ecfv7] {
    min-width: 38px;
    color: var(--stat-accent);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card--warning[b-fc9q0ecfv7] { --stat-accent: #d2862c; --stat-tint: #fff8ee; }
.stat-card--blue[b-fc9q0ecfv7] { --stat-accent: #4f7fd4; --stat-tint: #f1f6ff; }
.stat-card--teal[b-fc9q0ecfv7] { --stat-accent: #2d8a78; --stat-tint: #eefbf7; }
.stat-card--rose[b-fc9q0ecfv7] { --stat-accent: #cf5b6f; --stat-tint: #fff1f4; }
.stat-card--violet[b-fc9q0ecfv7] { --stat-accent: #7a67c7; --stat-tint: #f4f1ff; }

.clickable-stat[b-fc9q0ecfv7] {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.clickable-stat:hover[b-fc9q0ecfv7] {
    border-color: color-mix(in srgb, var(--stat-accent) 40%, white);
    box-shadow: 0 10px 20px rgba(61, 100, 136, 0.14);
    transform: translateY(-1px);
}

.clickable-stat.active[b-fc9q0ecfv7] {
    border-color: var(--stat-accent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--stat-accent) 16%, transparent),
        0 14px 28px color-mix(in srgb, var(--stat-accent) 18%, transparent);
}

.filter-container[b-fc9q0ecfv7] {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) auto;
    align-items: end;
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mapping-filter-bar[b-fc9q0ecfv7] {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 8px;
    min-width: 0;
}

.filter-field > input[b-fc9q0ecfv7],
.native-multiselect > summary[b-fc9q0ecfv7] {
    width: 100% !important;
    height: 34px;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #d8e3ed;
    border-radius: 8px;
    color: #4b5d70;
    background: #fff;
    box-shadow: none;
    font-size: 0.76rem;
}

.summary-filter-panel[b-fc9q0ecfv7] {
    flex: 0 0 auto;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-layout[b-fc9q0ecfv7] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.summary-filter-bar[b-fc9q0ecfv7] {
    display: grid;
    grid-template-columns: 168px 168px repeat(5, 158px);
    gap: 0.55rem;
    flex: 0 1 auto;
    min-width: 0;
    align-items: end;
}

.filter-field[b-fc9q0ecfv7] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.filter-field label[b-fc9q0ecfv7] {
    color: #66788a;
    font-size: 0.68rem;
    font-weight: 750;
}

[b-fc9q0ecfv7] .summary-filter-bar .rz-inputtext,
[b-fc9q0ecfv7] .summary-filter-bar .rz-dropdown,
[b-fc9q0ecfv7] .summary-filter-bar .rz-datepicker,
[b-fc9q0ecfv7] .summary-filter-bar .rz-multiselect,
[b-fc9q0ecfv7] .summary-filter-bar .filter-select,
[b-fc9q0ecfv7] .summary-filter-bar .rz-picker {
    width: 100% !important;
    min-height: 34px;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-fc9q0ecfv7] .summary-filter-bar .rz-state-focus,
[b-fc9q0ecfv7] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.native-multiselect[b-fc9q0ecfv7] {
    position: relative;
    min-width: 0;
}

.native-multiselect > summary[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}

.native-multiselect > summary[b-fc9q0ecfv7]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-fc9q0ecfv7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-fc9q0ecfv7] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-fc9q0ecfv7] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-fc9q0ecfv7] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__options[b-fc9q0ecfv7] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-fc9q0ecfv7] {
    background: #fff5ec;
}

.native-multiselect__options input[b-fc9q0ecfv7] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-fc9q0ecfv7] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-fc9q0ecfv7] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}

.filter-actions[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.summary-action-btn[b-fc9q0ecfv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

[b-fc9q0ecfv7] .filter-actions .rz-button {
    min-height: 28px;
    padding: 0.1rem 0.66rem;
    border-width: 1px;
    border-radius: 8px;
}

.summary-action-btn-search[b-fc9q0ecfv7],
.summary-action-btn-reset[b-fc9q0ecfv7],
.summary-action-btn-export[b-fc9q0ecfv7] { background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%); }
.summary-action-btn-search[b-fc9q0ecfv7] { color: #9a3412; border-color: #fde7d3; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05); }
.summary-action-btn-reset[b-fc9q0ecfv7] { color: #475569; border-color: #e2e8f0; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04); }
.summary-action-btn-export[b-fc9q0ecfv7] { color: #0f766e; border-color: #ccfbf1; box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05); }
.summary-action-btn:hover:not(:disabled)[b-fc9q0ecfv7] { transform: translateY(-1px); }

.summary-action-btn--primary[b-fc9q0ecfv7] {
    color: #9a3412;
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1);
}

.summary-action-btn--reset[b-fc9q0ecfv7] {
    border-color: #cbd5e1;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.summary-action-btn--export[b-fc9q0ecfv7] {
    border-color: #5eead4;
    color: #0f766e;
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.summary-action-btn--primary:hover:not(:disabled)[b-fc9q0ecfv7] { border-color: #f97316; box-shadow: 0 7px 14px rgba(249, 115, 22, 0.16); }
.summary-action-btn--reset:hover:not(:disabled)[b-fc9q0ecfv7] { border-color: #94a3b8; box-shadow: 0 7px 14px rgba(15, 23, 42, 0.09); }
.summary-action-btn--export:hover:not(:disabled)[b-fc9q0ecfv7] { border-color: #14b8a6; box-shadow: 0 7px 14px rgba(20, 184, 166, 0.16); }

.summary-action-btn:disabled[b-fc9q0ecfv7] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.mapping-summary-table-wrapper[b-fc9q0ecfv7] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(54, 84, 112, 0.07);
}

.mapping-summary-table-scroll[b-fc9q0ecfv7] {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b8c9d9 #eef4fa;
    scrollbar-width: thin;
}

.mapping-summary-table-scroll[b-fc9q0ecfv7]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mapping-summary-table-scroll[b-fc9q0ecfv7]::-webkit-scrollbar-track {
    background: #eef4fa;
}

.mapping-summary-table-scroll[b-fc9q0ecfv7]::-webkit-scrollbar-thumb {
    border: 2px solid #eef4fa;
    border-radius: 10px;
    background: #b8c9d9;
}

.mapping-summary-table[b-fc9q0ecfv7] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #3e4c5f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mapping-summary-table th[b-fc9q0ecfv7],
.mapping-summary-table td[b-fc9q0ecfv7] {
    padding: 6px 10px;
    border-right: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-fc9q0ecfv7] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 30px;
    color: #4f6275;
    background: #f5f8fc;
    background-clip: padding-box;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapping-summary-table thead tr:first-child th[b-fc9q0ecfv7] {
    height: 32px;
    border-bottom-color: #d8e3ee;
}

.mapping-summary-table thead tr:nth-child(2) th[b-fc9q0ecfv7] {
    top: 32px;
    background: #fbfdff;
}

    .mapping-summary-table thead .group-parent-header[b-fc9q0ecfv7] {
        color: rgb(79, 98, 117);
        background: linear-gradient(135deg, #f09a4a 0%, #db7131 100%);
    }

.summary-total-row td[b-fc9q0ecfv7] {
    position: sticky;
    top: 61px;
    z-index: 5;
    color: #355068;
    background: #edf5fc;
    border-bottom: 1px solid #bfd4e6;
    font-weight: 850;
    padding-top: 4px;
    padding-bottom: 4px;
}

.summary-total-row td:first-child[b-fc9q0ecfv7] {
    letter-spacing: 0.08em;
}

.business-group-row td[b-fc9q0ecfv7] {
    padding: 6px 11px;
    color: #7e5a2c;
    background: #fff8eb;
    border-bottom-color: #f0dfbb;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-data-row-main td[b-fc9q0ecfv7] {
    height: 36px;
}

.summary-data-row:nth-of-type(even) td:not(.group-cell)[b-fc9q0ecfv7] {
    background: #fbfdff;
}

.summary-data-row:hover td[b-fc9q0ecfv7],
.summary-data-row:hover .group-cell[b-fc9q0ecfv7] {
    background: #f2f8fe;
}

.group-cell[b-fc9q0ecfv7] {
    color: #445466;
    background: #fafcff;
    font-weight: 700;
    font-size: 0.77rem;
}

.group-cell-mien[b-fc9q0ecfv7] {
    color: #315f87;
    background: #eef6fd;
    font-weight: 850;
    text-transform: uppercase;
}

.summary-col-emphasis[b-fc9q0ecfv7] {
    font-weight: 650;
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-di[b-fc9q0ecfv7] {
    background: rgb(237, 245, 253);
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-den[b-fc9q0ecfv7] {
    background: rgb(255, 243, 231);
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-di-cell[b-fc9q0ecfv7] {
    background: #eaf4fd;
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-den-cell[b-fc9q0ecfv7] {
    background: #fff3e5;
}

.mapping-summary-table td.summary-group-noi-di-cell[b-fc9q0ecfv7] {
    background: #f4f9fe;
}

.mapping-summary-table td.summary-group-noi-den-cell[b-fc9q0ecfv7] {
    background: #fff8ef;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-di-cell[b-fc9q0ecfv7] {
    background: #edf5fd;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-den-cell[b-fc9q0ecfv7] {
    background: #fff3e7;
}

.summary-data-row:hover td.summary-group-noi-di-cell[b-fc9q0ecfv7] {
    background: #e3f0fc;
}

.summary-data-row:hover td.summary-group-noi-den-cell[b-fc9q0ecfv7] {
    background: #ffeccd;
}

.number-cell[b-fc9q0ecfv7] {
    color: #31465b;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 650;
}

.text-break-cell[b-fc9q0ecfv7] {
    white-space: pre-line;
    font-size: 0.79rem;
}

.table-badge[b-fc9q0ecfv7],
.status-badge[b-fc9q0ecfv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.badge-cell[b-fc9q0ecfv7] {
    text-align: center;
}

.status-badge-button[b-fc9q0ecfv7] {
    flex-direction: column;
    gap: 2px;
    font-family: inherit;
    cursor: pointer;
}

.status-summary-badge[b-fc9q0ecfv7] {
    flex-direction: column;
    gap: 2px;
}

.status-badge small[b-fc9q0ecfv7] {
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
}

.status-badge-button:hover[b-fc9q0ecfv7] {
    filter: brightness(0.97);
}

.table-badge--warehouse[b-fc9q0ecfv7] {
    border-color: #99c8f0;
    color: #1f5f96;
    background: #eaf5ff;
}

.table-badge--ship[b-fc9q0ecfv7] {
    border-color: #c9b7ef;
    color: #6f51ad;
    background: #f4efff;
}

.status-badge--success[b-fc9q0ecfv7] {
    border-color: #b9ddc0;
    color: #2f7a3a;
    background: #eefbf0;
}

.status-badge--warning[b-fc9q0ecfv7] {
    border-color: #efd58f;
    color: #9b6a0b;
    background: #fff8df;
}

.status-badge--danger[b-fc9q0ecfv7] {
    border-color: #ecb0b8;
    color: #bc415f;
    background: #fff0ec;
}

.status-badge--neutral[b-fc9q0ecfv7] {
    border-color: #cfdbe7;
    color: #627487;
    background: #f2f6fa;
}

.warehouse-link[b-fc9q0ecfv7] {
    display: inline;
    padding: 0;
    border: 0;
    color: #2e78b5;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(46, 120, 181, 0.26);
    text-underline-offset: 2px;
}

.warehouse-link:hover[b-fc9q0ecfv7] {
    color: #205d90;
    text-decoration-color: currentColor;
}

.col-mien[b-fc9q0ecfv7] { width: 126px; }
.col-khu-vuc[b-fc9q0ecfv7] { width: 146px; }
.col-noi[b-fc9q0ecfv7] { width: 146px; }
.col-nguon-hang[b-fc9q0ecfv7] { width: 126px; }
.col-ten-tau[b-fc9q0ecfv7] { width: 156px; }
.col-quantity[b-fc9q0ecfv7] { width: 132px; }
.col-status[b-fc9q0ecfv7] { width: 150px; }
.col-invoice[b-fc9q0ecfv7] { width: 126px; }
.col-ai[b-fc9q0ecfv7] { width: 198px; }
.col-doc[b-fc9q0ecfv7] { width: 126px; }

.mapping-summary-loading-overlay[b-fc9q0ecfv7] {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(250, 252, 255, 0.88);
    backdrop-filter: blur(2px);
}

.mapping-summary-loading-spinner[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dfebf5;
    border-radius: 12px;
    color: #5e748a;
    background: #fff;
    box-shadow: 0 10px 24px rgba(63, 99, 138, 0.12);
    font-size: 0.82rem;
    font-weight: 650;
}

.mapping-summary-spinner[b-fc9q0ecfv7] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfebf5;
    border-top-color: #4f8bbd;
    border-radius: 50%;
    animation: mappingSummarySpin-b-fc9q0ecfv7 0.75s linear infinite;
}

@keyframes mappingSummarySpin-b-fc9q0ecfv7 {
    to { transform: rotate(360deg); }
}

.grid-empty-state[b-fc9q0ecfv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 150px;
    gap: 8px;
    color: #6d7f92;
    border: 1px dashed #cedbe8;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1280px) {
    .summary-filter-layout[b-fc9q0ecfv7] {
        flex-wrap: wrap;
    }

    .filter-title[b-fc9q0ecfv7] {
        display: none;
    }

    .mapping-summary-stats[b-fc9q0ecfv7] {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-fc9q0ecfv7] {
        height: calc(100dvh - 90px);
        padding-inline: 4px;
    }

    .summary-heading__date[b-fc9q0ecfv7] {
        display: none;
    }

    .mapping-summary-stats[b-fc9q0ecfv7] {
        display: flex;
        overflow-x: auto;
    }

    .mapping-summary-stat-item[b-fc9q0ecfv7] {
        min-width: 160px;
    }

    .summary-filter-layout[b-fc9q0ecfv7] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-fc9q0ecfv7] {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .filter-actions[b-fc9q0ecfv7] {
        justify-content: flex-end;
        margin-left: 0;
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Inventory.razor.rz.scp.css */
#ControlRegion[b-h0lwwjogae] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    height: calc(100vh - 72px);
    min-height: 640px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, 0.08), transparent 28rem),
        #f3f6fb;
}

.compare-root-card[b-h0lwwjogae],
.mail-tab-content[b-h0lwwjogae],
.compare-native-layout[b-h0lwwjogae],
.mail-detail-panel[b-h0lwwjogae] {
    min-height: 0;
}

.compare-root-card[b-h0lwwjogae] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(28, 50, 92, 0.11);
}

.mail-native-tabs[b-h0lwwjogae] {
    display: inline-flex;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mail-native-tab[b-h0lwwjogae] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f6f82;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mail-native-tab:hover[b-h0lwwjogae] {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(56, 189, 248, 0.16);
}

.mail-native-tab--active[b-h0lwwjogae] {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, 0.35);
}

.mail-tab-content[b-h0lwwjogae],
.compare-native-layout[b-h0lwwjogae],
.mail-detail-panel[b-h0lwwjogae] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-filter-header[b-h0lwwjogae] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 20px 24px 15px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.comparison-filter-bar[b-h0lwwjogae],
.queue-filter-actions[b-h0lwwjogae] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.comparison-filter-bar[b-h0lwwjogae] {
    flex: 1 1 760px;
    gap: 12px;
    margin-bottom: 0;
}

.queue-filter-actions[b-h0lwwjogae] {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.filter-field[b-h0lwwjogae] {
    display: flex;
    flex: 1 1 150px;
    min-width: 135px;
    max-width: 220px;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-h0lwwjogae] {
    color: #475569;
    font-size: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.025em;
}

.filter-field > input[b-h0lwwjogae],
.native-multiselect > summary[b-h0lwwjogae] {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #d5dee8;
    border-radius: 9px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 0.76rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.filter-field > input[b-h0lwwjogae] {
    padding: 0 10px;
}

.filter-field > input:focus[b-h0lwwjogae],
.native-multiselect[open] > summary[b-h0lwwjogae] {
    outline: none;
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
}

.mail-action--daily-report[b-h0lwwjogae] {
    margin-left: auto;
}

.daily-issue-modal-backdrop[b-h0lwwjogae] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-h0lwwjogae] {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-h0lwwjogae] { margin: 0; font-size: 1rem; }

.daily-issue-modal__filters[b-h0lwwjogae] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__body[b-h0lwwjogae] { min-height: 260px; overflow: auto; padding: 14px 16px 16px; }
.daily-issue-table-wrap[b-h0lwwjogae] { max-height: calc(100vh - 205px); overflow: auto; border: 1px solid #dbe3ec; border-radius: 8px; }
.daily-issue-table[b-h0lwwjogae] { width: 100%; min-width: 1700px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.daily-issue-table th[b-h0lwwjogae], .daily-issue-table td[b-h0lwwjogae] { padding: 7px 8px; border-right: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; text-align: center; white-space: nowrap; }
.daily-issue-table th[b-h0lwwjogae] { position: sticky; top: 0; z-index: 4; background: #eef4f8; color: #334155; font-weight: 800; }
.daily-issue-table th:first-child[b-h0lwwjogae], .daily-issue-table td:first-child[b-h0lwwjogae] { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; }
.daily-issue-table th:first-child[b-h0lwwjogae] { z-index: 6; background: #e8f1f3; }
.daily-issue-date[b-h0lwwjogae] { color: #0f172a; font-weight: 700; }
.daily-issue-number[b-h0lwwjogae] { color: #1e293b; font-variant-numeric: tabular-nums; }
.daily-issue-number--warning[b-h0lwwjogae] { color: #b42318; background: #fff4ed; font-weight: 800; }
.daily-issue-value[b-h0lwwjogae] { width: 100%; min-width: 58px; padding: 3px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: inherit; }
.daily-issue-value--clickable[b-h0lwwjogae] { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; cursor: pointer; }
.daily-issue-number--warning .daily-issue-value--clickable[b-h0lwwjogae] { color: #b42318; background: #fff7ed; border-color: #fed7aa; }
.daily-issue-value:disabled[b-h0lwwjogae] { opacity: 1; }
.daily-issue-loading[b-h0lwwjogae], .daily-issue-empty[b-h0lwwjogae] { display: flex; min-height: 210px; align-items: center; justify-content: center; color: #64748b; border: 1px dashed #cbd5e1; border-radius: 8px; }
.daily-issue-group-row th[b-h0lwwjogae] { top: 0; }
.daily-issue-table thead tr:nth-child(2) th[b-h0lwwjogae] { top: 35px; z-index: 5; }
.daily-issue-group--info[b-h0lwwjogae] { background: #eef6ff !important; }
.daily-issue-group--status[b-h0lwwjogae] { background: #f0fdf4 !important; }
.daily-issue-group--data[b-h0lwwjogae] { background: #fff7ed !important; }
.daily-issue-group--documents[b-h0lwwjogae] { background: #fdf2f8 !important; }
.daily-issue-number.daily-issue-group--info[b-h0lwwjogae] { background: #f8fbff !important; }
.daily-issue-number.daily-issue-group--status[b-h0lwwjogae] { background: #f7fef9 !important; }
.daily-issue-number.daily-issue-group--data[b-h0lwwjogae] { background: #fffaf3 !important; }
.daily-issue-number.daily-issue-group--documents[b-h0lwwjogae] { background: #fff8fb !important; }
.daily-issue-number--warning.daily-issue-group--info[b-h0lwwjogae] { background: #eaf3ff !important; }
.daily-issue-number--warning.daily-issue-group--status[b-h0lwwjogae] { background: #ecfdf3 !important; }
.daily-issue-number--warning.daily-issue-group--data[b-h0lwwjogae] { background: #fff4e6 !important; }
.daily-issue-number--warning.daily-issue-group--documents[b-h0lwwjogae] { background: #fce7f3 !important; }

[b-h0lwwjogae] .compare-filter-bar-native .rz-datepicker,
[b-h0lwwjogae] .compare-filter-bar-native .rz-picker,
[b-h0lwwjogae] .compare-filter-bar-native .rz-inputtext {
    width: 100% !important;
}

[b-h0lwwjogae] .compare-filter-bar-native .rz-datepicker,
[b-h0lwwjogae] .compare-filter-bar-native .rz-picker {
    min-height: 34px;
    border: 1px solid #d5dee8 !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

[b-h0lwwjogae] .compare-filter-bar-native .rz-state-focus,
[b-h0lwwjogae] .compare-filter-bar-native .rz-focus {
    border-color: #8aa8f4 !important;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1) !important;
}

.native-multiselect[b-h0lwwjogae] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-h0lwwjogae]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-h0lwwjogae] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-h0lwwjogae]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease;
}

.native-multiselect[open] .native-multiselect__arrow[b-h0lwwjogae]::before {
    transform: rotate(-135deg) translateY(-1px);
}

.native-multiselect__menu[b-h0lwwjogae] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5ee;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.native-multiselect__header[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 8px;
    font-size: 0.75rem;
}

.native-multiselect__header button[b-h0lwwjogae] {
    border: 0;
    background: none;
    color: var(--mail-primary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.native-multiselect__search-wrap[b-h0lwwjogae] { padding: 6px 4px 2px; }

.native-multiselect__search[b-h0lwwjogae] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}

.native-multiselect__search:focus[b-h0lwwjogae] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.native-multiselect__options[b-h0lwwjogae] {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    overflow: auto;
}

.native-multiselect__select-all[b-h0lwwjogae] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 2px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.native-multiselect__no-results[b-h0lwwjogae] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.native-multiselect__options label[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 5px;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.76rem;
}

.native-multiselect__options label:hover[b-h0lwwjogae] {
    background: #eef4ff;
}

.native-multiselect__empty[b-h0lwwjogae] {
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.mail-action[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
}

.mail-action:hover:not(:disabled)[b-h0lwwjogae] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-h0lwwjogae] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mail-action--primary[b-h0lwwjogae] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.mail-action--secondary[b-h0lwwjogae] {
    color: #344256;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--export[b-h0lwwjogae] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
    box-shadow: 0 7px 16px rgba(18, 150, 111, 0.18);
}

.mail-action--toggle[b-h0lwwjogae] {
    color: #4b5a6d;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--toggle:hover:not(:disabled)[b-h0lwwjogae] {
    border-color: #9db2dd;
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.12);
}

.mail-action--toggle-active[b-h0lwwjogae] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.filter-extra-panel[b-h0lwwjogae] {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(760px, calc(100vw - 60px));
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--mail-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.queue-view-toolbar[b-h0lwwjogae] {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.queue-view-overall-stats[b-h0lwwjogae] {
    display: grid;
    grid-template-columns: repeat(3, minmax(146px, 0.8fr)) minmax(390px, 3.3fr);
    gap: 8px;
    width: 100%;
}

.overall-stat-card[b-h0lwwjogae] {
    position: relative;
    display: flex;
    height: 60px;
    min-height: 60px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.overall-stat-card[b-h0lwwjogae]::before {
    display: none;
}

.overall-stat-card--total[b-h0lwwjogae] {
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.08);
}

.overall-stat-card--clickable[b-h0lwwjogae] {
    cursor: pointer;
}

.overall-stat-card--clickable:hover[b-h0lwwjogae] {
    z-index: 1;
    border-color: #7ea2f3;
    box-shadow: 0 8px 20px rgba(36, 87, 230, 0.12);
    transform: translateY(-1px);
}

.overall-stat-card--highlight[b-h0lwwjogae] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, 0.09),
        0 0 8px rgba(125, 211, 252, 0.12) !important;
}

.overall-stat-card--highlight *[b-h0lwwjogae] {
    color: #0c4a6e !important;
}

.overall-stat-card--active[b-h0lwwjogae] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--active *[b-h0lwwjogae] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-h0lwwjogae]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, 0.25) 260deg,
        #67e8f9 292deg,
        #fff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.95));
    animation: overall-neon-border-b-h0lwwjogae 1.8s linear infinite;
}

@keyframes overall-neon-border-b-h0lwwjogae {
    to { --overall-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-h0lwwjogae]::after { animation: none; }
}

.overall-stat-card--disabled[b-h0lwwjogae] {
    pointer-events: none;
    opacity: 0.54;
}

.overall-stat-label[b-h0lwwjogae],
.overall-stat-lines[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-stat-label[b-h0lwwjogae] {
    justify-content: center;
    min-width: 52px;
    padding: 4px 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.overall-stat-lines[b-h0lwwjogae] {
    flex: 1;
    flex-direction: column;
    padding: 4px 7px;
}

.stat-line-count[b-h0lwwjogae] {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.stat-line-kg[b-h0lwwjogae] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-line-perc[b-h0lwwjogae] {
    margin-top: 4px;
    color: #718096;
    font-size: 0.64rem;
}

.compare-mini-row[b-h0lwwjogae] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.compare-overall-filter-link[b-h0lwwjogae] {
    min-height: 20px;
    padding: 0.06rem 0.42rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.compare-overall-filter-link--active[b-h0lwwjogae] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.compare-overall-filter-link:disabled[b-h0lwwjogae] {
    opacity: 0.55;
}

.overall-stat-card-group[b-h0lwwjogae] {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 7px;
}

.overall-stat-card--mini[b-h0lwwjogae] {
    min-width: 0;
    height: 28px;
    min-height: 28px;
    box-shadow: none;
    border-radius: 8px;
    background: #fff;
}

.overall-stat-card--mini .overall-stat-lines[b-h0lwwjogae] {
    min-width: 0;
    padding: 3px 7px;
}

.overall-stat-card--mini .overall-stat-label[b-h0lwwjogae] {
    justify-content: flex-start;
    padding: 3px 7px;
    color: #526174;
    background: #fbfcfe;
    font-size: 0.58rem;
    text-align: left;
}

.overall-stat-card--mini .stat-line-count[b-h0lwwjogae] {
    color: #c94e2d;
    font-size: 0.76rem;
}

.compare-grid-wrapper[b-h0lwwjogae] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: #fff;
}

.datamail-grid-scroll[b-h0lwwjogae] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-h0lwwjogae] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-h0lwwjogae],
.mail-native-table td[b-h0lwwjogae] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead th[b-h0lwwjogae] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 24px;
    color: #536174;
    background: #f3f6fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.mail-native-table thead .compare-main-header th[colspan][b-h0lwwjogae] {
    color: #9a4f1e;
    background: #fff5e8;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-di[b-h0lwwjogae],
.mail-native-table thead .compare-main-header th.compare-group-noi-di[colspan][b-h0lwwjogae],
.mail-native-table thead th.compare-group-noi-di[b-h0lwwjogae] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-den[b-h0lwwjogae],
.mail-native-table thead .compare-main-header th.compare-group-noi-den[colspan][b-h0lwwjogae],
.mail-native-table thead th.compare-group-noi-den[b-h0lwwjogae] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table thead .compare-main-header th[rowspan][b-h0lwwjogae] {
    border-bottom-color: #d7dee7;
}

.mail-native-table .compare-subheader th[b-h0lwwjogae] {
    top: 24px;
    z-index: 4;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff5e8;
    border-top: 0;
    color: #9a4f1e;
}

.mail-native-table .compare-subheader th.compare-group-noi-di[b-h0lwwjogae] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table .compare-subheader th.compare-group-noi-den[b-h0lwwjogae] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table tbody tr:nth-child(even)[b-h0lwwjogae] {
    background: #fbfcfe;
}

.mail-native-table tbody td.compare-group-noi-di[b-h0lwwjogae] {
    background: #f5fcfa;
}

.mail-native-table tbody td.compare-group-noi-den[b-h0lwwjogae] {
    background: #fffaf0;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-di[b-h0lwwjogae] {
    background: #eef8f5;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-den[b-h0lwwjogae] {
    background: #fff4dc;
}

.mail-native-table tbody tr:hover[b-h0lwwjogae],
.mail-native-table tbody tr.mail-row-selected[b-h0lwwjogae] {
    background: #edf3ff;
}

.mail-native-table tbody tr:hover td.compare-group-noi-di[b-h0lwwjogae],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-di[b-h0lwwjogae] {
    background: #def7ef;
}

.mail-native-table tbody tr:hover td.compare-group-noi-den[b-h0lwwjogae],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-den[b-h0lwwjogae] {
    background: #ffedc2;
}

.mail-native-table tbody td[b-h0lwwjogae] {
    height: 27px;
}

.mail-cell-warehouse[b-h0lwwjogae] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.number-cell[b-h0lwwjogae] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.inventory-quantity-in[b-h0lwwjogae] {
    color: #15803d !important;
    font-weight: 850 !important;
}

.inventory-quantity-out[b-h0lwwjogae] {
    color: #dc2626 !important;
    font-weight: 850 !important;
}

.mail-cell-plate[b-h0lwwjogae],
.mail-code[b-h0lwwjogae],
.mail-direction[b-h0lwwjogae],
.mail-cell-mono[b-h0lwwjogae] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-plate[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f3f6fa;
    color: #24415f;
    letter-spacing: 0.04em;
}

.mail-code[b-h0lwwjogae],
.mail-direction[b-h0lwwjogae] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
    color: #174ea6;
}

.queue-status-badge[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.queue-status-badge--error[b-h0lwwjogae] {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-h0lwwjogae] {
    background-color: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-h0lwwjogae] {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-h0lwwjogae] {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-h0lwwjogae] {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #1f2937;
}

.return-goods-badge[b-h0lwwjogae] {
    display: inline-flex;
    min-width: 58px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-goods-badge--yes[b-h0lwwjogae] {
    color: #b42318;
    background: #fff1f2;
    border-color: #fda4af;
}

.qty-diff-badge[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.document-link-list[b-h0lwwjogae] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.document-link-list--multi[b-h0lwwjogae] {
    gap: 5px;
}

.document-link-item[b-h0lwwjogae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #c8daf7;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.document-link-item:hover[b-h0lwwjogae] {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}

.document-link-item--primary[b-h0lwwjogae] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-h0lwwjogae] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.mail-native-pager[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-h0lwwjogae] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager select[b-h0lwwjogae],
.mail-native-pager button[b-h0lwwjogae] {
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.mail-native-pager button[b-h0lwwjogae] {
    min-width: 30px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-h0lwwjogae] {
    opacity: 0.4;
    cursor: default;
}

.comparison-loading-overlay[b-h0lwwjogae] {
    position: absolute;
    inset: 0 0 45px;
    z-index: 10;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.comparison-loading-skeleton[b-h0lwwjogae] {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px;
}

.comparison-skeleton-row[b-h0lwwjogae] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.comparison-skeleton-cell[b-h0lwwjogae] {
    height: 13px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 300% 100%;
    animation: compareSkeletonPulse-b-h0lwwjogae 1.2s infinite;
}

.grid-empty-state[b-h0lwwjogae] {
    margin: 0 24px 14px;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes compareSkeletonPulse-b-h0lwwjogae {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-h0lwwjogae] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .overall-stat-card-group[b-h0lwwjogae] {
        grid-template-columns: repeat(3, minmax(118px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-h0lwwjogae] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .compare-root-card[b-h0lwwjogae],
    .mail-tab-content[b-h0lwwjogae],
    .compare-native-layout[b-h0lwwjogae],
    .mail-detail-panel[b-h0lwwjogae] {
        overflow: visible;
    }

    .queue-filter-header[b-h0lwwjogae] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
    }

    .comparison-filter-bar[b-h0lwwjogae],
    .queue-filter-actions[b-h0lwwjogae] {
        width: 100%;
        margin-left: 0;
    }

    .comparison-filter-bar[b-h0lwwjogae] {
        gap: 8px;
    }

    .filter-field[b-h0lwwjogae] {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-extra-panel[b-h0lwwjogae] {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .queue-view-toolbar[b-h0lwwjogae] {
        padding: 14px 12px;
    }

    .queue-view-overall-stats[b-h0lwwjogae] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .overall-stat-card-group[b-h0lwwjogae] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .compare-grid-wrapper[b-h0lwwjogae] {
        min-height: 480px;
        margin: 0 8px;
    }

    .grid-empty-state[b-h0lwwjogae],
    .mail-native-pager[b-h0lwwjogae] {
        margin-right: 8px;
        margin-left: 8px;
    }

    .mail-native-pager[b-h0lwwjogae] {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Tab Khai thác tàu được giữ trong DOM để không mất dữ liệu đã tải khi chuyển tab.
   Dùng display:none thay vì gỡ khỏi cây render. */
.mail-tab-pane[b-h0lwwjogae] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mail-tab-pane--hidden[b-h0lwwjogae] {
    display: none;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Inventory_Summary.razor.rz.scp.css */
:global(body)[b-1i3u46rqvr] {
    overflow: hidden;
}

#ControlRegion[b-1i3u46rqvr] {
    height: calc(100dvh - 112px);
    min-height: 540px;
    overflow: hidden;
    padding: 0 10px 10px;
    color: #2f3d4f;
    background:
        radial-gradient(circle at 10% 0%, rgba(112, 169, 196, 0.11), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(255, 206, 160, 0.15), transparent 20rem),
        linear-gradient(180deg, #fffefd 0%, #f9fbff 100%);
}

[b-1i3u46rqvr] .summary-page-card {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e6edf4;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(48, 79, 108, 0.08);
}

.mapping-summary-section[b-1i3u46rqvr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    gap: 10px;
}

.mapping-summary-stats[b-1i3u46rqvr] {
    display: grid;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
    flex: 0 0 auto;
    gap: 8px;
}

.mapping-summary-stat-item[b-1i3u46rqvr] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 10px;
    padding: 9px 12px 9px 15px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 10px 20px rgba(50, 82, 111, 0.1);
}

.mapping-summary-stat-item[b-1i3u46rqvr]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
    content: "";
}

.mapping-summary-stat-item label[b-1i3u46rqvr] {
    max-width: 125px;
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-1i3u46rqvr] {
    min-width: 38px;
    color: var(--stat-accent);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card--warning[b-1i3u46rqvr] { --stat-accent: #d2862c; --stat-tint: #fff8ee; }
.stat-card--blue[b-1i3u46rqvr] { --stat-accent: #4f7fd4; --stat-tint: #f1f6ff; }
.stat-card--teal[b-1i3u46rqvr] { --stat-accent: #2d8a78; --stat-tint: #eefbf7; }
.stat-card--rose[b-1i3u46rqvr] { --stat-accent: #cf5b6f; --stat-tint: #fff1f4; }
.stat-card--violet[b-1i3u46rqvr] { --stat-accent: #7a67c7; --stat-tint: #f4f1ff; }

.clickable-stat[b-1i3u46rqvr] {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.clickable-stat:hover[b-1i3u46rqvr] {
    border-color: color-mix(in srgb, var(--stat-accent) 40%, white);
    box-shadow: 0 10px 20px rgba(61, 100, 136, 0.14);
    transform: translateY(-1px);
}

.clickable-stat.active[b-1i3u46rqvr] {
    border-color: var(--stat-accent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--stat-accent) 16%, transparent),
        0 14px 28px color-mix(in srgb, var(--stat-accent) 18%, transparent);
}

.filter-container[b-1i3u46rqvr] {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) auto;
    align-items: end;
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mapping-filter-bar[b-1i3u46rqvr] {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 8px;
    min-width: 0;
}

.filter-field > input[b-1i3u46rqvr],
.native-multiselect > summary[b-1i3u46rqvr] {
    width: 100% !important;
    height: 34px;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #d8e3ed;
    border-radius: 8px;
    color: #4b5d70;
    background: #fff;
    box-shadow: none;
    font-size: 0.76rem;
}

.summary-filter-panel[b-1i3u46rqvr] {
    flex: 0 0 auto;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-layout[b-1i3u46rqvr] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
    /* Cho phép dãy nút xuống dòng khi không đủ chỗ, thay vì bị đẩy tràn ra ngoài panel. */
    flex-wrap: wrap;
}

.summary-filter-bar[b-1i3u46rqvr] {
    display: grid;
    grid-template-columns: 168px 168px repeat(5, 158px);
    gap: 0.55rem;
    flex: 0 1 auto;
    min-width: 0;
    align-items: end;
}

/* 7 filter (2 ngày + 5 multiselect) nằm trên cùng một hàng.
   Hai cột ngày giữ bề rộng cố định, 5 cột còn lại co giãn theo chỗ trống.
   flex-basis đủ rộng cho 7 cột: khi còn lại không đủ chỗ cho cả dãy nút,
   thanh filter chiếm trọn dòng và dãy nút tự xuống dòng dưới. */
.summary-filter-bar.inventory-summary-filter-bar[b-1i3u46rqvr] {
    grid-template-columns: 132px 132px repeat(5, minmax(104px, 1fr));
    flex: 1 1 720px;
}

.inventory-summary-stats[b-1i3u46rqvr] {
    grid-template-columns: repeat(4, minmax(135px, 1fr));
}

.inventory-summary-table .col-loai-kho[b-1i3u46rqvr] {
    min-width: 96px;
    width: 108px;
}

.inventory-summary-table .col-phap-nhan[b-1i3u46rqvr],
.inventory-summary-table .col-mien[b-1i3u46rqvr] {
    min-width: 112px;
    width: 124px;
}

.inventory-summary-table .col-item[b-1i3u46rqvr] {
    min-width: 112px;
    width: 126px;
}

.inventory-summary-table .col-source[b-1i3u46rqvr] {
    min-width: 96px;
    width: 110px;
}

.inventory-summary-table .col-ten-tau[b-1i3u46rqvr] {
    min-width: 138px;
}

.inventory-detail-row td[b-1i3u46rqvr] {
    color: #334155;
    font-weight: 600;
}

.inventory-rowspan-cell[b-1i3u46rqvr] {
    vertical-align: middle;
    font-weight: 850 !important;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    border-right: 1px solid #dbe7f1 !important;
}

.inventory-rowspan-cell--loai-kho[b-1i3u46rqvr] {
    color: #164e63 !important;
    background: #ecfeff !important;
}

.inventory-rowspan-cell--loai-kho:has(+ .inventory-rowspan-cell--phap-nhan)[b-1i3u46rqvr],
.inventory-rowspan-cell--phap-nhan[b-1i3u46rqvr] {
    color: #7c2d12 !important;
    background: #fff7ed !important;
}

.inventory-rowspan-cell--loai-kho[b-1i3u46rqvr] {
    white-space: normal;
}

.inventory-rowspan-cell--loai-kho:nth-child(1)[b-1i3u46rqvr] {
    border-left: 4px solid #38bdf8 !important;
}

.summary-data-row:has(.inventory-rowspan-cell--loai-kho) .inventory-rowspan-cell--loai-kho[b-1i3u46rqvr] {
    background: #ecfeff !important;
}

.inventory-rowspan-cell--warehouse-type[b-1i3u46rqvr] {
    color: #166534 !important;
    background: #ecfdf5 !important;
    border-left: 4px solid #22c55e !important;
}

.inventory-rowspan-cell--port[b-1i3u46rqvr] {
    color: #9a3412 !important;
    background: #fff7ed !important;
    border-left: 4px solid #f97316 !important;
}

.inventory-rowspan-cell--mien[b-1i3u46rqvr] {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.inventory-rowspan-cell--khu-vuc[b-1i3u46rqvr] {
    color: #166534 !important;
    background: #f0fdf4 !important;
}

.inventory-rowspan-cell--kho-cang[b-1i3u46rqvr] {
    color: #9a3412 !important;
    background: #fff7ed !important;
}

.inventory-rowspan-cell--ten-tau[b-1i3u46rqvr] {
    color: #6d28d9 !important;
    background: #f5f3ff !important;
}

.inventory-rowspan-cell--mat-hang[b-1i3u46rqvr] {
    color: #0f766e !important;
    background: #f0fdfa !important;
}

.filter-field[b-1i3u46rqvr] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.filter-field label[b-1i3u46rqvr] {
    color: #66788a;
    font-size: 0.68rem;
    font-weight: 750;
    /* Nhãn dài ("Loại kho/cảng") không xuống dòng làm lệch chiều cao các ô cùng hàng. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1i3u46rqvr] .summary-filter-bar .rz-inputtext,
[b-1i3u46rqvr] .summary-filter-bar .rz-dropdown,
[b-1i3u46rqvr] .summary-filter-bar .rz-datepicker,
[b-1i3u46rqvr] .summary-filter-bar .rz-multiselect,
[b-1i3u46rqvr] .summary-filter-bar .filter-select,
[b-1i3u46rqvr] .summary-filter-bar .rz-picker {
    width: 100% !important;
    min-height: 34px;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-1i3u46rqvr] .summary-filter-bar .rz-state-focus,
[b-1i3u46rqvr] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.native-multiselect[b-1i3u46rqvr] {
    position: relative;
    min-width: 0;
}

.native-multiselect > summary[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}

.native-multiselect > summary[b-1i3u46rqvr]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-1i3u46rqvr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-1i3u46rqvr] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-1i3u46rqvr] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-1i3u46rqvr] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__options[b-1i3u46rqvr] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-1i3u46rqvr] {
    background: #fff5ec;
}

.native-multiselect__options input[b-1i3u46rqvr] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-1i3u46rqvr] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-1i3u46rqvr] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}

.filter-actions[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-left: auto;
    /* Không co lại khi thanh filter giãn ra chiếm chỗ. */
    flex-shrink: 0;
}

.summary-action-btn[b-1i3u46rqvr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

[b-1i3u46rqvr] .filter-actions .rz-button {
    min-height: 28px;
    padding: 0.1rem 0.66rem;
    border-width: 1px;
    border-radius: 8px;
}

.summary-action-btn-search[b-1i3u46rqvr],
.summary-action-btn-reset[b-1i3u46rqvr],
.summary-action-btn-export[b-1i3u46rqvr] { background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%); }
.summary-action-btn-search[b-1i3u46rqvr] { color: #9a3412; border-color: #fde7d3; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05); }
.summary-action-btn-reset[b-1i3u46rqvr] { color: #475569; border-color: #e2e8f0; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04); }
.summary-action-btn-export[b-1i3u46rqvr] { color: #0f766e; border-color: #ccfbf1; box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05); }
.summary-action-btn:hover:not(:disabled)[b-1i3u46rqvr] { transform: translateY(-1px); }

.summary-action-btn--primary[b-1i3u46rqvr] {
    color: #9a3412;
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1);
}

.summary-action-btn--reset[b-1i3u46rqvr] {
    border-color: #cbd5e1;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.summary-action-btn--export[b-1i3u46rqvr] {
    border-color: #5eead4;
    color: #0f766e;
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.summary-action-btn--primary:hover:not(:disabled)[b-1i3u46rqvr] { border-color: #f97316; box-shadow: 0 7px 14px rgba(249, 115, 22, 0.16); }
.summary-action-btn--reset:hover:not(:disabled)[b-1i3u46rqvr] { border-color: #94a3b8; box-shadow: 0 7px 14px rgba(15, 23, 42, 0.09); }
.summary-action-btn--export:hover:not(:disabled)[b-1i3u46rqvr] { border-color: #14b8a6; box-shadow: 0 7px 14px rgba(20, 184, 166, 0.16); }

.summary-action-btn:disabled[b-1i3u46rqvr] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.mapping-summary-table-wrapper[b-1i3u46rqvr] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(54, 84, 112, 0.07);
}

.mapping-summary-table-scroll[b-1i3u46rqvr] {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b8c9d9 #eef4fa;
    scrollbar-width: thin;
}

.mapping-summary-table-scroll[b-1i3u46rqvr]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mapping-summary-table-scroll[b-1i3u46rqvr]::-webkit-scrollbar-track {
    background: #eef4fa;
}

.mapping-summary-table-scroll[b-1i3u46rqvr]::-webkit-scrollbar-thumb {
    border: 2px solid #eef4fa;
    border-radius: 10px;
    background: #b8c9d9;
}

.mapping-summary-table[b-1i3u46rqvr] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #3e4c5f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mapping-summary-table th[b-1i3u46rqvr],
.mapping-summary-table td[b-1i3u46rqvr] {
    padding: 6px 10px;
    border-right: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-1i3u46rqvr] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 30px;
    color: #4f6275;
    background: #f5f8fc;
    background-clip: padding-box;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapping-summary-table thead tr:first-child th[b-1i3u46rqvr] {
    height: 32px;
    border-bottom-color: #d8e3ee;
}

.mapping-summary-table thead tr:nth-child(2) th[b-1i3u46rqvr] {
    top: 32px;
    background: #fbfdff;
}

    .mapping-summary-table thead .group-parent-header[b-1i3u46rqvr] {
        color: rgb(79, 98, 117);
        background: linear-gradient(135deg, #f09a4a 0%, #db7131 100%);
    }

.summary-total-row td[b-1i3u46rqvr] {
    position: sticky;
    top: 32px;
    z-index: 5;
    color: #355068;
    background: #edf5fc;
    border-bottom: 1px solid #bfd4e6;
    font-weight: 850;
    padding-top: 4px;
    padding-bottom: 4px;
}

.summary-total-row td:first-child[b-1i3u46rqvr] {
    letter-spacing: 0.08em;
}

.business-group-row td[b-1i3u46rqvr] {
    padding: 6px 11px;
    color: #7e5a2c;
    background: #fff8eb;
    border-bottom-color: #f0dfbb;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-data-row-main td[b-1i3u46rqvr] {
    height: 36px;
}

.summary-data-row:nth-of-type(even) td:not(.group-cell)[b-1i3u46rqvr] {
    background: #fbfdff;
}

.summary-data-row:hover td[b-1i3u46rqvr],
.summary-data-row:hover .group-cell[b-1i3u46rqvr] {
    background: #f2f8fe;
}

.group-cell[b-1i3u46rqvr] {
    color: #445466;
    background: #fafcff;
    font-weight: 700;
    font-size: 0.77rem;
}

.group-cell-mien[b-1i3u46rqvr] {
    color: #315f87;
    background: #eef6fd;
    font-weight: 850;
    text-transform: uppercase;
}

.summary-col-emphasis[b-1i3u46rqvr] {
    font-weight: 650;
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-di[b-1i3u46rqvr] {
    background: rgb(237, 245, 253);
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-den[b-1i3u46rqvr] {
    background: rgb(255, 243, 231);
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-di-cell[b-1i3u46rqvr] {
    background: #eaf4fd;
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-den-cell[b-1i3u46rqvr] {
    background: #fff3e5;
}

.mapping-summary-table td.summary-group-noi-di-cell[b-1i3u46rqvr] {
    background: #f4f9fe;
}

.mapping-summary-table td.summary-group-noi-den-cell[b-1i3u46rqvr] {
    background: #fff8ef;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-di-cell[b-1i3u46rqvr] {
    background: #edf5fd;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-den-cell[b-1i3u46rqvr] {
    background: #fff3e7;
}

.summary-data-row:hover td.summary-group-noi-di-cell[b-1i3u46rqvr] {
    background: #e3f0fc;
}

.summary-data-row:hover td.summary-group-noi-den-cell[b-1i3u46rqvr] {
    background: #ffeccd;
}

.number-cell[b-1i3u46rqvr] {
    color: #31465b;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 650;
}

.text-break-cell[b-1i3u46rqvr] {
    white-space: pre-line;
    font-size: 0.79rem;
}

.table-badge[b-1i3u46rqvr],
.status-badge[b-1i3u46rqvr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.badge-cell[b-1i3u46rqvr] {
    text-align: center;
}

.status-badge-button[b-1i3u46rqvr] {
    font-family: inherit;
    cursor: pointer;
}

.status-badge-button:hover[b-1i3u46rqvr] {
    filter: brightness(0.97);
}

.table-badge--warehouse[b-1i3u46rqvr] {
    border-color: #99c8f0;
    color: #1f5f96;
    background: #eaf5ff;
}

.table-badge--ship[b-1i3u46rqvr] {
    border-color: #c9b7ef;
    color: #6f51ad;
    background: #f4efff;
}

.status-badge--success[b-1i3u46rqvr] {
    border-color: #b9ddc0;
    color: #2f7a3a;
    background: #eefbf0;
}

.status-badge--warning[b-1i3u46rqvr] {
    border-color: #efd58f;
    color: #9b6a0b;
    background: #fff8df;
}

.status-badge--danger[b-1i3u46rqvr] {
    border-color: #ecb0b8;
    color: #bc415f;
    background: #fff0ec;
}

.status-badge--neutral[b-1i3u46rqvr] {
    border-color: #cfdbe7;
    color: #627487;
    background: #f2f6fa;
}

.warehouse-link[b-1i3u46rqvr] {
    display: inline;
    padding: 0;
    border: 0;
    color: #2e78b5;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(46, 120, 181, 0.26);
    text-underline-offset: 2px;
}

.warehouse-link:hover[b-1i3u46rqvr] {
    color: #205d90;
    text-decoration-color: currentColor;
}

.col-mien[b-1i3u46rqvr] { width: 126px; }
.col-khu-vuc[b-1i3u46rqvr] { width: 146px; }
.col-noi[b-1i3u46rqvr] { width: 146px; }
.col-nguon-hang[b-1i3u46rqvr] { width: 126px; }
.col-ten-tau[b-1i3u46rqvr] { width: 156px; }
.col-quantity[b-1i3u46rqvr] { width: 132px; }
.col-status[b-1i3u46rqvr] { width: 150px; }
.col-invoice[b-1i3u46rqvr] { width: 126px; }
.col-ai[b-1i3u46rqvr] { width: 198px; }
.col-doc[b-1i3u46rqvr] { width: 126px; }

.mapping-summary-loading-overlay[b-1i3u46rqvr] {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(250, 252, 255, 0.88);
    backdrop-filter: blur(2px);
}

.mapping-summary-loading-spinner[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dfebf5;
    border-radius: 12px;
    color: #5e748a;
    background: #fff;
    box-shadow: 0 10px 24px rgba(63, 99, 138, 0.12);
    font-size: 0.82rem;
    font-weight: 650;
}

.mapping-summary-spinner[b-1i3u46rqvr] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfebf5;
    border-top-color: #4f8bbd;
    border-radius: 50%;
    animation: mappingSummarySpin-b-1i3u46rqvr 0.75s linear infinite;
}

@keyframes mappingSummarySpin-b-1i3u46rqvr {
    to { transform: rotate(360deg); }
}

.grid-empty-state[b-1i3u46rqvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 150px;
    gap: 8px;
    color: #6d7f92;
    border: 1px dashed #cedbe8;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1280px) {
    /* .summary-filter-layout đã wrap sẵn ở mọi bề rộng. */
    .filter-title[b-1i3u46rqvr] {
        display: none;
    }

    .mapping-summary-stats[b-1i3u46rqvr] {
        grid-template-columns: repeat(5, minmax(115px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-1i3u46rqvr] {
        height: calc(100dvh - 90px);
        padding-inline: 4px;
    }

    .summary-heading__date[b-1i3u46rqvr] {
        display: none;
    }

    .mapping-summary-stats[b-1i3u46rqvr] {
        display: flex;
        overflow-x: auto;
    }

    .mapping-summary-stat-item[b-1i3u46rqvr] {
        min-width: 160px;
    }

    .summary-filter-layout[b-1i3u46rqvr] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-1i3u46rqvr] {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 3px;
    }

    /* Màn hình hẹp: bỏ ràng buộc 1 hàng, cho các filter xuống dòng thay vì bị bóp quá nhỏ.
       Layout lúc này là column nên phải bỏ flex-basis 720px (ở column nó là chiều CAO). */
    .summary-filter-bar.inventory-summary-filter-bar[b-1i3u46rqvr] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        flex: 0 0 auto;
    }

    .filter-actions[b-1i3u46rqvr] {
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* LOẠI KHO/CẢNG: phân biệt rõ nền của "Kho" và "Cảng".
   Đặt cuối file + specificity cao để thắng các rule --loai-kho / :has(...) ở trên. */
.summary-data-row .inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--warehouse-type[b-1i3u46rqvr],
.summary-data-row:has(.inventory-rowspan-cell--loai-kho) .inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--warehouse-type[b-1i3u46rqvr],
.inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--warehouse-type:has(+ .inventory-rowspan-cell--phap-nhan)[b-1i3u46rqvr] {
    color: #14532d !important;
    background: #dcfce7 !important;
    border-left: 4px solid #22c55e !important;
}

.summary-data-row .inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--port[b-1i3u46rqvr],
.summary-data-row:has(.inventory-rowspan-cell--loai-kho) .inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--port[b-1i3u46rqvr],
.inventory-rowspan-cell--loai-kho.inventory-rowspan-cell--port:has(+ .inventory-rowspan-cell--phap-nhan)[b-1i3u46rqvr] {
    color: #7c2d12 !important;
    background: #ffedd5 !important;
    border-left: 4px solid #f97316 !important;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Inventory_VesselOperation.razor.rz.scp.css */
/* Component nằm trong .mail-tab-content (flex column, overflow hidden) của trang cha,
   nên phải là flex child tự giãn — dùng height:100% ở đây sẽ bị collapse. */
.vessel-op-section[b-6pd28ltv9g] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 14px;
    gap: 10px;
    color: #2f3d4f;
}

/* ---------- Filter ---------- */

.vessel-op-filter-panel[b-6pd28ltv9g] {
    flex: 0 0 auto;
    padding: 12px;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffdfb 25%, #f7fafd);
    box-shadow: 0 8px 18px rgba(50, 82, 111, 0.06);
}

.vessel-op-filter-layout[b-6pd28ltv9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.vessel-op-filter-bar[b-6pd28ltv9g] {
    display: grid;
    flex: 1 1 640px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 10px;
}

.vessel-op-filter-bar .filter-field[b-6pd28ltv9g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.vessel-op-filter-bar .filter-field label[b-6pd28ltv9g] {
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Radzen render markup con nên phải dùng ::deep để chỉnh chiều cao/viền cho khớp các filter khác. */
[b-6pd28ltv9g] .vessel-op-filter-bar .rz-datepicker,
[b-6pd28ltv9g] .vessel-op-filter-bar .rz-picker,
[b-6pd28ltv9g] .vessel-op-filter-bar .rz-inputtext {
    width: 100%;
    font-size: 0.8rem;
}

[b-6pd28ltv9g] .vessel-op-filter-bar .rz-datepicker,
[b-6pd28ltv9g] .vessel-op-filter-bar .rz-picker {
    height: 32px;
    border: 1px solid #cdd9e4;
    border-radius: 8px;
    background: #fff;
}

.vessel-op-filter-actions[b-6pd28ltv9g] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-action-btn[b-6pd28ltv9g] {
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.summary-action-btn:hover:not(:disabled)[b-6pd28ltv9g] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.summary-action-btn:disabled[b-6pd28ltv9g] {
    opacity: 0.6;
    cursor: not-allowed;
}

.summary-action-btn--primary[b-6pd28ltv9g] {
    background: #2f7fb5;
}

.summary-action-btn--reset[b-6pd28ltv9g] {
    border-color: #cdd9e4;
    background: #fff;
    color: #4a5c6f;
}

.summary-action-btn--export[b-6pd28ltv9g] {
    background: #2f9e6f;
}

/* ---------- Mini stats ---------- */

.vessel-op-stats[b-6pd28ltv9g] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 8px;
}

.vessel-op-stat-item[b-6pd28ltv9g] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    gap: 10px;
    padding: 9px 12px 9px 15px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 8px 16px rgba(50, 82, 111, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vessel-op-stat-item[b-6pd28ltv9g]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
    content: "";
}

.vessel-op-stat-item:hover[b-6pd28ltv9g] {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(50, 82, 111, 0.14);
}

.vessel-op-stat-item--active[b-6pd28ltv9g] {
    border-color: var(--stat-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stat-accent) 28%, transparent);
}

.vessel-op-stat-item label[b-6pd28ltv9g] {
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    cursor: pointer;
}

.vessel-op-stat-value[b-6pd28ltv9g] {
    color: var(--stat-accent);
    font-size: 1.28rem;
    font-weight: 800;
}

.stat-card--blue[b-6pd28ltv9g] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
}

.stat-card--teal[b-6pd28ltv9g] {
    --stat-accent: #2f9e9e;
    --stat-tint: #f1fbfb;
}

.stat-card--success[b-6pd28ltv9g] {
    --stat-accent: #2f9e6f;
    --stat-tint: #f1fbf6;
}

.stat-card--warning[b-6pd28ltv9g] {
    --stat-accent: #d08a2c;
    --stat-tint: #fdf8ef;
}

.stat-card--danger[b-6pd28ltv9g] {
    --stat-accent: #cc4b4b;
    --stat-tint: #fdf3f3;
}

/* ---------- Table ---------- */

.vessel-op-table-wrapper[b-6pd28ltv9g] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(50, 82, 111, 0.07);
}

.vessel-op-table-scroll[b-6pd28ltv9g] {
    height: 100%;
    overflow: auto;
}

.vessel-op-table[b-6pd28ltv9g] {
    /* Chiều cao thead (padding 9px x2 + line-height ~16px + border 1px).
       Dòng cha đang mở dính ngay dưới mốc này khi cuộn. */
    --vessel-op-head-height: 35px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.vessel-op-table col.col-toggle[b-6pd28ltv9g] {
    width: 38px;
}

.vessel-op-table col.col-vessel[b-6pd28ltv9g] {
    width: 190px;
}

.vessel-op-table col.col-classification[b-6pd28ltv9g] {
    width: 140px;
}

.vessel-op-table col.col-cargo-type[b-6pd28ltv9g] {
    width: 110px;
}

.vessel-op-table col.col-status[b-6pd28ltv9g] {
    width: 140px;
}

.vessel-op-table col.col-date[b-6pd28ltv9g] {
    width: 105px;
}

.vessel-op-table col.col-entity[b-6pd28ltv9g] {
    width: 150px;
}

.vessel-op-table col.col-item[b-6pd28ltv9g] {
    width: 150px;
}

.vessel-op-table col.col-source[b-6pd28ltv9g] {
    width: 130px;
}

.vessel-op-table col.col-quantity[b-6pd28ltv9g] {
    width: 120px;
}

.vessel-op-table col.col-progress[b-6pd28ltv9g] {
    width: 180px;
}

.vessel-op-table col.col-action[b-6pd28ltv9g] {
    width: 92px;
}

.action-head[b-6pd28ltv9g],
.action-cell[b-6pd28ltv9g] {
    text-align: center;
}

.trip-code-cell[b-6pd28ltv9g] {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.72rem;
}

.vessel-op-drill-btn[b-6pd28ltv9g] {
    padding: 3px 10px;
    border: 1px solid #cfe0f5;
    border-radius: 7px;
    background: #eaf2fd;
    color: #27568f;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vessel-op-drill-btn:hover[b-6pd28ltv9g] {
    border-color: #9dc2e8;
    background: #dbe9fa;
}

.vessel-op-table thead th[b-6pd28ltv9g] {
    position: sticky;
    top: 0;
    /* Phải cao hơn z-index của dòng cha đang dính, để header luôn nằm trên. */
    z-index: 5;
    padding: 9px 10px;
    border-bottom: 1px solid #dde7ef;
    background: #eef4f9;
    color: #46586b;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.vessel-op-table td[b-6pd28ltv9g] {
    padding: 7px 10px;
    border-bottom: 1px solid #eef2f6;
    vertical-align: middle;
}

.vessel-op-table .number-head[b-6pd28ltv9g],
.vessel-op-table .number-cell[b-6pd28ltv9g] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Nhập = xanh, Xuất = cam. `--in` / `--out` là cho dòng chi tiết (theo CHIEU_VAN_CHUYEN),
   `--import` / `--export` là cho cột TỔNG NHẬP / TỔNG XUẤT ở cấp cha và cấp nhóm. */
.vessel-op-table .number-head--import[b-6pd28ltv9g],
.vessel-op-table .number-cell--import[b-6pd28ltv9g],
.vessel-op-table .number-cell--in[b-6pd28ltv9g] {
    color: #1f5f8c;
}

.vessel-op-table .number-head--export[b-6pd28ltv9g],
.vessel-op-table .number-cell--export[b-6pd28ltv9g],
.vessel-op-table .number-cell--out[b-6pd28ltv9g] {
    color: #9c5522;
}

.vessel-op-table .number-cell--import[b-6pd28ltv9g],
.vessel-op-table .number-cell--export[b-6pd28ltv9g],
.vessel-op-table .number-cell--in[b-6pd28ltv9g],
.vessel-op-table .number-cell--out[b-6pd28ltv9g] {
    font-weight: 700;
}

.vessel-op-table .record-count-cell[b-6pd28ltv9g] {
    color: #7b8b9c;
    font-size: 0.72rem;
    font-style: italic;
}

.vessel-op-empty[b-6pd28ltv9g] {
    padding: 26px 10px !important;
    color: #8a99a8;
    text-align: center;
}

/* Cấp 1 — dòng tàu (header cha) */
.vessel-op-row--vessel[b-6pd28ltv9g] {
    background: #fbfdff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.vessel-op-row--vessel:hover[b-6pd28ltv9g] {
    background: #f2f8fd;
}

.vessel-op-row--vessel > td[b-6pd28ltv9g] {
    border-bottom: 1px solid #dce6ef;
    font-weight: 700;
}

.vessel-op-row--vessel .vessel-cell[b-6pd28ltv9g] {
    color: #1f4f70;
}

/* Dòng cha đang mở: nền xanh đậm hơn + viền trái để tách khỏi các dòng đóng.
   Đồng thời dính ngay dưới thead khi cuộn dọc, để không trôi mất header của khối đang xem.
   Vì các dòng con nằm ngay sau nó trong cùng <tbody>, dòng cha sẽ tự bị đẩy đi khi
   hết dữ liệu cấp 2/3 của chính nó — đúng hành vi mong muốn. */
.vessel-op-row--vessel.vessel-op-row--expanded > td[b-6pd28ltv9g] {
    position: sticky;
    top: var(--vessel-op-head-height);
    z-index: 3;
    background: #dbecf9;
    /* Kẻ đậm ở đáy dòng cha = cạnh TRÊN của khối đang mở, cân với cạnh dưới 2px. */
    border-bottom: 2px solid #c4d8e8;
}

.vessel-op-row--vessel.vessel-op-row--expanded:hover > td[b-6pd28ltv9g] {
    background: #d2e6f6;
}

/* Viền trái đậm chạy suốt từ dòng cha xuống hết các dòng nhóm -> nhìn ra ngay
   khối nào thuộc chuyến đang mở. */
.vessel-op-row--vessel.vessel-op-row--expanded > td:first-child[b-6pd28ltv9g] {
    box-shadow: inset 3px 0 0 #2f7fb5;
}

.vessel-op-row--vessel.vessel-op-row--expanded > td:last-child[b-6pd28ltv9g] {
    box-shadow: inset -1px 0 0 #b9d5ea;
}

.vessel-op-row--vessel.vessel-op-row--expanded .vessel-cell[b-6pd28ltv9g] {
    color: #15466a;
}

/* Cấp 2 — nhóm phân loại + pháp nhân. Không còn cấp 3 nên dòng này không bấm mở được. */
.vessel-op-row--group[b-6pd28ltv9g] {
    background: #eef5fa;
}

.vessel-op-row--group:hover > td[b-6pd28ltv9g] {
    background: #e3eef7;
}

.vessel-op-row--group > td[b-6pd28ltv9g] {
    color: #46586b;
    font-size: 0.78rem;
    font-weight: 600;
    /* Nền xanh nhạt, khác hẳn nền trắng của các dòng chuyến bên ngoài,
       để khối đang mở nổi bật lên như một mảng riêng. */
    background: #eef5fa;
    /* Trong cùng một nhóm phân loại KHÔNG kẻ ngăn giữa các dòng pháp nhân. */
    border-bottom: none;
}

/* Viền hai bên để thấy rõ phạm vi khối đang mở. */
.vessel-op-row--group > td:first-child[b-6pd28ltv9g] {
    box-shadow: inset 3px 0 0 #b9d5ea;
}

.vessel-op-row--group > td:last-child[b-6pd28ltv9g] {
    box-shadow: inset -1px 0 0 #dbe6ef;
}

/* Ô PHÂN LOẠI (và các ô rowspan khác) gộp cho nhiều pháp nhân cùng phân loại. */
.class-cell[b-6pd28ltv9g] {
    border-right: 1px solid #e3ecf3;
}

.span-cell[b-6pd28ltv9g] {
    vertical-align: middle !important;
}

/* Kẻ ngăn giữa hai nhóm phân loại: đặt trên dòng cuối của nhóm, ĐỒNG THỜI trên các ô rowspan
   (ô rowspan thuộc dòng ĐẦU nên rule theo dòng cuối không với tới được). */
.vessel-op-row--class-last > td[b-6pd28ltv9g],
.span-cell[b-6pd28ltv9g] {
    border-bottom: 1px solid #d7e2ec;
}

/* Nhóm cuối cùng của cả chuyến: kẻ đáy đậm hơn để đóng khung khối đang mở.
   Phải đặt SAU các rule trên, nếu không sẽ bị chúng ghi đè mất. */
.vessel-op-row--group-last > td[b-6pd28ltv9g],
.span-cell--last[b-6pd28ltv9g] {
    border-bottom: 2px solid #c4d8e8;
}

/* Chip pháp nhân bấm được -> lọc chi tiết theo đúng pháp nhân đó. */
.vessel-op-chip--clickable[b-6pd28ltv9g] {
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.vessel-op-chip--clickable:hover[b-6pd28ltv9g] {
    box-shadow: 0 0 0 2px rgba(47, 127, 181, 0.22);
    filter: brightness(0.97);
}

.toggle-cell[b-6pd28ltv9g] {
    text-align: center;
}

.toggle-cell--group[b-6pd28ltv9g] {
    padding-left: 22px !important;
}

.vessel-op-caret[b-6pd28ltv9g] {
    display: inline-block;
    color: #7b95ab;
    font-size: 0.62rem;
    transition: transform 0.15s ease;
}

.vessel-op-caret--open[b-6pd28ltv9g] {
    transform: rotate(90deg);
}

/* Ô pháp nhân chứa nhiều chip nên phải cho xuống dòng, không cắt bằng ellipsis. */
.entity-cell[b-6pd28ltv9g] {
    overflow: hidden;
}

/* ---------- Badges ---------- */

/* Chip dạng nút cho PHÂN LOẠI và PHÁP NHÂN */
.vessel-op-chip-group[b-6pd28ltv9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.vessel-op-chip[b-6pd28ltv9g] {
    display: inline-block;
    max-width: 100%;
    padding: 3px 9px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 7px;
    /* Chip có thể là <span> hoặc <button> -> ép font để hai loại trông giống nhau. */
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vessel-op-chip--default[b-6pd28ltv9g] {
    border-color: #dbe3ea;
    background: #f2f5f8;
    color: #55677a;
}

.vessel-op-chip--import[b-6pd28ltv9g] {
    border-color: #c5ddf0;
    background: #e8f3fb;
    color: #1f5f8c;
}

.vessel-op-chip--export[b-6pd28ltv9g] {
    border-color: #f3d6c1;
    background: #fdefe5;
    color: #9c5522;
}

.vessel-op-chip--internal[b-6pd28ltv9g] {
    border-color: #e0d4ee;
    background: #f4eefb;
    color: #6b459c;
}

.vessel-op-chip--transfer[b-6pd28ltv9g] {
    border-color: #c3e3e2;
    background: #e9f7f7;
    color: #1c7b83;
}

.vessel-op-chip--blend[b-6pd28ltv9g] {
    border-color: #ecdcb6;
    background: #fbf4e2;
    color: #8a6416;
}

/* Phân loại hàng: hàng rời (BULK) hiển thị là "XÁ" — xanh lá */
.vessel-op-chip--cargo-bulk[b-6pd28ltv9g] {
    border-color: #c9e2cd;
    background: #ecf7ee;
    color: #2c6e3a;
}

/* Phân loại hàng: hàng container (FCL/LCL) hiển thị là "CONT" — cam để tách bạch với hàng rời */
.vessel-op-chip--cargo-cont[b-6pd28ltv9g] {
    border-color: #f5d9b8;
    background: #fdf2e4;
    color: #8a5416;
}

/* Không suy ra được loại hàng từ LOAIHANG của chuyến */
.vessel-op-chip--cargo-default[b-6pd28ltv9g] {
    border-color: #dcdfe4;
    background: #f4f5f7;
    color: #5b6473;
}

/* Pháp nhân: mỗi pháp nhân một màu cố định */
.vessel-op-chip--entity-agm[b-6pd28ltv9g] {
    border-color: #cfe0f5;
    background: #eaf2fd;
    color: #27568f;
}

.vessel-op-chip--entity-gad[b-6pd28ltv9g] {
    border-color: #cbe6d8;
    background: #e9f7f0;
    color: #1f7a55;
}

.vessel-op-chip--entity-ka[b-6pd28ltv9g] {
    border-color: #f0d8cd;
    background: #fcefe8;
    color: #9a4f2c;
}

.vessel-op-chip--entity-default[b-6pd28ltv9g] {
    border-color: #dbe3ea;
    background: #f2f5f8;
    color: #55677a;
}

/* ---------- Chuyến tàu (CODE_TAU) ---------- */

/* Mỗi dòng là MỘT chuyến (1 CODE_TAU = 1 tàu mẹ). Danh sách sắp theo ETA nên các chuyến
   của cùng một tàu nằm rải rác — vì vậy mỗi dòng tự mang đủ tên tàu + mã chuyến,
   và tàu nào có nhiều chuyến trong kỳ thì gắn badge đếm ngay trên dòng. */
.voyage-id[b-6pd28ltv9g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.voyage-name-line[b-6pd28ltv9g] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.voyage-multi[b-6pd28ltv9g] {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #e4eef7;
    color: #37658b;
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
}

.voyage-name[b-6pd28ltv9g] {
    color: #37516a;
    font-size: 0.76rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voyage-code[b-6pd28ltv9g] {
    color: #7b8b9c;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.66rem;
    font-weight: 600;
}

.vessel-op-stat-sub[b-6pd28ltv9g] {
    color: #8a99a8;
    font-size: 0.82rem;
    font-weight: 700;
}

.vessel-op-status[b-6pd28ltv9g] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vessel-op-status--done[b-6pd28ltv9g] {
    background: #e4f6ed;
    color: #1f7a55;
}

.vessel-op-status--active[b-6pd28ltv9g] {
    background: #e2f4f6;
    color: #1c7b83;
}

.vessel-op-status--pending[b-6pd28ltv9g] {
    background: #fbf1de;
    color: #96631a;
}

.vessel-op-status--error[b-6pd28ltv9g] {
    background: #fbe6e6;
    color: #a63535;
}

.vessel-op-direction[b-6pd28ltv9g] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
}

.vessel-op-direction--in[b-6pd28ltv9g] {
    background: #e4f1fb;
    color: #1f5f8c;
}

.vessel-op-direction--out[b-6pd28ltv9g] {
    background: #fdeee4;
    color: #9c5522;
}

.vessel-op-direction--none[b-6pd28ltv9g] {
    background: #f0f2f4;
    color: #7b8b9c;
}

/* ---------- Progress bar ---------- */

.vessel-op-progress[b-6pd28ltv9g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Track là flex để phần trong ngưỡng và phần vượt 100% nằm nối tiếp nhau. */
.vessel-op-progress-track[b-6pd28ltv9g] {
    display: flex;
    flex: 1 1 auto;
    height: 8px;
    min-width: 60px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef4;
}

.vessel-op-progress-fill[b-6pd28ltv9g] {
    height: 100%;
    transition: width 0.25s ease;
}

.vessel-op-progress-fill:first-child[b-6pd28ltv9g] {
    border-radius: 999px 0 0 999px;
}

.vessel-op-progress-fill:last-child[b-6pd28ltv9g] {
    border-radius: 0 999px 999px 0;
}

.vessel-op-progress-fill:only-child[b-6pd28ltv9g] {
    border-radius: 999px;
}

/* Phần vượt quá 100% -> đỏ để cảnh báo xuất nhiều hơn nhập. */
.vessel-op-progress-fill--overflow[b-6pd28ltv9g] {
    background: linear-gradient(90deg, #e05c5c, #cc3b3b);
}

.vessel-op-progress-fill--complete[b-6pd28ltv9g] {
    background: linear-gradient(90deg, #34a97b, #2f9e6f);
}

.vessel-op-progress-fill--high[b-6pd28ltv9g] {
    background: linear-gradient(90deg, #48a7d4, #2f7fb5);
}

.vessel-op-progress-fill--low[b-6pd28ltv9g] {
    background: linear-gradient(90deg, #e0a94a, #d08a2c);
}

.vessel-op-progress-fill--empty[b-6pd28ltv9g] {
    background: transparent;
}

.vessel-op-progress-label[b-6pd28ltv9g] {
    flex: 0 0 auto;
    min-width: 44px;
    color: #46586b;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vessel-op-progress-label--overflow[b-6pd28ltv9g] {
    color: #cc3b3b;
}

@media (max-width: 1200px) {
    .vessel-op-stats[b-6pd28ltv9g] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_KH.razor.rz.scp.css */
#ControlRegion[b-rcgvt2bcch] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    height: calc(100vh - 72px);
    min-height: 640px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, 0.08), transparent 28rem),
        #f3f6fb;
}

.compare-root-card[b-rcgvt2bcch],
.mail-tab-content[b-rcgvt2bcch],
.compare-native-layout[b-rcgvt2bcch],
.mail-detail-panel[b-rcgvt2bcch] {
    min-height: 0;
}

.compare-root-card[b-rcgvt2bcch] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(28, 50, 92, 0.11);
}

.mail-native-tabs[b-rcgvt2bcch] {
    display: inline-flex;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mail-native-tab[b-rcgvt2bcch] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f6f82;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mail-native-tab:hover[b-rcgvt2bcch] {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(56, 189, 248, 0.16);
}

.mail-native-tab--active[b-rcgvt2bcch] {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, 0.35);
}

.mail-tab-content[b-rcgvt2bcch],
.compare-native-layout[b-rcgvt2bcch],
.mail-detail-panel[b-rcgvt2bcch] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-filter-header[b-rcgvt2bcch] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 20px 24px 15px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.comparison-filter-bar[b-rcgvt2bcch],
.queue-filter-actions[b-rcgvt2bcch] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.comparison-filter-bar[b-rcgvt2bcch] {
    flex: 1 1 760px;
    gap: 12px;
    margin-bottom: 0;
}

.queue-filter-actions[b-rcgvt2bcch] {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.filter-field[b-rcgvt2bcch] {
    display: flex;
    flex: 1 1 150px;
    min-width: 135px;
    max-width: 220px;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-rcgvt2bcch] {
    color: #475569;
    font-size: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.025em;
}

.filter-field > input[b-rcgvt2bcch],
.native-multiselect > summary[b-rcgvt2bcch] {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #d5dee8;
    border-radius: 9px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 0.76rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.filter-field > input[b-rcgvt2bcch] {
    padding: 0 10px;
}

.filter-field > input:focus[b-rcgvt2bcch],
.native-multiselect[open] > summary[b-rcgvt2bcch] {
    outline: none;
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
}

.mail-action--daily-report[b-rcgvt2bcch] {
    margin-left: auto;
}

.daily-issue-modal-backdrop[b-rcgvt2bcch] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-rcgvt2bcch] {
    width: min(1180px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-rcgvt2bcch] { margin: 0; font-size: 1rem; }

.daily-issue-modal__filters[b-rcgvt2bcch] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__body[b-rcgvt2bcch] { min-height: 260px; overflow: auto; padding: 14px 16px 16px; }
.daily-issue-table-wrap[b-rcgvt2bcch] { max-height: calc(100vh - 205px); overflow: auto; border: 1px solid #dbe3ec; border-radius: 8px; }
.daily-issue-table[b-rcgvt2bcch] { width: 100%; min-width: 1200px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.daily-issue-table th[b-rcgvt2bcch], .daily-issue-table td[b-rcgvt2bcch] { padding: 7px 8px; border-right: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; text-align: center; white-space: nowrap; }
.daily-issue-table th[b-rcgvt2bcch] { position: sticky; top: 0; z-index: 4; background: #eef4f8; color: #334155; font-weight: 800; }
.daily-issue-table th:first-child[b-rcgvt2bcch], .daily-issue-table td:first-child[b-rcgvt2bcch] { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; }
.daily-issue-table th:first-child[b-rcgvt2bcch] { z-index: 6; background: #e8f1f3; }
.daily-issue-date[b-rcgvt2bcch] { color: #0f172a; font-weight: 700; }
.daily-issue-number[b-rcgvt2bcch] { color: #1e293b; font-variant-numeric: tabular-nums; }
.daily-issue-number--warning[b-rcgvt2bcch] { color: #b42318; background: #fff4ed; font-weight: 800; }
.daily-issue-value[b-rcgvt2bcch] { width: 100%; min-width: 58px; padding: 3px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: inherit; }
.daily-issue-value--clickable[b-rcgvt2bcch] { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; cursor: pointer; }
.daily-issue-number--warning .daily-issue-value--clickable[b-rcgvt2bcch] { color: #b42318; background: #fff7ed; border-color: #fed7aa; }
.daily-issue-value:disabled[b-rcgvt2bcch] { opacity: 1; }
.daily-issue-loading[b-rcgvt2bcch], .daily-issue-empty[b-rcgvt2bcch] { display: flex; min-height: 210px; align-items: center; justify-content: center; color: #64748b; border: 1px dashed #cbd5e1; border-radius: 8px; }
.daily-issue-group-row th[b-rcgvt2bcch] { top: 0; }
.daily-issue-table thead tr:nth-child(2) th[b-rcgvt2bcch] { top: 35px; z-index: 5; }
.daily-issue-group--info[b-rcgvt2bcch] { background: #eef6ff !important; }
.daily-issue-group--status[b-rcgvt2bcch] { background: #f0fdf4 !important; }
.daily-issue-group--data[b-rcgvt2bcch] { background: #fff7ed !important; }
.daily-issue-group--documents[b-rcgvt2bcch] { background: #fdf2f8 !important; }
.daily-issue-number.daily-issue-group--info[b-rcgvt2bcch] { background: #f8fbff !important; }
.daily-issue-number.daily-issue-group--status[b-rcgvt2bcch] { background: #f7fef9 !important; }
.daily-issue-number.daily-issue-group--data[b-rcgvt2bcch] { background: #fffaf3 !important; }
.daily-issue-number.daily-issue-group--documents[b-rcgvt2bcch] { background: #fff8fb !important; }
.daily-issue-number--warning.daily-issue-group--info[b-rcgvt2bcch] { background: #eaf3ff !important; }
.daily-issue-number--warning.daily-issue-group--status[b-rcgvt2bcch] { background: #ecfdf3 !important; }
.daily-issue-number--warning.daily-issue-group--data[b-rcgvt2bcch] { background: #fff4e6 !important; }
.daily-issue-number--warning.daily-issue-group--documents[b-rcgvt2bcch] { background: #fce7f3 !important; }

[b-rcgvt2bcch] .compare-filter-bar-native .rz-datepicker,
[b-rcgvt2bcch] .compare-filter-bar-native .rz-picker,
[b-rcgvt2bcch] .compare-filter-bar-native .rz-inputtext {
    width: 100% !important;
}

[b-rcgvt2bcch] .compare-filter-bar-native .rz-datepicker,
[b-rcgvt2bcch] .compare-filter-bar-native .rz-picker {
    min-height: 34px;
    border: 1px solid #d5dee8 !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

[b-rcgvt2bcch] .compare-filter-bar-native .rz-state-focus,
[b-rcgvt2bcch] .compare-filter-bar-native .rz-focus {
    border-color: #8aa8f4 !important;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1) !important;
}

.native-multiselect[b-rcgvt2bcch] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-rcgvt2bcch]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-rcgvt2bcch] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-rcgvt2bcch]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease;
}

.native-multiselect[open] .native-multiselect__arrow[b-rcgvt2bcch]::before {
    transform: rotate(-135deg) translateY(-1px);
}

.native-multiselect__menu[b-rcgvt2bcch] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5ee;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.native-multiselect__header[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 8px;
    font-size: 0.75rem;
}

.native-multiselect__header button[b-rcgvt2bcch] {
    border: 0;
    background: none;
    color: var(--mail-primary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.native-multiselect__search-wrap[b-rcgvt2bcch] { padding: 6px 4px 2px; }

.native-multiselect__search[b-rcgvt2bcch] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}

.native-multiselect__search:focus[b-rcgvt2bcch] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.native-multiselect__options[b-rcgvt2bcch] {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    overflow: auto;
}

.native-multiselect__select-all[b-rcgvt2bcch] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 2px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.native-multiselect__no-results[b-rcgvt2bcch] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.native-multiselect__options label[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 5px;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.76rem;
}

.native-multiselect__options label:hover[b-rcgvt2bcch] {
    background: #eef4ff;
}

.native-multiselect__empty[b-rcgvt2bcch] {
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.mail-action[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
}

.mail-action:hover:not(:disabled)[b-rcgvt2bcch] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-rcgvt2bcch] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mail-action--primary[b-rcgvt2bcch] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.mail-action--secondary[b-rcgvt2bcch] {
    color: #344256;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--export[b-rcgvt2bcch] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
    box-shadow: 0 7px 16px rgba(18, 150, 111, 0.18);
}

.mail-action--toggle[b-rcgvt2bcch] {
    color: #4b5a6d;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--toggle:hover:not(:disabled)[b-rcgvt2bcch] {
    border-color: #9db2dd;
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.12);
}

.mail-action--toggle-active[b-rcgvt2bcch] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.filter-extra-panel[b-rcgvt2bcch] {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(760px, calc(100vw - 60px));
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--mail-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.queue-view-toolbar[b-rcgvt2bcch] {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.queue-view-overall-stats[b-rcgvt2bcch] {
    display: grid;
    grid-template-columns: repeat(3, minmax(146px, 0.8fr)) minmax(390px, 3.3fr);
    gap: 8px;
    width: 100%;
}

.overall-stat-card[b-rcgvt2bcch] {
    position: relative;
    display: flex;
    height: 60px;
    min-height: 60px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.overall-stat-card[b-rcgvt2bcch]::before {
    display: none;
}

.overall-stat-card--total[b-rcgvt2bcch] {
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.08);
}

.overall-stat-card--clickable[b-rcgvt2bcch] {
    cursor: pointer;
}

.overall-stat-card--clickable:hover[b-rcgvt2bcch] {
    z-index: 1;
    border-color: #7ea2f3;
    box-shadow: 0 8px 20px rgba(36, 87, 230, 0.12);
    transform: translateY(-1px);
}

.overall-stat-card--highlight[b-rcgvt2bcch] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, 0.09),
        0 0 8px rgba(125, 211, 252, 0.12) !important;
}

.overall-stat-card--highlight *[b-rcgvt2bcch] {
    color: #0c4a6e !important;
}

.overall-stat-card--active[b-rcgvt2bcch] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--active *[b-rcgvt2bcch] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-rcgvt2bcch]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, 0.25) 260deg,
        #67e8f9 292deg,
        #fff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.95));
    animation: overall-neon-border-b-rcgvt2bcch 1.8s linear infinite;
}

@keyframes overall-neon-border-b-rcgvt2bcch {
    to { --overall-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-rcgvt2bcch]::after { animation: none; }
}

.overall-stat-card--disabled[b-rcgvt2bcch] {
    pointer-events: none;
    opacity: 0.54;
}

.overall-stat-label[b-rcgvt2bcch],
.overall-stat-lines[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-stat-label[b-rcgvt2bcch] {
    justify-content: center;
    min-width: 52px;
    padding: 4px 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.overall-stat-lines[b-rcgvt2bcch] {
    flex: 1;
    flex-direction: column;
    padding: 4px 7px;
}

.stat-line-count[b-rcgvt2bcch] {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.stat-line-kg[b-rcgvt2bcch] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-line-perc[b-rcgvt2bcch] {
    margin-top: 4px;
    color: #718096;
    font-size: 0.64rem;
}

.compare-mini-row[b-rcgvt2bcch] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.compare-overall-filter-link[b-rcgvt2bcch] {
    min-height: 20px;
    padding: 0.06rem 0.42rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.compare-overall-filter-link--active[b-rcgvt2bcch] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.compare-overall-filter-link:disabled[b-rcgvt2bcch] {
    opacity: 0.55;
}

.overall-stat-card-group[b-rcgvt2bcch] {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 7px;
}

.overall-stat-card--mini[b-rcgvt2bcch] {
    min-width: 0;
    height: 28px;
    min-height: 28px;
    box-shadow: none;
    border-radius: 8px;
    background: #fff;
}

.overall-stat-card--mini .overall-stat-lines[b-rcgvt2bcch] {
    min-width: 0;
    padding: 3px 7px;
}

.overall-stat-card--mini .overall-stat-label[b-rcgvt2bcch] {
    justify-content: flex-start;
    padding: 3px 7px;
    color: #526174;
    background: #fbfcfe;
    font-size: 0.58rem;
    text-align: left;
}

.overall-stat-card--mini .stat-line-count[b-rcgvt2bcch] {
    color: #c94e2d;
    font-size: 0.76rem;
}

.compare-grid-wrapper[b-rcgvt2bcch] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: #fff;
}

.datamail-grid-scroll[b-rcgvt2bcch] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-rcgvt2bcch] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-rcgvt2bcch],
.mail-native-table td[b-rcgvt2bcch] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead th[b-rcgvt2bcch] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 24px;
    color: #536174;
    background: #f3f6fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.mail-native-table thead .compare-main-header th[colspan][b-rcgvt2bcch] {
    color: #9a4f1e;
    background: #fff5e8;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-di[b-rcgvt2bcch],
.mail-native-table thead .compare-main-header th.compare-group-noi-di[colspan][b-rcgvt2bcch],
.mail-native-table thead th.compare-group-noi-di[b-rcgvt2bcch] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-den[b-rcgvt2bcch],
.mail-native-table thead .compare-main-header th.compare-group-noi-den[colspan][b-rcgvt2bcch],
.mail-native-table thead th.compare-group-noi-den[b-rcgvt2bcch] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table thead .compare-main-header th[rowspan][b-rcgvt2bcch] {
    border-bottom-color: #d7dee7;
}

.mail-native-table .compare-subheader th[b-rcgvt2bcch] {
    top: 24px;
    z-index: 4;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff5e8;
    border-top: 0;
    color: #9a4f1e;
}

.mail-native-table .compare-subheader th.compare-group-noi-di[b-rcgvt2bcch] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table .compare-subheader th.compare-group-noi-den[b-rcgvt2bcch] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table tbody tr:nth-child(even)[b-rcgvt2bcch] {
    background: #fbfcfe;
}

.mail-native-table tbody td.compare-group-noi-di[b-rcgvt2bcch] {
    background: #f5fcfa;
}

.mail-native-table tbody td.compare-group-noi-den[b-rcgvt2bcch] {
    background: #fffaf0;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-di[b-rcgvt2bcch] {
    background: #eef8f5;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-den[b-rcgvt2bcch] {
    background: #fff4dc;
}

.mail-native-table tbody tr:hover[b-rcgvt2bcch],
.mail-native-table tbody tr.mail-row-selected[b-rcgvt2bcch] {
    background: #edf3ff;
}

.mail-native-table tbody tr:hover td.compare-group-noi-di[b-rcgvt2bcch],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-di[b-rcgvt2bcch] {
    background: #def7ef;
}

.mail-native-table tbody tr:hover td.compare-group-noi-den[b-rcgvt2bcch],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-den[b-rcgvt2bcch] {
    background: #ffedc2;
}

.mail-native-table tbody td[b-rcgvt2bcch] {
    height: 27px;
}

.mail-cell-warehouse[b-rcgvt2bcch] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.mail-cell-plate[b-rcgvt2bcch],
.mail-code[b-rcgvt2bcch],
.mail-direction[b-rcgvt2bcch],
.mail-cell-mono[b-rcgvt2bcch] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-plate[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f3f6fa;
    color: #24415f;
    letter-spacing: 0.04em;
}

.mail-code[b-rcgvt2bcch],
.mail-direction[b-rcgvt2bcch] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
    color: #174ea6;
}

.queue-status-badge[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.queue-status-badge--error[b-rcgvt2bcch] {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-rcgvt2bcch] {
    background-color: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-rcgvt2bcch] {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-rcgvt2bcch] {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-rcgvt2bcch] {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #1f2937;
}

.return-goods-badge[b-rcgvt2bcch] {
    display: inline-flex;
    min-width: 58px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-goods-badge--yes[b-rcgvt2bcch] {
    color: #b42318;
    background: #fff1f2;
    border-color: #fda4af;
}

.qty-diff-badge[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.loss-quantity-value[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.loss-quantity-value--positive[b-rcgvt2bcch] {
    color: #b91c1c;
}

.loss-quantity-value--negative[b-rcgvt2bcch] {
    color: #047857;
}

.loss-quantity-value--neutral[b-rcgvt2bcch] {
    color: #64748b;
    font-weight: 700;
}

/* Nhãn <Hợp lệ> / <Official> khi chưa có link — hiển thị mờ, không bấm được (giống Compare). */
.document-link-item--disabled[b-rcgvt2bcch],
.document-link-item--disabled:hover[b-rcgvt2bcch] {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.62;
    pointer-events: none;
    transform: none;
}

/* Ô "Chưa có" của SL NHẬP KHO KH / SL HÓA ĐƠN — cùng style với Compare. */
.invoice-quantity-missing[b-rcgvt2bcch] {
    color: #dc2626;
    font-weight: 700;
}

.document-link-list[b-rcgvt2bcch] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.document-link-list--multi[b-rcgvt2bcch] {
    gap: 5px;
}

.document-link-item[b-rcgvt2bcch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #c8daf7;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.document-link-item:hover[b-rcgvt2bcch] {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}

.document-link-item--primary[b-rcgvt2bcch] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-rcgvt2bcch] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.mail-native-pager[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-rcgvt2bcch] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager select[b-rcgvt2bcch],
.mail-native-pager button[b-rcgvt2bcch] {
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.mail-native-pager button[b-rcgvt2bcch] {
    min-width: 30px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-rcgvt2bcch] {
    opacity: 0.4;
    cursor: default;
}

.comparison-loading-overlay[b-rcgvt2bcch] {
    position: absolute;
    inset: 0 0 45px;
    z-index: 10;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.comparison-loading-skeleton[b-rcgvt2bcch] {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px;
}

.comparison-skeleton-row[b-rcgvt2bcch] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.comparison-skeleton-cell[b-rcgvt2bcch] {
    height: 13px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 300% 100%;
    animation: compareSkeletonPulse-b-rcgvt2bcch 1.2s infinite;
}

.grid-empty-state[b-rcgvt2bcch] {
    margin: 0 24px 14px;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes compareSkeletonPulse-b-rcgvt2bcch {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-rcgvt2bcch] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .overall-stat-card-group[b-rcgvt2bcch] {
        grid-template-columns: repeat(3, minmax(118px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-rcgvt2bcch] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .compare-root-card[b-rcgvt2bcch],
    .mail-tab-content[b-rcgvt2bcch],
    .compare-native-layout[b-rcgvt2bcch],
    .mail-detail-panel[b-rcgvt2bcch] {
        overflow: visible;
    }

    .queue-filter-header[b-rcgvt2bcch] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
    }

    .comparison-filter-bar[b-rcgvt2bcch],
    .queue-filter-actions[b-rcgvt2bcch] {
        width: 100%;
        margin-left: 0;
    }

    .comparison-filter-bar[b-rcgvt2bcch] {
        gap: 8px;
    }

    .filter-field[b-rcgvt2bcch] {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-extra-panel[b-rcgvt2bcch] {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .queue-view-toolbar[b-rcgvt2bcch] {
        padding: 14px 12px;
    }

    .queue-view-overall-stats[b-rcgvt2bcch] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .overall-stat-card-group[b-rcgvt2bcch] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .compare-grid-wrapper[b-rcgvt2bcch] {
        min-height: 480px;
        margin: 0 8px;
    }

    .grid-empty-state[b-rcgvt2bcch],
    .mail-native-pager[b-rcgvt2bcch] {
        margin-right: 8px;
        margin-left: 8px;
    }

    .mail-native-pager[b-rcgvt2bcch] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_KH_Summary.razor.rz.scp.css */
:global(body)[b-p6tzn5q598] {
    overflow: hidden;
}

#ControlRegion[b-p6tzn5q598] {
    height: calc(100dvh - 112px);
    min-height: 540px;
    overflow: hidden;
    padding: 0 10px 10px;
    color: #2f3d4f;
    background:
        radial-gradient(circle at 10% 0%, rgba(112, 169, 196, 0.11), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(255, 206, 160, 0.15), transparent 20rem),
        linear-gradient(180deg, #fffefd 0%, #f9fbff 100%);
}

[b-p6tzn5q598] .summary-page-card {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e6edf4;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(48, 79, 108, 0.08);
}

.mapping-summary-section[b-p6tzn5q598] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    gap: 10px;
}

.mapping-summary-stats[b-p6tzn5q598] {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    flex: 0 0 auto;
    gap: 8px;
}

.mapping-summary-stat-item[b-p6tzn5q598] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 10px;
    padding: 9px 12px 9px 15px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 10px 20px rgba(50, 82, 111, 0.1);
}

.mapping-summary-stat-item[b-p6tzn5q598]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
    content: "";
}

.mapping-summary-stat-item label[b-p6tzn5q598] {
    max-width: 125px;
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-p6tzn5q598] {
    min-width: 38px;
    color: var(--stat-accent);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card--warning[b-p6tzn5q598] { --stat-accent: #d2862c; --stat-tint: #fff8ee; }
.stat-card--blue[b-p6tzn5q598] { --stat-accent: #4f7fd4; --stat-tint: #f1f6ff; }
.stat-card--teal[b-p6tzn5q598] { --stat-accent: #2d8a78; --stat-tint: #eefbf7; }
.stat-card--rose[b-p6tzn5q598] { --stat-accent: #cf5b6f; --stat-tint: #fff1f4; }
.stat-card--violet[b-p6tzn5q598] { --stat-accent: #7a67c7; --stat-tint: #f4f1ff; }

.clickable-stat[b-p6tzn5q598] {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.clickable-stat:hover[b-p6tzn5q598] {
    border-color: color-mix(in srgb, var(--stat-accent) 40%, white);
    box-shadow: 0 10px 20px rgba(61, 100, 136, 0.14);
    transform: translateY(-1px);
}

.clickable-stat.active[b-p6tzn5q598] {
    border-color: var(--stat-accent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--stat-accent) 16%, transparent),
        0 14px 28px color-mix(in srgb, var(--stat-accent) 18%, transparent);
}

.filter-container[b-p6tzn5q598] {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) auto;
    align-items: end;
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mapping-filter-bar[b-p6tzn5q598] {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 8px;
    min-width: 0;
}

.filter-field > input[b-p6tzn5q598],
.native-multiselect > summary[b-p6tzn5q598] {
    width: 100% !important;
    height: 34px;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #d8e3ed;
    border-radius: 8px;
    color: #4b5d70;
    background: #fff;
    box-shadow: none;
    font-size: 0.76rem;
}

.summary-filter-panel[b-p6tzn5q598] {
    flex: 0 0 auto;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-layout[b-p6tzn5q598] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.summary-filter-bar[b-p6tzn5q598] {
    display: grid;
    grid-template-columns: 168px 168px repeat(3, 158px);
    gap: 0.55rem;
    flex: 0 1 auto;
    min-width: 0;
    align-items: end;
}

.business-tab-row[b-p6tzn5q598] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.business-tab-button[b-p6tzn5q598] {
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    color: #516579;
    background: #ffffff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.business-tab-button:hover:not(:disabled)[b-p6tzn5q598] {
    border-color: #f0a164;
    color: #a9511d;
    background: #fff8ef;
}

.business-tab-button.active[b-p6tzn5q598] {
    border-color: #df7a35;
    color: #ffffff;
    background: #df7a35;
    box-shadow: 0 6px 14px rgba(223, 122, 53, 0.2);
}

.business-tab-button:disabled[b-p6tzn5q598] {
    cursor: default;
    opacity: 0.62;
}

.filter-field[b-p6tzn5q598] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.filter-field label[b-p6tzn5q598] {
    color: #66788a;
    font-size: 0.68rem;
    font-weight: 750;
}

[b-p6tzn5q598] .summary-filter-bar .rz-inputtext,
[b-p6tzn5q598] .summary-filter-bar .rz-dropdown,
[b-p6tzn5q598] .summary-filter-bar .rz-datepicker,
[b-p6tzn5q598] .summary-filter-bar .rz-multiselect,
[b-p6tzn5q598] .summary-filter-bar .filter-select,
[b-p6tzn5q598] .summary-filter-bar .rz-picker {
    width: 100% !important;
    min-height: 34px;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-p6tzn5q598] .summary-filter-bar .rz-state-focus,
[b-p6tzn5q598] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.native-multiselect[b-p6tzn5q598] {
    position: relative;
    min-width: 0;
}

.native-multiselect > summary[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}

.native-multiselect > summary[b-p6tzn5q598]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-p6tzn5q598] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-p6tzn5q598] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-p6tzn5q598] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-p6tzn5q598] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__options[b-p6tzn5q598] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-p6tzn5q598] {
    background: #fff5ec;
}

.native-multiselect__options input[b-p6tzn5q598] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-p6tzn5q598] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-p6tzn5q598] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}

.filter-actions[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.summary-action-btn[b-p6tzn5q598] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

[b-p6tzn5q598] .filter-actions .rz-button {
    min-height: 28px;
    padding: 0.1rem 0.66rem;
    border-width: 1px;
    border-radius: 8px;
}

.summary-action-btn-search[b-p6tzn5q598],
.summary-action-btn-reset[b-p6tzn5q598],
.summary-action-btn-export[b-p6tzn5q598] { background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%); }
.summary-action-btn-search[b-p6tzn5q598] { color: #9a3412; border-color: #fde7d3; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05); }
.summary-action-btn-reset[b-p6tzn5q598] { color: #475569; border-color: #e2e8f0; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04); }
.summary-action-btn-export[b-p6tzn5q598] { color: #0f766e; border-color: #ccfbf1; box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05); }
.summary-action-btn:hover:not(:disabled)[b-p6tzn5q598] { transform: translateY(-1px); }

.summary-action-btn--primary[b-p6tzn5q598] {
    color: #9a3412;
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1);
}

.summary-action-btn--reset[b-p6tzn5q598] {
    border-color: #cbd5e1;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.summary-action-btn--export[b-p6tzn5q598] {
    border-color: #5eead4;
    color: #0f766e;
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.summary-action-btn--primary:hover:not(:disabled)[b-p6tzn5q598] { border-color: #f97316; box-shadow: 0 7px 14px rgba(249, 115, 22, 0.16); }
.summary-action-btn--reset:hover:not(:disabled)[b-p6tzn5q598] { border-color: #94a3b8; box-shadow: 0 7px 14px rgba(15, 23, 42, 0.09); }
.summary-action-btn--export:hover:not(:disabled)[b-p6tzn5q598] { border-color: #14b8a6; box-shadow: 0 7px 14px rgba(20, 184, 166, 0.16); }

.summary-action-btn:disabled[b-p6tzn5q598] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.mapping-summary-table-wrapper[b-p6tzn5q598] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(54, 84, 112, 0.07);
}

.mapping-summary-table-scroll[b-p6tzn5q598] {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b8c9d9 #eef4fa;
    scrollbar-width: thin;
}

.mapping-summary-table-scroll[b-p6tzn5q598]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mapping-summary-table-scroll[b-p6tzn5q598]::-webkit-scrollbar-track {
    background: #eef4fa;
}

.mapping-summary-table-scroll[b-p6tzn5q598]::-webkit-scrollbar-thumb {
    border: 2px solid #eef4fa;
    border-radius: 10px;
    background: #b8c9d9;
}

.mapping-summary-table[b-p6tzn5q598] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #3e4c5f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mapping-summary-table th[b-p6tzn5q598],
.mapping-summary-table td[b-p6tzn5q598] {
    padding: 6px 10px;
    border-right: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-p6tzn5q598] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 30px;
    color: #4f6275;
    background: #f5f8fc;
    background-clip: padding-box;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapping-summary-table thead tr:first-child th[b-p6tzn5q598] {
    height: 32px;
    border-bottom-color: #d8e3ee;
}

.mapping-summary-table thead tr:nth-child(2) th[b-p6tzn5q598] {
    top: 32px;
    background: #fbfdff;
}

    .mapping-summary-table thead .group-parent-header[b-p6tzn5q598] {
        color: rgb(79, 98, 117);
        background: linear-gradient(135deg, #f09a4a 0%, #db7131 100%);
    }

.summary-total-row td[b-p6tzn5q598] {
    position: sticky;
    top: 32px;
    z-index: 5;
    color: #355068;
    background: #edf5fc;
    border-bottom: 1px solid #bfd4e6;
    font-weight: 850;
    padding-top: 4px;
    padding-bottom: 4px;
}

.summary-total-row td:first-child[b-p6tzn5q598] {
    letter-spacing: 0.08em;
}

.business-group-row td[b-p6tzn5q598] {
    padding: 6px 11px;
    color: #7e5a2c;
    background: #fff8eb;
    border-bottom-color: #f0dfbb;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-data-row-main td[b-p6tzn5q598] {
    height: 36px;
}

.summary-data-row:nth-of-type(even) td:not(.group-cell)[b-p6tzn5q598] {
    background: #fbfdff;
}

.summary-data-row:hover td[b-p6tzn5q598],
.summary-data-row:hover .group-cell[b-p6tzn5q598] {
    background: #f2f8fe;
}

.group-cell[b-p6tzn5q598] {
    --group-accent: #6d86a3;
    --group-bg: #fafcff;
    --group-bg-hover: #f2f8fe;
    --group-text: #445466;
    --group-pill-bg: rgba(255, 255, 255, 0.72);
    position: relative;
    color: #445466;
    background: var(--group-bg) !important;
    font-weight: 700;
    font-size: 0.77rem;
    vertical-align: top;
}

.summary-data-row:hover .group-cell[b-p6tzn5q598] {
    background: var(--group-bg) !important;
}

.group-sticky-label[b-p6tzn5q598] {
    position: sticky;
    top: 70px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--group-accent) 24%, white);
    border-radius: 8px;
    color: var(--group-text);
    background: var(--group-pill-bg) !important;
    box-shadow: 0 5px 14px rgba(31, 45, 61, 0.08);
    line-height: 1.2;
    text-align: center;
    backdrop-filter: blur(2px);
}

.group-cell-mien[b-p6tzn5q598] {
    color: var(--group-text);
    font-weight: 850;
    text-transform: uppercase;
}

.group-cell-phan-loai[b-p6tzn5q598] {
    color: var(--group-text);
    font-weight: 850;
    text-transform: uppercase;
}

.group-cell-vehicle[b-p6tzn5q598] {
    color: var(--group-text);
    font-weight: 800;
}

.group-tone-domestic[b-p6tzn5q598] {
    --group-accent: #3f8f61;
    --group-bg: #e6f6e9;
    --group-bg-hover: #e6f6e9;
    --group-text: #2f714a;
    --group-pill-bg: #d9f0dd;
}

.group-tone-import[b-p6tzn5q598] {
    --group-accent: #8a66bf;
    --group-bg: #f0e9ff;
    --group-bg-hover: #f0e9ff;
    --group-text: #684c99;
    --group-pill-bg: #e6dcfb;
}

.group-tone-south[b-p6tzn5q598] {
    --group-accent: #1f8a70;
    --group-bg: #e4f6ef;
    --group-bg-hover: #e4f6ef;
    --group-text: #176b59;
    --group-pill-bg: #d8f0e8;
}

.group-tone-north[b-p6tzn5q598] {
    --group-accent: #4169b1;
    --group-bg: #e8f0ff;
    --group-bg-hover: #e8f0ff;
    --group-text: #315691;
    --group-pill-bg: #dde8ff;
}

.group-tone-central[b-p6tzn5q598] {
    --group-accent: #bd7a22;
    --group-bg: #fff1d9;
    --group-bg-hover: #fff1d9;
    --group-text: #925f1e;
    --group-pill-bg: #ffe8bf;
}

.group-tone-unknown[b-p6tzn5q598] {
    --group-accent: #7c8794;
    --group-bg: #eef3f7;
    --group-bg-hover: #eef3f7;
    --group-text: #596677;
    --group-pill-bg: #e5ebf1;
}

.vehicle-tone-container[b-p6tzn5q598] {
    --group-accent: #2e78b5;
    --group-bg: #e4f3ff;
    --group-bg-hover: #e4f3ff;
    --group-text: #245f92;
    --group-pill-bg: #d9ecfb;
}

.vehicle-tone-truck[b-p6tzn5q598] {
    --group-accent: #c05d35;
    --group-bg: #ffede3;
    --group-bg-hover: #ffede3;
    --group-text: #994a2a;
    --group-pill-bg: #ffe1d2;
}

.vehicle-tone-barge[b-p6tzn5q598] {
    --group-accent: #6c65b8;
    --group-bg: #ece9ff;
    --group-bg-hover: #ece9ff;
    --group-text: #57509b;
    --group-pill-bg: #e2defb;
}

.vehicle-tone-coaster[b-p6tzn5q598] {
    --group-accent: #2b8b9e;
    --group-bg: #e0f5f9;
    --group-bg-hover: #e0f5f9;
    --group-text: #236f7e;
    --group-pill-bg: #d3eef3;
}

.vehicle-tone-unknown[b-p6tzn5q598] {
    --group-accent: #6d7f91;
    --group-bg: #edf4f8;
    --group-bg-hover: #edf4f8;
    --group-text: #526476;
    --group-pill-bg: #e3ecf2;
}

.summary-col-emphasis[b-p6tzn5q598] {
    font-weight: 650;
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-di[b-p6tzn5q598] {
    background: rgb(237, 245, 253);
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-den[b-p6tzn5q598] {
    background: rgb(255, 243, 231);
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-di-cell[b-p6tzn5q598] {
    background: #eaf4fd;
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-den-cell[b-p6tzn5q598] {
    background: #fff3e5;
}

.mapping-summary-table td.summary-group-noi-di-cell[b-p6tzn5q598] {
    background: #f4f9fe;
}

.mapping-summary-table td.summary-group-noi-den-cell[b-p6tzn5q598] {
    background: #fff8ef;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-di-cell[b-p6tzn5q598] {
    background: #edf5fd;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-den-cell[b-p6tzn5q598] {
    background: #fff3e7;
}

.summary-data-row:hover td.summary-group-noi-di-cell[b-p6tzn5q598] {
    background: #e3f0fc;
}

.summary-data-row:hover td.summary-group-noi-den-cell[b-p6tzn5q598] {
    background: #ffeccd;
}

.number-cell[b-p6tzn5q598] {
    color: #31465b;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 650;
}

.text-break-cell[b-p6tzn5q598] {
    white-space: pre-line;
    font-size: 0.79rem;
}

.table-badge[b-p6tzn5q598],
.status-badge[b-p6tzn5q598] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.badge-cell[b-p6tzn5q598] {
    text-align: center;
}

.status-badge-button[b-p6tzn5q598] {
    font-family: inherit;
    cursor: pointer;
}

.status-badge-button:hover[b-p6tzn5q598] {
    filter: brightness(0.97);
}

.table-badge--warehouse[b-p6tzn5q598] {
    border-color: #99c8f0;
    color: #1f5f96;
    background: #eaf5ff;
}

.table-badge--ship[b-p6tzn5q598] {
    border-color: #c9b7ef;
    color: #6f51ad;
    background: #f4efff;
}

.status-badge--success[b-p6tzn5q598] {
    border-color: #b9ddc0;
    color: #2f7a3a;
    background: #eefbf0;
}

.status-badge--warning[b-p6tzn5q598] {
    border-color: #efd58f;
    color: #9b6a0b;
    background: #fff8df;
}

.status-badge--danger[b-p6tzn5q598] {
    border-color: #ecb0b8;
    color: #bc415f;
    background: #fff0ec;
}

.status-badge--neutral[b-p6tzn5q598] {
    border-color: #cfdbe7;
    color: #627487;
    background: #f2f6fa;
}

.warehouse-link[b-p6tzn5q598] {
    display: inline;
    padding: 0;
    border: 0;
    color: #2e78b5;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(46, 120, 181, 0.26);
    text-underline-offset: 2px;
}

.warehouse-link:hover[b-p6tzn5q598] {
    color: #205d90;
    text-decoration-color: currentColor;
}

.col-phan-loai[b-p6tzn5q598] { width: 138px; }
.col-mien[b-p6tzn5q598] { width: 126px; }
.col-khu-vuc[b-p6tzn5q598] { width: 146px; }
.col-noi[b-p6tzn5q598] { width: 146px; }
.col-vehicle-type[b-p6tzn5q598] { width: 150px; }
.col-carrier[b-p6tzn5q598] { width: 180px; }
.col-product[b-p6tzn5q598] { width: 180px; }
.col-origin[b-p6tzn5q598] { width: 126px; }
.col-contract[b-p6tzn5q598] { width: 168px; }
.col-trip[b-p6tzn5q598] { width: 118px; }
.col-nguon-hang[b-p6tzn5q598] { width: 126px; }
.col-ten-tau[b-p6tzn5q598] { width: 156px; }
.col-quantity[b-p6tzn5q598] { width: 132px; }
.col-status[b-p6tzn5q598] { width: 150px; }
.col-invoice[b-p6tzn5q598] { width: 126px; }
.col-ai[b-p6tzn5q598] { width: 198px; }
.col-doc[b-p6tzn5q598] { width: 126px; }

.mapping-summary-loading-overlay[b-p6tzn5q598] {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(250, 252, 255, 0.88);
    backdrop-filter: blur(2px);
}

.mapping-summary-loading-spinner[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dfebf5;
    border-radius: 12px;
    color: #5e748a;
    background: #fff;
    box-shadow: 0 10px 24px rgba(63, 99, 138, 0.12);
    font-size: 0.82rem;
    font-weight: 650;
}

.mapping-summary-spinner[b-p6tzn5q598] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfebf5;
    border-top-color: #4f8bbd;
    border-radius: 50%;
    animation: mappingSummarySpin-b-p6tzn5q598 0.75s linear infinite;
}

@keyframes mappingSummarySpin-b-p6tzn5q598 {
    to { transform: rotate(360deg); }
}

.grid-empty-state[b-p6tzn5q598] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 150px;
    gap: 8px;
    color: #6d7f92;
    border: 1px dashed #cedbe8;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1280px) {
    .summary-filter-layout[b-p6tzn5q598] {
        flex-wrap: wrap;
    }

    .filter-title[b-p6tzn5q598] {
        display: none;
    }

    .mapping-summary-stats[b-p6tzn5q598] {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-p6tzn5q598] {
        height: calc(100dvh - 90px);
        padding-inline: 4px;
    }

    .summary-heading__date[b-p6tzn5q598] {
        display: none;
    }

    .mapping-summary-stats[b-p6tzn5q598] {
        display: flex;
        overflow-x: auto;
    }

    .mapping-summary-stat-item[b-p6tzn5q598] {
        min-width: 160px;
    }

    .summary-filter-layout[b-p6tzn5q598] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-p6tzn5q598] {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .filter-actions[b-p6tzn5q598] {
        justify-content: flex-end;
        margin-left: 0;
    }
}

.legal-entity-filter-row[b-p6tzn5q598] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    background: #ffffff;
}

.legal-entity-filter-button[b-p6tzn5q598] {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #d9e4ef;
    border-radius: 7px;
    color: #516579;
    background: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.legal-entity-filter-button:hover:not(:disabled)[b-p6tzn5q598] {
    border-color: #f0a164;
    color: #a9511d;
    background: #fff8ef;
}

.legal-entity-filter-button.active[b-p6tzn5q598] {
    border-color: #df7a35;
    color: #ffffff;
    background: #df7a35;
    box-shadow: 0 6px 14px rgba(223, 122, 53, 0.2);
}

.legal-entity-filter-button:disabled[b-p6tzn5q598] {
    cursor: default;
    opacity: 0.62;
}
/* ============================================================
   Stats gọn 1 hàng + tô màu / highlight cho bảng tổng quan
   ============================================================ */

/* Mặc định grid 3 cột làm 4 thẻ rớt xuống 2 hàng -> ép về đúng 1 hàng và thu nhỏ lại. */
.mapping-summary-stats--compact[b-p6tzn5q598] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.mapping-summary-stats--compact .mapping-summary-stat-item[b-p6tzn5q598] {
    min-height: 40px;
    gap: 6px;
    padding: 5px 9px 5px 11px;
    border-radius: 8px;
}

.mapping-summary-stats--compact .mapping-summary-stat-item label[b-p6tzn5q598] {
    max-width: none;
    font-size: 0.62rem;
    line-height: 1.15;
}

.mapping-summary-stats--compact .mapping-summary-stat-value[b-p6tzn5q598] {
    min-width: 30px;
    font-size: 1.05rem;
}

/* 2 cột cần chú ý: SL CẦN XÁC NHẬN / CHỨNG TỪ CẦN DUYỆT. */
.mapping-summary-table th.summary-col-alert[b-p6tzn5q598],
.mapping-summary-table td.summary-col-alert[b-p6tzn5q598] {
    background: #fff5f5;
}

.mapping-summary-table th.summary-col-alert[b-p6tzn5q598] {
    background: #ffe9e9;
}

/* Highlight con số của 2 cột trên cho nổi bật. */
.summary-alert-value[b-p6tzn5q598] {
    color: #c0392b;
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Cặp cột LŨY KẾ: TỔNG SL HÓA ĐƠN + TỔNG SL NHẬP KHO KAG (cùng 1 màu cả cột). */
.mapping-summary-table th.summary-col-lifetime[b-p6tzn5q598],
.mapping-summary-table td.summary-col-lifetime[b-p6tzn5q598] {
    background: #eef4fb;
}

.mapping-summary-table th.summary-col-lifetime[b-p6tzn5q598] {
    background: #dfeaf7;
}

/* Cặp cột TRONG KỲ: SL HÓA ĐƠN + SL NHẬP KHO KAG trong kỳ (cùng 1 màu cả cột). */
.mapping-summary-table th.summary-col-period[b-p6tzn5q598],
.mapping-summary-table td.summary-col-period[b-p6tzn5q598] {
    background: #eefaf3;
}

.mapping-summary-table th.summary-col-period[b-p6tzn5q598] {
    background: #d9f2e5;
}

/* Nút bấm để nhảy sang tab Chi tiết: trông như text thường, chỉ nổi khi hover. */
.summary-drill-link[b-p6tzn5q598] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.summary-drill-link:hover[b-p6tzn5q598],
.summary-drill-link:focus-visible[b-p6tzn5q598] {
    color: #1c6ea4;
    text-decoration: underline;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Mapping.razor.rz.scp.css */
#ControlRegion[b-u9uxg1nhsl] {
    overflow: hidden;
}

#ControlRegion[b-u9uxg1nhsl]  .e-card,
.compare-root-card[b-u9uxg1nhsl] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#ControlRegion[b-u9uxg1nhsl]  .e-card-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0.35rem 0.5rem 0.45rem 0.5rem;
}

.mapping-tab-actions[b-u9uxg1nhsl] {
    margin: 0 30px 0.55rem 10px;
}

.mapping-filter-bar[b-u9uxg1nhsl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.55rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px;
}

.filter-field[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    min-width: 138px;
    align-items: flex-start;
}

.filter-field .filter-select[b-u9uxg1nhsl] {
    width: 138px;
}

.filter-field label[b-u9uxg1nhsl] {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

[b-u9uxg1nhsl] .mapping-filter-bar .rz-inputtext,
[b-u9uxg1nhsl] .mapping-filter-bar .rz-dropdown,
[b-u9uxg1nhsl] .mapping-filter-bar .rz-datepicker,
[b-u9uxg1nhsl] .mapping-filter-bar .rz-multiselect,
[b-u9uxg1nhsl] .mapping-filter-bar .filter-select,
[b-u9uxg1nhsl] .mapping-filter-bar .rz-numeric,
[b-u9uxg1nhsl] .mapping-filter-bar .rz-picker {
    width: 138px !important;
}

.filter-actions[b-u9uxg1nhsl] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 30px 0.55rem 10px;
}

[b-u9uxg1nhsl] .filter-actions .rz-button {
    height: 32px;
    min-width: 32px;
    padding: 0.15rem 0.55rem;
}

.queue-view-toolbar[b-u9uxg1nhsl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 30px 0.55rem 10px;
}

.queue-view-overall-stats[b-u9uxg1nhsl] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.compare-mini-row[b-u9uxg1nhsl] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.overall-stat-card--total[b-u9uxg1nhsl] {
    align-self: stretch;
}

.overall-stat-card--total .overall-stat-lines[b-u9uxg1nhsl] {
    justify-content: center;
}

.overall-stat-card--total .stat-line-perc[b-u9uxg1nhsl] {
    justify-content: center;
}

.overall-stat-card--compact[b-u9uxg1nhsl] {
    min-height: 25px;
}

.overall-stat-card--mini[b-u9uxg1nhsl] {
    height: 25px;
    min-width: 122px;
}

.overall-stat-card-group[b-u9uxg1nhsl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(122px, 1fr));
    grid-template-rows: repeat(2, minmax(25px, auto));
    gap: 0.5rem;
    align-self: stretch;
}

.overall-stat-card--highlight[b-u9uxg1nhsl] {
    background: #d96144 !important;
    color: #ffebeb;
}



.overall-stat-card--disabled[b-u9uxg1nhsl] {
    cursor: default;
    pointer-events: none;
}

.overall-stat-card--mini .overall-stat-label[b-u9uxg1nhsl] {
    flex: 1 1 auto;
    justify-content: flex-end;
    text-align: right;
    border-right: 0;
    border-left: 1px solid #e2e8f0;
}

.overall-stat-card--compact .overall-stat-label[b-u9uxg1nhsl] {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

.overall-stat-card--mini .overall-stat-label[b-u9uxg1nhsl] {
    padding: 0.12rem 0.35rem;
    font-size: 0.56rem;
    letter-spacing: 0;
}

.overall-stat-card[b-u9uxg1nhsl] {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 30px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    overflow: hidden;
}

.overall-stat-card--clickable[b-u9uxg1nhsl] {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.overall-stat-card--clickable:hover[b-u9uxg1nhsl] {
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.14);
}

.overall-stat-card--active[b-u9uxg1nhsl] {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 3px 12px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.overall-stat-card--disabled[b-u9uxg1nhsl] {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

.overall-stat-label[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.15px;
    text-transform: none;
    color: #334155;
    white-space: nowrap;
    background-color: #f1f5f9;
    padding: 0.25rem 0.65rem;
    border-right: 1px solid #e2e8f0;
}

.overall-stat-lines[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.overall-stat-card--mini .overall-stat-lines[b-u9uxg1nhsl] {
    padding: 0.12rem 0.38rem;
    flex: 0 0 auto;
}

.overall-stat-lines > div[b-u9uxg1nhsl] {
    width: 100%;
    text-align: center;
}

.overall-stat-lines > div:not(:last-child)[b-u9uxg1nhsl] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.stat-line-count[b-u9uxg1nhsl] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    white-space: nowrap;
}

.stat-line-kg[b-u9uxg1nhsl] {
    font-size: 0.73rem;
    font-weight: 400;
    color: #475569;
    line-height: 1;
    white-space: nowrap;
}

.stat-line-perc[b-u9uxg1nhsl] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
}

.mapping-transport-filter-link[b-u9uxg1nhsl] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #1ad2db;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mapping-transport-filter-link:hover[b-u9uxg1nhsl] {
    color: #1d4ed8;
}

.mapping-transport-filter-link--active[b-u9uxg1nhsl] {
    color: #0f172a;
    text-decoration: none;
}

@media (max-width: 900px) {
    .queue-view-overall-stats[b-u9uxg1nhsl] {
        gap: 0.35rem;
    }

    .overall-stat-card[b-u9uxg1nhsl] {
        gap: 0;
        min-height: 28px;
        padding: 0;
    }

    .overall-stat-card-group[b-u9uxg1nhsl] {
        grid-template-columns: repeat(2, minmax(122px, 1fr));
        gap: 0.35rem;
    }

    .overall-stat-label[b-u9uxg1nhsl] {
        font-size: 0.7rem;
        padding: 0.18rem 0.45rem;
    }

    .overall-stat-card--mini .overall-stat-label[b-u9uxg1nhsl] {
        font-size: 0.54rem;
        padding: 0.1rem 0.3rem;
    }

    .overall-stat-lines[b-u9uxg1nhsl] {
        padding: 0.18rem 0.55rem;
    }

    .overall-stat-card--mini .overall-stat-lines[b-u9uxg1nhsl] {
        padding: 0.1rem 0.3rem;
    }

    .stat-line-count[b-u9uxg1nhsl] {
        font-size: 0.76rem;
    }

    .stat-line-kg[b-u9uxg1nhsl],
    .stat-line-perc[b-u9uxg1nhsl] {
        font-size: 0.68rem;
    }
}

.mapping-action-btn[b-u9uxg1nhsl],
.mapping-action-btn.rz-button[b-u9uxg1nhsl],
.mapping-action-btn .rz-button-text[b-u9uxg1nhsl],
.mapping-action-btn .rz-text[b-u9uxg1nhsl],
.mapping-action-btn .rzi[b-u9uxg1nhsl] {
    color: #ffffff !important;
}

[b-u9uxg1nhsl] .queue-view-action-btn .rz-button-text,
[b-u9uxg1nhsl] .queue-view-action-btn .rz-text {
    display: none;
}

[b-u9uxg1nhsl] .queue-view-action-btn .rz-button-icon-left,
[b-u9uxg1nhsl] .queue-view-action-btn .rzi {
    margin-right: 0 !important;
    font-size: 0.85rem;
}

.weight-mismatch[b-u9uxg1nhsl] {
    display: inline-block;
    min-width: 84px;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: #fde8e8;
    color: #b42318;
    font-weight: 600;
}

.qty-diff-badge[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    border: 1px solid #fda29b;
    background: #fff1f3;
    color: #b42318;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.06);
}

.mapping-row-number[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #eef6ff;
    color: #285ea8;
    font-weight: 700;
    line-height: 1;
}

.trip-code-cell[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.trip-code-value[b-u9uxg1nhsl] {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}

.trip-code-duplicate-note[b-u9uxg1nhsl] {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.1;
}

.trip-code-continuation[b-u9uxg1nhsl] {
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 1px;
}

.pickup-quantity-cell[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.pickup-ai-quantity[b-u9uxg1nhsl] {
    color: #b42318;
    font-weight: 700;
    line-height: 1.15;
    display: inline-block;
    margin-left: 6px;
}

.document-link-list[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.document-link-list--multi[b-u9uxg1nhsl] {
    align-items: stretch;
}

.document-link-item[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.9rem;
    min-height: 1.65rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.04);
    transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.document-link-item:hover[b-u9uxg1nhsl] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.document-link-item--primary[b-u9uxg1nhsl] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-u9uxg1nhsl] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.status-outline-btn[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    background-color: #ffffff;
}

.status-outline-btn--matched[b-u9uxg1nhsl] {
    color: #0f766e;
    border-color: #14b8a6;
}

.status-outline-btn--mismatched[b-u9uxg1nhsl] {
    color: #b42318;
    border-color: #fda29b;
}

.mapping-grid-wrapper[b-u9uxg1nhsl] {
    position: relative;
    min-height: 360px;
    margin-top: 0.1rem;
    display: flex;
    flex-direction: column;
}

[b-u9uxg1nhsl] .mapping-grid-wrapper .rz-data-grid {
    height: calc(100vh - 280px) !important;
}
@media (max-width: 1500px) {
    [b-u9uxg1nhsl] .mapping-grid-wrapper .rz-data-grid {
        height: calc(100vh - 350px) !important;
    }
}

[b-u9uxg1nhsl] .mapping-data-grid {
    height: 100%;
    font-size: 0.85rem;
}

[b-u9uxg1nhsl] .mapping-data-grid .rz-grid {
    height: 100%;
    border: none;
}

[b-u9uxg1nhsl] .mapping-data-grid .rz-data-grid-data {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: calc(100% - 50px);
}

.mapping-loading-overlay[b-u9uxg1nhsl] {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    padding: 1rem;
    overflow: hidden;
}

.mapping-loading-skeleton[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.mapping-skeleton-row[b-u9uxg1nhsl] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.75rem;
}

.mapping-skeleton-cell[b-u9uxg1nhsl] {
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 400% 100%;
    animation: mappingSkeletonPulse-b-u9uxg1nhsl 1.2s ease-in-out infinite;
}

.grid-empty-state[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
}

.grid-empty-state i[b-u9uxg1nhsl] {
    color: #9e9e9e;
}

@keyframes mappingSkeletonPulse-b-u9uxg1nhsl {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* PC-style native mapping refresh */
.mapping-control-page[b-u9uxg1nhsl] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    min-height: calc(100vh - 64px);
    height: calc(100vh - 64px);
    padding: 12px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, .08), transparent 28rem),
        #f3f6fb;
}

[b-u9uxg1nhsl] .mapping-control-page .mail-dashboard-card.rz-card,
[b-u9uxg1nhsl] .mapping-control-page .mail-dashboard-card .rz-tabview,
[b-u9uxg1nhsl] .mapping-control-page .mail-dashboard-card .rz-tabview-panels,
[b-u9uxg1nhsl] .mapping-control-page .mail-dashboard-card .rz-tabview-panel {
    height: 100%;
}

[b-u9uxg1nhsl] .mapping-control-page .mail-dashboard-card.rz-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%);
    box-shadow: 0 24px 50px rgba(15, 23, 42, .08);
}

.mapping-legacy-layout[b-u9uxg1nhsl] {
    display: none;
}

.mapping-native-layout[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mapping-native-layout .mail-detail-panel[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mapping-native-layout .queue-filter-header[b-u9uxg1nhsl],
.mapping-native-layout .queue-view-toolbar[b-u9uxg1nhsl],
.mapping-native-layout .mail-native-pager[b-u9uxg1nhsl],
.mapping-native-layout .grid-empty-state[b-u9uxg1nhsl] {
    flex: 0 0 auto;
}

.mapping-native-layout .queue-filter-header[b-u9uxg1nhsl] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
    z-index: 20;
}

.mapping-native-layout .comparison-filter-bar[b-u9uxg1nhsl] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 0;
}

.mapping-native-layout .filter-field[b-u9uxg1nhsl] {
    flex: 0 1 148px;
    min-width: 148px;
    max-width: 148px;
}

.mapping-native-layout .comparison-filter-bar > .filter-field:nth-child(n+9)[b-u9uxg1nhsl] {
    display: none;
}

.mapping-native-layout .filter-field label[b-u9uxg1nhsl] {
    margin-bottom: 7px;
    font-size: .82rem;
}

.mapping-native-layout .filter-field > input[b-u9uxg1nhsl],
.mapping-native-layout .filter-field > select[b-u9uxg1nhsl],
.mapping-native-layout .native-multiselect > summary[b-u9uxg1nhsl],
.mapping-native-layout .mail-native-pager__select[b-u9uxg1nhsl] {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    color: #263244;
    background: #f8fafc;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    outline: none;
    font-size: .88rem;
}

.mapping-native-layout .filter-field > input[b-u9uxg1nhsl]::placeholder,
.mapping-native-layout .native-multiselect > summary[b-u9uxg1nhsl],
.mapping-native-layout .filter-field > select[b-u9uxg1nhsl] {
    font-size: .76rem;
}

.mapping-native-layout .filter-field > input:focus[b-u9uxg1nhsl],
.mapping-native-layout .filter-field > select:focus[b-u9uxg1nhsl],
.mapping-native-layout .native-multiselect[open] > summary[b-u9uxg1nhsl] {
    background: #fff;
    border-color: var(--mail-primary);
    box-shadow: 0 0 0 2px rgba(36, 87, 230, .1);
}

.mapping-native-layout .native-multiselect[b-u9uxg1nhsl] {
    position: relative;
    width: 100%;
}

.mapping-native-layout .native-multiselect > summary[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    line-height: 1;
}

.mapping-native-layout .native-multiselect > summary[b-u9uxg1nhsl]::-webkit-details-marker {
    display: none;
}

.mapping-native-layout .native-multiselect__arrow[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.mapping-native-layout .native-multiselect__arrow[b-u9uxg1nhsl]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #7b8794;
    border-bottom: 2px solid #7b8794;
    transform: rotate(45deg) translateY(-1px);
}

.mapping-native-layout .native-multiselect__menu[b-u9uxg1nhsl] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 10px;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

.mapping-native-layout .native-multiselect__header[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 7px;
    color: #475569;
    font-size: .8rem;
    border-bottom: 1px solid #edf1f5;
}

.mapping-native-layout .native-multiselect__header button[b-u9uxg1nhsl] {
    padding: 2px 5px;
    color: #d14f31;
    background: transparent;
    border: 0;
    font-size: .8rem;
    cursor: pointer;
}

.mapping-native-layout .native-multiselect__search-wrap[b-u9uxg1nhsl] {
    padding: 6px 4px 2px;
}

.mapping-native-layout .native-multiselect__search[b-u9uxg1nhsl] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
}

.mapping-native-layout .native-multiselect__options[b-u9uxg1nhsl] {
    max-height: 235px;
    margin-top: 5px;
    overflow: auto;
}

.mapping-native-layout .native-multiselect__options label[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    padding: 4px 6px;
    color: #334155;
    border-radius: 6px;
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
}

.mapping-native-layout .native-multiselect__options label:hover[b-u9uxg1nhsl] {
    background: #f1f5fb;
}

.mapping-native-layout .native-multiselect__options input[b-u9uxg1nhsl] {
    width: 14px;
    height: 14px;
    accent-color: var(--mail-primary);
}

.mapping-native-layout .native-multiselect__empty[b-u9uxg1nhsl],
.mapping-native-layout .native-multiselect__no-results[b-u9uxg1nhsl] {
    display: block;
    padding: 12px 8px;
    color: #94a3b8;
    font-size: .8rem;
    text-align: center;
}

.mapping-native-layout .filter-toggle-inline[b-u9uxg1nhsl] {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-top: auto;
}

.mapping-native-layout .queue-filter-actions[b-u9uxg1nhsl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-end;
}

.mapping-native-layout .mail-action[b-u9uxg1nhsl] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.mapping-native-layout .mail-action--primary[b-u9uxg1nhsl] {
    color: #fff;
    background: linear-gradient(135deg, #2457e6 0%, #3c74ff 100%);
}

.mapping-native-layout .mail-action--secondary[b-u9uxg1nhsl] {
    color: #334155;
    background: #fff;
}

.mapping-native-layout .mail-action--export[b-u9uxg1nhsl] {
    color: #166534;
    background: linear-gradient(180deg, #eafaf2 0%, #d7f5e5 100%);
}

.mapping-native-layout .mail-action--toggle[b-u9uxg1nhsl] {
    color: #9a3412;
    background: linear-gradient(180deg, #fff4e8 0%, #ffe7d2 100%);
    border-color: #f2bf93;
}

.mapping-native-layout .mail-action--toggle-active[b-u9uxg1nhsl] {
    color: #fff;
    background: linear-gradient(135deg, #d96a3d 0%, #ef9d65 100%);
}

.mapping-native-layout .filter-extra-panel[b-u9uxg1nhsl] {
    position: absolute;
    top: calc(100% - 2px);
    left: 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(720px, calc(100vw - 64px));
    padding: 12px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

.mapping-native-layout .mapping-toolbar-native[b-u9uxg1nhsl] {
    padding: 8px 16px 8px;
    margin: 0;
}

.mapping-native-layout .queue-view-overall-stats[b-u9uxg1nhsl] {
    display: grid;
    grid-template-columns: minmax(132px, .72fr) minmax(360px, 2.45fr);
    gap: 6px;
    width: 100%;
}

.mapping-native-layout .overall-stat-card[b-u9uxg1nhsl] {
    display: flex;
    align-items: stretch;
    min-height: 54px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}

.mapping-native-layout .overall-stat-card--total[b-u9uxg1nhsl] {
    background: linear-gradient(135deg, #cc623a 0%, #e68a57 100%);
    border-color: #cc623a;
}

.mapping-native-layout .overall-stat-card--total .overall-stat-label[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--total .stat-line-count[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--total .stat-line-perc[b-u9uxg1nhsl] {
    color: #fff;
    background: transparent;
}

.mapping-native-layout .overall-stat-label[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    min-width: 46px;
    padding: 6px 7px;
    color: #334155;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
    font-size: .68rem;
    font-weight: 800;
}

.mapping-native-layout .overall-stat-lines[b-u9uxg1nhsl] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding: 6px 8px;
}

.mapping-native-layout .stat-line-count[b-u9uxg1nhsl] {
    font-size: .94rem;
    font-weight: 700;
}

.mapping-native-layout .compare-mini-row[b-u9uxg1nhsl] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .82rem;
}

.mapping-native-layout .overall-stat-chip[b-u9uxg1nhsl] {
    padding: 0;
    color: #0b63c9;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.mapping-native-layout .overall-stat-chip--active[b-u9uxg1nhsl] {
    color: #084c9e;
    font-weight: 700;
}

.mapping-native-layout .overall-stat-card-group[b-u9uxg1nhsl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 6px;
}

.mapping-native-layout .overall-stat-card--mini[b-u9uxg1nhsl] {
    min-height: 27px;
    height: 27px;
    background: #fff;
    border-radius: 8px;
}

.mapping-native-layout .overall-stat-card--mini .overall-stat-lines[b-u9uxg1nhsl] {
    padding: 3px 6px 3px 7px;
}

.mapping-native-layout .overall-stat-card--mini .overall-stat-label[b-u9uxg1nhsl] {
    min-width: 0;
    padding: 4px 6px;
    font-size: .64rem;
    border-left: 1px solid #e2e8f0;
    border-right: 0;
}

.mapping-native-layout .overall-stat-card--mini .stat-line-count[b-u9uxg1nhsl] {
    font-size: .8rem;
}

.mapping-native-layout .overall-stat-card--clickable[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--highlight[b-u9uxg1nhsl] {
    cursor: pointer;
}

.mapping-native-layout .overall-stat-card--active[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--highlight[b-u9uxg1nhsl] {
    background: linear-gradient(135deg, #c7542d 0%, #df7d4d 100%) !important;
    border-color: #c7542d !important;
}

.mapping-native-layout .overall-stat-card--active .overall-stat-label[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--active .stat-line-count[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--highlight .overall-stat-label[b-u9uxg1nhsl],
.mapping-native-layout .overall-stat-card--highlight .stat-line-count[b-u9uxg1nhsl] {
    color: #fff;
    background: transparent;
}

.mapping-native-layout .datamail-grid-wrapper[b-u9uxg1nhsl] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    height: calc(100vh - 390px);
    min-height: 430px;
    margin: 0 14px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.mapping-native-layout .datamail-grid-scroll[b-u9uxg1nhsl] {
    flex: 1 1 100%;
    height: 100%;
    min-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.mapping-native-layout .mapping-native-table[b-u9uxg1nhsl] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.mapping-native-layout .mapping-native-table th[b-u9uxg1nhsl],
.mapping-native-layout .mapping-native-table td[b-u9uxg1nhsl] {
    max-width: 180px;
    padding: 7px 9px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mapping-native-layout .mapping-native-table thead th[b-u9uxg1nhsl] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f3f6fa;
    color: #536174;
    font-size: 11.5px;
    font-weight: 750;
    text-transform: uppercase;
}

.mapping-native-layout .mapping-native-table tbody tr:nth-child(even)[b-u9uxg1nhsl] {
    background: #fbfcfe;
}

.mapping-native-layout .mapping-native-table tbody tr:hover[b-u9uxg1nhsl] {
    background: #edf3ff;
}

.mapping-native-layout .mail-cell-warehouse[b-u9uxg1nhsl] {
    max-width: 220px !important;
    font-weight: 650;
    text-align: left !important;
}

.mapping-native-layout .mail-cell-ticket[b-u9uxg1nhsl],
.mapping-native-layout .mail-cell-plate[b-u9uxg1nhsl],
.mapping-native-layout .mail-code[b-u9uxg1nhsl],
.mapping-native-layout .mail-direction[b-u9uxg1nhsl] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

.mapping-native-layout .mail-code[b-u9uxg1nhsl],
.mapping-native-layout .mail-direction[b-u9uxg1nhsl] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
}

.mapping-native-layout .mail-cell-number[b-u9uxg1nhsl] {
    min-width: 92px;
    font-variant-numeric: tabular-nums;
}

.mapping-native-layout .mail-cell-date[b-u9uxg1nhsl] {
    min-width: 116px;
    color: #64748b;
    font-size: 12px;
}

.mapping-native-layout .table-sort[b-u9uxg1nhsl] {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.mapping-native-layout .queue-status-badge[b-u9uxg1nhsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mapping-native-layout .queue-status-badge--error[b-u9uxg1nhsl] {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #ef4444;
}

.mapping-native-layout .queue-status-badge--success[b-u9uxg1nhsl] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #22c55e;
}

.mapping-native-layout .queue-status-badge--info[b-u9uxg1nhsl] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #3b82f6;
}

.mapping-native-layout .queue-status-badge--warning[b-u9uxg1nhsl] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
}

.mapping-native-layout .queue-status-badge--neutral[b-u9uxg1nhsl] {
    color: #1f2937;
    background: #f1f5f9;
    border: 1px solid #64748b;
}

.mapping-native-layout .mail-native-pager[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 14px 14px;
    padding: 11px 14px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    font-size: .86rem;
}

.mapping-native-layout .mail-native-pager > div[b-u9uxg1nhsl] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mapping-native-layout .mail-native-pager button[b-u9uxg1nhsl] {
    width: 34px;
    height: 32px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    cursor: pointer;
}

.mapping-native-layout .mail-native-pager button:disabled[b-u9uxg1nhsl] {
    opacity: .4;
    cursor: default;
}

@media (max-width: 900px) {
    .mapping-control-page[b-u9uxg1nhsl] {
        height: calc(100vh - 56px);
        padding: 8px;
    }

    .mapping-native-layout .queue-filter-header[b-u9uxg1nhsl] {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px 8px;
    }

    .mapping-native-layout .filter-field[b-u9uxg1nhsl],
    .mapping-native-layout .filter-toggle-inline[b-u9uxg1nhsl] {
        flex-basis: calc(50% - 4px);
        min-width: calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    .mapping-native-layout .queue-view-overall-stats[b-u9uxg1nhsl] {
        grid-template-columns: 1fr;
    }

    .mapping-native-layout .overall-stat-card-group[b-u9uxg1nhsl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mapping-native-layout .datamail-grid-wrapper[b-u9uxg1nhsl],
    .mapping-native-layout .mail-native-pager[b-u9uxg1nhsl] {
        margin-left: 8px;
        margin-right: 8px;
    }

    .mapping-native-layout .datamail-grid-wrapper[b-u9uxg1nhsl] {
        height: calc(100vh - 455px);
        min-height: 320px;
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_Mapping_Summary.razor.rz.scp.css */
.summary-page-card[b-toag70t7s8] {
    font-family: inherit;
    background: #ffffff;
    border: 1px solid #d7dde5;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    border-radius: 8px;
}

.summary-page-card :where(.rz-card, .rz-card-body, .rz-card-content)[b-toag70t7s8] {
    font-family: inherit;
}

.mapping-summary-section[b-toag70t7s8] {
    margin: 0 8px 0.75rem;
}

.filter-container[b-toag70t7s8] {
    display: flex;
    flex-direction: column;
}

.mapping-filter-bar[b-toag70t7s8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.55rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 6px 0;
}

.mapping-filter-bar .filter-field[b-toag70t7s8] {
    display: flex;
    flex-direction: column;
    min-width: 138px;
    align-items: flex-start;
}

[b-toag70t7s8] .mapping-filter-bar .rz-inputtext,
[b-toag70t7s8] .mapping-filter-bar .rz-dropdown,
[b-toag70t7s8] .mapping-filter-bar .rz-datepicker,
[b-toag70t7s8] .mapping-filter-bar .rz-multiselect,
[b-toag70t7s8] .mapping-filter-bar .filter-select,
[b-toag70t7s8] .mapping-filter-bar .rz-numeric,
[b-toag70t7s8] .mapping-filter-bar .rz-picker {
    width: 138px !important;
}

.filter-actions[b-toag70t7s8] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 10px 0.55rem 0;
}

.filter-actions-right[b-toag70t7s8] {
    width: 100%;
}

[b-toag70t7s8] .filter-actions .rz-button {
    height: 32px;
    min-width: 32px;
    padding: 0.15rem 0.55rem;
}

.summary-action-btn[b-toag70t7s8],
.summary-action-btn.rz-button[b-toag70t7s8],
.summary-action-btn .rz-button-text[b-toag70t7s8],
.summary-action-btn .rz-text[b-toag70t7s8],
.summary-action-btn .rzi[b-toag70t7s8] {
    color: #ffffff !important;
}

[b-toag70t7s8] .summary-action-btn .rz-button-text,
[b-toag70t7s8] .summary-action-btn .rz-text {
    display: none;
}

[b-toag70t7s8] .summary-action-btn .rz-button-icon-left,
[b-toag70t7s8] .summary-action-btn .rzi {
    margin-right: 0 !important;
    font-size: 0.85rem;
}

.mapping-summary-stats[b-toag70t7s8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.85rem;
    background: #f5f7fb;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
}

.mapping-summary-stat-item[b-toag70t7s8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d8dee9;
}

.mapping-summary-stat-item label[b-toag70t7s8] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-toag70t7s8] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
}

.mapping-summary-stat-item.clickable-stat[b-toag70t7s8] {
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mapping-summary-stat-item.clickable-stat:hover[b-toag70t7s8] {
    background-color: #fff1cf !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.mapping-summary-stat-item.clickable-stat.active[b-toag70t7s8] {
    background-color: #ffedd5 !important;
    border-color: #ea580c;
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.15);
}

.mapping-summary-stat-item.clickable-stat:hover .mapping-summary-stat-value[b-toag70t7s8] {
    color: #b45309;
}

.mapping-summary-table-wrapper[b-toag70t7s8] {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid #111827;
    background: #ffffff;
}

.mapping-summary-table-scroll[b-toag70t7s8] {
    max-height: calc(100vh - 330px);
    overflow: auto;
}

.mapping-summary-table[b-toag70t7s8] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #111827;
}

.mapping-summary-table th[b-toag70t7s8],
.mapping-summary-table td[b-toag70t7s8] {
    border: 1px solid #1f2937;
    padding: 3px 5px;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-toag70t7s8] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 28px;
    background: #ffffff;
    color: #020617;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.summary-total-row td[b-toag70t7s8] {
    position: sticky;
    top: 29px;
    z-index: 4;
    background: #ea6b0b;
    color: #ffffff;
    font-weight: 800;
}

.business-group-row td[b-toag70t7s8] {
    background: #f4b995;
    color: #111827;
    font-weight: 800;
    text-transform: uppercase;
}

.summary-data-row:hover td[b-toag70t7s8] {
    background: #fff7ed;
}

.summary-data-row:hover .group-cell[b-toag70t7s8] {
    background: #fff2df;
}

.summary-data-row-main td[b-toag70t7s8] {
    height: 34px;
}

.summary-data-row-sub td[b-toag70t7s8] {
    height: 26px;
    background: #fcfcfd;
}

.group-cell[b-toag70t7s8] {
    background: #ffffff;
    font-weight: 700;
}

.summary-col-emphasis[b-toag70t7s8] {
    font-weight: 600;
}

.summary-col-noi-di .warehouse-link[b-toag70t7s8] {
    font-weight: 800;
}

.group-cell-mien[b-toag70t7s8] {
    background: #fde9dd;
    text-transform: uppercase;
}

.number-cell[b-toag70t7s8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.number-cell .pickup-trip-count[b-toag70t7s8] {
    color: #dc2626 !important;
    font-weight: 700;
}

.trip-registered-cell[b-toag70t7s8] {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.trip-registered-cell span[b-toag70t7s8] {
    font-size: 0.68rem;
    font-weight: 700;
}

.quantity-cell[b-toag70t7s8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    line-height: 1.25;
}

.quantity-cell span[b-toag70t7s8] {
    color: #ea580c;
    font-size: 0.68rem;
    font-weight: 700;
}

.pickup-not-delivered[b-toag70t7s8] {
    display: block;
    color: inherit !important;
    font-weight: 700;
}

.metric-main-value[b-toag70t7s8] {
    font-weight: 800;
}

.registered-total-cell[b-toag70t7s8] {
    background: #ffffff;
    border-right-color: #9ca3af !important;
    font-weight: 400;
}

.registered-type-cell[b-toag70t7s8] {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.summary-data-row-sub .registered-type-cell[b-toag70t7s8] {
    background: #fcfcfd;
}

.not-delivered-trip-cell[b-toag70t7s8] {
    color: #ea580c;
    font-weight: 800;
}

.subrow-label-cell[b-toag70t7s8] {
    font-size: 0.68rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.level-4[b-toag70t7s8] {
    padding-left: 18px !important;
}

.subrow-empty-cell[b-toag70t7s8] {
    background: #fcfcfd;
}

.text-break-cell[b-toag70t7s8] {
    white-space: pre-line;
    font-size: 0.68rem;
}

.warehouse-link[b-toag70t7s8] {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.warehouse-link:hover[b-toag70t7s8] {
    color: #1d4ed8;
    text-decoration: underline;
}

.col-mien[b-toag70t7s8] {
    width: 115px;
}

.col-khu-vuc[b-toag70t7s8] {
    width: 128px;
}

.col-noi[b-toag70t7s8] {
    width: 118px;
}

.col-nguon-hang[b-toag70t7s8] {
    width: 84px;
}

.col-ten-tau[b-toag70t7s8] {
    width: 130px;
}

.col-trip-registered-total[b-toag70t7s8] {
    width: 56px;
}

.col-trip-registered-type[b-toag70t7s8] {
    width: 78px;
}

.col-trip[b-toag70t7s8] {
    width: 112px;
}

.col-quantity[b-toag70t7s8] {
    width: 108px;
}

.col-delivery[b-toag70t7s8] {
    width: 92px;
}

.col-ai[b-toag70t7s8] {
    width: 152px;
}

.col-doc[b-toag70t7s8] {
    width: 136px;
}

.mapping-summary-loading-overlay[b-toag70t7s8] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapping-summary-loading-spinner[b-toag70t7s8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mapping-summary-loading-spinner span[b-toag70t7s8] {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.mapping-summary-spinner[b-toag70t7s8] {
    width: 36px;
    height: 36px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: mappingSummarySpin-b-toag70t7s8 0.8s linear infinite;
}

@keyframes mappingSummarySpin-b-toag70t7s8 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .mapping-filter-bar[b-toag70t7s8] {
        flex-direction: column;
    }

    .filter-field[b-toag70t7s8] {
        width: 100%;
        min-width: unset;
    }

    .filter-field .filter-select[b-toag70t7s8],
    [b-toag70t7s8] .mapping-filter-bar .filter-select {
        width: 100% !important;
    }

    .mapping-summary-stats[b-toag70t7s8] {
        grid-template-columns: 1fr;
    }

    .mapping-summary-table-wrapper[b-toag70t7s8] {
        max-height: calc(100vh - 420px);
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_NCC.razor.rz.scp.css */
#ControlRegion[b-e56o966nxb] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    height: calc(100vh - 72px);
    min-height: 640px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, 0.08), transparent 28rem),
        #f3f6fb;
}

.compare-root-card[b-e56o966nxb],
.mail-tab-content[b-e56o966nxb],
.compare-native-layout[b-e56o966nxb],
.mail-detail-panel[b-e56o966nxb] {
    min-height: 0;
}

.compare-root-card[b-e56o966nxb] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(28, 50, 92, 0.11);
}

.mail-native-tabs[b-e56o966nxb] {
    display: inline-flex;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mail-native-tab[b-e56o966nxb] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f6f82;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mail-native-tab:hover[b-e56o966nxb] {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(56, 189, 248, 0.16);
}

.mail-native-tab--active[b-e56o966nxb] {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, 0.35);
}

.mail-tab-content[b-e56o966nxb],
.compare-native-layout[b-e56o966nxb],
.mail-detail-panel[b-e56o966nxb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-filter-header[b-e56o966nxb] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 20px 24px 15px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.comparison-filter-bar[b-e56o966nxb],
.queue-filter-actions[b-e56o966nxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.comparison-filter-bar[b-e56o966nxb] {
    flex: 1 1 760px;
    gap: 12px;
    margin-bottom: 0;
}

.queue-filter-actions[b-e56o966nxb] {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.filter-field[b-e56o966nxb] {
    display: flex;
    flex: 1 1 150px;
    min-width: 135px;
    max-width: 220px;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-e56o966nxb] {
    color: #475569;
    font-size: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.025em;
}

.filter-field > input[b-e56o966nxb],
.native-multiselect > summary[b-e56o966nxb] {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #d5dee8;
    border-radius: 9px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 0.76rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.filter-field > input[b-e56o966nxb] {
    padding: 0 10px;
}

.filter-field > input:focus[b-e56o966nxb],
.native-multiselect[open] > summary[b-e56o966nxb] {
    outline: none;
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
}

.mail-action--daily-report[b-e56o966nxb] {
    margin-left: auto;
}

.daily-issue-modal-backdrop[b-e56o966nxb] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-e56o966nxb] {
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-e56o966nxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-e56o966nxb] { margin: 0; font-size: 1rem; }

.daily-issue-modal__filters[b-e56o966nxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__body[b-e56o966nxb] { min-height: 260px; overflow: auto; padding: 14px 16px 16px; }
.daily-issue-table-wrap[b-e56o966nxb] { max-height: calc(100vh - 205px); overflow: auto; border: 1px solid #dbe3ec; border-radius: 8px; }
.daily-issue-table[b-e56o966nxb] { width: 100%; min-width: 2100px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.daily-issue-table th[b-e56o966nxb], .daily-issue-table td[b-e56o966nxb] { padding: 7px 8px; border-right: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; text-align: center; white-space: nowrap; }
.daily-issue-table th[b-e56o966nxb] { position: sticky; top: 0; z-index: 4; background: #eef4f8; color: #334155; font-weight: 800; }
.daily-issue-table th:first-child[b-e56o966nxb], .daily-issue-table td:first-child[b-e56o966nxb] { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; }
.daily-issue-table th:first-child[b-e56o966nxb] { z-index: 6; background: #e8f1f3; }
.daily-issue-date[b-e56o966nxb] { color: #0f172a; font-weight: 700; }
.daily-issue-number[b-e56o966nxb] { color: #1e293b; font-variant-numeric: tabular-nums; }
.daily-issue-number--warning[b-e56o966nxb] { color: #b42318; background: #fff4ed; font-weight: 800; }
.daily-issue-value[b-e56o966nxb] { width: 100%; min-width: 58px; padding: 3px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: inherit; }
.daily-issue-value--clickable[b-e56o966nxb] { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; cursor: pointer; }
.daily-issue-number--warning .daily-issue-value--clickable[b-e56o966nxb] { color: #b42318; background: #fff7ed; border-color: #fed7aa; }
.daily-issue-value:disabled[b-e56o966nxb] { opacity: 1; }
.daily-issue-reference-cell[b-e56o966nxb] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.daily-issue-reference[b-e56o966nxb] { color: #94a3b8; font-weight: 600; }
.daily-issue-value--diff[b-e56o966nxb] { width: auto; min-width: 42px; padding-inline: 6px; font-weight: 800; }
.daily-issue-loading[b-e56o966nxb], .daily-issue-empty[b-e56o966nxb] { display: flex; min-height: 210px; align-items: center; justify-content: center; color: #64748b; border: 1px dashed #cbd5e1; border-radius: 8px; }
.daily-issue-group-row th[b-e56o966nxb] { top: 0; }
.daily-issue-table thead tr:nth-child(2) th[b-e56o966nxb] { top: 35px; z-index: 5; }
.daily-issue-group--info[b-e56o966nxb] { background: #eef6ff !important; }
.daily-issue-group--status[b-e56o966nxb] { background: #f0fdf4 !important; }
.daily-issue-group--data[b-e56o966nxb] { background: #fff7ed !important; }
.daily-issue-group--documents[b-e56o966nxb] { background: #fdf2f8 !important; }
.daily-issue-number.daily-issue-group--info[b-e56o966nxb] { background: #f8fbff !important; }
.daily-issue-number.daily-issue-group--status[b-e56o966nxb] { background: #f7fef9 !important; }
.daily-issue-number.daily-issue-group--data[b-e56o966nxb] { background: #fffaf3 !important; }
.daily-issue-number.daily-issue-group--documents[b-e56o966nxb] { background: #fff8fb !important; }
.daily-issue-number--warning.daily-issue-group--info[b-e56o966nxb] { background: #eaf3ff !important; }
.daily-issue-number--warning.daily-issue-group--status[b-e56o966nxb] { background: #ecfdf3 !important; }
.daily-issue-number--warning.daily-issue-group--data[b-e56o966nxb] { background: #fff4e6 !important; }
.daily-issue-number--warning.daily-issue-group--documents[b-e56o966nxb] { background: #fce7f3 !important; }

[b-e56o966nxb] .compare-filter-bar-native .rz-datepicker,
[b-e56o966nxb] .compare-filter-bar-native .rz-picker,
[b-e56o966nxb] .compare-filter-bar-native .rz-inputtext {
    width: 100% !important;
}

[b-e56o966nxb] .compare-filter-bar-native .rz-datepicker,
[b-e56o966nxb] .compare-filter-bar-native .rz-picker {
    min-height: 34px;
    border: 1px solid #d5dee8 !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

[b-e56o966nxb] .compare-filter-bar-native .rz-state-focus,
[b-e56o966nxb] .compare-filter-bar-native .rz-focus {
    border-color: #8aa8f4 !important;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1) !important;
}

.native-multiselect[b-e56o966nxb] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-e56o966nxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-e56o966nxb]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-e56o966nxb] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-e56o966nxb]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease;
}

.native-multiselect[open] .native-multiselect__arrow[b-e56o966nxb]::before {
    transform: rotate(-135deg) translateY(-1px);
}

.native-multiselect__menu[b-e56o966nxb] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5ee;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.native-multiselect__header[b-e56o966nxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 8px;
    font-size: 0.75rem;
}

.native-multiselect__header button[b-e56o966nxb] {
    border: 0;
    background: none;
    color: var(--mail-primary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.native-multiselect__search-wrap[b-e56o966nxb] { padding: 6px 4px 2px; }

.native-multiselect__search[b-e56o966nxb] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}

.native-multiselect__search:focus[b-e56o966nxb] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.native-multiselect__options[b-e56o966nxb] {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    overflow: auto;
}

.native-multiselect__select-all[b-e56o966nxb] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 2px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.native-multiselect__no-results[b-e56o966nxb] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.native-multiselect__options label[b-e56o966nxb] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 5px;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.76rem;
}

.native-multiselect__options label:hover[b-e56o966nxb] {
    background: #eef4ff;
}

.native-multiselect__empty[b-e56o966nxb] {
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.mail-action[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
}

.mail-action:hover:not(:disabled)[b-e56o966nxb] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-e56o966nxb] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mail-action--primary[b-e56o966nxb] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.mail-action--secondary[b-e56o966nxb] {
    color: #344256;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--export[b-e56o966nxb] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
    box-shadow: 0 7px 16px rgba(18, 150, 111, 0.18);
}

.mail-action--toggle[b-e56o966nxb] {
    color: #4b5a6d;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--toggle:hover:not(:disabled)[b-e56o966nxb] {
    border-color: #9db2dd;
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.12);
}

.mail-action--toggle-active[b-e56o966nxb] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.filter-extra-panel[b-e56o966nxb] {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(760px, calc(100vw - 60px));
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--mail-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.queue-view-toolbar[b-e56o966nxb] {
    flex-shrink: 0;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.queue-view-overall-stats[b-e56o966nxb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(146px, 0.8fr)) minmax(390px, 3.3fr);
    gap: 8px;
    width: 100%;
}

.overall-stat-card[b-e56o966nxb] {
    position: relative;
    display: flex;
    height: 60px;
    min-height: 60px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.overall-stat-card[b-e56o966nxb]::before {
    display: none;
}

.overall-stat-card--total[b-e56o966nxb] {
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.08);
}

.overall-stat-card--clickable[b-e56o966nxb] {
    cursor: pointer;
}

.overall-stat-card--clickable:hover[b-e56o966nxb] {
    z-index: 1;
    border-color: #7ea2f3;
    box-shadow: 0 8px 20px rgba(36, 87, 230, 0.12);
    transform: translateY(-1px);
}

.overall-stat-card--highlight[b-e56o966nxb] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, 0.09),
        0 0 8px rgba(125, 211, 252, 0.12) !important;
}

.overall-stat-card--highlight *[b-e56o966nxb] {
    color: #0c4a6e !important;
}

.overall-stat-card--active[b-e56o966nxb] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--active *[b-e56o966nxb] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-e56o966nxb]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, 0.25) 260deg,
        #67e8f9 292deg,
        #fff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.95));
    animation: overall-neon-border-b-e56o966nxb 1.8s linear infinite;
}

@keyframes overall-neon-border-b-e56o966nxb {
    to { --overall-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-e56o966nxb]::after { animation: none; }
}

.overall-stat-card--disabled[b-e56o966nxb] {
    pointer-events: none;
    opacity: 0.54;
}

.overall-stat-label[b-e56o966nxb],
.overall-stat-lines[b-e56o966nxb] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-stat-label[b-e56o966nxb] {
    justify-content: center;
    min-width: 52px;
    padding: 4px 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.overall-stat-lines[b-e56o966nxb] {
    flex: 1;
    flex-direction: column;
    padding: 4px 7px;
}

.stat-line-count[b-e56o966nxb] {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.stat-line-kg[b-e56o966nxb] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-line-perc[b-e56o966nxb] {
    margin-top: 4px;
    color: #718096;
    font-size: 0.64rem;
}

.compare-mini-row[b-e56o966nxb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.compare-overall-filter-link[b-e56o966nxb] {
    min-height: 20px;
    padding: 0.06rem 0.42rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.compare-overall-filter-link--active[b-e56o966nxb] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.compare-overall-filter-link:disabled[b-e56o966nxb] {
    opacity: 0.55;
}

.overall-stat-card-group[b-e56o966nxb] {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 7px;
}

.overall-stat-card--mini[b-e56o966nxb] {
    min-width: 0;
    height: 28px;
    min-height: 28px;
    box-shadow: none;
    border-radius: 8px;
    background: #fff;
}

.overall-stat-card--mini .overall-stat-lines[b-e56o966nxb] {
    min-width: 0;
    padding: 3px 7px;
}

.overall-stat-card--mini .overall-stat-label[b-e56o966nxb] {
    justify-content: flex-start;
    padding: 3px 7px;
    color: #526174;
    background: #fbfcfe;
    font-size: 0.58rem;
    text-align: left;
}

.overall-stat-card--mini .stat-line-count[b-e56o966nxb] {
    color: #c94e2d;
    font-size: 0.76rem;
}

.compare-grid-wrapper[b-e56o966nxb] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: #fff;
}

.datamail-grid-scroll[b-e56o966nxb] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-e56o966nxb] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-e56o966nxb],
.mail-native-table td[b-e56o966nxb] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead th[b-e56o966nxb] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 24px;
    color: #536174;
    background: #f3f6fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.mail-native-table thead .compare-main-header th[colspan][b-e56o966nxb] {
    color: #9a4f1e;
    background: #fff5e8;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-di[b-e56o966nxb],
.mail-native-table thead .compare-main-header th.compare-group-noi-di[colspan][b-e56o966nxb],
.mail-native-table thead th.compare-group-noi-di[b-e56o966nxb] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-den[b-e56o966nxb],
.mail-native-table thead .compare-main-header th.compare-group-noi-den[colspan][b-e56o966nxb],
.mail-native-table thead th.compare-group-noi-den[b-e56o966nxb] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table thead .compare-main-header th[rowspan][b-e56o966nxb] {
    border-bottom-color: #d7dee7;
}

.mail-native-table .compare-subheader th[b-e56o966nxb] {
    top: 24px;
    z-index: 4;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff5e8;
    border-top: 0;
    color: #9a4f1e;
}

.mail-native-table .compare-subheader th.compare-group-noi-di[b-e56o966nxb] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table .compare-subheader th.compare-group-noi-den[b-e56o966nxb] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table tbody tr:nth-child(even)[b-e56o966nxb] {
    background: #fbfcfe;
}

.mail-native-table tbody td.compare-group-noi-di[b-e56o966nxb] {
    background: #f5fcfa;
}

.mail-native-table tbody td.compare-group-noi-den[b-e56o966nxb] {
    background: #fffaf0;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-di[b-e56o966nxb] {
    background: #eef8f5;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-den[b-e56o966nxb] {
    background: #fff4dc;
}

.mail-native-table tbody tr:hover[b-e56o966nxb],
.mail-native-table tbody tr.mail-row-selected[b-e56o966nxb] {
    background: #edf3ff;
}

.mail-native-table tbody tr:hover td.compare-group-noi-di[b-e56o966nxb],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-di[b-e56o966nxb] {
    background: #def7ef;
}

.mail-native-table tbody tr:hover td.compare-group-noi-den[b-e56o966nxb],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-den[b-e56o966nxb] {
    background: #ffedc2;
}

.mail-native-table tbody td[b-e56o966nxb] {
    height: 27px;
}

.mail-cell-warehouse[b-e56o966nxb] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.mail-cell-plate[b-e56o966nxb],
.mail-code[b-e56o966nxb],
.mail-direction[b-e56o966nxb],
.mail-cell-mono[b-e56o966nxb] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-plate[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f3f6fa;
    color: #24415f;
    letter-spacing: 0.04em;
}

.mail-code[b-e56o966nxb],
.mail-direction[b-e56o966nxb] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
    color: #174ea6;
}

.queue-status-badge[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.queue-status-badge--error[b-e56o966nxb] {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-e56o966nxb] {
    background-color: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-e56o966nxb] {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-e56o966nxb] {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-e56o966nxb] {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #1f2937;
}

.return-goods-badge[b-e56o966nxb] {
    display: inline-flex;
    min-width: 58px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-goods-badge--yes[b-e56o966nxb] {
    color: #b42318;
    background: #fff1f2;
    border-color: #fda4af;
}

.qty-diff-badge[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.loss-quantity-value[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.loss-quantity-value--positive[b-e56o966nxb] {
    color: #b91c1c;
}

.loss-quantity-value--negative[b-e56o966nxb] {
    color: #047857;
}

.loss-quantity-value--neutral[b-e56o966nxb] {
    color: #64748b;
    font-weight: 700;
}

.document-link-list[b-e56o966nxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.document-link-list--multi[b-e56o966nxb] {
    gap: 5px;
}

.document-link-item[b-e56o966nxb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #c8daf7;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.document-link-item:hover[b-e56o966nxb] {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}

.document-link-item--primary[b-e56o966nxb] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-e56o966nxb] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.document-link-item--disabled[b-e56o966nxb],
.document-link-item--disabled:hover[b-e56o966nxb] {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.62;
    pointer-events: none;
    transform: none;
}

.mail-native-pager[b-e56o966nxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-e56o966nxb] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager select[b-e56o966nxb],
.mail-native-pager button[b-e56o966nxb] {
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.mail-native-pager button[b-e56o966nxb] {
    min-width: 30px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-e56o966nxb] {
    opacity: 0.4;
    cursor: default;
}

.comparison-loading-overlay[b-e56o966nxb] {
    position: absolute;
    inset: 0 0 45px;
    z-index: 10;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.comparison-loading-skeleton[b-e56o966nxb] {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px;
}

.comparison-skeleton-row[b-e56o966nxb] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.comparison-skeleton-cell[b-e56o966nxb] {
    height: 13px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 300% 100%;
    animation: compareSkeletonPulse-b-e56o966nxb 1.2s infinite;
}

.grid-empty-state[b-e56o966nxb] {
    margin: 0 24px 14px;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes compareSkeletonPulse-b-e56o966nxb {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-e56o966nxb] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .overall-stat-card-group[b-e56o966nxb] {
        grid-template-columns: repeat(3, minmax(118px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-e56o966nxb] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .compare-root-card[b-e56o966nxb],
    .mail-tab-content[b-e56o966nxb],
    .compare-native-layout[b-e56o966nxb],
    .mail-detail-panel[b-e56o966nxb] {
        overflow: visible;
    }

    .queue-filter-header[b-e56o966nxb] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
    }

    .comparison-filter-bar[b-e56o966nxb],
    .queue-filter-actions[b-e56o966nxb] {
        width: 100%;
        margin-left: 0;
    }

    .comparison-filter-bar[b-e56o966nxb] {
        gap: 8px;
    }

    .filter-field[b-e56o966nxb] {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-extra-panel[b-e56o966nxb] {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .queue-view-toolbar[b-e56o966nxb] {
        padding: 14px 12px;
    }

    .queue-view-overall-stats[b-e56o966nxb] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .overall-stat-card-group[b-e56o966nxb] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .compare-grid-wrapper[b-e56o966nxb] {
        min-height: 480px;
        margin: 0 8px;
    }

    .grid-empty-state[b-e56o966nxb],
    .mail-native-pager[b-e56o966nxb] {
        margin-right: 8px;
        margin-left: 8px;
    }

    .mail-native-pager[b-e56o966nxb] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_NCC_Summary.razor.rz.scp.css */
:global(body)[b-aa3glhy1lm] {
    overflow: hidden;
}

#ControlRegion[b-aa3glhy1lm] {
    height: calc(100dvh - 112px);
    min-height: 540px;
    overflow: hidden;
    padding: 0 10px 10px;
    color: #2f3d4f;
    background:
        radial-gradient(circle at 10% 0%, rgba(112, 169, 196, 0.11), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(255, 206, 160, 0.15), transparent 20rem),
        linear-gradient(180deg, #fffefd 0%, #f9fbff 100%);
}

[b-aa3glhy1lm] .summary-page-card {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e6edf4;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(48, 79, 108, 0.08);
}

.mapping-summary-section[b-aa3glhy1lm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    gap: 10px;
}

.mapping-summary-stats[b-aa3glhy1lm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    flex: 0 0 auto;
    gap: 8px;
}

.mapping-summary-stat-item[b-aa3glhy1lm] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 10px;
    padding: 9px 12px 9px 15px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 10px 20px rgba(50, 82, 111, 0.1);
}

.mapping-summary-stat-item[b-aa3glhy1lm]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
    content: "";
}

.mapping-summary-stat-item label[b-aa3glhy1lm] {
    max-width: 125px;
    color: #607284;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-aa3glhy1lm] {
    min-width: 38px;
    color: var(--stat-accent);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card--warning[b-aa3glhy1lm] { --stat-accent: #d2862c; --stat-tint: #fff8ee; }
.stat-card--blue[b-aa3glhy1lm] { --stat-accent: #4f7fd4; --stat-tint: #f1f6ff; }
.stat-card--teal[b-aa3glhy1lm] { --stat-accent: #2d8a78; --stat-tint: #eefbf7; }
.stat-card--rose[b-aa3glhy1lm] { --stat-accent: #cf5b6f; --stat-tint: #fff1f4; }
.stat-card--violet[b-aa3glhy1lm] { --stat-accent: #7a67c7; --stat-tint: #f4f1ff; }

.clickable-stat[b-aa3glhy1lm] {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.clickable-stat:hover[b-aa3glhy1lm] {
    border-color: color-mix(in srgb, var(--stat-accent) 40%, white);
    box-shadow: 0 10px 20px rgba(61, 100, 136, 0.14);
    transform: translateY(-1px);
}

.clickable-stat.active[b-aa3glhy1lm] {
    border-color: var(--stat-accent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--stat-accent) 16%, transparent),
        0 14px 28px color-mix(in srgb, var(--stat-accent) 18%, transparent);
}

.filter-container[b-aa3glhy1lm] {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) auto;
    align-items: end;
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mapping-filter-bar[b-aa3glhy1lm] {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 8px;
    min-width: 0;
}

.filter-field > input[b-aa3glhy1lm],
.native-multiselect > summary[b-aa3glhy1lm] {
    width: 100% !important;
    height: 34px;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #d8e3ed;
    border-radius: 8px;
    color: #4b5d70;
    background: #fff;
    box-shadow: none;
    font-size: 0.76rem;
}

.summary-filter-panel[b-aa3glhy1lm] {
    flex: 0 0 auto;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-layout[b-aa3glhy1lm] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.summary-filter-bar[b-aa3glhy1lm] {
    display: grid;
    grid-template-columns: 168px 168px repeat(3, 158px);
    gap: 0.55rem;
    flex: 0 1 auto;
    min-width: 0;
    align-items: end;
}

.business-tab-row[b-aa3glhy1lm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.business-tab-button[b-aa3glhy1lm] {
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    color: #516579;
    background: #ffffff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.business-tab-button:hover:not(:disabled)[b-aa3glhy1lm] {
    border-color: #f0a164;
    color: #a9511d;
    background: #fff8ef;
}

.business-tab-button.active[b-aa3glhy1lm] {
    border-color: #df7a35;
    color: #ffffff;
    background: #df7a35;
    box-shadow: 0 6px 14px rgba(223, 122, 53, 0.2);
}

.business-tab-button:disabled[b-aa3glhy1lm] {
    cursor: default;
    opacity: 0.62;
}

.filter-field[b-aa3glhy1lm] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.filter-field label[b-aa3glhy1lm] {
    color: #66788a;
    font-size: 0.68rem;
    font-weight: 750;
}

[b-aa3glhy1lm] .summary-filter-bar .rz-inputtext,
[b-aa3glhy1lm] .summary-filter-bar .rz-dropdown,
[b-aa3glhy1lm] .summary-filter-bar .rz-datepicker,
[b-aa3glhy1lm] .summary-filter-bar .rz-multiselect,
[b-aa3glhy1lm] .summary-filter-bar .filter-select,
[b-aa3glhy1lm] .summary-filter-bar .rz-picker {
    width: 100% !important;
    min-height: 34px;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-aa3glhy1lm] .summary-filter-bar .rz-state-focus,
[b-aa3glhy1lm] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.native-multiselect[b-aa3glhy1lm] {
    position: relative;
    min-width: 0;
}

.native-multiselect > summary[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}

.native-multiselect > summary[b-aa3glhy1lm]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-aa3glhy1lm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-aa3glhy1lm] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-aa3glhy1lm] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-aa3glhy1lm] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__options[b-aa3glhy1lm] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-aa3glhy1lm] {
    background: #fff5ec;
}

.native-multiselect__options input[b-aa3glhy1lm] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-aa3glhy1lm] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-aa3glhy1lm] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}

.filter-actions[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.summary-action-btn[b-aa3glhy1lm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

[b-aa3glhy1lm] .filter-actions .rz-button {
    min-height: 28px;
    padding: 0.1rem 0.66rem;
    border-width: 1px;
    border-radius: 8px;
}

.summary-action-btn-search[b-aa3glhy1lm],
.summary-action-btn-reset[b-aa3glhy1lm],
.summary-action-btn-export[b-aa3glhy1lm] { background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%); }
.summary-action-btn-search[b-aa3glhy1lm] { color: #9a3412; border-color: #fde7d3; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05); }
.summary-action-btn-reset[b-aa3glhy1lm] { color: #475569; border-color: #e2e8f0; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04); }
.summary-action-btn-export[b-aa3glhy1lm] { color: #0f766e; border-color: #ccfbf1; box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05); }
.summary-action-btn:hover:not(:disabled)[b-aa3glhy1lm] { transform: translateY(-1px); }

.summary-action-btn--primary[b-aa3glhy1lm] {
    color: #9a3412;
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1);
}

.summary-action-btn--reset[b-aa3glhy1lm] {
    border-color: #cbd5e1;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.summary-action-btn--export[b-aa3glhy1lm] {
    border-color: #5eead4;
    color: #0f766e;
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.summary-action-btn--primary:hover:not(:disabled)[b-aa3glhy1lm] { border-color: #f97316; box-shadow: 0 7px 14px rgba(249, 115, 22, 0.16); }
.summary-action-btn--reset:hover:not(:disabled)[b-aa3glhy1lm] { border-color: #94a3b8; box-shadow: 0 7px 14px rgba(15, 23, 42, 0.09); }
.summary-action-btn--export:hover:not(:disabled)[b-aa3glhy1lm] { border-color: #14b8a6; box-shadow: 0 7px 14px rgba(20, 184, 166, 0.16); }

.summary-action-btn:disabled[b-aa3glhy1lm] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.mapping-summary-table-wrapper[b-aa3glhy1lm] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(54, 84, 112, 0.07);
}

.mapping-summary-table-scroll[b-aa3glhy1lm] {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b8c9d9 #eef4fa;
    scrollbar-width: thin;
}

.mapping-summary-table-scroll[b-aa3glhy1lm]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mapping-summary-table-scroll[b-aa3glhy1lm]::-webkit-scrollbar-track {
    background: #eef4fa;
}

.mapping-summary-table-scroll[b-aa3glhy1lm]::-webkit-scrollbar-thumb {
    border: 2px solid #eef4fa;
    border-radius: 10px;
    background: #b8c9d9;
}

.mapping-summary-table[b-aa3glhy1lm] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #3e4c5f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mapping-summary-table th[b-aa3glhy1lm],
.mapping-summary-table td[b-aa3glhy1lm] {
    padding: 6px 10px;
    border-right: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-aa3glhy1lm] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 30px;
    color: #4f6275;
    background: #f5f8fc;
    background-clip: padding-box;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapping-summary-table thead tr:first-child th[b-aa3glhy1lm] {
    height: 32px;
    border-bottom-color: #d8e3ee;
}

.mapping-summary-table thead tr:nth-child(2) th[b-aa3glhy1lm] {
    top: 32px;
    background: #fbfdff;
}

    .mapping-summary-table thead .group-parent-header[b-aa3glhy1lm] {
        color: rgb(79, 98, 117);
        background: linear-gradient(135deg, #f09a4a 0%, #db7131 100%);
    }

.summary-total-row td[b-aa3glhy1lm] {
    position: sticky;
    top: 32px;
    z-index: 5;
    color: #355068;
    background: #edf5fc;
    border-bottom: 1px solid #bfd4e6;
    font-weight: 850;
    padding-top: 4px;
    padding-bottom: 4px;
}

.summary-total-row td:first-child[b-aa3glhy1lm] {
    letter-spacing: 0.08em;
}

.business-group-row td[b-aa3glhy1lm] {
    padding: 6px 11px;
    color: #7e5a2c;
    background: #fff8eb;
    border-bottom-color: #f0dfbb;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-data-row-main td[b-aa3glhy1lm] {
    height: 36px;
}

.summary-data-row:nth-of-type(even) td:not(.group-cell)[b-aa3glhy1lm] {
    background: #fbfdff;
}

.summary-data-row:hover td[b-aa3glhy1lm],
.summary-data-row:hover .group-cell[b-aa3glhy1lm] {
    background: #f2f8fe;
}

.group-cell[b-aa3glhy1lm] {
    --group-accent: #6d86a3;
    --group-bg: #fafcff;
    --group-bg-hover: #f2f8fe;
    --group-text: #445466;
    --group-pill-bg: rgba(255, 255, 255, 0.72);
    position: relative;
    color: #445466;
    background: var(--group-bg) !important;
    font-weight: 700;
    font-size: 0.77rem;
    vertical-align: top;
}

.summary-data-row:hover .group-cell[b-aa3glhy1lm] {
    background: var(--group-bg) !important;
}

.group-sticky-label[b-aa3glhy1lm] {
    position: sticky;
    top: 70px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--group-accent) 24%, white);
    border-radius: 8px;
    color: var(--group-text);
    background: var(--group-pill-bg) !important;
    box-shadow: 0 5px 14px rgba(31, 45, 61, 0.08);
    line-height: 1.2;
    text-align: center;
    backdrop-filter: blur(2px);
}

.group-cell-mien[b-aa3glhy1lm] {
    color: var(--group-text);
    font-weight: 850;
    text-transform: uppercase;
}

.group-cell-phan-loai[b-aa3glhy1lm] {
    color: var(--group-text);
    font-weight: 850;
    text-transform: uppercase;
}

.group-cell-vehicle[b-aa3glhy1lm] {
    color: var(--group-text);
    font-weight: 800;
}

.group-tone-domestic[b-aa3glhy1lm] {
    --group-accent: #3f8f61;
    --group-bg: #e6f6e9;
    --group-bg-hover: #e6f6e9;
    --group-text: #2f714a;
    --group-pill-bg: #d9f0dd;
}

.group-tone-import[b-aa3glhy1lm] {
    --group-accent: #8a66bf;
    --group-bg: #f0e9ff;
    --group-bg-hover: #f0e9ff;
    --group-text: #684c99;
    --group-pill-bg: #e6dcfb;
}

.group-tone-south[b-aa3glhy1lm] {
    --group-accent: #1f8a70;
    --group-bg: #e4f6ef;
    --group-bg-hover: #e4f6ef;
    --group-text: #176b59;
    --group-pill-bg: #d8f0e8;
}

.group-tone-north[b-aa3glhy1lm] {
    --group-accent: #4169b1;
    --group-bg: #e8f0ff;
    --group-bg-hover: #e8f0ff;
    --group-text: #315691;
    --group-pill-bg: #dde8ff;
}

.group-tone-central[b-aa3glhy1lm] {
    --group-accent: #bd7a22;
    --group-bg: #fff1d9;
    --group-bg-hover: #fff1d9;
    --group-text: #925f1e;
    --group-pill-bg: #ffe8bf;
}

.group-tone-unknown[b-aa3glhy1lm] {
    --group-accent: #7c8794;
    --group-bg: #eef3f7;
    --group-bg-hover: #eef3f7;
    --group-text: #596677;
    --group-pill-bg: #e5ebf1;
}

.vehicle-tone-container[b-aa3glhy1lm] {
    --group-accent: #2e78b5;
    --group-bg: #e4f3ff;
    --group-bg-hover: #e4f3ff;
    --group-text: #245f92;
    --group-pill-bg: #d9ecfb;
}

.vehicle-tone-truck[b-aa3glhy1lm] {
    --group-accent: #c05d35;
    --group-bg: #ffede3;
    --group-bg-hover: #ffede3;
    --group-text: #994a2a;
    --group-pill-bg: #ffe1d2;
}

.vehicle-tone-barge[b-aa3glhy1lm] {
    --group-accent: #6c65b8;
    --group-bg: #ece9ff;
    --group-bg-hover: #ece9ff;
    --group-text: #57509b;
    --group-pill-bg: #e2defb;
}

.vehicle-tone-coaster[b-aa3glhy1lm] {
    --group-accent: #2b8b9e;
    --group-bg: #e0f5f9;
    --group-bg-hover: #e0f5f9;
    --group-text: #236f7e;
    --group-pill-bg: #d3eef3;
}

.vehicle-tone-unknown[b-aa3glhy1lm] {
    --group-accent: #6d7f91;
    --group-bg: #edf4f8;
    --group-bg-hover: #edf4f8;
    --group-text: #526476;
    --group-pill-bg: #e3ecf2;
}

.summary-col-emphasis[b-aa3glhy1lm] {
    font-weight: 650;
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-di[b-aa3glhy1lm] {
    background: rgb(237, 245, 253);
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-den[b-aa3glhy1lm] {
    background: rgb(255, 243, 231);
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-di-cell[b-aa3glhy1lm] {
    background: #eaf4fd;
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-den-cell[b-aa3glhy1lm] {
    background: #fff3e5;
}

.mapping-summary-table td.summary-group-noi-di-cell[b-aa3glhy1lm] {
    background: #f4f9fe;
}

.mapping-summary-table td.summary-group-noi-den-cell[b-aa3glhy1lm] {
    background: #fff8ef;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-di-cell[b-aa3glhy1lm] {
    background: #edf5fd;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-den-cell[b-aa3glhy1lm] {
    background: #fff3e7;
}

.summary-data-row:hover td.summary-group-noi-di-cell[b-aa3glhy1lm] {
    background: #e3f0fc;
}

.summary-data-row:hover td.summary-group-noi-den-cell[b-aa3glhy1lm] {
    background: #ffeccd;
}

.number-cell[b-aa3glhy1lm] {
    color: #31465b;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 650;
}

.text-break-cell[b-aa3glhy1lm] {
    white-space: pre-line;
    font-size: 0.79rem;
}

.table-badge[b-aa3glhy1lm],
.status-badge[b-aa3glhy1lm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.badge-cell[b-aa3glhy1lm] {
    text-align: center;
}

.status-badge-button[b-aa3glhy1lm] {
    font-family: inherit;
    cursor: pointer;
}

.status-badge-button:hover[b-aa3glhy1lm] {
    filter: brightness(0.97);
}

.table-badge--warehouse[b-aa3glhy1lm] {
    border-color: #99c8f0;
    color: #1f5f96;
    background: #eaf5ff;
}

.table-badge--ship[b-aa3glhy1lm] {
    border-color: #c9b7ef;
    color: #6f51ad;
    background: #f4efff;
}

.status-badge--success[b-aa3glhy1lm] {
    border-color: #b9ddc0;
    color: #2f7a3a;
    background: #eefbf0;
}

.status-badge--warning[b-aa3glhy1lm] {
    border-color: #efd58f;
    color: #9b6a0b;
    background: #fff8df;
}

.status-badge--danger[b-aa3glhy1lm] {
    border-color: #ecb0b8;
    color: #bc415f;
    background: #fff0ec;
}

.status-badge--neutral[b-aa3glhy1lm] {
    border-color: #cfdbe7;
    color: #627487;
    background: #f2f6fa;
}

.warehouse-link[b-aa3glhy1lm] {
    display: inline;
    padding: 0;
    border: 0;
    color: #2e78b5;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(46, 120, 181, 0.26);
    text-underline-offset: 2px;
}

.warehouse-link:hover[b-aa3glhy1lm] {
    color: #205d90;
    text-decoration-color: currentColor;
}

.col-phan-loai[b-aa3glhy1lm] { width: 138px; }
.col-mien[b-aa3glhy1lm] { width: 126px; }
.col-khu-vuc[b-aa3glhy1lm] { width: 146px; }
.col-noi[b-aa3glhy1lm] { width: 146px; }
.col-vehicle-type[b-aa3glhy1lm] { width: 150px; }
.col-carrier[b-aa3glhy1lm] { width: 180px; }
.col-product[b-aa3glhy1lm] { width: 180px; }
.col-origin[b-aa3glhy1lm] { width: 126px; }
.col-contract[b-aa3glhy1lm] { width: 168px; }
.col-trip[b-aa3glhy1lm] { width: 118px; }
.col-nguon-hang[b-aa3glhy1lm] { width: 126px; }
.col-ten-tau[b-aa3glhy1lm] { width: 156px; }
.col-quantity[b-aa3glhy1lm] { width: 132px; }
.col-status[b-aa3glhy1lm] { width: 150px; }
.col-invoice[b-aa3glhy1lm] { width: 126px; }
.col-ai[b-aa3glhy1lm] { width: 198px; }
.col-doc[b-aa3glhy1lm] { width: 126px; }

.mapping-summary-loading-overlay[b-aa3glhy1lm] {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(250, 252, 255, 0.88);
    backdrop-filter: blur(2px);
}

.mapping-summary-loading-spinner[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dfebf5;
    border-radius: 12px;
    color: #5e748a;
    background: #fff;
    box-shadow: 0 10px 24px rgba(63, 99, 138, 0.12);
    font-size: 0.82rem;
    font-weight: 650;
}

.mapping-summary-spinner[b-aa3glhy1lm] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfebf5;
    border-top-color: #4f8bbd;
    border-radius: 50%;
    animation: mappingSummarySpin-b-aa3glhy1lm 0.75s linear infinite;
}

@keyframes mappingSummarySpin-b-aa3glhy1lm {
    to { transform: rotate(360deg); }
}

.grid-empty-state[b-aa3glhy1lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 150px;
    gap: 8px;
    color: #6d7f92;
    border: 1px dashed #cedbe8;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1280px) {
    .summary-filter-layout[b-aa3glhy1lm] {
        flex-wrap: wrap;
    }

    .filter-title[b-aa3glhy1lm] {
        display: none;
    }

    .mapping-summary-stats[b-aa3glhy1lm] {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-aa3glhy1lm] {
        height: calc(100dvh - 90px);
        padding-inline: 4px;
    }

    .summary-heading__date[b-aa3glhy1lm] {
        display: none;
    }

    .mapping-summary-stats[b-aa3glhy1lm] {
        display: flex;
        overflow-x: auto;
    }

    .mapping-summary-stat-item[b-aa3glhy1lm] {
        min-width: 160px;
    }

    .summary-filter-layout[b-aa3glhy1lm] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-aa3glhy1lm] {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .filter-actions[b-aa3glhy1lm] {
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* ============================================================
   Stats gọn 1 hàng + tô màu / highlight cho bảng tổng quan
   ============================================================ */

/* Mặc định grid 3 cột làm 4 thẻ rớt xuống 2 hàng -> ép về đúng 1 hàng và thu nhỏ lại. */
.mapping-summary-stats--compact[b-aa3glhy1lm] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.mapping-summary-stats--compact .mapping-summary-stat-item[b-aa3glhy1lm] {
    min-height: 40px;
    gap: 6px;
    padding: 5px 9px 5px 11px;
    border-radius: 8px;
}

.mapping-summary-stats--compact .mapping-summary-stat-item label[b-aa3glhy1lm] {
    max-width: none;
    font-size: 0.62rem;
    line-height: 1.15;
}

.mapping-summary-stats--compact .mapping-summary-stat-value[b-aa3glhy1lm] {
    min-width: 30px;
    font-size: 1.05rem;
}

/* 2 cột cần chú ý: SL CẦN XÁC NHẬN / CHỨNG TỪ CẦN DUYỆT. */
.mapping-summary-table th.summary-col-alert[b-aa3glhy1lm],
.mapping-summary-table td.summary-col-alert[b-aa3glhy1lm] {
    background: #fff5f5;
}

.mapping-summary-table th.summary-col-alert[b-aa3glhy1lm] {
    background: #ffe9e9;
}

/* Highlight con số của 2 cột trên cho nổi bật. */
.summary-alert-value[b-aa3glhy1lm] {
    color: #c0392b;
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Cặp cột LŨY KẾ: TỔNG SL HÓA ĐƠN + TỔNG SL NHẬP KHO KAG (cùng 1 màu cả cột). */
.mapping-summary-table th.summary-col-lifetime[b-aa3glhy1lm],
.mapping-summary-table td.summary-col-lifetime[b-aa3glhy1lm] {
    background: #eef4fb;
}

.mapping-summary-table th.summary-col-lifetime[b-aa3glhy1lm] {
    background: #dfeaf7;
}

/* Cặp cột TRONG KỲ: SL HÓA ĐƠN + SL NHẬP KHO KAG trong kỳ (cùng 1 màu cả cột). */
.mapping-summary-table th.summary-col-period[b-aa3glhy1lm],
.mapping-summary-table td.summary-col-period[b-aa3glhy1lm] {
    background: #eefaf3;
}

.mapping-summary-table th.summary-col-period[b-aa3glhy1lm] {
    background: #d9f2e5;
}

/* Nút bấm để nhảy sang tab Chi tiết: trông như text thường, chỉ nổi khi hover. */
.summary-drill-link[b-aa3glhy1lm] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.summary-drill-link:hover[b-aa3glhy1lm],
.summary-drill-link:focus-visible[b-aa3glhy1lm] {
    color: #1c6ea4;
    text-decoration: underline;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_NVC.razor.rz.scp.css */
#ControlRegion[b-x0f2om5mdp] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    height: calc(100vh - 72px);
    min-height: 640px;
    overflow: hidden;
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, 0.08), transparent 28rem),
        #f3f6fb;
}

.compare-root-card[b-x0f2om5mdp],
.mail-tab-content[b-x0f2om5mdp],
.compare-native-layout[b-x0f2om5mdp],
.mail-detail-panel[b-x0f2om5mdp] {
    min-height: 0;
}

.compare-root-card[b-x0f2om5mdp] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(28, 50, 92, 0.11);
}

.mail-native-tabs[b-x0f2om5mdp] {
    display: inline-flex;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mail-native-tab[b-x0f2om5mdp] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f6f82;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mail-native-tab:hover[b-x0f2om5mdp] {
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(56, 189, 248, 0.16);
}

.mail-native-tab--active[b-x0f2om5mdp] {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, 0.35);
}

.mail-tab-content[b-x0f2om5mdp],
.compare-native-layout[b-x0f2om5mdp],
.mail-detail-panel[b-x0f2om5mdp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-filter-header[b-x0f2om5mdp] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 20px 24px 15px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.comparison-filter-bar[b-x0f2om5mdp],
.queue-filter-actions[b-x0f2om5mdp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.comparison-filter-bar[b-x0f2om5mdp] {
    flex: 1 1 760px;
    gap: 12px;
    margin-bottom: 0;
}

.queue-filter-actions[b-x0f2om5mdp] {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.filter-field[b-x0f2om5mdp] {
    display: flex;
    flex: 1 1 150px;
    min-width: 135px;
    max-width: 220px;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-x0f2om5mdp] {
    color: #475569;
    font-size: 0.71rem;
    font-weight: 750;
    letter-spacing: 0.025em;
}

.filter-field > input[b-x0f2om5mdp],
.native-multiselect > summary[b-x0f2om5mdp] {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #d5dee8;
    border-radius: 9px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 0.76rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.filter-field > input[b-x0f2om5mdp] {
    padding: 0 10px;
}

.filter-field > input:focus[b-x0f2om5mdp],
.native-multiselect[open] > summary[b-x0f2om5mdp] {
    outline: none;
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
}

.mail-action--daily-report[b-x0f2om5mdp] {
    margin-left: auto;
}

.daily-issue-modal-backdrop[b-x0f2om5mdp] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-x0f2om5mdp] {
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-x0f2om5mdp] { margin: 0; font-size: 1rem; }

.daily-issue-modal__filters[b-x0f2om5mdp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* 7 bộ lọc (2 ngày + nơi đi/đến + NVC + phương tiện + hình thức) tự xuống hàng,
   mỗi ô vẫn đủ rộng để đọc được nhãn đã chọn. */
.daily-issue-modal__filters .filter-field[b-x0f2om5mdp] {
    flex: 1 1 170px;
    min-width: 155px;
    max-width: 260px;
}

.daily-issue-modal__body[b-x0f2om5mdp] { min-height: 260px; overflow: auto; padding: 14px 16px 16px; }
.daily-issue-table-wrap[b-x0f2om5mdp] { max-height: calc(100vh - 205px); overflow: auto; border: 1px solid #dbe3ec; border-radius: 8px; }
.daily-issue-table[b-x0f2om5mdp] { width: 100%; min-width: 2100px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.daily-issue-table th[b-x0f2om5mdp], .daily-issue-table td[b-x0f2om5mdp] { padding: 7px 8px; border-right: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; text-align: center; white-space: nowrap; }
.daily-issue-table th[b-x0f2om5mdp] { position: sticky; top: 0; z-index: 4; background: #eef4f8; color: #334155; font-weight: 800; }
.daily-issue-table th:first-child[b-x0f2om5mdp], .daily-issue-table td:first-child[b-x0f2om5mdp] { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; }
.daily-issue-table th:first-child[b-x0f2om5mdp] { z-index: 6; background: #e8f1f3; }
.daily-issue-date[b-x0f2om5mdp] { color: #0f172a; font-weight: 700; }
.daily-issue-number[b-x0f2om5mdp] { color: #1e293b; font-variant-numeric: tabular-nums; }
.daily-issue-number--warning[b-x0f2om5mdp] { color: #b42318; background: #fff4ed; font-weight: 800; }
.daily-issue-value[b-x0f2om5mdp] { width: 100%; min-width: 58px; padding: 3px 8px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: inherit; }
.daily-issue-value--clickable[b-x0f2om5mdp] { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; cursor: pointer; }
.daily-issue-number--warning .daily-issue-value--clickable[b-x0f2om5mdp] { color: #b42318; background: #fff7ed; border-color: #fed7aa; }
.daily-issue-value:disabled[b-x0f2om5mdp] { opacity: 1; }
.daily-issue-reference-cell[b-x0f2om5mdp] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.daily-issue-reference[b-x0f2om5mdp] { color: #94a3b8; font-weight: 600; }
.daily-issue-value--diff[b-x0f2om5mdp] { width: auto; min-width: 42px; padding-inline: 6px; font-weight: 800; }
.daily-issue-loading[b-x0f2om5mdp], .daily-issue-empty[b-x0f2om5mdp] { display: flex; min-height: 210px; align-items: center; justify-content: center; color: #64748b; border: 1px dashed #cbd5e1; border-radius: 8px; }
.daily-issue-group-row th[b-x0f2om5mdp] { top: 0; }
.daily-issue-table thead tr:nth-child(2) th[b-x0f2om5mdp] { top: 35px; z-index: 5; }
.daily-issue-group--info[b-x0f2om5mdp] { background: #eef6ff !important; }
.daily-issue-group--status[b-x0f2om5mdp] { background: #f0fdf4 !important; }
.daily-issue-group--data[b-x0f2om5mdp] { background: #fff7ed !important; }
.daily-issue-group--documents[b-x0f2om5mdp] { background: #fdf2f8 !important; }
.daily-issue-number.daily-issue-group--info[b-x0f2om5mdp] { background: #f8fbff !important; }
.daily-issue-number.daily-issue-group--status[b-x0f2om5mdp] { background: #f7fef9 !important; }
.daily-issue-number.daily-issue-group--data[b-x0f2om5mdp] { background: #fffaf3 !important; }
.daily-issue-number.daily-issue-group--documents[b-x0f2om5mdp] { background: #fff8fb !important; }
.daily-issue-number--warning.daily-issue-group--info[b-x0f2om5mdp] { background: #eaf3ff !important; }
.daily-issue-number--warning.daily-issue-group--status[b-x0f2om5mdp] { background: #ecfdf3 !important; }
.daily-issue-number--warning.daily-issue-group--data[b-x0f2om5mdp] { background: #fff4e6 !important; }
.daily-issue-number--warning.daily-issue-group--documents[b-x0f2om5mdp] { background: #fce7f3 !important; }

[b-x0f2om5mdp] .compare-filter-bar-native .rz-datepicker,
[b-x0f2om5mdp] .compare-filter-bar-native .rz-picker,
[b-x0f2om5mdp] .compare-filter-bar-native .rz-inputtext {
    width: 100% !important;
}

[b-x0f2om5mdp] .compare-filter-bar-native .rz-datepicker,
[b-x0f2om5mdp] .compare-filter-bar-native .rz-picker {
    min-height: 34px;
    border: 1px solid #d5dee8 !important;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

[b-x0f2om5mdp] .compare-filter-bar-native .rz-state-focus,
[b-x0f2om5mdp] .compare-filter-bar-native .rz-focus {
    border-color: #8aa8f4 !important;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1) !important;
}

.native-multiselect[b-x0f2om5mdp] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-x0f2om5mdp]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-x0f2om5mdp] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-x0f2om5mdp]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease;
}

.native-multiselect[open] .native-multiselect__arrow[b-x0f2om5mdp]::before {
    transform: rotate(-135deg) translateY(-1px);
}

.native-multiselect__menu[b-x0f2om5mdp] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5ee;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.native-multiselect__header[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 8px;
    font-size: 0.75rem;
}

.native-multiselect__header button[b-x0f2om5mdp] {
    border: 0;
    background: none;
    color: var(--mail-primary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.native-multiselect__search-wrap[b-x0f2om5mdp] { padding: 6px 4px 2px; }

.native-multiselect__search[b-x0f2om5mdp] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}

.native-multiselect__search:focus[b-x0f2om5mdp] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.native-multiselect__options[b-x0f2om5mdp] {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    overflow: auto;
}

.native-multiselect__select-all[b-x0f2om5mdp] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 2px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}

.native-multiselect__no-results[b-x0f2om5mdp] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.native-multiselect__options label[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 5px;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.76rem;
}

.native-multiselect__options label:hover[b-x0f2om5mdp] {
    background: #eef4ff;
}

.native-multiselect__empty[b-x0f2om5mdp] {
    padding: 8px 4px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.mail-action[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: 0.18s ease;
}

.mail-action:hover:not(:disabled)[b-x0f2om5mdp] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-x0f2om5mdp] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mail-action--primary[b-x0f2om5mdp] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.mail-action--secondary[b-x0f2om5mdp] {
    color: #344256;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--export[b-x0f2om5mdp] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
    box-shadow: 0 7px 16px rgba(18, 150, 111, 0.18);
}

.mail-action--toggle[b-x0f2om5mdp] {
    color: #4b5a6d;
    background: #fff;
    border-color: #d9e1eb;
}

.mail-action--toggle:hover:not(:disabled)[b-x0f2om5mdp] {
    border-color: #9db2dd;
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.12);
}

.mail-action--toggle-active[b-x0f2om5mdp] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, 0.2);
}

.filter-extra-panel[b-x0f2om5mdp] {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(760px, calc(100vw - 60px));
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--mail-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.queue-view-toolbar[b-x0f2om5mdp] {
    flex-shrink: 0;
    padding: 8px 12px 7px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
    border-radius: 0 0 12px 12px;
}

.queue-view-overall-stats[b-x0f2om5mdp] {
    display: grid;
    /* Ô TỔNG bên trái + lưới 4 cột x 2 hàng bên phải, co theo bề rộng màn hình. */
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 3fr);
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.overall-stat-card[b-x0f2om5mdp] {
    position: relative;
    display: flex;
    height: 52px;
    min-height: 52px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.overall-stat-card[b-x0f2om5mdp]::before {
    display: none;
}

.overall-stat-card--total[b-x0f2om5mdp] {
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.08);
}

.overall-stat-card--clickable[b-x0f2om5mdp] {
    cursor: pointer;
}

.overall-stat-card--clickable:hover[b-x0f2om5mdp] {
    z-index: 1;
    border-color: #7ea2f3;
    box-shadow: 0 8px 20px rgba(36, 87, 230, 0.12);
    transform: translateY(-1px);
}

.overall-stat-card--highlight[b-x0f2om5mdp] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, 0.09),
        0 0 8px rgba(125, 211, 252, 0.12) !important;
}

.overall-stat-card--highlight *[b-x0f2om5mdp] {
    color: #0c4a6e !important;
}

.overall-stat-card--active[b-x0f2om5mdp] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, 0.24),
        0 0 14px rgba(56, 189, 248, 0.24) !important;
}

.overall-stat-card--active *[b-x0f2om5mdp] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-x0f2om5mdp]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, 0.25) 260deg,
        #67e8f9 292deg,
        #fff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.95));
    animation: overall-neon-border-b-x0f2om5mdp 1.8s linear infinite;
}

@keyframes overall-neon-border-b-x0f2om5mdp {
    to { --overall-neon-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-x0f2om5mdp]::after { animation: none; }
}

.overall-stat-card--disabled[b-x0f2om5mdp] {
    pointer-events: none;
    opacity: 0.54;
}

.overall-stat-label[b-x0f2om5mdp],
.overall-stat-lines[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overall-stat-label[b-x0f2om5mdp] {
    justify-content: center;
    min-width: 52px;
    padding: 4px 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.overall-stat-lines[b-x0f2om5mdp] {
    flex: 1;
    flex-direction: column;
    padding: 4px 7px;
}

.stat-line-count[b-x0f2om5mdp] {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.stat-line-kg[b-x0f2om5mdp] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-line-perc[b-x0f2om5mdp] {
    margin-top: 4px;
    color: #718096;
    font-size: 0.64rem;
}

.compare-mini-row[b-x0f2om5mdp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.compare-overall-filter-link[b-x0f2om5mdp] {
    min-height: 20px;
    padding: 0.06rem 0.42rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.compare-overall-filter-link--active[b-x0f2om5mdp] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.compare-overall-filter-link:disabled[b-x0f2om5mdp] {
    opacity: 0.55;
}

/* 7 ô nhỏ xếp thành 2 hàng x 4 cột — cân đối, không bị tràn chữ. */
.overall-stat-card-group[b-x0f2om5mdp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 5px;
}

.overall-stat-card--mini[b-x0f2om5mdp] {
    min-width: 0;
    height: auto;
    min-height: 23px;
    align-items: center;
    box-shadow: none;
    border-radius: 8px;
    background: #fff;
}

.overall-stat-card--mini .overall-stat-lines[b-x0f2om5mdp] {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 2px 5px;
}

.overall-stat-card--mini .overall-stat-label[b-x0f2om5mdp] {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
    padding: 2px 6px 2px 2px;
    color: #526174;
    background: transparent;
    font-size: clamp(0.54rem, 0.5vw, 0.6rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.overall-stat-card--mini .stat-line-count[b-x0f2om5mdp] {
    color: #c94e2d;
    font-size: clamp(0.7rem, 0.7vw, 0.8rem);
}

/* ===== 3 ALERT QUAN TRỌNG: màu đậm hơn hẳn các ô overall còn lại =====
   SL cần xác nhận (hổ phách) / Chứng từ cần duyệt (hồng đậm) / Lệch SL (đỏ).
   Chỉ áp dụng khi số > 0. Đặt SAU --highlight và dùng !important để thắng nền xanh
   nhạt mặc định của --highlight; ô đang được chọn (--active) vẫn ưu tiên cao hơn. */
.overall-stat-card--critical-amber[b-x0f2om5mdp],
.overall-stat-card--critical-rose[b-x0f2om5mdp],
.overall-stat-card--critical-red[b-x0f2om5mdp] {
    border-width: 1px !important;
    box-shadow: 0 5px 13px var(--critical-shadow) !important;
    background: var(--critical-bg) !important;
    border-color: var(--critical-border) !important;
}

.overall-stat-card--critical-amber *[b-x0f2om5mdp],
.overall-stat-card--critical-rose *[b-x0f2om5mdp],
.overall-stat-card--critical-red *[b-x0f2om5mdp] {
    color: var(--critical-text) !important;
}

.overall-stat-card--critical-amber .stat-line-count[b-x0f2om5mdp],
.overall-stat-card--critical-rose .stat-line-count[b-x0f2om5mdp],
.overall-stat-card--critical-red .stat-line-count[b-x0f2om5mdp] {
    color: var(--critical-value) !important;
    font-weight: 850;
}

.overall-stat-card--critical-amber[b-x0f2om5mdp] {
    --critical-bg: linear-gradient(135deg, #fff4d6 0%, #ffe4a8 100%);
    --critical-border: #d97706;
    --critical-shadow: rgba(217, 119, 6, 0.22);
    --critical-text: #7c3f04;
    --critical-value: #9a3412;
}

.overall-stat-card--critical-rose[b-x0f2om5mdp] {
    --critical-bg: linear-gradient(135deg, #ffe1e8 0%, #fdc0cf 100%);
    --critical-border: #be123c;
    --critical-shadow: rgba(190, 18, 60, 0.22);
    --critical-text: #85102f;
    --critical-value: #9f1239;
}

.overall-stat-card--critical-red[b-x0f2om5mdp] {
    --critical-bg: linear-gradient(135deg, #ffdedb 0%, #ffbdb6 100%);
    --critical-border: #dc2626;
    --critical-shadow: rgba(220, 38, 38, 0.24);
    --critical-text: #8f1d1d;
    --critical-value: #b91c1c;
}

.overall-stat-card--critical-amber:hover[b-x0f2om5mdp],
.overall-stat-card--critical-rose:hover[b-x0f2om5mdp],
.overall-stat-card--critical-red:hover[b-x0f2om5mdp] {
    border-color: var(--critical-value) !important;
    box-shadow: 0 8px 18px var(--critical-shadow) !important;
}

/* Ô đang lọc: giữ neon xanh của --active, không để màu alert đè lên. */
.overall-stat-card--active.overall-stat-card--critical-amber[b-x0f2om5mdp],
.overall-stat-card--active.overall-stat-card--critical-rose[b-x0f2om5mdp],
.overall-stat-card--active.overall-stat-card--critical-red[b-x0f2om5mdp] {
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
}

.overall-stat-card--active.overall-stat-card--critical-amber *[b-x0f2om5mdp],
.overall-stat-card--active.overall-stat-card--critical-rose *[b-x0f2om5mdp],
.overall-stat-card--active.overall-stat-card--critical-red *[b-x0f2om5mdp] {
    color: #083b5c !important;
}

/* Ô TỔNG: số chuyến theo loại phương tiện nằm gọn bên trong. */
.overall-stat-card--summary[b-x0f2om5mdp] {
    height: auto;
    min-height: 52px;
}

.overall-stat-card--summary .overall-stat-lines[b-x0f2om5mdp] {
    padding: 4px 8px;
}

.compare-overall-chip[b-x0f2om5mdp] {
    padding: 0.08rem 0.46rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.63rem;
    font-weight: 800;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.3;
}

/* Chip loại phương tiện trên ô TỔNG: bấm để lọc nhanh theo loại đó (hoạt động như tab). */
.compare-overall-chip--clickable[b-x0f2om5mdp] {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.compare-overall-chip--clickable:hover:not(:disabled)[b-x0f2om5mdp] {
    background: #e6efff;
    border-color: #93b4f6;
    transform: translateY(-1px);
}

.compare-overall-chip--clickable:disabled[b-x0f2om5mdp] {
    cursor: default;
    opacity: 0.7;
}

/* Thắng rule ".overall-stat-card--highlight * { color }" của ô TỔNG. */
.overall-stat-card--highlight .compare-overall-chip--active[b-x0f2om5mdp],
.overall-stat-card--highlight .compare-overall-chip--active *[b-x0f2om5mdp] {
    color: #fff !important;
}

.compare-overall-chip--active[b-x0f2om5mdp],
.compare-overall-chip--active:hover:not(:disabled)[b-x0f2om5mdp] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 4px 10px rgba(36, 87, 230, 0.28);
}

/* Khung gộp bộ lọc + thống kê, có thể thu gọn để bảng chiếm hết chiều cao. */
.control-collapse-panel[b-x0f2om5mdp] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    /* Không cắt panel "Thêm bộ lọc" và menu dropdown (đều position: absolute) — trước đây bị ẩn dưới bảng. */
    position: relative;
    z-index: 20;
    overflow: visible;
    border: 1px solid var(--mail-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.control-collapse-toggle[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid var(--mail-border);
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
}

.control-collapse-panel--collapsed .control-collapse-toggle[b-x0f2om5mdp] {
    border-bottom: none;
    border-radius: 12px;
}

.control-collapse-toggle__summary[b-x0f2om5mdp] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.control-collapse-toggle__arrow[b-x0f2om5mdp] {
    flex-shrink: 0;
    color: #2457e6;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.control-collapse-chip[b-x0f2om5mdp] {
    padding: 0.1rem 0.5rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.control-collapse-chip--total[b-x0f2om5mdp] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.control-collapse-chip--muted[b-x0f2om5mdp] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.control-collapse-body[b-x0f2om5mdp] {
    display: flex;
    flex-direction: column;
}

.control-collapse-panel--collapsed .control-collapse-body[b-x0f2om5mdp] {
    display: none;
}

.compare-grid-wrapper[b-x0f2om5mdp] {
    position: relative;
    /* Tạo stacking context riêng (dưới khung bộ lọc z-index 20) để header sticky của bảng không đè lên dropdown. */
    z-index: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: #fff;
}

.datamail-grid-scroll[b-x0f2om5mdp] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-x0f2om5mdp] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-x0f2om5mdp],
.mail-native-table td[b-x0f2om5mdp] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead th[b-x0f2om5mdp] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 24px;
    color: #536174;
    background: #f3f6fa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.mail-native-table thead .compare-main-header th[colspan][b-x0f2om5mdp] {
    color: #9a4f1e;
    background: #fff5e8;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-di[b-x0f2om5mdp],
.mail-native-table thead .compare-main-header th.compare-group-noi-di[colspan][b-x0f2om5mdp],
.mail-native-table thead th.compare-group-noi-di[b-x0f2om5mdp] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table thead .compare-main-header th.compare-group-noi-den[b-x0f2om5mdp],
.mail-native-table thead .compare-main-header th.compare-group-noi-den[colspan][b-x0f2om5mdp],
.mail-native-table thead th.compare-group-noi-den[b-x0f2om5mdp] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table thead .compare-main-header th[rowspan][b-x0f2om5mdp] {
    border-bottom-color: #d7dee7;
}

.mail-native-table .compare-subheader th[b-x0f2om5mdp] {
    top: 24px;
    z-index: 4;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff5e8;
    border-top: 0;
    color: #9a4f1e;
}

.mail-native-table .compare-subheader th.compare-group-noi-di[b-x0f2om5mdp] {
    color: #24635a;
    background: #eefbf7;
}

.mail-native-table .compare-subheader th.compare-group-noi-den[b-x0f2om5mdp] {
    color: #8a5a12;
    background: #fff7e6;
}

.mail-native-table tbody tr:nth-child(even)[b-x0f2om5mdp] {
    background: #fbfcfe;
}

.mail-native-table tbody td.compare-group-noi-di[b-x0f2om5mdp] {
    background: #f5fcfa;
}

.mail-native-table tbody td.compare-group-noi-den[b-x0f2om5mdp] {
    background: #fffaf0;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-di[b-x0f2om5mdp] {
    background: #eef8f5;
}

.mail-native-table tbody tr:nth-child(even) td.compare-group-noi-den[b-x0f2om5mdp] {
    background: #fff4dc;
}

.mail-native-table tbody tr:hover[b-x0f2om5mdp],
.mail-native-table tbody tr.mail-row-selected[b-x0f2om5mdp] {
    background: #edf3ff;
}

.mail-native-table tbody tr:hover td.compare-group-noi-di[b-x0f2om5mdp],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-di[b-x0f2om5mdp] {
    background: #def7ef;
}

.mail-native-table tbody tr:hover td.compare-group-noi-den[b-x0f2om5mdp],
.mail-native-table tbody tr.mail-row-selected td.compare-group-noi-den[b-x0f2om5mdp] {
    background: #ffedc2;
}

.mail-native-table tbody td[b-x0f2om5mdp] {
    height: 27px;
}

.mail-cell-warehouse[b-x0f2om5mdp] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.mail-cell-plate[b-x0f2om5mdp],
.mail-code[b-x0f2om5mdp],
.mail-direction[b-x0f2om5mdp],
.mail-cell-mono[b-x0f2om5mdp] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-plate[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f3f6fa;
    color: #24415f;
    letter-spacing: 0.04em;
}

.mail-code[b-x0f2om5mdp],
.mail-direction[b-x0f2om5mdp] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
    color: #174ea6;
}

.queue-status-badge[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.queue-status-badge--error[b-x0f2om5mdp] {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-x0f2om5mdp] {
    background-color: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-x0f2om5mdp] {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-x0f2om5mdp] {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-x0f2om5mdp] {
    background-color: #f1f5f9;
    border-color: #64748b;
    color: #1f2937;
}

.return-goods-badge[b-x0f2om5mdp] {
    display: inline-flex;
    min-width: 58px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-goods-badge--yes[b-x0f2om5mdp] {
    color: #b42318;
    background: #fff1f2;
    border-color: #fda4af;
}

.qty-diff-badge[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.loss-quantity-value[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.loss-quantity-value--positive[b-x0f2om5mdp] {
    color: #b91c1c;
}

.loss-quantity-value--negative[b-x0f2om5mdp] {
    color: #047857;
}

.loss-quantity-value--neutral[b-x0f2om5mdp] {
    color: #64748b;
    font-weight: 700;
}

.document-link-list[b-x0f2om5mdp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.document-link-list--multi[b-x0f2om5mdp] {
    gap: 10px;
}

/* Nhiều link trong 1 ô phải tách nhau ra, không dính liền kiểu "Hợp lệHợp lệ". */
.document-link-list--multi .document-link-item + .document-link-item[b-x0f2om5mdp] {
    margin-left: 4px;
}

.document-link-item[b-x0f2om5mdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid #c8daf7;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.document-link-item:hover[b-x0f2om5mdp] {
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}

.document-link-item--primary[b-x0f2om5mdp] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.document-link-item--secondary[b-x0f2om5mdp] {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

/* Hình ảnh phiếu cân: Hợp lệ / Không hợp lệ theo DA_XAC_NHAN_FINAL. */
.document-link-item--valid[b-x0f2om5mdp] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.document-link-item--valid:hover[b-x0f2om5mdp] {
    background: #d1fae5;
    border-color: #6ee7b7;
    box-shadow: 0 8px 16px rgba(4, 120, 87, 0.12);
}

.document-link-item--invalid[b-x0f2om5mdp] {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.document-link-item--invalid:hover[b-x0f2om5mdp] {
    background: #ffe4e6;
    border-color: #fda4af;
    box-shadow: 0 8px 16px rgba(190, 18, 60, 0.12);
}

/* Không có link ảnh: giữ nhãn nhưng làm mờ và bỏ con trỏ link. */
.document-link-item--disabled[b-x0f2om5mdp] {
    opacity: 0.55;
    cursor: default;
}

.document-link-item--disabled:hover[b-x0f2om5mdp] {
    box-shadow: none;
    transform: none;
}

.mail-native-pager[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-x0f2om5mdp] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager select[b-x0f2om5mdp],
.mail-native-pager button[b-x0f2om5mdp] {
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.mail-native-pager button[b-x0f2om5mdp] {
    min-width: 30px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-x0f2om5mdp] {
    opacity: 0.4;
    cursor: default;
}

.comparison-loading-overlay[b-x0f2om5mdp] {
    position: absolute;
    inset: 0 0 45px;
    z-index: 10;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.comparison-loading-skeleton[b-x0f2om5mdp] {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 14px;
}

.comparison-skeleton-row[b-x0f2om5mdp] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.comparison-skeleton-cell[b-x0f2om5mdp] {
    height: 13px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 300% 100%;
    animation: compareSkeletonPulse-b-x0f2om5mdp 1.2s infinite;
}

.grid-empty-state[b-x0f2om5mdp] {
    margin: 0 24px 14px;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
    font-size: 0.8rem;
    text-align: center;
}

@keyframes compareSkeletonPulse-b-x0f2om5mdp {
    to {
        background-position: -200% 0;
    }
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-x0f2om5mdp] {
        grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr);
    }

    .overall-stat-card-group[b-x0f2om5mdp] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .queue-view-overall-stats[b-x0f2om5mdp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .overall-stat-card-group[b-x0f2om5mdp] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-x0f2om5mdp] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .compare-root-card[b-x0f2om5mdp],
    .mail-tab-content[b-x0f2om5mdp],
    .compare-native-layout[b-x0f2om5mdp],
    .mail-detail-panel[b-x0f2om5mdp] {
        overflow: visible;
    }

    .queue-filter-header[b-x0f2om5mdp] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
    }

    .comparison-filter-bar[b-x0f2om5mdp],
    .queue-filter-actions[b-x0f2om5mdp] {
        width: 100%;
        margin-left: 0;
    }

    .comparison-filter-bar[b-x0f2om5mdp] {
        gap: 8px;
    }

    .filter-field[b-x0f2om5mdp] {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }

    .filter-extra-panel[b-x0f2om5mdp] {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .queue-view-toolbar[b-x0f2om5mdp] {
        padding: 14px 12px;
    }

    .queue-view-overall-stats[b-x0f2om5mdp] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .overall-stat-card-group[b-x0f2om5mdp] {
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .compare-grid-wrapper[b-x0f2om5mdp] {
        min-height: 480px;
        margin: 0 8px;
    }

    .grid-empty-state[b-x0f2om5mdp],
    .mail-native-pager[b-x0f2om5mdp] {
        margin-right: 8px;
        margin-left: 8px;
    }

    .mail-native-pager[b-x0f2om5mdp] {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   Tab lọc nhanh theo loại phương tiện (bảng chi tiết)
   Độc lập với chip loại phương tiện trong ô TỔNG: tab chỉ hiện
   tên, không hiện số chuyến.
   ============================================================ */
.vehicle-tab-row[b-x0f2om5mdp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 8px;
}

.vehicle-tab-button[b-x0f2om5mdp] {
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    color: #516579;
    background: #ffffff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.vehicle-tab-button:hover:not(:disabled)[b-x0f2om5mdp] {
    border-color: #6aa6dd;
    color: #1c5a92;
    background: #f2f8fd;
}

.vehicle-tab-button.active[b-x0f2om5mdp] {
    border-color: #2b7ac0;
    color: #ffffff;
    background: #2b7ac0;
    box-shadow: 0 6px 14px rgba(43, 122, 192, 0.22);
}

.vehicle-tab-button:disabled[b-x0f2om5mdp] {
    cursor: default;
    opacity: 0.62;
}

/* Cặp cột khai thác: cho giãn ngang để hiện đủ tên, không xuống dòng giữa chừng. */
/* Quy tắc chung của bảng đang cắt chữ bằng max-width:170px + ellipsis,
   nên cặp cột khai thác phải nới cả max-width mới hiện đủ tên. */
.mail-native-table th.nvc-col-khai-thac[b-x0f2om5mdp],
.mail-native-table td.nvc-col-khai-thac[b-x0f2om5mdp] {
    min-width: 250px;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_NVC_Summary.razor.rz.scp.css */
:global(body)[b-kbqufiufka] {
    overflow: hidden;
}

#ControlRegion[b-kbqufiufka] {
    height: calc(100dvh - 112px);
    min-height: 540px;
    overflow: hidden;
    padding: 0 10px 10px;
    color: #2f3d4f;
    background:
        radial-gradient(circle at 10% 0%, rgba(112, 169, 196, 0.11), transparent 24rem),
        radial-gradient(circle at 100% 0%, rgba(255, 206, 160, 0.15), transparent 20rem),
        linear-gradient(180deg, #fffefd 0%, #f9fbff 100%);
}

[b-kbqufiufka] .summary-page-card {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e6edf4;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(48, 79, 108, 0.08);
}

.mapping-summary-section[b-kbqufiufka] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    gap: 10px;
}

/* 5 ô thống kê gọn trên đúng 1 hàng (đếm theo chuyến, giống dòng TỔNG). */
.mapping-summary-stats[b-kbqufiufka] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 6px;
}

.mapping-summary-stat-item[b-kbqufiufka] {
    --stat-accent: #3d7ea6;
    --stat-tint: #f4f9fd;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    gap: 8px;
    padding: 4px 9px 4px 12px;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 9px;
    background: linear-gradient(135deg, #fffdfb 25%, var(--stat-tint));
    box-shadow: 0 4px 10px rgba(50, 82, 111, 0.07);
}

.mapping-summary-stat-item[b-kbqufiufka]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--stat-accent);
    content: "";
}

.mapping-summary-stat-item label[b-kbqufiufka] {
    max-width: none;
    color: #607284;
    /* Co chữ theo bề rộng màn hình để 5 ô luôn nằm gọn 1 hàng. */
    font-size: clamp(0.56rem, 0.5vw, 0.64rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.mapping-summary-stat-value[b-kbqufiufka] {
    min-width: 30px;
    color: var(--stat-accent);
    font-size: clamp(0.95rem, 1vw, 1.15rem);
    font-weight: 850;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-card--warning[b-kbqufiufka] { --stat-accent: #d2862c; --stat-tint: #fff8ee; }
.stat-card--blue[b-kbqufiufka] { --stat-accent: #4f7fd4; --stat-tint: #f1f6ff; }
.stat-card--teal[b-kbqufiufka] { --stat-accent: #2d8a78; --stat-tint: #eefbf7; }
.stat-card--rose[b-kbqufiufka] { --stat-accent: #cf5b6f; --stat-tint: #fff1f4; }
.stat-card--violet[b-kbqufiufka] { --stat-accent: #7a67c7; --stat-tint: #f4f1ff; }
.stat-card--amber[b-kbqufiufka] { --stat-accent: #b7791f; --stat-tint: #fffbeb; }
.stat-card--slate[b-kbqufiufka] { --stat-accent: #9f1239; --stat-tint: #fff1f2; }

.clickable-stat[b-kbqufiufka] {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.clickable-stat:hover[b-kbqufiufka] {
    border-color: color-mix(in srgb, var(--stat-accent) 40%, white);
    box-shadow: 0 10px 20px rgba(61, 100, 136, 0.14);
    transform: translateY(-1px);
}

.clickable-stat.active[b-kbqufiufka] {
    border-color: var(--stat-accent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--stat-accent) 16%, transparent),
        0 14px 28px color-mix(in srgb, var(--stat-accent) 18%, transparent);
}

.filter-container[b-kbqufiufka] {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) auto;
    align-items: end;
    flex: 0 0 auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e4ebf2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mapping-filter-bar[b-kbqufiufka] {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 8px;
    min-width: 0;
}

.filter-field > input[b-kbqufiufka],
.native-multiselect > summary[b-kbqufiufka] {
    width: 100% !important;
    height: 32px;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #d8e3ed;
    border-radius: 8px;
    color: #4b5d70;
    background: #fff;
    box-shadow: none;
    font-size: 0.72rem;
}

.summary-filter-panel[b-kbqufiufka] {
    flex: 0 0 auto;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-layout[b-kbqufiufka] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

/* 8 bộ lọc (2 ngày + Miền + Nơi đi + Nơi đến + Hình thức + Phương tiện + Đội VC) nằm trên cùng 1 hàng. */
.summary-filter-bar[b-kbqufiufka] {
    display: grid;
    /* Luôn 1 hàng, các cột co giãn theo bề rộng màn hình: 2 ngày cố định nhỏ, Miền/Hình thức hẹp, Nơi đi/đến/PT/Đội VC rộng hơn. */
    grid-template-columns:
        minmax(104px, 0.7fr) minmax(104px, 0.7fr)
        minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr)
        minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.05fr);
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    align-items: end;
}

.business-tab-row[b-kbqufiufka] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.business-tab-button[b-kbqufiufka] {
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid #d9e4ef;
    border-radius: 6px;
    color: #516579;
    background: #ffffff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.business-tab-button:hover:not(:disabled)[b-kbqufiufka] {
    border-color: #f0a164;
    color: #a9511d;
    background: #fff8ef;
}

.business-tab-button.active[b-kbqufiufka] {
    border-color: #df7a35;
    color: #ffffff;
    background: #df7a35;
    box-shadow: 0 6px 14px rgba(223, 122, 53, 0.2);
}

.business-tab-button:disabled[b-kbqufiufka] {
    cursor: default;
    opacity: 0.62;
}

/* Gạch dọc ngăn cách nhóm tab nghiệp vụ và nhóm tab loại phương tiện. */
.business-tab-divider[b-kbqufiufka] {
    width: 1px;
    align-self: stretch;
    min-height: 28px;
    margin: 0 6px;
    background: #d9e4ef;
}

/* Nhóm tab loại phương tiện dùng tông xanh để tách bạch với tab nghiệp vụ (tông cam). */
.business-tab-button--vehicle:hover:not(:disabled)[b-kbqufiufka] {
    border-color: #6aa6dd;
    color: #1c5a92;
    background: #f2f8fd;
}

.business-tab-button--vehicle.active[b-kbqufiufka] {
    border-color: #2b7ac0;
    color: #ffffff;
    background: #2b7ac0;
    box-shadow: 0 6px 14px rgba(43, 122, 192, 0.22);
}

.filter-field[b-kbqufiufka] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.filter-field label[b-kbqufiufka] {
    color: #66788a;
    font-size: 0.68rem;
    font-weight: 750;
}

[b-kbqufiufka] .summary-filter-bar .rz-inputtext,
[b-kbqufiufka] .summary-filter-bar .rz-dropdown,
[b-kbqufiufka] .summary-filter-bar .rz-datepicker,
[b-kbqufiufka] .summary-filter-bar .rz-multiselect,
[b-kbqufiufka] .summary-filter-bar .filter-select,
[b-kbqufiufka] .summary-filter-bar .rz-picker {
    width: 100% !important;
    min-height: 32px;
    font-size: 0.72rem;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-kbqufiufka] .summary-filter-bar .rz-state-focus,
[b-kbqufiufka] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.native-multiselect[b-kbqufiufka] {
    position: relative;
    min-width: 0;
}

.native-multiselect > summary[b-kbqufiufka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}

.native-multiselect > summary[b-kbqufiufka]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-kbqufiufka] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-kbqufiufka] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-kbqufiufka] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-kbqufiufka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-kbqufiufka] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__options[b-kbqufiufka] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-kbqufiufka] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-kbqufiufka] {
    background: #fff5ec;
}

.native-multiselect__options input[b-kbqufiufka] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-kbqufiufka] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-kbqufiufka] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}

.filter-actions[b-kbqufiufka] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
}

.summary-action-btn[b-kbqufiufka] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

[b-kbqufiufka] .filter-actions .rz-button {
    min-height: 28px;
    padding: 0.1rem 0.66rem;
    border-width: 1px;
    border-radius: 8px;
}

.summary-action-btn-search[b-kbqufiufka],
.summary-action-btn-reset[b-kbqufiufka],
.summary-action-btn-export[b-kbqufiufka] { background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%); }
.summary-action-btn-search[b-kbqufiufka] { color: #9a3412; border-color: #fde7d3; box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05); }
.summary-action-btn-reset[b-kbqufiufka] { color: #475569; border-color: #e2e8f0; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04); }
.summary-action-btn-export[b-kbqufiufka] { color: #0f766e; border-color: #ccfbf1; box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05); }
.summary-action-btn:hover:not(:disabled)[b-kbqufiufka] { transform: translateY(-1px); }

.summary-action-btn--primary[b-kbqufiufka] {
    color: #9a3412;
    border-color: #fdba74;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1);
}

.summary-action-btn--reset[b-kbqufiufka] {
    border-color: #cbd5e1;
    color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.summary-action-btn--export[b-kbqufiufka] {
    border-color: #5eead4;
    color: #0f766e;
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.1);
}

.summary-action-btn--primary:hover:not(:disabled)[b-kbqufiufka] { border-color: #f97316; box-shadow: 0 7px 14px rgba(249, 115, 22, 0.16); }
.summary-action-btn--reset:hover:not(:disabled)[b-kbqufiufka] { border-color: #94a3b8; box-shadow: 0 7px 14px rgba(15, 23, 42, 0.09); }
.summary-action-btn--export:hover:not(:disabled)[b-kbqufiufka] { border-color: #14b8a6; box-shadow: 0 7px 14px rgba(20, 184, 166, 0.16); }

.summary-action-btn:disabled[b-kbqufiufka] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.mapping-summary-table-wrapper[b-kbqufiufka] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(54, 84, 112, 0.07);
}

.mapping-summary-table-scroll[b-kbqufiufka] {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #b8c9d9 #eef4fa;
    scrollbar-width: thin;
}

.mapping-summary-table-scroll[b-kbqufiufka]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.mapping-summary-table-scroll[b-kbqufiufka]::-webkit-scrollbar-track {
    background: #eef4fa;
}

.mapping-summary-table-scroll[b-kbqufiufka]::-webkit-scrollbar-thumb {
    border: 2px solid #eef4fa;
    border-radius: 10px;
    background: #b8c9d9;
}

.mapping-summary-table[b-kbqufiufka] {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #3e4c5f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mapping-summary-table th[b-kbqufiufka],
.mapping-summary-table td[b-kbqufiufka] {
    padding: 6px 10px;
    border-right: 1px solid #e7edf4;
    border-bottom: 1px solid #e7edf4;
    vertical-align: middle;
    background: #ffffff;
    word-break: break-word;
}

.mapping-summary-table thead th[b-kbqufiufka] {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 30px;
    color: #4f6275;
    background: #f5f8fc;
    background-clip: padding-box;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapping-summary-table thead tr:first-child th[b-kbqufiufka] {
    height: 32px;
    border-bottom-color: #d8e3ee;
}

.mapping-summary-table thead tr:nth-child(2) th[b-kbqufiufka] {
    top: 32px;
    background: #fbfdff;
}

    .mapping-summary-table thead .group-parent-header[b-kbqufiufka] {
        color: rgb(79, 98, 117);
        background: linear-gradient(135deg, #f09a4a 0%, #db7131 100%);
    }

.summary-total-row td[b-kbqufiufka] {
    position: sticky;
    top: 32px;
    z-index: 5;
    color: #355068;
    background: #edf5fc;
    border-bottom: 1px solid #bfd4e6;
    font-weight: 850;
    padding-top: 4px;
    padding-bottom: 4px;
}

.summary-total-row td:first-child[b-kbqufiufka] {
    letter-spacing: 0.08em;
}

.business-group-row td[b-kbqufiufka] {
    padding: 6px 11px;
    color: #7e5a2c;
    background: #fff8eb;
    border-bottom-color: #f0dfbb;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-data-row-main td[b-kbqufiufka] {
    height: 36px;
}

.summary-data-row:nth-of-type(even) td:not(.group-cell)[b-kbqufiufka] {
    background: #fbfdff;
}

.summary-data-row:hover td[b-kbqufiufka],
.summary-data-row:hover .group-cell[b-kbqufiufka] {
    background: #f2f8fe;
}

.group-cell[b-kbqufiufka] {
    --group-accent: #6d86a3;
    --group-bg: #fafcff;
    --group-bg-hover: #f2f8fe;
    --group-text: #445466;
    --group-pill-bg: rgba(255, 255, 255, 0.72);
    position: relative;
    color: #445466;
    background: var(--group-bg) !important;
    font-weight: 700;
    font-size: 0.77rem;
    vertical-align: top;
}

.summary-data-row:hover .group-cell[b-kbqufiufka] {
    background: var(--group-bg) !important;
}

.group-sticky-label[b-kbqufiufka] {
    position: sticky;
    top: 70px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--group-accent) 24%, white);
    border-radius: 8px;
    color: var(--group-text);
    background: var(--group-pill-bg) !important;
    box-shadow: 0 5px 14px rgba(31, 45, 61, 0.08);
    line-height: 1.2;
    text-align: center;
    backdrop-filter: blur(2px);
}

.group-cell-mien[b-kbqufiufka] {
    color: var(--group-text);
    font-weight: 850;
    text-transform: uppercase;
}

.group-cell-vehicle[b-kbqufiufka] {
    color: var(--group-text);
    font-weight: 800;
}

.group-tone-south[b-kbqufiufka] {
    --group-accent: #1f8a70;
    --group-bg: #e4f6ef;
    --group-bg-hover: #e4f6ef;
    --group-text: #176b59;
    --group-pill-bg: #d8f0e8;
}

.group-tone-north[b-kbqufiufka] {
    --group-accent: #4169b1;
    --group-bg: #e8f0ff;
    --group-bg-hover: #e8f0ff;
    --group-text: #315691;
    --group-pill-bg: #dde8ff;
}

.group-tone-central[b-kbqufiufka] {
    --group-accent: #bd7a22;
    --group-bg: #fff1d9;
    --group-bg-hover: #fff1d9;
    --group-text: #925f1e;
    --group-pill-bg: #ffe8bf;
}

.group-tone-unknown[b-kbqufiufka] {
    --group-accent: #7c8794;
    --group-bg: #eef3f7;
    --group-bg-hover: #eef3f7;
    --group-text: #596677;
    --group-pill-bg: #e5ebf1;
}

.vehicle-tone-container[b-kbqufiufka] {
    --group-accent: #2e78b5;
    --group-bg: #e4f3ff;
    --group-bg-hover: #e4f3ff;
    --group-text: #245f92;
    --group-pill-bg: #d9ecfb;
}

.vehicle-tone-truck[b-kbqufiufka] {
    --group-accent: #c05d35;
    --group-bg: #ffede3;
    --group-bg-hover: #ffede3;
    --group-text: #994a2a;
    --group-pill-bg: #ffe1d2;
}

.vehicle-tone-barge[b-kbqufiufka] {
    --group-accent: #6c65b8;
    --group-bg: #ece9ff;
    --group-bg-hover: #ece9ff;
    --group-text: #57509b;
    --group-pill-bg: #e2defb;
}

.vehicle-tone-coaster[b-kbqufiufka] {
    --group-accent: #2b8b9e;
    --group-bg: #e0f5f9;
    --group-bg-hover: #e0f5f9;
    --group-text: #236f7e;
    --group-pill-bg: #d3eef3;
}

.vehicle-tone-unknown[b-kbqufiufka] {
    --group-accent: #6d7f91;
    --group-bg: #edf4f8;
    --group-bg-hover: #edf4f8;
    --group-text: #526476;
    --group-pill-bg: #e3ecf2;
}

.summary-col-emphasis[b-kbqufiufka] {
    font-weight: 650;
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-di[b-kbqufiufka] {
    background: rgb(237, 245, 253);
}

.mapping-summary-table thead .group-parent-header.summary-group-noi-den[b-kbqufiufka] {
    background: rgb(255, 243, 231);
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-di-cell[b-kbqufiufka] {
    background: #eaf4fd;
}

.mapping-summary-table thead tr:nth-child(2) th.summary-group-noi-den-cell[b-kbqufiufka] {
    background: #fff3e5;
}

.mapping-summary-table td.summary-group-noi-di-cell[b-kbqufiufka] {
    background: #f4f9fe;
}

.mapping-summary-table td.summary-group-noi-den-cell[b-kbqufiufka] {
    background: #fff8ef;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-di-cell[b-kbqufiufka] {
    background: #edf5fd;
}

.summary-data-row:nth-of-type(even) td.summary-group-noi-den-cell[b-kbqufiufka] {
    background: #fff3e7;
}

.summary-data-row:hover td.summary-group-noi-di-cell[b-kbqufiufka] {
    background: #e3f0fc;
}

.summary-data-row:hover td.summary-group-noi-den-cell[b-kbqufiufka] {
    background: #ffeccd;
}

.number-cell[b-kbqufiufka] {
    color: #31465b;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 650;
}

.text-break-cell[b-kbqufiufka] {
    white-space: pre-line;
    font-size: 0.79rem;
}

.table-badge[b-kbqufiufka],
.status-badge[b-kbqufiufka] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.badge-cell[b-kbqufiufka] {
    text-align: center;
}

.status-badge-button[b-kbqufiufka] {
    font-family: inherit;
    cursor: pointer;
}

.status-badge-button:hover[b-kbqufiufka] {
    filter: brightness(0.97);
}

.table-badge--warehouse[b-kbqufiufka] {
    border-color: #99c8f0;
    color: #1f5f96;
    background: #eaf5ff;
}

.table-badge--ship[b-kbqufiufka] {
    border-color: #c9b7ef;
    color: #6f51ad;
    background: #f4efff;
}

.status-badge--success[b-kbqufiufka] {
    border-color: #b9ddc0;
    color: #2f7a3a;
    background: #eefbf0;
}

.status-badge--warning[b-kbqufiufka] {
    border-color: #efd58f;
    color: #9b6a0b;
    background: #fff8df;
}

.status-badge--danger[b-kbqufiufka] {
    border-color: #ecb0b8;
    color: #bc415f;
    background: #fff0ec;
}

.status-badge--neutral[b-kbqufiufka] {
    border-color: #cfdbe7;
    color: #627487;
    background: #f2f6fa;
}

.warehouse-link[b-kbqufiufka] {
    display: inline;
    padding: 0;
    border: 0;
    color: #2e78b5;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(46, 120, 181, 0.26);
    text-underline-offset: 2px;
}

.warehouse-link:hover[b-kbqufiufka] {
    color: #205d90;
    text-decoration-color: currentColor;
}

.col-mien[b-kbqufiufka] { width: 126px; }
.col-khu-vuc[b-kbqufiufka] { width: 146px; }
.col-noi[b-kbqufiufka] { width: 146px; }
.col-vehicle-type[b-kbqufiufka] { width: 150px; }
.col-carrier[b-kbqufiufka] { width: 180px; }
.col-trip[b-kbqufiufka] { width: 118px; }
.col-nguon-hang[b-kbqufiufka] { width: 126px; }
.col-ten-tau[b-kbqufiufka] { width: 156px; }
.col-quantity[b-kbqufiufka] { width: 132px; }
.col-status[b-kbqufiufka] { width: 150px; }
.col-invoice[b-kbqufiufka] { width: 126px; }
.col-ai[b-kbqufiufka] { width: 198px; }
.col-doc[b-kbqufiufka] { width: 126px; }

.mapping-summary-loading-overlay[b-kbqufiufka] {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(250, 252, 255, 0.88);
    backdrop-filter: blur(2px);
}

.mapping-summary-loading-spinner[b-kbqufiufka] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dfebf5;
    border-radius: 12px;
    color: #5e748a;
    background: #fff;
    box-shadow: 0 10px 24px rgba(63, 99, 138, 0.12);
    font-size: 0.82rem;
    font-weight: 650;
}

.mapping-summary-spinner[b-kbqufiufka] {
    width: 24px;
    height: 24px;
    border: 3px solid #dfebf5;
    border-top-color: #4f8bbd;
    border-radius: 50%;
    animation: mappingSummarySpin-b-kbqufiufka 0.75s linear infinite;
}

@keyframes mappingSummarySpin-b-kbqufiufka {
    to { transform: rotate(360deg); }
}

.grid-empty-state[b-kbqufiufka] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 150px;
    gap: 8px;
    color: #6d7f92;
    border: 1px dashed #cedbe8;
    border-radius: 12px;
    background: #f8fbff;
}

@media (max-width: 1280px) {
    .filter-title[b-kbqufiufka] {
        display: none;
    }

    /* Vẫn giữ 1 hàng: chỉ thu chữ / padding lại. */
    .summary-filter-bar[b-kbqufiufka] {
        gap: 0.28rem;
    }

    .filter-field > input[b-kbqufiufka],
    .native-multiselect > summary[b-kbqufiufka],
    [b-kbqufiufka] .summary-filter-bar .rz-inputtext {
        font-size: 0.68rem;
        padding-inline: 6px;
    }

    .summary-action-btn[b-kbqufiufka] {
        padding: 0 8px;
        font-size: 0.68rem;
    }

    .mapping-summary-stat-item label[b-kbqufiufka] {
        font-size: 0.58rem;
    }

    .mapping-summary-stat-value[b-kbqufiufka] {
        font-size: 1rem;
    }
}

@media (max-width: 1000px) {
    .summary-filter-layout[b-kbqufiufka] {
        flex-wrap: wrap;
    }

    .summary-filter-bar[b-kbqufiufka] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #ControlRegion[b-kbqufiufka] {
        height: calc(100dvh - 90px);
        padding-inline: 4px;
    }

    .summary-heading__date[b-kbqufiufka] {
        display: none;
    }

    .mapping-summary-stats[b-kbqufiufka] {
        display: flex;
        overflow-x: auto;
    }

    .mapping-summary-stat-item[b-kbqufiufka] {
        min-width: 160px;
    }

    .summary-filter-layout[b-kbqufiufka] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-kbqufiufka] {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .filter-actions[b-kbqufiufka] {
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* SL CẦN XÁC NHẬN / CHỨNG TỪ CẦN DUYỆT: tô màu nổi bật + click để xem chi tiết */
.summary-alert-cell[b-kbqufiufka] {
    padding: 2px 4px;
}

.summary-alert-value[b-kbqufiufka] {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.4;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.summary-alert-value:hover[b-kbqufiufka] {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.summary-alert-value--confirm[b-kbqufiufka] {
    background-color: #fde68a;
    color: #92400e;
}

.summary-alert-value--document[b-kbqufiufka] {
    background-color: #fecdd3;
    color: #9f1239;
}

/* Khung gộp bộ lọc + thống kê, có thể thu gọn để bảng chiếm hết chiều cao. */
.control-collapse-panel[b-kbqufiufka] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* Không cắt dropdown của bộ lọc (menu absolute tràn ra ngoài khung). */
    position: relative;
    z-index: 20;
    overflow: visible;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.control-collapse-toggle[b-kbqufiufka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid #e5edf5;
    border-radius: 11px 11px 0 0;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
}

.control-collapse-panel--collapsed .control-collapse-toggle[b-kbqufiufka] {
    border-bottom: none;
    border-radius: 11px;
}

.control-collapse-toggle__summary[b-kbqufiufka] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.control-collapse-toggle__arrow[b-kbqufiufka] {
    flex-shrink: 0;
    color: #2457e6;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.control-collapse-chip[b-kbqufiufka] {
    padding: 0.1rem 0.5rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.control-collapse-chip--total[b-kbqufiufka] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.control-collapse-chip--muted[b-kbqufiufka] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.control-collapse-body[b-kbqufiufka] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.control-collapse-panel--collapsed .control-collapse-body[b-kbqufiufka] {
    display: none;
}

/* Trong khung thu gọn, panel filter đã có viền của khung ngoài. */
.control-collapse-body .summary-filter-panel[b-kbqufiufka] {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_PC.razor.rz.scp.css */
.comparison-filter-bar[b-hl1m27765v],
.datamail-filter-bar[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.55rem;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px;
}

.filter-field[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    min-width: 138px;
    align-items: flex-start;
}

.filter-field .filter-select[b-hl1m27765v] {
    width: 138px;
}

.filter-field label[b-hl1m27765v] {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

[b-hl1m27765v] .comparison-filter-bar .rz-inputtext,
[b-hl1m27765v] .comparison-filter-bar .rz-dropdown,
[b-hl1m27765v] .comparison-filter-bar .rz-datepicker,
[b-hl1m27765v] .comparison-filter-bar .rz-multiselect,
[b-hl1m27765v] .comparison-filter-bar .filter-select,
[b-hl1m27765v] .comparison-filter-bar .rz-numeric,
[b-hl1m27765v] .comparison-filter-bar .rz-picker {
    width: 138px !important;
}

.filter-actions[b-hl1m27765v] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0 30px 0.55rem 10px;
}


.queue-view-toolbar[b-hl1m27765v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 30px 0.55rem 10px;
}

.queue-view-overall-stats[b-hl1m27765v] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.overall-stat-card[b-hl1m27765v] {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 30px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    overflow: hidden;
}

.overall-stat-card--total[b-hl1m27765v] {
    align-self: stretch;
}

.overall-stat-card--total .overall-stat-lines[b-hl1m27765v] {
    justify-content: center;
}

.overall-stat-card--compact[b-hl1m27765v] {
    min-height: 25px;
}

.overall-stat-card--mini[b-hl1m27765v] {
    height: 25px;
    min-width: 122px;
}

.overall-stat-card--spacer[b-hl1m27765v] {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    visibility: hidden;
}

.overall-stat-card-group[b-hl1m27765v] {
    display: grid;
    grid-template-columns: repeat(5, minmax(122px, 1fr));
    gap: 0.5rem;
    align-self: stretch;
}

.overall-stat-card--clickable[b-hl1m27765v] {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.overall-stat-card--clickable:hover[b-hl1m27765v] {
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.overall-stat-card--active[b-hl1m27765v] {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a inset;
}

.overall-stat-card--disabled[b-hl1m27765v] {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

.overall-stat-label[b-hl1m27765v] {
    display: flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.15px;
    text-transform: none;
    color: #334155;
    white-space: nowrap;
    background-color: #f1f5f9;
    padding: 0.25rem 0.65rem;
    border-right: 1px solid #e2e8f0;
}

.overall-stat-card--mini .overall-stat-label[b-hl1m27765v] {
    flex: 1 1 auto;
    justify-content: flex-end;
    text-align: right;
    border-right: 0;
    border-left: 1px solid #e2e8f0;
}

.overall-stat-card--compact .overall-stat-label[b-hl1m27765v] {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

.overall-stat-card--mini .overall-stat-label[b-hl1m27765v] {
    padding: 0.12rem 0.35rem;
    font-size: 0.6rem;
    letter-spacing: 0;
}

.overall-stat-lines[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.overall-stat-card--compact .overall-stat-lines[b-hl1m27765v] {
    padding: 0.2rem 0.55rem;
}

.overall-stat-card--mini .overall-stat-lines[b-hl1m27765v] {
    padding: 0.12rem 0.38rem;
    flex: 0 0 auto;
}

.overall-stat-lines > div[b-hl1m27765v] {
    width: 100%;
    text-align: center;
}

.overall-stat-lines > div:not(:last-child)[b-hl1m27765v] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 3px;
    margin-bottom: 3px;
}



.stat-line-count[b-hl1m27765v] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    white-space: nowrap;
}

.overall-stat-card--mini .stat-line-count[b-hl1m27765v] {
    font-size: 0.68rem;
}

.stat-line-kg[b-hl1m27765v] {
    font-size: 0.73rem;
    font-weight: 400;
    color: #475569;
    line-height: 1;
    white-space: nowrap;
}

.overall-stat-card--mini .stat-line-kg[b-hl1m27765v],
.overall-stat-card--mini .stat-line-perc[b-hl1m27765v] {
    font-size: 0.62rem;
}

.stat-line-perc[b-hl1m27765v] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .queue-view-overall-stats[b-hl1m27765v] {
        gap: 0.35rem;
    }

    .overall-stat-card-group[b-hl1m27765v] {
        grid-template-columns: repeat(2, minmax(122px, 1fr));
        gap: 0.35rem;
    }

    .overall-stat-card[b-hl1m27765v] {
        gap: 0;
        min-height: 28px;
        padding: 0;
    }

    .overall-stat-card--mini[b-hl1m27765v] {
        min-height: 22px;
    }

    .overall-stat-label[b-hl1m27765v] {
        font-size: 0.7rem;
        padding: 0.18rem 0.45rem;
    }

    .overall-stat-card--mini .overall-stat-label[b-hl1m27765v] {
        font-size: 0.54rem;
        padding: 0.1rem 0.3rem;
    }

    .overall-stat-lines[b-hl1m27765v] {
        padding: 0.18rem 0.55rem;
    }

    .overall-stat-card--mini .overall-stat-lines[b-hl1m27765v] {
        padding: 0.1rem 0.3rem;
    }

    .stat-line-count[b-hl1m27765v] {
        font-size: 0.76rem;
    }

    .overall-stat-card--mini .stat-line-count[b-hl1m27765v] {
        font-size: 0.64rem;
    }

    .stat-line-kg[b-hl1m27765v],
    .stat-line-perc[b-hl1m27765v] {
        font-size: 0.68rem;
    }

    .overall-stat-card--mini .stat-line-kg[b-hl1m27765v],
    .overall-stat-card--mini .stat-line-perc[b-hl1m27765v] {
        font-size: 0.6rem;
    }
}

[b-hl1m27765v] .filter-actions .rz-button {
    height: 32px;
    min-width: 32px;
    padding: 0.15rem 0.55rem;
}

.queue-view-action-btn[b-hl1m27765v],
.queue-view-action-btn.rz-button[b-hl1m27765v],
.queue-view-action-btn .rz-button-text[b-hl1m27765v],
.queue-view-action-btn .rz-text[b-hl1m27765v],
.queue-view-action-btn .rzi[b-hl1m27765v] {
    color: #ffffff !important;
}

[b-hl1m27765v] .queue-view-action-btn .rz-button-text,
[b-hl1m27765v] .queue-view-action-btn .rz-text {
    display: none;
}

[b-hl1m27765v] .queue-view-action-btn .rz-button-icon-left,
[b-hl1m27765v] .queue-view-action-btn .rzi {
    margin-right: 0 !important;
    font-size: 0.85rem;
}

[b-hl1m27765v] .queue-view-action-btn--text .rz-button-text,
[b-hl1m27765v] .queue-view-action-btn--text .rz-text {
    display: inline !important;
}


.datamail-grid-wrapper[b-hl1m27765v] {
    position: relative;
    min-height: 280px;
    margin-top: 0.15rem;
}

[b-hl1m27765v] .datamail-grid-wrapper .rz-data-grid {
    height: calc(100vh - 300px) !important;
}

@media (max-width: 1500px) {
    [b-hl1m27765v] .datamail-grid-wrapper .rz-data-grid {
        height: calc(100vh - 330px) !important;
    }
}
.datamail-loading-overlay[b-hl1m27765v] {
    position: absolute;
    inset: 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.92);
    z-index: 2;
    overflow: hidden;
}

.datamail-loading-skeleton[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.mail-skeleton-row[b-hl1m27765v] {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1.2fr 0.8fr 1.5fr 0.8fr 1.2fr;
    gap: 0.75rem;
    width: 100%;
}

.mail-skeleton-cell[b-hl1m27765v] {
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 50%, #f2f2f2 100%);
    background-size: 400% 100%;
    animation: mailSkeletonPulse-b-hl1m27765v 1.2s ease-in-out infinite;
}

.mail-skeleton-cell.w-wide[b-hl1m27765v] {
    grid-column: span 1;
}

.mail-skeleton-cell.w-medium[b-hl1m27765v] {
    grid-column: span 1;
}

.mail-skeleton-cell.w-narrow[b-hl1m27765v] {
    grid-column: span 1;
}

.grid-empty-state[b-hl1m27765v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    color: #5f6368;
    background-color: #fdfdfd;
}

.grid-empty-state i[b-hl1m27765v] {
    color: #9e9e9e;
}

@keyframes mailSkeletonPulse-b-hl1m27765v {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.queue-view-grid .rz-column-title[b-hl1m27765v],
.queue-view-grid .rz-cell-data[b-hl1m27765v] {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.queue-view-grid .rz-sortable-column[b-hl1m27765v],
.queue-view-grid .rz-header-cell[b-hl1m27765v],
.queue-view-grid .rz-cell[b-hl1m27765v] {
    text-align: center;
}

[b-hl1m27765v] .queue-view-grid .rz-header-row,
[b-hl1m27765v] .queue-view-grid .rz-footer-row,
[b-hl1m27765v] .queue-view-grid .rz-group-footer-row {
    min-height: 32px;
    height: 32px;
}

[b-hl1m27765v] .queue-view-grid .rz-header-cell,
[b-hl1m27765v] .queue-view-grid .rz-footer-cell,
[b-hl1m27765v] .queue-view-grid .rz-group-footer-cell {
    padding: 0.3rem 0.6rem;
    line-height: 1.1;
    font-size: 0.82rem;
}

[b-hl1m27765v] .queue-view-grid .rz-cell {
    padding: 0.28rem 0.6rem;
    line-height: 1.15;
    font-size: 0.88rem;
}

[b-hl1m27765v] .queue-view-grid .rz-footer-cell,
[b-hl1m27765v] .queue-view-grid .rz-group-footer-cell,
[b-hl1m27765v] .queue-view-grid .rz-footer-row {
    font-weight: 600;
    background-color: #f8fafc;
}

.queue-view-grid[b-hl1m27765v] {
    text-align: center;
}

.queue-weight[b-hl1m27765v] {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    border-radius: 6px;
}

.queue-weight--mismatch[b-hl1m27765v] {
    background-color: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.queue-status-badge[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.queue-status-badge--error[b-hl1m27765v] {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #b91c1c;
}

.queue-status-badge--success[b-hl1m27765v] {
    background-color: #dcfce7;
    border: 1px solid #22c55e;
    color: #166534;
}

.queue-status-badge--info[b-hl1m27765v] {
    background-color: #dbeafe;
    border: 1px solid #3b82f6;
    color: #1d4ed8;
}

.queue-status-badge--warning[b-hl1m27765v] {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.queue-status-badge--neutral[b-hl1m27765v] {
    background-color: #f1f5f9;
    border: 1px solid #64748b;
    color: #1f2937;
}

.classification-confirm-badge[b-hl1m27765v],
.classification-type-badge[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.classification-confirm-badge--yes[b-hl1m27765v] {
    background: #dcfce7;
    border: 1px solid #22c55e;
    color: #166534;
}

.classification-confirm-badge--no[b-hl1m27765v] {
    background: #fee2e2;
    border: 1px solid #ef4444;
    color: #b91c1c;
}

.classification-confirm-badge--empty[b-hl1m27765v],
.classification-type-badge[b-hl1m27765v] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.classification-modal-backdrop[b-hl1m27765v] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9000;
}

.classification-modal[b-hl1m27765v] {
    position: relative;
    z-index: 9001;
    width: min(980px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.classification-modal__header[b-hl1m27765v],
.classification-modal__footer[b-hl1m27765v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.classification-modal__header[b-hl1m27765v] {
    border-bottom: 1px solid #e2e8f0;
}

.classification-modal__header h3[b-hl1m27765v] {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.classification-modal__header p[b-hl1m27765v] {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.classification-modal__bulk-tools[b-hl1m27765v],
.classification-modal__body[b-hl1m27765v] {
    padding: 1rem 1.25rem 0;
}

.classification-modal__body[b-hl1m27765v] {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 1rem;
}

.classification-bulk-apply[b-hl1m27765v] {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) minmax(180px, 240px) auto;
    gap: 0.75rem;
    align-items: end;
}

.classification-edit-card__inputs[b-hl1m27765v] {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(240px, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.classification-edit-card[b-hl1m27765v] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: #fbfdff;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.classification-edit-card + .classification-edit-card[b-hl1m27765v] {
    margin-top: 0.5rem;
}

.classification-edit-card__meta[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.35;
}

.classification-edit-card__plate[b-hl1m27765v] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.classification-edit-card__bottom[b-hl1m27765v] {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(220px, 260px) minmax(420px, 1fr);
    gap: 0.9rem;
    align-items: end;
}

.classification-edit-card__type[b-hl1m27765v] {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr);
    gap: 0.45rem;
    width: 100%;
}

.classification-edit-card__quantity[b-hl1m27765v] {
    min-width: 220px;
}

.classification-field[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.classification-field label[b-hl1m27765v] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.classification-confirm-options[b-hl1m27765v] {
    display: flex;
    width: 410px;
    max-width: 100%;
    align-items: flex-end;
    min-height: 28px;
    justify-content: flex-start;
    align-self: end;
    justify-self: end;
    margin-left: 130px;
}

.classification-confirm-options label[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 400;
    color: #15803d;
}

.classification-bulk-actions[b-hl1m27765v] {
    display: flex;
    align-items: flex-end;
}

.classification-modal__footer[b-hl1m27765v] {
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex: 0 0 auto;
    background: #ffffff;
}
.classification-edit-card__note-input[b-hl1m27765v] {
    width: 264px !important;
}
@media (max-width: 900px) {
    .classification-bulk-apply[b-hl1m27765v], .classification-edit-card__inputs[b-hl1m27765v], .classification-edit-card__bottom[b-hl1m27765v], .classification-edit-card__type[b-hl1m27765v] {
        grid-template-columns: 1fr;
    }

    .classification-edit-card__type[b-hl1m27765v] {
        width: 100%;
    }

    .classification-confirm-options[b-hl1m27765v] {
        justify-content: flex-start;
    }
}

.rz-button.rz-primary[b-hl1m27765v] {
    color: white;
}

/* Summary Tab Styles */
.summary-grid-wrapper[b-hl1m27765v] {
    position: relative;
    /* allow the summary area to have a constrained height so only the grid scrolls
       adjust the calc(...) value if you need more/less space for header/footer */
    min-height: 160px;
    max-height: calc(100vh - 360px);
    margin-top: 0.15rem;
    margin-bottom: 1rem;
    overflow: auto;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid {
    /* make the grid expand to the wrapper height so the wrapper scrollbar controls table scrolling */
    height: 100% !important;
    min-height: 160px;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-data-grid-table {
    table-layout: auto;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-row {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-row:hover {
    background-color: #f9fafb;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-header-row {
    background-color: #f3f4f6;
    border-bottom: 2px solid #d1d5db;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-header-cell {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    padding: 0.75rem 1rem;
}

[b-hl1m27765v] .summary-grid-wrapper .rz-data-grid .rz-cell {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.summary-grid[b-hl1m27765v] {
    text-align: center;
}

.summary-grid .rz-column-title[b-hl1m27765v],
.summary-grid .rz-cell-data[b-hl1m27765v] {
    width: 100%;
}

.summary-grid .rz-sortable-column[b-hl1m27765v],
.summary-grid .rz-header-cell[b-hl1m27765v],
.summary-grid .rz-cell[b-hl1m27765v] {
    text-align: center;
}

.warehouse-link[b-hl1m27765v] {
    color: #3b82f6;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.warehouse-link:hover[b-hl1m27765v] {
    color: #1d4ed8;
    text-decoration: underline;
    border-bottom-color: #3b82f6;
}

.warehouse-link:active[b-hl1m27765v] {
    color: #1e40af;
}

.badge-count[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0.25rem 0.75rem;
    background-color: #dbeafe;
    color: #1e40af;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
}

.weight-value[b-hl1m27765v] {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

.summary-loading-overlay[b-hl1m27765v] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.summary-loading-spinner[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner[b-hl1m27765v] {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-hl1m27765v 0.8s linear infinite;
}

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

.summary-loading-spinner span[b-hl1m27765v] {
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 500;
}

.summary-stats[b-hl1m27765v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.stat-item[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
}

.stat-item label[b-hl1m27765v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stat-value[b-hl1m27765v] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Courier New', monospace;
    letter-spacing: -0.5px;
}

/* 2026 dashboard refresh */
.mail-control-page[b-hl1m27765v] {
    --mail-ink: #14213d;
    --mail-muted: #64748b;
    --mail-border: #e2e8f0;
    --mail-soft: #f7f9fc;
    --mail-primary: #2457e6;
    --mail-primary-dark: #173fb4;
    --mail-green: #12966f;
    --mail-orange: #e36f31;
    min-height: calc(100vh - 64px);
    color: var(--mail-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 87, 230, .08), transparent 28rem),
        #f3f6fb;
}

.mail-page-hero[b-hl1m27765v] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 126px;
    padding: 24px 30px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(10, 29, 69, .98), rgba(24, 65, 153, .94)),
        #102d6b;
    border-radius: 20px 20px 0 0;
}

.mail-page-hero[b-hl1m27765v]::after {
    position: absolute;
    right: -70px;
    bottom: -140px;
    width: 390px;
    height: 390px;
    content: "";
    border: 62px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}

.mail-page-eyebrow[b-hl1m27765v] {
    display: block;
    margin-bottom: 7px;
    color: #9db8ff;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .17em;
}

.mail-page-hero h1[b-hl1m27765v] {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 760;
    letter-spacing: -.035em;
}

.mail-page-hero p[b-hl1m27765v] {
    max-width: 720px;
    margin: 7px 0 0;
    color: #c9d6f5;
    font-size: .9rem;
}

.mail-page-live[b-hl1m27765v] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 170px;
    padding: 13px 17px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.mail-page-live__dot[b-hl1m27765v] {
    width: 10px;
    height: 10px;
    background: #39d8a1;
    border: 3px solid rgba(57, 216, 161, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(57, 216, 161, .1);
}

.mail-page-live div[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
}

.mail-page-live strong[b-hl1m27765v] {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.mail-page-live small[b-hl1m27765v] {
    margin-top: 4px;
    color: #c9d6f5;
    font-size: .72rem;
}

[b-hl1m27765v] .mail-dashboard-card.rz-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    /*border-radius: 0 0 20px 20px;*/
    box-shadow: 0 18px 50px rgba(28, 50, 92, .11);
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 18px 0;
    padding: 4px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    border: 1px solid #d9e7f2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li {
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 0 !important;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li a {
    gap: 8px;
    min-height: 32px;
    padding: 0px 12px !important;
    color: #5f6f82;
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .03em;
    border: 1px solid transparent;
    border-bottom: 0 !important;
    border-radius: 10px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li a:hover {
    color: #0f4c81;
    background: rgba(255,255,255,.68);
    border-color: rgba(56, 189, 248, .16);
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected a {
    color: #0c4a6e;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 54%, #dbeafe 100%);
    border-color: rgba(125, 211, 252, .35);
    border-bottom: 0 !important;
    box-shadow: none;
    transform: none;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected::before,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected::after,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected a::before,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav li.rz-tabview-selected a::after {
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    content: none !important;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-panel {
    padding: 0;
}

.comparison-filter-bar[b-hl1m27765v] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 20px 24px 15px;
}

.filter-field[b-hl1m27765v] {
    min-width: 0;
    width: 100%;
}

.filter-field label[b-hl1m27765v] {
    margin: 0 0 6px;
    color: #475569;
    font-size: .71rem;
    font-weight: 750;
    letter-spacing: .025em;
}

[b-hl1m27765v] .comparison-filter-bar .rz-inputtext,
[b-hl1m27765v] .comparison-filter-bar .rz-dropdown,
[b-hl1m27765v] .comparison-filter-bar .rz-datepicker,
[b-hl1m27765v] .comparison-filter-bar .rz-multiselect,
[b-hl1m27765v] .comparison-filter-bar .filter-select,
[b-hl1m27765v] .comparison-filter-bar .rz-picker {
    width: 100% !important;
    color: #1e293b;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

[b-hl1m27765v] .comparison-filter-bar .rz-inputtext:focus,
[b-hl1m27765v] .comparison-filter-bar .rz-dropdown:focus-within,
[b-hl1m27765v] .comparison-filter-bar .rz-datepicker:focus-within {
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, .1);
}

.queue-view-toolbar[b-hl1m27765v] {
    display: block;
    margin: 0;
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid var(--mail-border);
}

.queue-view-overall-stats[b-hl1m27765v] {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 4fr;
    gap: 12px;
    width: 100%;
}

.overall-stat-card[b-hl1m27765v] {
    position: relative;
    min-height: 88px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mail-border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(33, 51, 86, .055);
}

.overall-stat-card[b-hl1m27765v]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: var(--mail-primary);
}

.overall-stat-card:nth-child(2)[b-hl1m27765v]::before {
    background: var(--mail-orange);
}

.overall-stat-card:nth-child(3)[b-hl1m27765v]::before {
    background: var(--mail-green);
}

.overall-stat-card--total[b-hl1m27765v] {
    background: linear-gradient(135deg, #173b8d, #2457e6);
    border-color: transparent;
}

.overall-stat-card--total[b-hl1m27765v]::before {
    display: none;
}

.overall-stat-card--total .overall-stat-label[b-hl1m27765v],
.overall-stat-card--total .stat-line-count[b-hl1m27765v],
.overall-stat-card--total .stat-line-kg[b-hl1m27765v] {
    color: #fff;
}

.overall-stat-card--total .overall-stat-label[b-hl1m27765v] {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.12);
}

.overall-stat-label[b-hl1m27765v] {
    justify-content: center;
    min-width: 66px;
    padding: 12px;
    color: #64748b;
    background: #f8fafc;
    font-size: .66rem;
    letter-spacing: .08em;
}

.overall-stat-lines[b-hl1m27765v] {
    flex: 1;
    padding: 12px 14px;
}

.stat-line-count[b-hl1m27765v] {
    font-size: 1rem;
    font-weight: 800;
}

.stat-line-kg[b-hl1m27765v],
.stat-line-perc[b-hl1m27765v] {
    margin-top: 5px;
    color: #718096;
    font-size: .68rem;
}

.overall-stat-card-group[b-hl1m27765v] {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 8px;
}

.overall-stat-card--mini[b-hl1m27765v] {
    min-width: 0;
    height: 40px;
    min-height: 40px;
    box-shadow: none;
    border-radius: 9px;
}

.overall-stat-card--mini[b-hl1m27765v]::before {
    width: 3px;
    background: #ef9b72;
}

.overall-stat-card--mini .overall-stat-lines[b-hl1m27765v] {
    padding: 8px 9px;
}

.overall-stat-card--mini .overall-stat-label[b-hl1m27765v] {
    justify-content: flex-start;
    padding: 7px 8px;
    color: #526174;
    background: #fbfcfe;
    border-left: 0;
    font-size: .59rem;
    text-align: left;
}

.overall-stat-card--mini .stat-line-count[b-hl1m27765v] {
    color: #c94e2d;
    font-size: .75rem;
}

.overall-stat-card--clickable:hover[b-hl1m27765v] {
    z-index: 1;
    border-color: #8faaf0;
    box-shadow: 0 8px 22px rgba(36, 87, 230, .13);
    transform: translateY(-2px);
}

.overall-stat-card--active[b-hl1m27765v],
.overall-stat-card--highlight[b-hl1m27765v] {
    color: #fff !important;
    background: linear-gradient(135deg, #075985 0%, #4338ca 58%, #6d28d9 100%) !important;
    border-color: #67e8f9 !important;
    box-shadow:
        0 8px 20px rgba(67, 56, 202, .25),
        0 0 14px rgba(103, 232, 249, .2) !important;
}

.overall-stat-card--active *[b-hl1m27765v],
.overall-stat-card--highlight *[b-hl1m27765v] {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.18) !important;
}

.filter-actions[b-hl1m27765v] {
    justify-content: flex-end;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 15px;
    border-top: 1px dashed #dbe3ee;
}

.mail-action[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 0 14px;
    color: #344256;
    background: #fff;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 750;
    cursor: pointer;
    transition: .18s ease;
}

.mail-action:hover:not(:disabled)[b-hl1m27765v] {
    border-color: #9db2dd;
    transform: translateY(-1px);
}

.mail-action:disabled[b-hl1m27765v] {
    opacity: .45;
    cursor: not-allowed;
}

.mail-action--primary[b-hl1m27765v] {
    color: #fff;
    background: var(--mail-primary);
    border-color: var(--mail-primary);
    box-shadow: 0 7px 16px rgba(36, 87, 230, .2);
}

.mail-action--classification[b-hl1m27765v] {
    color: #754314;
    background: #fff8e8;
    border-color: #f3d8a5;
}

.mail-action--sap-item[b-hl1m27765v] {
    color: #075985;
    background: #ecfeff;
    border-color: #a5f3fc;
}

.mail-action--sap-item:hover:not(:disabled)[b-hl1m27765v] {
    background: #cffafe;
    border-color: #67e8f9;
}

.mail-column-header-tools[b-hl1m27765v] {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 150px;
    z-index: 120;
}

.mail-column-header-tools .table-sort[b-hl1m27765v] {
    flex: 0 1 auto;
}

.mail-column-header-tools .native-multiselect[b-hl1m27765v] {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    color: #334155;
}

.mail-column-header-tools .native-multiselect > summary[b-hl1m27765v] {
    width: 34px;
    height: 28px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    background: rgba(255,255,255,.86);
}

.mail-column-header-tools .native-multiselect > summary[b-hl1m27765v]::before {
    content: "⌕";
    font-size: 16px;
    line-height: 1;
}

.mail-column-header-tools .native-multiselect__arrow[b-hl1m27765v] {
    display: none;
}

.mail-column-header-tools .native-multiselect__menu[b-hl1m27765v] {
    left: 0;
    z-index: 5000;
    width: 320px;
    text-align: left;
    font-size: 13px;
}

.mail-cell-sap-item[b-hl1m27765v] {
    min-width: 190px;
    color: #075985;
    font-weight: 600;
}

.sap-item-modal[b-hl1m27765v] {
    width: min(640px, calc(100vw - 2rem));
}

.sap-item-modal__body[b-hl1m27765v] {
    padding-bottom: 1.25rem;
}

.mail-action--export[b-hl1m27765v] {
    color: #fff;
    background: var(--mail-green);
    border-color: var(--mail-green);
}

.datamail-grid-wrapper[b-hl1m27765v] {
    min-height: 360px;
    margin: 0 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
}

[b-hl1m27765v] .datamail-grid-wrapper .rz-data-grid {
    height: calc(100vh - 455px) !important;
    min-height: 390px;
    border: 0;
}

[b-hl1m27765v] .queue-view-grid .rz-header-row {
    color: #334155;
    background: #f5f7fb;
}

[b-hl1m27765v] .queue-view-grid .rz-header-cell {
    padding: .62rem .65rem;
    color: #4b5c72;
    background: #f5f7fb;
    border-color: #e2e8f0;
    font-size: .71rem;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: .025em;
}

[b-hl1m27765v] .queue-view-grid .rz-cell {
    padding: .52rem .65rem;
    color: #334155;
    border-color: #edf1f6;
    font-size: .78rem;
}

[b-hl1m27765v] .queue-view-grid .rz-data-row:nth-child(even) {
    background: #fbfcfe;
}

[b-hl1m27765v] .queue-view-grid .rz-data-row:hover {
    background: #eef4ff;
}

[b-hl1m27765v] .queue-view-grid .rz-paginator {
    min-height: 54px;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid var(--mail-border);
}

.queue-status-badge[b-hl1m27765v] {
    padding: .24rem .52rem;
    border-width: 0;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 750;
}

.classification-type-badge[b-hl1m27765v] {
    min-height: 25px;
    padding: .2rem .55rem;
    color: #3f4f67;
    background: #f1f4f8;
    border: 0;
    font-size: .68rem;
}

.datamail-loading-overlay[b-hl1m27765v] {
    background: rgba(247, 249, 252, .88);
    backdrop-filter: blur(2px);
}

.classification-modal[b-hl1m27765v] {
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
}

.classification-modal__header[b-hl1m27765v] {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f7f9ff, #fff);
}

.classification-edit-card[b-hl1m27765v] {
    background: #f9fbfe;
    border-color: #dfe7f1;
}

@media (max-width: 1500px) {
    .comparison-filter-bar[b-hl1m27765v] {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .queue-view-overall-stats[b-hl1m27765v] {
        grid-template-columns: repeat(3, 1fr);
    }

    .overall-stat-card-group[b-hl1m27765v] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .mail-page-hero[b-hl1m27765v] {
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
        border-radius: 14px 14px 0 0;
    }

    .mail-page-live[b-hl1m27765v] {
        min-width: auto;
    }

    .mail-page-live small[b-hl1m27765v] {
        display: none;
    }

    .comparison-filter-bar[b-hl1m27765v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px;
    }

    .queue-view-toolbar[b-hl1m27765v] {
        padding: 16px;
    }

    .queue-view-overall-stats[b-hl1m27765v] {
        grid-template-columns: 1fr;
    }

    .overall-stat-card-group[b-hl1m27765v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .mail-action[b-hl1m27765v] {
        flex: 1 1 calc(50% - 8px);
    }

    .datamail-grid-wrapper[b-hl1m27765v] {
        margin: 0 16px;
    }
}


[b-hl1m27765v] .mail-dashboard-card.rz-card {
    /*border-radius: 12px;*/
    position: relative;
}

.mail-action--daily-report[b-hl1m27765v] {
    position: absolute;
    top: 10px;
    right: 18px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    background: linear-gradient(180deg, #81edff 0%, #6fdee9 100%) ;
    color: #5f6f82;
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .03em;
    border: 1px solid #d9e7f2;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    margin: 4px;
}

.mail-action--daily-report:hover:not(:disabled)[b-hl1m27765v] {
    color: #0f4c81;
    background: rgba(255,255,255,.95);
    border-color: rgba(56, 189, 248, .36);
    box-shadow: 0 6px 14px rgba(14, 165, 233, .1);
    transform: translateY(-1px);
}

.mail-action--daily-report:disabled[b-hl1m27765v] {
    opacity: .72;
    cursor: progress;
}

@media (max-width: 900px) {
    .mail-action--daily-report[b-hl1m27765v] {
        position: static;
        margin: 10px 18px 0 auto;
    }

    [b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav {
        margin-top: 8px;
    }
}

/* Phải cao hơn .queue-filter-header (3000), .filter-extra-panel (3001/3002),
   .native-multiselect__menu trong header (5000) và .classification-modal (9000/9001),
   nếu không dàn filter + nút của trang sẽ nổi đè lên modal. */
.daily-issue-modal-backdrop[b-hl1m27765v] {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.42);
}

.daily-issue-modal[b-hl1m27765v] {
    position: relative;
    z-index: 9501;
    width: min(1180px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.daily-issue-modal__header[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__header h3[b-hl1m27765v] {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
}

.daily-issue-modal__header p[b-hl1m27765v] {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.daily-issue-modal__filters[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.daily-issue-modal__body[b-hl1m27765v] {
    min-height: 260px;
    overflow: auto;
    padding: 14px 16px 16px;
}

.daily-issue-table-wrap[b-hl1m27765v] {
    overflow: auto;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
}

.daily-issue-table[b-hl1m27765v] {
    width: 100%;
    min-width: 1360px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.daily-issue-table th[b-hl1m27765v],
.daily-issue-table td[b-hl1m27765v] {
    padding: 8px 10px;
    border-right: 1px solid #e5edf5;
    border-bottom: 1px solid #e5edf5;
    text-align: center;
    white-space: nowrap;
}

.daily-issue-table th[b-hl1m27765v] {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #eef4f8;
    color: #334155;
    font-weight: 800;
}

.daily-issue-table thead tr:first-child th[b-hl1m27765v] {
    height: 35px;
}

.daily-issue-table thead tr:nth-child(2) th[b-hl1m27765v] {
    top: 35px;
    z-index: 3;
}

.daily-issue-table th:first-child[b-hl1m27765v],
.daily-issue-table td:first-child[b-hl1m27765v] {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #ffffff;
    text-align: left;
}

.daily-issue-table th:first-child[b-hl1m27765v] {
    z-index: 30;
    background: #e8f1f3;
    box-shadow: 2px 0 0 #dbe3ec;
}

.daily-issue-table thead tr:first-child th:first-child[b-hl1m27765v] {
    top: 0;
    z-index: 50;
}

.daily-issue-table thead th:first-child[b-hl1m27765v] {
    z-index: 50;
}

.daily-issue-table td:first-child[b-hl1m27765v] {
    box-shadow: 2px 0 0 #e5edf5;
}

.daily-issue-group-head[b-hl1m27765v] {
    color: #0f172a;
}

.daily-issue-table th.daily-issue-group--trip[b-hl1m27765v] {
    background: #e8f3ff;
    color: #174a7c;
}

.daily-issue-table th.daily-issue-group--quantity[b-hl1m27765v] {
    background: #eaf8ef;
    color: #17633a;
}

.daily-issue-table th.daily-issue-group--need-confirm[b-hl1m27765v] {
    background: #eef2ff;
    color: #3730a3;
}

.daily-issue-table th.daily-issue-group--document[b-hl1m27765v] {
    background: #fff2df;
    color: #7a4813;
}

.daily-issue-table td.daily-issue-group--send-failed[b-hl1m27765v] {
    background: #fff7ed;
}

.daily-issue-table td.daily-issue-group--need-confirm[b-hl1m27765v] {
    background: #f7f7ff;
}

.daily-issue-table td.daily-issue-group--trip[b-hl1m27765v] {
    background: #f5faff;
}

.daily-issue-table td.daily-issue-group--quantity[b-hl1m27765v] {
    background: #f5fbf7;
}

.daily-issue-table td.daily-issue-group--document[b-hl1m27765v] {
    background: #fffaf2;
}

.daily-issue-table td.daily-issue-number--warning[b-hl1m27765v] {
    background: #fff4ed;
}

.daily-issue-date[b-hl1m27765v] {
    color: #0f172a;
    font-weight: 700;
}

.daily-issue-number[b-hl1m27765v] {
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.daily-issue-number--warning[b-hl1m27765v] {
    color: #b42318;
    background: #fff4ed;
    font-weight: 800;
}

.daily-issue-value[b-hl1m27765v] {
    width: 100%;
    min-width: 58px;
    min-height: 28px;
    padding: 3px 8px;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-weight: inherit;
    cursor: default;
}

.daily-issue-value--clickable[b-hl1m27765v] {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.daily-issue-number--warning .daily-issue-value--clickable[b-hl1m27765v] {
    color: #b42318;
    background: #fff7ed;
    border-color: #fed7aa;
}

.daily-issue-value--clickable:hover[b-hl1m27765v] {
    background: #ccfbf1;
    border-color: #14b8a6;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.16);
    transform: translateY(-1px);
}

.daily-issue-number--warning .daily-issue-value--clickable:hover[b-hl1m27765v] {
    background: #ffedd5;
    border-color: #fb923c;
    box-shadow: 0 2px 8px rgba(180, 35, 24, 0.13);
}

.daily-issue-value--clickable:active[b-hl1m27765v] {
    transform: translateY(0);
}

.daily-issue-value:disabled[b-hl1m27765v] {
    opacity: 1;
}

.daily-issue-loading[b-hl1m27765v],
.daily-issue-empty[b-hl1m27765v] {
    display: flex;
    min-height: 210px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fbfdff;
}

.comparison-filter-bar[b-hl1m27765v] {
    position: relative;
    z-index: 20;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}

.filter-field > input[b-hl1m27765v],
.native-multiselect > summary[b-hl1m27765v] {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    color: #263244;
    background: #f8fafc;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    outline: none;
    font-size: 12px;
}

.filter-field > input[b-hl1m27765v] {
    padding: 0 9px;
}

.filter-field > input:focus[b-hl1m27765v],
.native-multiselect[open] > summary[b-hl1m27765v] {
    background: #fff;
    border-color: var(--mail-primary);
    box-shadow: 0 0 0 2px rgba(36, 87, 230, .1);
}

.native-multiselect[b-hl1m27765v] {
    position: relative;
    width: 100%;
}

.native-multiselect > summary[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.native-multiselect > summary[b-hl1m27765v]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-hl1m27765v] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.native-multiselect__arrow[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: -1px;
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.native-multiselect__arrow[b-hl1m27765v]::before {
    width: 6px;
    height: 6px;
    content: "";
    border-right: 2px solid #7b8794;
    border-bottom: 2px solid #7b8794;
    transform: rotate(45deg) translateY(-1px);
}

.native-multiselect__menu[b-hl1m27765v] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    width: max(100%, 230px);
    padding: 7px;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 9px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

.native-multiselect__header[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 7px;
    color: #475569;
    font-size: 11px;
    border-bottom: 1px solid #edf1f5;
}

.native-multiselect__header button[b-hl1m27765v] {
    padding: 2px 5px;
    color: #d14f31;
    background: transparent;
    border: 0;
    font-size: 11px;
    cursor: pointer;
}

.native-multiselect__search-wrap[b-hl1m27765v] {
    padding: 6px 4px 2px;
}

.native-multiselect__search[b-hl1m27765v] {
    width: 100%;
    height: 31px;
    padding: 0 11px;
    color: #1e293b;
    background: #f8fbff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.native-multiselect__search:focus[b-hl1m27765v] {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.native-multiselect__options[b-hl1m27765v] {
    max-height: 235px;
    margin-top: 5px;
    overflow: auto;
}

.native-multiselect__options label[b-hl1m27765v] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 29px;
    margin: 0;
    padding: 4px 6px;
    color: #334155;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
}

.native-multiselect__options label span[b-hl1m27765v] {
    text-transform: none;
}

.native-multiselect__options label:hover[b-hl1m27765v] {
    background: #f1f5fb;
}

.native-multiselect__select-all[b-hl1m27765v] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2px;
    font-weight: 700;
}

.native-multiselect__options input[b-hl1m27765v],
.mail-native-table input[type="checkbox"][b-hl1m27765v] {
    width: 14px;
    height: 14px;
    accent-color: var(--mail-primary);
}

.native-multiselect__empty[b-hl1m27765v] {
    display: block;
    padding: 15px 8px;
    color: #94a3b8;
    font-size: 11px;
    text-align: center;
}

.native-multiselect__no-results[b-hl1m27765v] {
    display: block;
    padding: 14px 8px 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.datamail-grid-wrapper[b-hl1m27765v] {
    height: calc(100vh - 375px);
    min-height: 430px;
    margin: 0 14px;
    overflow: auto;
    border-radius: 9px 9px 0 0;
}

.mail-native-table[b-hl1m27765v] {
    width: max-content;
    min-width: 100%;
    color: #334155;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mail-native-table th[b-hl1m27765v],
.mail-native-table td[b-hl1m27765v] {
    max-width: 170px;
    padding: 5px 7px;
    overflow: hidden;
    border-right: 1px solid #edf1f5;
    border-bottom: 1px solid #e8edf3;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.mail-native-table thead[b-hl1m27765v] {
    position: relative;
    z-index: 120;
}

.mail-native-table thead th[b-hl1m27765v] {
    position: sticky;
    top: 0;
    z-index: 120;
    overflow: visible;
    height: 28px;
    color: #536174;
    background: #f3f6fa;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.mail-native-table thead tr:nth-child(2) th[b-hl1m27765v] {
    top: 39px;
}

.mail-native-table tbody tr:nth-child(even)[b-hl1m27765v] {
    background: #fbfcfe;
}

.mail-native-table tbody tr:hover[b-hl1m27765v],
.mail-native-table tbody tr.mail-row-selected[b-hl1m27765v] {
    background: #edf3ff;
}

.mail-native-table tbody td[b-hl1m27765v] {
    height: 27px;
}

/* Bề rộng phải khớp CheckColumnWidth ở code-behind, vì vị trí left của các cột
   ghim tiếp theo được tính cộng dồn từ con số đó. */
.mail-col-check[b-hl1m27765v] {
    position: sticky !important;
    left: 0;
    z-index: 4;
    min-width: 44px;
    width: 44px;
    background: inherit;
}

thead .mail-col-check[b-hl1m27765v] {
    z-index: 8;
    background: #f3f6fa;
}

.mail-col-action[b-hl1m27765v] {
    position: sticky !important;
    right: 0;
    z-index: 4;
    min-width: 68px;
    white-space: nowrap;
    text-align: center;
    background: inherit;
    box-shadow: -4px 0 8px rgba(15, 23, 42, .045);
}

tbody .mail-col-action[b-hl1m27765v] {
    /* gom 2 nút vào 1 hàng, canh giữa ô, khoảng cách đều */
    line-height: 1;
}

thead .mail-col-action[b-hl1m27765v] {
    z-index: 8;
    background: #f3f6fa;
}

.mail-group-head--pc[b-hl1m27765v],
.mail-sub-head--pc[b-hl1m27765v] {
    color: #9a4f1e !important;
    background: #fff5e8 !important;
}

.mail-group-head--wl[b-hl1m27765v],
.mail-sub-head--wl[b-hl1m27765v] {
    color: #176847 !important;
    background: #eaf8f2 !important;
}

.mail-pc-cell[b-hl1m27765v] {
    background: rgba(255, 247, 237, .55);
}

.mail-wl-cell[b-hl1m27765v] {
    background: rgba(236, 253, 245, .55);
}

.mail-cell-mismatch[b-hl1m27765v] {
    color: #b42318;
    background: #fff0ed !important;
    font-weight: 750;
}

.mail-cell-number[b-hl1m27765v] {
    min-width: 78px;
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}

.mail-cell-date[b-hl1m27765v] {
    min-width: 96px;
    color: #64748b;
    font-size: 10.5px;
}

.mail-cell-warehouse[b-hl1m27765v] {
    max-width: 190px !important;
    font-weight: 650;
    text-align: left !important;
}

.mail-cell-ticket[b-hl1m27765v],
.mail-cell-plate[b-hl1m27765v],
.mail-code[b-hl1m27765v] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 650;
}

.mail-cell-ticket[b-hl1m27765v] {
    color: #234fae;
}

.mail-cell-muted[b-hl1m27765v] {
    color: #94a3b8;
}

.mail-code[b-hl1m27765v],
.mail-direction[b-hl1m27765v] {
    display: inline-flex;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 5px;
}

.table-sort[b-hl1m27765v] {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.mail-table-link[b-hl1m27765v] {
    padding: 3px 8px;
    color: #2457e6;
    background: #eef3ff;
    border: 0;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 650;
    cursor: pointer;
}

.mail-table-link:disabled[b-hl1m27765v] {
    color: #a5afbd;
    background: #f1f3f5;
    cursor: default;
}

.mail-row-action[b-hl1m27765v] {
    /* inline-flex + căn giữa để 2 nút cạnh nhau không bị lệch nhau theo baseline chữ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0;
    width: 27px;
    height: 25px;
    line-height: 1;
    font-size: 12px;
    color: #87520d;
    background: #fff6df;
    border: 1px solid #f0d79d;
    border-radius: 6px;
    cursor: pointer;
}

.mail-row-action:hover[b-hl1m27765v] {
    color: #fff;
    background: #d48618;
}

.mail-row-action + .mail-row-action[b-hl1m27765v] {
    margin-left: 4px;
}

.mail-row-action:disabled[b-hl1m27765v] {
    opacity: .45;
    cursor: not-allowed;
}

.mail-row-action--edit[b-hl1m27765v] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.mail-row-action--edit:hover[b-hl1m27765v] {
    color: #fff;
    background: #1d4ed8;
}

.mail-row-action--save[b-hl1m27765v] {
    color: #00832f;
    background: #ecfdf3;
    border-color: #a7e0bd;
}

.mail-row-action--save:hover[b-hl1m27765v] {
    color: #fff;
    background: #00832f;
}

.mail-row-action--cancel[b-hl1m27765v] {
    color: #b42318;
    background: #fef3f2;
    border-color: #fda29b;
}

.mail-row-action--cancel:hover[b-hl1m27765v] {
    color: #fff;
    background: #b42318;
}

/* Cột MẶT HÀNG SAP và LƯỢNG MẶT HÀNG: mỗi mặt hàng 1 dòng, 2 cột khớp hàng nhau. */
.mail-cell-sap-item[b-hl1m27765v],
.mail-cell-sap-qty[b-hl1m27765v] {
    white-space: normal;
    text-align: left;
    vertical-align: top;
}

.mail-cell-sap-qty[b-hl1m27765v] {
    text-align: right;
}

/* min-height + ::after giữ chiều cao cho dòng rỗng (mặt hàng chưa nhập lượng),
   nếu không 2 cột sẽ lệch hàng. */
.mail-sap-qty-line[b-hl1m27765v] {
    min-height: 1.45em;
    line-height: 1.45;
    white-space: nowrap;
}

.mail-sap-qty-line:empty[b-hl1m27765v]::after {
    content: "\00a0";
}

.mail-sap-qty-line + .mail-sap-qty-line[b-hl1m27765v] {
    border-top: 1px dashed #e2e8f0;
}

/* Dialog gán mặt hàng: danh sách nhập lượng cho từng mặt hàng đã chọn. */
.sap-item-qty-list[b-hl1m27765v] {
    margin-top: 12px;
}

.sap-item-qty-row[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #eef2f6;
}

.sap-item-qty-row__name[b-hl1m27765v] {
    flex: 1;
    color: #334155;
    font-size: 13px;
    word-break: break-word;
}

.mail-native-pager[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 14px 14px;
    padding: 8px 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 9px 9px;
    font-size: 11.5px;
}

.mail-native-pager > div[b-hl1m27765v] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mail-native-pager__left[b-hl1m27765v] {
    gap: 14px;
}

.mail-native-pager__size[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

.mail-native-pager__size select[b-hl1m27765v] {
    height: 28px;
    padding: 0 6px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    font-size: 11.5px;
    cursor: pointer;
}

.mail-native-pager__size select:disabled[b-hl1m27765v] {
    opacity: .4;
    cursor: default;
}

.mail-native-pager button[b-hl1m27765v] {
    width: 30px;
    height: 28px;
    color: #334155;
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    cursor: pointer;
}

.mail-native-pager button:disabled[b-hl1m27765v] {
    opacity: .4;
    cursor: default;
}

@media (max-width: 1500px) {
    .comparison-filter-bar[b-hl1m27765v] {
        grid-template-columns: repeat(4, minmax(140px, 1fr));
    }
}

@media (max-width: 900px) {
    .comparison-filter-bar[b-hl1m27765v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .datamail-grid-wrapper[b-hl1m27765v] {
        height: calc(100vh - 440px);
        margin: 0 8px;
    }

    .mail-native-pager[b-hl1m27765v] {
        margin: 0 8px 8px;
    }
}

/* Detail panel refinements */
.mail-control-page[b-hl1m27765v] {
    height: calc(100vh - 72px);
    overflow: hidden;
    font-size: 1.2rem;
}

[b-hl1m27765v] .mail-dashboard-card.rz-card,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-panels,
[b-hl1m27765v] .mail-dashboard-card .rz-tabview-panel {
    height: 100%;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-panel {
    overflow: hidden;
}

.mail-detail-panel[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.comparison-filter-bar[b-hl1m27765v],
.queue-view-toolbar[b-hl1m27765v],
.mail-native-pager[b-hl1m27765v],
.grid-empty-state[b-hl1m27765v] {
    flex: 0 0 auto;
}

/* Cho phép xuống hàng: dàn ô lọc ở hàng trên, cụm nút tự tụt xuống hàng dưới
   khi chiều ngang không đủ cho cả hai đứng cạnh nhau. */
.queue-filter-header[b-hl1m27765v] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
    z-index: 3000;
}

/* Chỉ chiếm đúng chỗ các ô lọc cần, không giãn ra, để màn hình rộng thì
   cụm nút nằm sát ngay sau dàn ô lọc chứ không bị đẩy ra mép phải.
   Hết chỗ thì cụm nút tự tụt xuống hàng dưới, ô lọc tự xuống hàng trong phạm vi của nó. */
.comparison-filter-bar[b-hl1m27765v] {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 0;
}

/* Không giới hạn số ô lọc hiển thị nữa: 6 ô hay dùng đã được đưa hẳn ra thanh
   lọc chính nên tất cả đều phải thấy được, thiếu chỗ thì tự bẻ xuống hàng dưới. */

/* Các ô lọc giữ bề rộng đều nhau và tự xuống hàng trong phạm vi dàn ô lọc. */
.filter-field[b-hl1m27765v] {
    flex: 0 1 148px;
    min-width: 148px;
    max-width: 148px;
}

.filter-toggle-inline[b-hl1m27765v] {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-top: auto;
    min-height: 30px;
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.filter-field label[b-hl1m27765v] {
    margin-bottom: 7px;
    font-size: .86rem;
}

.filter-field > input[b-hl1m27765v],
.native-multiselect > summary[b-hl1m27765v] {
    height: 30px;
    padding: 0 12px;
    font-size: .88rem;
    border-radius: 10px;
}

.native-multiselect__arrow[b-hl1m27765v] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.native-multiselect__menu[b-hl1m27765v] {
    padding: 10px;
    border-radius: 12px;
}

.native-multiselect__header[b-hl1m27765v],
.native-multiselect__header button[b-hl1m27765v],
.native-multiselect__empty[b-hl1m27765v] {
    font-size: .8rem;
}

.native-multiselect__options label[b-hl1m27765v] {
    min-height: 34px;
    font-size: .86rem;
}

.mail-action[b-hl1m27765v] {
    min-height: 34px;
    padding: 0 12px;
    font-size: .8rem;
    border-radius: 8px;
}

.filter-actions-inline[b-hl1m27765v] {
    display: none;
}

/* Hàng nút thao tác nằm riêng một khối DƯỚI bảng thống kê, trải hết chiều ngang.
   Không còn tranh chỗ với dàn ô lọc nên được phép bẻ dòng khi màn hình hẹp. */
.queue-filter-actions[b-hl1m27765v] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 16px 12px;
    border: 0;
    border-top: 1px solid var(--mail-border);
    background: #fff;
    border-radius: 0 0 13px 13px;
}

.mail-action--toggle[b-hl1m27765v] {
    color: #9a3412;
    background: linear-gradient(180deg, #fff4e8 0%, #ffe7d2 100%);
    border-color: #f2bf93;
    box-shadow: 0 6px 14px rgba(217, 106, 61, .12);
}

.mail-action--toggle:hover:not(:disabled)[b-hl1m27765v] {
    border-color: #e38a57;
    box-shadow: 0 10px 18px rgba(217, 106, 61, .18);
}

.mail-action--toggle-active[b-hl1m27765v] {
    color: #fff;
    background: linear-gradient(135deg, #d96a3d 0%, #ef9d65 100%);
    border-color: #d96a3d;
    box-shadow: 0 10px 20px rgba(217, 106, 61, .2);
}

.filter-extra-panel[b-hl1m27765v] {
    position: absolute;
    top: calc(100% - 2px);
    left: 16px;
    z-index: 3001;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    max-width: min(720px, calc(100vw - 64px));
    padding: 12px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    backdrop-filter: blur(10px);
}

.filter-extra-panel .native-multiselect__menu[b-hl1m27765v] {
    z-index: 3002;
}

.queue-view-toolbar[b-hl1m27765v] {
    padding: 12px 16px 10px;
}

.queue-view-overall-stats[b-hl1m27765v] {
    grid-template-columns: repeat(3, minmax(146px, .8fr)) minmax(390px, 3.3fr);
    gap: 8px;
}

.overall-stat-card[b-hl1m27765v] {
    min-height: 56px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .05);
}

.overall-stat-card[b-hl1m27765v]::before {
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
}

.overall-stat-card--total[b-hl1m27765v] {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border-color: #cbe8f8;
    box-shadow: 0 6px 14px rgba(14, 165, 233, .08);
}

.overall-stat-card:nth-child(2)[b-hl1m27765v],
.overall-stat-card:nth-child(3)[b-hl1m27765v] {
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}

.overall-stat-card:nth-child(2)[b-hl1m27765v]::before,
.overall-stat-card:nth-child(3)[b-hl1m27765v]::before {
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
}

.overall-stat-card--total .overall-stat-lines[b-hl1m27765v] {
    padding-right: 9px;
}

.overall-stat-label[b-hl1m27765v] {
    min-width: 52px;
    padding: 6px 7px;
    font-size: .6rem;
}

.overall-stat-lines[b-hl1m27765v] {
    padding: 6px 9px;
}

.stat-line-count[b-hl1m27765v] {
    font-size: .92rem;
}

.stat-line-kg[b-hl1m27765v],
.stat-line-perc[b-hl1m27765v] {
    margin-top: 2px;
    font-size: .66rem;
}

.overall-stat-card-group[b-hl1m27765v] {
    grid-template-columns: repeat(5, minmax(108px, 1fr));
    gap: 7px;
}

.overall-stat-card--mini[b-hl1m27765v] {
    height: 28px;
    min-height: 28px;
    border-radius: 9px;
    background: #fff;
}

.overall-stat-card--mini[b-hl1m27765v]::before {
    width: 3px;
}

.overall-stat-card--mini .overall-stat-lines[b-hl1m27765v] {
    padding: 3px 7px 3px 9px;
}

.overall-stat-card--mini .overall-stat-label[b-hl1m27765v] {
    min-width: 0;
    padding: 3px 7px;
    font-size: .58rem;
}

.overall-stat-card--mini .stat-line-count[b-hl1m27765v] {
    font-size: .76rem;
}

.overall-stat-card--highlight[b-hl1m27765v] {
    color: #0c4a6e !important;
    background: linear-gradient(135deg, #f0fbff 0%, #e0f2fe 55%, #dbeafe 100%) !important;
    border-color: #7dd3fc !important;
    box-shadow:
        0 5px 12px rgba(14, 165, 233, .09),
        0 0 8px rgba(125, 211, 252, .12) !important;
}

.overall-stat-card--highlight *[b-hl1m27765v] {
    color: #0c4a6e !important;
}

.overall-stat-card--active[b-hl1m27765v] {
    color: #083b5c !important;
    background: linear-gradient(135deg, #d8f3ff 0%, #9ddcff 50%, #60a5fa 100%) !important;
    border-color: #0284c7 !important;
    box-shadow:
        0 9px 20px rgba(2, 132, 199, .24),
        0 0 14px rgba(56, 189, 248, .24) !important;
}

.overall-stat-card--active *[b-hl1m27765v] {
    color: #083b5c !important;
}

@property --overall-neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.overall-stat-card--active[b-hl1m27765v]::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background: conic-gradient(
        from var(--overall-neon-angle),
        transparent 0deg 235deg,
        rgba(103, 232, 249, .25) 260deg,
        #67e8f9 292deg,
        #ffffff 310deg,
        #a78bfa 330deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, .95));
    animation: overall-neon-border-b-hl1m27765v 1.8s linear infinite;
}

@keyframes overall-neon-border-b-hl1m27765v {
    to {
        --overall-neon-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .overall-stat-card--active[b-hl1m27765v]::after {
        animation: none;
    }
}

.datamail-grid-wrapper[b-hl1m27765v] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin: 0 14px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.datamail-grid-scroll[b-hl1m27765v] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.mail-native-table[b-hl1m27765v] {
    font-size: 13px;
}

.mail-native-table th[b-hl1m27765v],
.mail-native-table td[b-hl1m27765v] {
    padding: 7px 9px;
}

.mail-native-table thead th[b-hl1m27765v] {
    top: 0;
    z-index: 120;
    overflow: visible;
    height: 34px;
    font-size: 11.5px;
}

.mail-native-table thead tr:nth-child(2) th[b-hl1m27765v] {
    top: 34px;
    z-index: 121;
}

.mail-native-table thead tr:first-child th[b-hl1m27765v] {
    border-bottom: 0;
    z-index: 122;
}

.mail-native-table thead tr:first-child th[rowspan="2"][b-hl1m27765v] {
    vertical-align: middle;
}

.mail-native-table thead tr:nth-child(2) th[b-hl1m27765v] {
    border-top: 0;
}

.mail-native-table tbody td[b-hl1m27765v] {
    height: 32px;
}

.mail-native-table tbody tr:nth-child(odd) .mail-col-check[b-hl1m27765v],
.mail-native-table tbody tr:nth-child(odd) .mail-col-action[b-hl1m27765v] {
    background: #fff;
}

.mail-native-table tbody tr:nth-child(even) .mail-col-check[b-hl1m27765v],
.mail-native-table tbody tr:nth-child(even) .mail-col-action[b-hl1m27765v] {
    background: #fbfcfe;
}

.mail-native-table tbody tr:hover .mail-col-check[b-hl1m27765v],
.mail-native-table tbody tr:hover .mail-col-action[b-hl1m27765v],
.mail-native-table tbody tr.mail-row-selected .mail-col-check[b-hl1m27765v],
.mail-native-table tbody tr.mail-row-selected .mail-col-action[b-hl1m27765v] {
    background: #edf3ff;
}

.mail-native-table thead .mail-sub-head[b-hl1m27765v] {
    z-index: 6;
}

.mail-native-table thead .mail-group-head[b-hl1m27765v] {
    z-index: 7;
}

/* Cột check/thao tác vừa gim trái-phải vừa nằm trong thead đã gim top,
   nên phải cao hơn z-index 120 của thead th thì tiêu đề mới không bị đè khi cuộn. */
.mail-native-table thead .mail-col-check[b-hl1m27765v],
.mail-native-table thead .mail-col-action[b-hl1m27765v] {
    position: sticky !important;
    top: 0;
    z-index: 130 !important;
    background: #f3f6fa;
}

.mail-cell-date[b-hl1m27765v] {
    min-width: 116px;
    font-size: 12px;
}

.mail-cell-number[b-hl1m27765v] {
    min-width: 92px;
}

.mail-cell-warehouse[b-hl1m27765v] {
    max-width: 220px !important;
}

.mail-group-head--pc[b-hl1m27765v],
.mail-sub-head--pc[b-hl1m27765v] {
    background: #fff1df !important;
}

.mail-group-head--wl[b-hl1m27765v],
.mail-sub-head--wl[b-hl1m27765v] {
    background: #e4f7ef !important;
}

.mail-table-link[b-hl1m27765v] {
    padding: 5px 10px;
    font-size: .82rem;
    border-radius: 7px;
}

.mail-row-action[b-hl1m27765v] {
    width: 27px;
    height: 25px;
}

.datamail-loading-overlay[b-hl1m27765v] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(244, 247, 251, .96);
    backdrop-filter: blur(4px);
}

.datamail-loading-skeleton[b-hl1m27765v] {
    width: 100%;
    height: 100%;
    padding: 18px;
}

.mail-skeleton-row[b-hl1m27765v] {
    min-height: 40px;
}

.mail-native-pager[b-hl1m27765v] {
    margin: 0 14px 14px;
    padding: 11px 14px;
    font-size: .86rem;
    border-radius: 0 0 12px 12px;
}

.mail-native-pager button[b-hl1m27765v] {
    width: 34px;
    height: 32px;
}

@media (max-width: 1500px) {
    .queue-view-overall-stats[b-hl1m27765v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .overall-stat-card-group[b-hl1m27765v] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .mail-control-page[b-hl1m27765v] {
        height: calc(100vh - 56px);
    }

    .queue-filter-header[b-hl1m27765v] {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px 8px;
    }

    .comparison-filter-bar[b-hl1m27765v] {
        width: 100%;
    }

    .filter-field[b-hl1m27765v] {
        flex-basis: calc(50% - 4px);
        min-width: calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    .filter-toggle-inline[b-hl1m27765v] {
        flex-basis: calc(50% - 4px);
        justify-content: center;
        width: calc(50% - 4px);
    }

    .queue-view-overall-stats[b-hl1m27765v] {
        grid-template-columns: 1fr;
    }

    .overall-stat-card-group[b-hl1m27765v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .datamail-grid-wrapper[b-hl1m27765v],
    .mail-native-pager[b-hl1m27765v] {
        margin-left: 8px;
        margin-right: 8px;
    }

    /* Màn hình nhỏ: cho phép bẻ nút xuống nhiều dòng, không thì hàng nút tràn ngang. */
    .queue-filter-actions[b-hl1m27765v] {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }

    .filter-extra-panel[b-hl1m27765v] {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* ===== Khung thu gọn bộ lọc + thống kê (tab Chi tiết) ===== */
[b-hl1m27765v] .mail-dashboard-card .rz-tabview {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-nav {
    flex: 0 0 auto;
    align-self: flex-start;
}

[b-hl1m27765v] .mail-dashboard-card .rz-tabview-panels {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.control-collapse-panel[b-hl1m27765v] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    margin: 8px 14px 8px;
    border: 1px solid var(--mail-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.control-collapse-toggle[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid var(--mail-border);
    border-radius: 13px 13px 0 0;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
}

.control-collapse-panel--collapsed .control-collapse-toggle[b-hl1m27765v] {
    border-bottom: none;
    border-radius: 13px;
}

.control-collapse-toggle__summary[b-hl1m27765v] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.control-collapse-toggle__arrow[b-hl1m27765v] {
    flex-shrink: 0;
    color: #2457e6;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.control-collapse-chip[b-hl1m27765v] {
    padding: 0.1rem 0.5rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.control-collapse-chip--total[b-hl1m27765v] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.control-collapse-chip--muted[b-hl1m27765v] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.control-collapse-body[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Thống kê nằm giữa nên bỏ bo góc dưới; hàng nút thao tác mới là khối cuối. */
.control-collapse-body .queue-view-toolbar[b-hl1m27765v] {
    border-bottom: none;
    border-radius: 0;
}

/* Thu gọn: ẩn ô lọc + bảng thống kê, NHƯNG giữ lại hàng nút để vẫn thao tác được.
   Hàng nút lúc này nằm một mình nên tự trôi xuống dưới chỗ nút thu gọn. */
.control-collapse-panel--collapsed .comparison-filter-bar[b-hl1m27765v],
.control-collapse-panel--collapsed .filter-extra-panel[b-hl1m27765v],
.control-collapse-panel--collapsed .queue-view-toolbar[b-hl1m27765v] {
    display: none;
}

.control-collapse-panel--collapsed .queue-filter-header[b-hl1m27765v] {
    padding: 8px 16px;
}

/* Thu gọn thì chỉ còn hàng nút, cho nó bo tròn hết cả khối. */
.control-collapse-panel--collapsed .queue-filter-actions[b-hl1m27765v] {
    border-top: none;
    border-radius: 0 0 13px 13px;
}

/* Khi thu gọn: lưới dữ liệu chiếm hết phần còn lại thay vì chiều cao cố định */
.mail-detail-panel--collapsed .datamail-grid-wrapper[b-hl1m27765v] {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 280px;
}

/* ===== Master data map mặt hàng SAP ===== */
.mail-action--sap-item-map[b-hl1m27765v] {
    color: #4c1d95;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.mail-action--sap-item-map:hover:not(:disabled)[b-hl1m27765v] {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.sap-item-map-modal[b-hl1m27765v] {
    width: min(1040px, 96vw);
}

.sap-item-map-modal__body[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sap-item-map-toolbar[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.sap-item-map-upload input[type="file"][b-hl1m27765v] {
    font-size: 13px;
}

.sap-item-map-count[b-hl1m27765v] {
    margin-left: auto;
    font-size: 12px;
    color: #64748b;
}

.sap-item-map-message[b-hl1m27765v] {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid transparent;
}

.sap-item-map-message--ok[b-hl1m27765v] {
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.sap-item-map-message--error[b-hl1m27765v] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.sap-item-map-errors[b-hl1m27765v] {
    max-height: 160px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 12px 8px 28px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fff7f7;
    font-size: 12px;
    color: #991b1b;
}

.sap-item-map-preview__title[b-hl1m27765v] {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* ===== Kéo giãn cột (mail-table-resize.js) ===== */

/* Tay nắm kéo nằm sát mép phải mỗi ô tiêu đề. thead th đã là position:sticky
   nên đủ điều kiện làm mốc cho absolute. */
.mail-col-resizer[b-hl1m27765v] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}

.mail-col-resizer:hover[b-hl1m27765v] {
    background: rgba(37, 99, 235, .35);
}

/* Trong lúc kéo thì chặn bôi đen chữ cho đỡ rối. */
body.mail-col-resizing[b-hl1m27765v],
body.mail-col-resizing *[b-hl1m27765v] {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ===== Chỉnh sửa hàng loạt + cột Nội dung chỉnh sửa ===== */

.mail-action--bulk-edit[b-hl1m27765v] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.mail-action--bulk-edit:hover:not(:disabled)[b-hl1m27765v] {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Ô bắt buộc đang bỏ trống thì viền đỏ cho dễ thấy. */
.mail-input-invalid[b-hl1m27765v],
.mail-input-invalid input[b-hl1m27765v] {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.mail-cell-edit-content[b-hl1m27765v] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Chú thích trạng thái chọn dòng / chờ lưu trên hàng nút ===== */

.row-edit-bar__count[b-hl1m27765v] {
    align-self: center;
    color: #334155;
    font-size: 12px;
}

.row-edit-bar__count strong[b-hl1m27765v] {
    color: #1d4ed8;
}

.row-edit-bar__hint[b-hl1m27765v] {
    align-self: center;
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
}

/* Nút "Lưu tất cả": xanh lá cho khác hẳn nút Lọc. */
.mail-action--save-all[b-hl1m27765v] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mail-action--save-all:hover:not(:disabled)[b-hl1m27765v] {
    background: #dcfce7;
    border-color: #86efac;
}

/* Dòng đã sửa nhưng chưa lưu: tô vàng nhạt + vạch trái cho dễ nhận ra. */
.mail-native-table tbody tr.mail-row-pending > td[b-hl1m27765v] {
    background: #fffbeb !important;
}

.mail-native-table tbody tr.mail-row-pending > td:first-child[b-hl1m27765v] {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Cột KH và Đội vận tải rộng thêm 40% so với mặc định. */
.mail-cell-shipper[b-hl1m27765v] {
    min-width: 308px;
}

.mail-cell-transporter[b-hl1m27765v] {
    min-width: 308px;
}

/* ============================================================
   Alert quan trọng (5 cục bên trái) - tô đậm hơn nhóm còn lại.
   ============================================================ */
.overall-stat-card--priority[b-hl1m27765v] {
    border-width: 2px;
    border-color: #64748b;
    background: linear-gradient(135deg, #eef2f7 0%, #e2e8f0 100%);
    font-weight: 900;
}

.overall-stat-card--priority .overall-stat-label[b-hl1m27765v],
.overall-stat-card--priority .stat-line-count[b-hl1m27765v] {
    color: #0f172a;
    font-weight: 900;
}

.overall-stat-card--priority .stat-line-count[b-hl1m27765v] {
    font-size: 0.92rem;
}

/* Alert quan trọng đang bật sáng (có số > 0) thì viền đỏ cảnh báo. */
.overall-stat-card--priority.overall-stat-card--highlight[b-hl1m27765v] {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
}

.overall-stat-card--priority.overall-stat-card--highlight *[b-hl1m27765v] {
    color: #991b1b !important;
}

/* Khi đã chọn 1 alert -> các alert còn lại mờ hẳn và không bấm được. */
.overall-stat-card--disabled[b-hl1m27765v] {
    cursor: not-allowed;
    opacity: 0.38;
    filter: grayscale(0.55);
    pointer-events: none;
}

/* ============================================================
   Cột LOẠI HÀNG + TÌNH TRẠNG CHỨNG TỪ
   ============================================================ */
.mail-cell-phan-loai[b-hl1m27765v] {
    white-space: nowrap;
    font-size: 0.76rem;
}

.mail-cell-doc-status[b-hl1m27765v] {
    text-align: center;
    white-space: nowrap;
}

.doc-status-badge[b-hl1m27765v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.15;
}

.doc-status-badge--ok[b-hl1m27765v] {
    background: #dcfce7;
    color: #15803d;
}

.doc-status-badge--unofficial[b-hl1m27765v] {
    background: #fee2e2;
    color: #b91c1c;
}

.doc-status-badge--muted[b-hl1m27765v] {
    background: #f1f5f9;
    color: #64748b;
}

/* ===== Nút "áp cho cả cột" ở tiêu đề khi đang mở form chỉnh sửa nhiều dòng ===== */

.mail-column-header-tools--apply[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.mail-col-apply-all[b-hl1m27765v] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.mail-col-apply-all:hover:not(:disabled)[b-hl1m27765v] {
    background: #dbeafe;
    border-color: #60a5fa;
}

/* Không mở form chỉnh sửa (hoặc chỉ 1 dòng) thì mờ đi cho khỏi rối mắt. */
.mail-col-apply-all:disabled[b-hl1m27765v] {
    opacity: 0.25;
    cursor: default;
}

/* ===== Popup Lý do chỉnh sửa (bắt buộc nhập trước khi lưu) ===== */
.save-reason-modal[b-hl1m27765v] {
    width: min(560px, 94vw);
}

.save-reason-modal__body[b-hl1m27765v] {
    padding-top: 4px;
}

.save-reason-required[b-hl1m27765v] {
    color: #dc2626;
    font-weight: 800;
}

.save-reason-error[b-hl1m27765v] {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

/* ===== Ô Mặt hàng SAP sửa ngay trên dòng (gộp từ chức năng Gán mặt hàng) ===== */
.mail-cell-sap-item-edit[b-hl1m27765v] {
    min-width: 330px;
}

.mail-cell-sap-qty-edit[b-hl1m27765v] {
    min-width: 140px;
}

/* Mỗi mặt hàng đã chọn có đúng một ô nhập lượng, xếp dọc để khớp hàng với danh sách bên trái. */
.mail-sap-qty-edit-row[b-hl1m27765v] {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

.mail-sap-qty-edit-row:last-child[b-hl1m27765v] {
    margin-bottom: 0;
}

/* Ô nhập số trong form sửa: dùng input thuần để bắt được từng phím gõ,
   nên phải tự vẽ lại cho giống các ô nhập Radzen xung quanh. */
.mail-inline-number[b-hl1m27765v] {
    width: 110px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: .85rem;
    text-align: right;
}

.mail-inline-number:focus[b-hl1m27765v] {
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, .1);
    outline: none;
}

.mail-inline-number--sap[b-hl1m27765v] {
    width: 120px;
}

.mail-inline-text[b-hl1m27765v] {
    width: 150px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font-size: .85rem;
}

.mail-inline-text:focus[b-hl1m27765v] {
    border-color: #8aa8f4;
    box-shadow: 0 0 0 3px rgba(36, 87, 230, .1);
    outline: none;
}

.mail-inline-text--plate[b-hl1m27765v] {
    width: 130px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===== Cột CHI TIẾT + màn hình chi tiết phiếu cân ===== */
/* Cột Chi tiết đứng cuối bảng và luôn ghim bên phải. */
.mail-col-detail[b-hl1m27765v] {
    min-width: 62px;
    width: 62px;
    text-align: center;
    box-shadow: -4px 0 8px rgba(15, 23, 42, .045);
}

.mail-detail-link[b-hl1m27765v] {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.mail-detail-link:hover[b-hl1m27765v] {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* ===== Dialog chi tiết phiếu cân =====
   Bố cục 2 cột: thông tin phiếu bên trái, lịch sử chỉnh sửa bên phải.
   Dialog lấy gần hết màn hình để đọc được nhiều thông tin trong một lần nhìn. */
/* Chiều cao co theo nội dung: ít lịch sử thì dialog thấp, không chừa khoảng trắng thừa.
   Lịch sử dài dần thì dialog cao dần tới trần rồi mới cho cuộn bên trong. */
.ticket-detail-modal[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    width: min(1560px, 96vw);
    height: auto;
    max-height: min(900px, 92vh);
    padding: 0;
    overflow: hidden;
}

.ticket-detail-header[b-hl1m27765v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.ticket-detail-header__main[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    min-width: 0;
}

.ticket-detail-header__title[b-hl1m27765v] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ticket-detail-header__label[b-hl1m27765v] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ticket-detail-header__title h3[b-hl1m27765v] {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}

.ticket-detail-header__chips[b-hl1m27765v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ticket-detail-chip[b-hl1m27765v] {
    padding: 3px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.ticket-detail-chip--accent[b-hl1m27765v] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ticket-detail-close[b-hl1m27765v] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.ticket-detail-close:hover[b-hl1m27765v] {
    background: #f1f5f9;
    color: #0f172a;
}

/* Hai cột: thông tin chiếm phần lớn, lịch sử giữ bề rộng cố định vừa đọc. */
/* flex: 0 1 auto để phần thân cao đúng bằng nội dung; chạm trần của dialog
   thì mới co lại và cho cuộn, thay vì luôn giãn đầy và để lại khoảng trắng. */
.ticket-detail-body[b-hl1m27765v] {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
    gap: 0;
    min-height: 0;
    background: #f1f5f9;
}

/* Hai cột cao bằng nhau và bằng cột dài hơn; chỉ cuộn khi vượt trần. */
.ticket-detail-pane[b-hl1m27765v] {
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.ticket-detail-pane--info[b-hl1m27765v] {
    background: #ffffff;
}

.ticket-detail-pane--log[b-hl1m27765v] {
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
}

.ticket-detail-card[b-hl1m27765v] {
    margin-bottom: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.ticket-detail-card:last-child[b-hl1m27765v] {
    margin-bottom: 0;
}

.ticket-detail-card__title[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ticket-detail-card__count[b-hl1m27765v] {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Danh sách thông tin phiếu: nhiều cột tự co, mỗi dòng một cặp nhãn - giá trị.
   Không chia nhóm tiêu đề, mắt dò thẳng theo cột nhãn bên trái. */
.ticket-detail-list[b-hl1m27765v] {
    column-count: 2;
    column-gap: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 14px;
    background: #ffffff;
}

@media (min-width: 1400px) {
    .ticket-detail-list[b-hl1m27765v] {
        column-count: 3;
    }
}

/* Ô Ghi chú trong dialog Chi tiết: cùng ghi vào cột NOTE như dialog Phân loại. */
.ticket-detail-note-editor[b-hl1m27765v] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}

.ticket-detail-note-editor__label[b-hl1m27765v] {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ticket-detail-note-editor__actions[b-hl1m27765v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.ticket-detail-note-editor__error[b-hl1m27765v] {
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}

.ticket-detail-note-editor__saved[b-hl1m27765v] {
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
}

/* Nhãn bên trái cố định bề rộng để mọi giá trị thẳng hàng nhau. */
.ticket-detail-row[b-hl1m27765v] {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    break-inside: avoid;
}

.ticket-detail-row__label[b-hl1m27765v] {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
}

.ticket-detail-row__value[b-hl1m27765v] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    word-break: break-word;
}

.ticket-detail-row__value.is-empty[b-hl1m27765v] {
    color: #cbd5e1;
    font-weight: 500;
}

/* ----- Lịch sử chỉnh sửa gom theo version ----- */
.ticket-detail-card--log[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.ticket-detail-card__body--log[b-hl1m27765v] {
    display: block;
    padding: 12px;
    background: #ffffff;
}

.ticket-version[b-hl1m27765v] {
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.ticket-version:last-child[b-hl1m27765v] {
    margin-bottom: 0;
}

.ticket-version__head[b-hl1m27765v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

/* Số version là thứ người dùng tìm trước tiên nên tô nổi bật. */
.ticket-version__badge[b-hl1m27765v] {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.ticket-version__meta[b-hl1m27765v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.ticket-version__time[b-hl1m27765v] {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.ticket-version__by[b-hl1m27765v] {
    color: #64748b;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-version__count[b-hl1m27765v] {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.ticket-version__reason[b-hl1m27765v] {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    background: #fffbeb;
    color: #78350f;
    font-size: 12px;
    line-height: 1.4;
}

.ticket-version__reason-label[b-hl1m27765v] {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ticket-version__changes[b-hl1m27765v] {
    padding: 4px 0;
}

/* Mỗi trường một dòng: tên trường, giá trị cũ, mũi tên, giá trị mới. */
.ticket-change[b-hl1m27765v] {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) minmax(0, 1.2fr) 14px minmax(0, 1.2fr);
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    font-size: 12px;
}

.ticket-change + .ticket-change[b-hl1m27765v] {
    border-top: 1px dashed #f1f5f9;
}

.ticket-change__field[b-hl1m27765v] {
    color: #475569;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-change__old[b-hl1m27765v] {
    color: #b91c1c;
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-change__arrow[b-hl1m27765v] {
    color: #94a3b8;
    text-align: center;
}

.ticket-change__new[b-hl1m27765v] {
    color: #15803d;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-detail-note[b-hl1m27765v] {
    padding: 16px 12px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.ticket-detail-note--error[b-hl1m27765v] {
    color: #b91c1c;
}

.ticket-detail-footer[b-hl1m27765v] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

/* Màn hình hẹp: xếp hai cột thành một cột dọc. */
@media (max-width: 1100px) {
    .ticket-detail-body[b-hl1m27765v] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ticket-detail-pane--log[b-hl1m27765v] {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }
}


/* ===== Ghim cột =====
   Vị trí left được tính ở C# và gắn thẳng vào style của từng ô. */
.mail-native-table--frozen td.mail-frozen-cell[b-hl1m27765v] {
    position: sticky;
    z-index: 100;
    background: #ffffff;
}

/* Ô tiêu đề của cột ghim vừa dính trái vừa nằm trong thead đã dính top.
   Phải cao hơn z-index 120 của .mail-native-table thead th thì tiêu đề cột ghim
   mới không bị các cột không ghim trượt đè lên khi cuộn ngang. */
.mail-native-table--frozen th.mail-frozen-head[b-hl1m27765v] {
    position: sticky !important;
    top: 0;
    z-index: 140 !important;
    background: #f1f5f9;
}

/* Cột ghim bên phải (cột Chi tiết) - dính mép phải thay vì mép trái. */
.mail-native-table--frozen .mail-frozen-right[b-hl1m27765v] {
    left: auto !important;
    right: 0;
}

/* Đường kẻ ngăn cách phần ghim với phần cuộn, để nhìn ra ranh giới. */
.mail-native-table--frozen .mail-frozen-cell[b-hl1m27765v],
.mail-native-table--frozen .mail-frozen-head[b-hl1m27765v] {
    border-right: 1px solid #dbe3ec;
}

/* Cột ghim phải lấy đường kẻ ở mép trái mới đúng hướng ngăn cách. */
.mail-native-table--frozen .mail-frozen-right[b-hl1m27765v] {
    border-right: none;
    border-left: 1px solid #dbe3ec;
}

/* Dòng đang chọn / đang chờ lưu vẫn phải giữ màu nền riêng ở các ô ghim. */
.mail-native-table--frozen tbody tr.mail-row-selected .mail-frozen-cell[b-hl1m27765v] {
    background: #eff6ff;
}

.mail-native-table--frozen tbody tr.mail-row-pending .mail-frozen-cell[b-hl1m27765v] {
    background: #fefce8;
}

/* Cột con của nhóm Số liệu PC / WL nay đứng độc lập, giữ lại màu nền phân biệt. */
.mail-native-table th.mail-sub-head--pc[b-hl1m27765v],
.mail-native-table th.mail-sub-head--wl[b-hl1m27765v] {
    font-size: 10px;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_PC_Summary.razor.rz.scp.css */
.summary-page-card[b-a7pgxe5m5h] {
    border: 0;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 24%),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 34%, #f8fbff 100%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.summary-shell[b-a7pgxe5m5h] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.summary-filter-panel[b-a7pgxe5m5h],
.summary-stats-section[b-a7pgxe5m5h],
.summary-table-section[b-a7pgxe5m5h] {
    margin: 0 0.75rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.summary-filter-panel[b-a7pgxe5m5h] {
    padding: 0.75rem 0.8rem;
}

.summary-filter-layout[b-a7pgxe5m5h] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.summary-filter-bar[b-a7pgxe5m5h] {
    display: grid;
    grid-template-columns: 168px 168px 158px 158px 158px 151px;
    gap: 0.55rem;
    flex: 0 1 auto;
    justify-content: start;
    align-items: end;
}

.filter-field[b-a7pgxe5m5h] {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.filter-field-wide[b-a7pgxe5m5h] {
    grid-column: span 1;
}

.filter-field-actual-status[b-a7pgxe5m5h] {
    min-width: 151px;
}

.filter-field label[b-a7pgxe5m5h] {
    font-size: 0.73rem;
    font-weight: 700;
    color: #334155;
}

[b-a7pgxe5m5h] .summary-filter-bar .rz-inputtext,
[b-a7pgxe5m5h] .summary-filter-bar .rz-dropdown,
[b-a7pgxe5m5h] .summary-filter-bar .rz-datepicker,
[b-a7pgxe5m5h] .summary-filter-bar .rz-multiselect,
[b-a7pgxe5m5h] .summary-filter-bar .filter-select,
[b-a7pgxe5m5h] .summary-filter-bar .rz-numeric,
[b-a7pgxe5m5h] .summary-filter-bar .rz-picker,
[b-a7pgxe5m5h] .summary-filter-bar .rz-textbox {
    width: 100% !important;
}

[b-a7pgxe5m5h] .summary-filter-bar .rz-inputtext,
[b-a7pgxe5m5h] .summary-filter-bar .rz-dropdown,
[b-a7pgxe5m5h] .summary-filter-bar .rz-datepicker,
[b-a7pgxe5m5h] .summary-filter-bar .rz-multiselect,
[b-a7pgxe5m5h] .summary-filter-bar .rz-picker {
    min-height: 34px;
    border-radius: 10px !important;
    border-color: #d8e2ee !important;
    box-shadow: none !important;
}

[b-a7pgxe5m5h] .summary-filter-bar .rz-state-focus,
[b-a7pgxe5m5h] .summary-filter-bar .rz-focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

.filter-actions[b-a7pgxe5m5h] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
}

[b-a7pgxe5m5h] .filter-actions .rz-button {
    min-height: 28px;
    border-radius: 8px;
    padding: 0.1rem 0.66rem;
    box-shadow: none;
    border-width: 1px;
}

.summary-action-btn[b-a7pgxe5m5h] {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.summary-action-btn:hover:not(:disabled)[b-a7pgxe5m5h] {
    transform: translateY(-1px);
}

.summary-action-btn-search[b-a7pgxe5m5h],
.summary-action-btn-reset[b-a7pgxe5m5h],
.summary-action-btn-export[b-a7pgxe5m5h] {
    background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
}

.summary-action-btn-search[b-a7pgxe5m5h] {
    color: #9a3412;
    border-color: #fde7d3;
    box-shadow: 0 3px 8px rgba(249, 115, 22, 0.05);
}

.summary-action-btn-search:hover:not(:disabled)[b-a7pgxe5m5h] {
    border-color: #fdba74;
    box-shadow: 0 5px 12px rgba(249, 115, 22, 0.08);
}

.summary-action-btn-reset[b-a7pgxe5m5h] {
    color: #475569;
    border-color: #e2e8f0;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
}

.summary-action-btn-reset:hover:not(:disabled)[b-a7pgxe5m5h] {
    border-color: #94a3b8;
    box-shadow: 0 5px 11px rgba(15, 23, 42, 0.06);
}

.summary-action-btn-export[b-a7pgxe5m5h] {
    color: #0f766e;
    border-color: #ccfbf1;
    box-shadow: 0 3px 8px rgba(20, 184, 166, 0.05);
}

.summary-action-btn-export:hover:not(:disabled)[b-a7pgxe5m5h] {
    border-color: #5eead4;
    box-shadow: 0 5px 12px rgba(20, 184, 166, 0.08);
}

.summary-stats-section[b-a7pgxe5m5h] {
    padding: 0.7rem 0.8rem;
}

.summary-stats[b-a7pgxe5m5h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}

.stat-item[b-a7pgxe5m5h] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border: 1px solid #dbe5f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.stat-item[b-a7pgxe5m5h]::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.6));
}

.stat-item label[b-a7pgxe5m5h] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: #64748b;
}

.stat-value[b-a7pgxe5m5h] {
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}

.stat-value.nonzero[b-a7pgxe5m5h] {
    color: #c2410c;
}

.stat-hint[b-a7pgxe5m5h] {
    font-size: 0.7rem;
    color: #64748b;
}

.stat-item-neutral[b-a7pgxe5m5h]::after {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.55));
}

.clickable-stat[b-a7pgxe5m5h] {
    cursor: pointer;
}

.clickable-stat:hover[b-a7pgxe5m5h] {
    transform: translateY(-1px);
    border-color: #fdba74;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.1);
    background: linear-gradient(180deg, #fffdf8 0%, #fff7ed 100%);
}

.clickable-stat.active[b-a7pgxe5m5h] {
    border-color: #f97316;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.12);
}

.summary-table-section[b-a7pgxe5m5h] {
    padding: 0.6rem 0.7rem 0.75rem;
    margin-bottom: 0.75rem;
}

.summary-grid-wrapper[b-a7pgxe5m5h] {
    position: relative;
    min-height: 180px;
    height: calc(100vh - 360px);
    max-height: calc(100vh - 355px);
    overflow: hidden;
    border: 1px solid #dde6f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.summary-grid-scroll[b-a7pgxe5m5h] {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 24px;
    scroll-padding-bottom: 24px;
}

.summary-grid-sticky-scroll[b-a7pgxe5m5h] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #dde6f0;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    z-index: 6;
}

.summary-grid-sticky-scroll-content[b-a7pgxe5m5h] {
    height: 1px;
}

.summary-matrix-table[b-a7pgxe5m5h] {
    --summary-header-top-height: 38px;
    --summary-header-sub-height: 34px;
    --summary-header-total-height: calc(var(--summary-header-top-height) + var(--summary-header-sub-height));
    width: 100%;
    min-width: 2520px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #0f172a;
}

.summary-matrix-table th[b-a7pgxe5m5h],
.summary-matrix-table td[b-a7pgxe5m5h] {
    padding: 0.32rem 0.38rem;
    font-size: 0.8rem;
    line-height: 1.15;
    vertical-align: middle;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.summary-matrix-table thead th[b-a7pgxe5m5h] {
    position: sticky;
    top: 0;
    z-index: 4;
    text-align: center;
    font-weight: 800;
    color: #172554;
    background: linear-gradient(180deg, #fff8f1 0%, #f8fbff 100%);
    white-space: normal;
}

.summary-matrix-table thead tr:first-child th[b-a7pgxe5m5h] {
    top: 0;
    height: var(--summary-header-top-height);
}

.summary-matrix-table thead tr:nth-child(2) th[b-a7pgxe5m5h] {
    top: var(--summary-header-top-height);
    height: var(--summary-header-sub-height);
    color: #475569;
    box-shadow: inset 0 1px 0 #e2e8f0;
}

.summary-matrix-table thead tr:first-child th:nth-child(2)[b-a7pgxe5m5h],
.area-cell[b-a7pgxe5m5h] {
    width: 134px;
    min-width: 134px;
}

.summary-matrix-table thead tr:first-child th:nth-child(3)[b-a7pgxe5m5h],
.warehouse-header[b-a7pgxe5m5h],
.warehouse-cell[b-a7pgxe5m5h] {
    width: 168px;
    min-width: 168px;
}

.summary-matrix-table thead th:first-child[b-a7pgxe5m5h],
.summary-matrix-table tbody td:first-child[b-a7pgxe5m5h] {
    border-left: 1px solid #e2e8f0;
}

.summary-matrix-table .summary-total-row td[b-a7pgxe5m5h] {
    position: sticky;
    top: calc(var(--summary-header-total-height) + 3px);
    z-index: 3;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    color: #1e3a5f;
    font-weight: 800;
    border-color: #d6e6f5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.summary-total-label[b-a7pgxe5m5h] {
    text-align: center;
    letter-spacing: 0.04em;
}

.summary-data-row[b-a7pgxe5m5h] {
    transition: background-color 0.16s ease;
}

.summary-data-row:hover td[b-a7pgxe5m5h] {
    background: #fffaf2;
}

.summary-data-row-empty td[b-a7pgxe5m5h] {
    background: #fcfdff;
}

.group-cell[b-a7pgxe5m5h] {
    background: #f8fbff;
    font-weight: 700;
    color: #1e293b;
    text-align: left;
    min-width: 112px;
}

.region-cell[b-a7pgxe5m5h] {
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf5 100%);
    color: #9a3412;
}

.area-cell[b-a7pgxe5m5h] {
    background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
}

.warehouse-cell[b-a7pgxe5m5h] {
    background: #ffffff;
    font-weight: 700;
}

.warehouse-link[b-a7pgxe5m5h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: #0f4c81;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    font-size: 0.74rem;
    line-height: 1.15;
}

.warehouse-link:hover[b-a7pgxe5m5h] {
    color: #c2410c;
}

.status-cell[b-a7pgxe5m5h] {
    text-align: center;
}

.status-cell-fixed[b-a7pgxe5m5h] {
    min-width: 102px;
    background: #fffefe;
}

.status-pill[b-a7pgxe5m5h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    max-width: 96px;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.status-pill-fixed[b-a7pgxe5m5h] {
    color: #1d4ed8;
    background: #eff6ff;
}

.status-pill-actual[b-a7pgxe5m5h] {
    min-width: 78px;
}

.status-pill-success[b-a7pgxe5m5h] {
    background: #ecfdf3;
    color: #15803d;
}

.status-pill-danger[b-a7pgxe5m5h] {
    background: #fef2f2;
    color: #b91c1c;
}

.status-pill-warning[b-a7pgxe5m5h] {
    background: #fff7ed;
    color: #c2410c;
}

.status-pill-info[b-a7pgxe5m5h] {
    background: #ecfeff;
    color: #0f766e;
}

.status-pill-muted[b-a7pgxe5m5h] {
    background: #f1f5f9;
    color: #94a3b8;
}

.metric-cell[b-a7pgxe5m5h] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.79rem;
}

/* Nền pastel theo từng nhóm nghiệp vụ */
.summary-matrix-table tbody .business-total[b-a7pgxe5m5h] {
    background-color: #f8fafc;
}

.summary-matrix-table tbody .business-import[b-a7pgxe5m5h] {
    background-color: #f0fdf4;
}

.summary-matrix-table tbody .business-export[b-a7pgxe5m5h] {
    background-color: #eff6ff;
}

.summary-matrix-table tbody .business-transfer[b-a7pgxe5m5h] {
    background-color: #f5f3ff;
}

.summary-matrix-table tbody .business-warehouse-handling[b-a7pgxe5m5h] {
    background-color: #fff7ed;
}

.summary-matrix-table tbody .business-unknown[b-a7pgxe5m5h] {
    background-color: #f8fafc;
}

.summary-matrix-table thead tr:first-child th:nth-child(8)[b-a7pgxe5m5h] {
    background: #eef2f7;
}

.summary-matrix-table thead tr:first-child th:nth-child(9)[b-a7pgxe5m5h],
.summary-matrix-table thead tr:nth-child(2) th:nth-child(n+4):nth-child(-n+6)[b-a7pgxe5m5h] {
    background: #dcfce7;
}

.summary-matrix-table thead tr:first-child th:nth-child(10)[b-a7pgxe5m5h],
.summary-matrix-table thead tr:nth-child(2) th:nth-child(n+7):nth-child(-n+9)[b-a7pgxe5m5h] {
    background: #dbeafe;
}

.summary-matrix-table thead tr:first-child th:nth-child(11)[b-a7pgxe5m5h],
.summary-matrix-table thead tr:nth-child(2) th:nth-child(n+10):nth-child(-n+12)[b-a7pgxe5m5h] {
    background: #ede9fe;
}

.summary-matrix-table thead tr:first-child th:nth-child(12)[b-a7pgxe5m5h],
.summary-matrix-table thead tr:nth-child(2) th:nth-child(n+13):nth-child(-n+15)[b-a7pgxe5m5h] {
    background: #ffedd5;
}

.summary-matrix-table thead tr:first-child th:nth-child(13)[b-a7pgxe5m5h],
.summary-matrix-table thead tr:nth-child(2) th:nth-child(n+16):nth-child(-n+18)[b-a7pgxe5m5h] {
    background: #f1f5f9;
}

.summary-matrix-table thead tr:nth-child(2) th:nth-child(-n+3)[b-a7pgxe5m5h] {
    background: #eef2f7;
}

.summary-matrix-table tbody td.mismatch-cell[b-a7pgxe5m5h] {
    background: #fff1f2;
    color: #be123c;
    font-weight: 800;
}

.summary-loading-overlay[b-a7pgxe5m5h] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(2px);
}

.summary-loading-spinner[b-a7pgxe5m5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.spinner[b-a7pgxe5m5h] {
    width: 28px;
    height: 28px;
    border: 3px solid #fde7d3;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-a7pgxe5m5h 0.75s linear infinite;
}

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

.summary-loading-spinner span[b-a7pgxe5m5h] {
    color: #475569;
    font-weight: 700;
    font-size: 0.8rem;
}

.grid-empty-state[b-a7pgxe5m5h] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0.75rem 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px dashed #dbe4ee;
    border-radius: 12px;
    background: #f8fbff;
    color: #64748b;
    font-size: 0.8rem;
}

.grid-empty-state i[b-a7pgxe5m5h] {
    font-size: 1rem;
    color: #94a3b8;
}

@media (max-width: 1200px) {
    .summary-filter-layout[b-a7pgxe5m5h] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-filter-bar[b-a7pgxe5m5h] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .filter-actions[b-a7pgxe5m5h] {
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    .summary-filter-panel[b-a7pgxe5m5h],
    .summary-stats-section[b-a7pgxe5m5h],
    .summary-table-section[b-a7pgxe5m5h] {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .summary-filter-bar[b-a7pgxe5m5h] {
        grid-template-columns: 1fr;
    }

    .summary-grid-wrapper[b-a7pgxe5m5h] {
        height: auto;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .summary-page-card[b-a7pgxe5m5h] {
        border-radius: 14px;
    }

    .summary-filter-panel[b-a7pgxe5m5h],
    .summary-stats-section[b-a7pgxe5m5h],
    .summary-table-section[b-a7pgxe5m5h] {
        border-radius: 12px;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .filter-actions[b-a7pgxe5m5h] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-a7pgxe5m5h] .filter-actions .rz-button {
        width: 100%;
    }
}

/* ===== Khung thu gọn bộ lọc + thống kê (tab Tổng quan) ===== */
.control-collapse-panel[b-a7pgxe5m5h] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0 0.75rem;
    border: 1px solid #e5edf5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.control-collapse-toggle[b-a7pgxe5m5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid #e5edf5;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    cursor: pointer;
    text-align: left;
}

.control-collapse-panel--collapsed .control-collapse-toggle[b-a7pgxe5m5h] {
    border-bottom: none;
    border-radius: 12px;
}

.control-collapse-toggle__summary[b-a7pgxe5m5h] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.control-collapse-toggle__arrow[b-a7pgxe5m5h] {
    flex-shrink: 0;
    color: #2457e6;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.control-collapse-chip[b-a7pgxe5m5h] {
    padding: 0.1rem 0.5rem;
    border: 1px solid #cddafb;
    border-radius: 999px;
    background: #f3f7ff;
    color: #2457e6;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.control-collapse-chip--total[b-a7pgxe5m5h] {
    color: #fff;
    background: #174fc9;
    border-color: #174fc9;
}

.control-collapse-chip--muted[b-a7pgxe5m5h] {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.control-collapse-body[b-a7pgxe5m5h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem 0.7rem;
}

.control-collapse-panel--collapsed .control-collapse-body[b-a7pgxe5m5h] {
    display: none;
}

/* Bên trong khung thu gọn, panel filter/stats đã có viền của khung ngoài. */
.control-collapse-body .summary-filter-panel[b-a7pgxe5m5h],
.control-collapse-body .summary-stats-section[b-a7pgxe5m5h] {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.control-collapse-body .summary-stats-section[b-a7pgxe5m5h] {
    padding-top: 0.15rem;
    border-top: 1px dashed #e5edf5;
    border-radius: 0;
}

/* Khi thu gọn: bảng tổng quan cao thêm phần diện tích vừa được giải phóng */
.summary-shell--collapsed .summary-grid-wrapper[b-a7pgxe5m5h] {
    height: calc(100vh - 215px);
    max-height: calc(100vh - 210px);
}

@media (max-width: 900px) {
    .control-collapse-panel[b-a7pgxe5m5h] {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .summary-shell--collapsed .summary-grid-wrapper[b-a7pgxe5m5h] {
        height: auto;
        max-height: none;
    }
}

/* ============================================================
   Freeze 7 cột đầu (MIỀN -> SỐ CHUYẾN CẦN XÁC NHẬN)
   Bảng dùng table-layout: fixed nên chốt cứng width từng cột
   rồi cộng dồn thành offset "left" cho từng cột.
   ============================================================ */
.summary-matrix-table[b-a7pgxe5m5h] {
    --freeze-w-1: 112px; /* MIỀN */
    --freeze-w-2: 134px; /* KHU VỰC */
    --freeze-w-3: 168px; /* KHO */
    --freeze-w-4: 102px; /* TÌNH TRẠNG DỮ LIỆU PHIẾU CÂN */
    --freeze-w-5: 102px; /* TÌNH TRẠNG DỮ LIỆU WL */
    --freeze-w-6: 104px; /* TÌNH TRẠNG THỰC TẾ */
    --freeze-w-7: 96px;  /* SỐ CHUYẾN CẦN XÁC NHẬN */
    --freeze-left-1: 0px;
    --freeze-left-2: var(--freeze-w-1);
    --freeze-left-3: calc(var(--freeze-left-2) + var(--freeze-w-2));
    --freeze-left-4: calc(var(--freeze-left-3) + var(--freeze-w-3));
    --freeze-left-5: calc(var(--freeze-left-4) + var(--freeze-w-4));
    --freeze-left-6: calc(var(--freeze-left-5) + var(--freeze-w-5));
    --freeze-left-7: calc(var(--freeze-left-6) + var(--freeze-w-6));
}

.summary-matrix-table .freeze-col[b-a7pgxe5m5h] {
    position: sticky;
    background-clip: padding-box;
}

/* Ô body: nằm dưới header nhưng trên các cột cuộn ngang. */
.summary-matrix-table tbody td.freeze-col[b-a7pgxe5m5h] {
    z-index: 2;
}

/* Ô header của cột freeze phải đè cả header thường lẫn ô body freeze. */
.summary-matrix-table thead th.freeze-col[b-a7pgxe5m5h] {
    z-index: 6;
}

/* Dòng TỔNG CỘNG vừa sticky top vừa sticky left. */
.summary-matrix-table .summary-total-row td.freeze-col[b-a7pgxe5m5h] {
    z-index: 5;
}

.summary-matrix-table .freeze-col-1[b-a7pgxe5m5h] { left: var(--freeze-left-1); width: var(--freeze-w-1); min-width: var(--freeze-w-1); }
.summary-matrix-table .freeze-col-2[b-a7pgxe5m5h] { left: var(--freeze-left-2); width: var(--freeze-w-2); min-width: var(--freeze-w-2); }
.summary-matrix-table .freeze-col-3[b-a7pgxe5m5h] { left: var(--freeze-left-3); width: var(--freeze-w-3); min-width: var(--freeze-w-3); }
.summary-matrix-table .freeze-col-4[b-a7pgxe5m5h] { left: var(--freeze-left-4); width: var(--freeze-w-4); min-width: var(--freeze-w-4); }
.summary-matrix-table .freeze-col-5[b-a7pgxe5m5h] { left: var(--freeze-left-5); width: var(--freeze-w-5); min-width: var(--freeze-w-5); }
.summary-matrix-table .freeze-col-6[b-a7pgxe5m5h] { left: var(--freeze-left-6); width: var(--freeze-w-6); min-width: var(--freeze-w-6); }
.summary-matrix-table .freeze-col-7[b-a7pgxe5m5h] { left: var(--freeze-left-7); width: var(--freeze-w-7); min-width: var(--freeze-w-7); }

/* Ô "TỔNG CỘNG" gộp 6 cột đầu nên phải rộng đúng bằng tổng 6 cột. */
.summary-matrix-table .freeze-col-span-6[b-a7pgxe5m5h] {
    width: var(--freeze-left-7);
    min-width: var(--freeze-left-7);
}

/* Viền phải đậm hơn để tách vùng đóng băng khỏi vùng cuộn. */
.summary-matrix-table .freeze-col-7[b-a7pgxe5m5h] {
    border-right: 2px solid #cbd5e1;
    box-shadow: 4px 0 6px -4px rgba(15, 23, 42, 0.25);
}

/* Nền mờ của ô body thường sẽ lộ ra khi cuộn -> ép nền đặc cho cột freeze. */
.summary-matrix-table tbody td.freeze-col:not(.region-cell):not(.area-cell)[b-a7pgxe5m5h] {
    background-color: #ffffff;
}

.summary-matrix-table tbody tr.summary-data-row-empty td.freeze-col:not(.region-cell):not(.area-cell)[b-a7pgxe5m5h] {
    background-color: #fcfdff;
}

.summary-matrix-table tbody tr.summary-data-row:hover td.freeze-col:not(.region-cell):not(.area-cell)[b-a7pgxe5m5h] {
    background-color: #fffaf2;
}

/* ============================================================
   Badge nổi bật cho cột SỐ CHUYẾN CẦN XÁC NHẬN
   ============================================================ */
.confirm-trips-cell[b-a7pgxe5m5h] {
    text-align: center;
}

.confirm-trips-badge[b-a7pgxe5m5h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.16rem 0.5rem;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.confirm-trips-badge--link[b-a7pgxe5m5h] {
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.confirm-trips-badge--link:hover[b-a7pgxe5m5h] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
    transform: translateY(-1px);
}
/* /Components/Pages/Etrans_Ka_Mail_Data/Etrans_Ka_Mail_Data_TableLayoutDialog.razor.rz.scp.css */
/* z-index phải cao hơn dàn filter và các dropdown lọc của trang (chúng dùng tới 9500),
   nếu không thanh bộ lọc sẽ nổi đè lên dialog. */
.mdl-overlay[b-mlv3dqatdo] {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
}

.mdl-dialog[b-mlv3dqatdo] {
    position: relative;
    z-index: 9601;
    display: flex;
    flex-direction: column;
    width: min(680px, 94vw);
    max-height: 88vh;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.mdl-header[b-mlv3dqatdo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.mdl-header h2[b-mlv3dqatdo] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.mdl-header p[b-mlv3dqatdo] {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
}

.mdl-icon-button[b-mlv3dqatdo] {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
    padding: 4px 8px;
    cursor: pointer;
}

.mdl-body[b-mlv3dqatdo] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.mdl-toolbar[b-mlv3dqatdo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mdl-text-button[b-mlv3dqatdo] {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f1f5f9;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mdl-text-button:hover[b-mlv3dqatdo] {
    background: #e2e8f0;
}

.mdl-hint[b-mlv3dqatdo] {
    font-size: 11px;
    color: #64748b;
}

.mdl-column-list[b-mlv3dqatdo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdl-column-row[b-mlv3dqatdo] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

/* Tay nắm kéo thả: chỉ vùng này đổi con trỏ, cả dòng vẫn kéo được. */
.mdl-drag-handle[b-mlv3dqatdo] {
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
}

/* Dòng đang được kéo. */
.mdl-column-row.mdl-dragging[b-mlv3dqatdo] {
    opacity: 0.45;
}

/* Dòng đang được kéo tới: gạch xanh để thấy rõ chỗ sẽ thả. */
.mdl-column-row.mdl-drag-over[b-mlv3dqatdo] {
    border-color: #2563eb;
    box-shadow: inset 0 2px 0 #2563eb;
}

/* Cột đang ẩn thì làm mờ cho dễ phân biệt. */
.mdl-column-row.is-hidden[b-mlv3dqatdo] {
    background: #f8fafc;
    opacity: 0.65;
}

.mdl-column-name[b-mlv3dqatdo],
.mdl-column-freeze[b-mlv3dqatdo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.mdl-column-freeze[b-mlv3dqatdo] {
    font-size: 12px;
    color: #475569;
}

.mdl-order-actions[b-mlv3dqatdo] {
    display: flex;
    gap: 4px;
}

.mdl-order-actions button[b-mlv3dqatdo] {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    padding: 2px 7px;
    font-size: 11px;
    cursor: pointer;
}

.mdl-order-actions button:disabled[b-mlv3dqatdo] {
    opacity: 0.3;
    cursor: default;
}

.mdl-footer[b-mlv3dqatdo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
}

.mdl-footer > div[b-mlv3dqatdo] {
    display: flex;
    gap: 8px;
}

.mdl-reset-button[b-mlv3dqatdo],
.mdl-cancel-button[b-mlv3dqatdo],
.mdl-save-button[b-mlv3dqatdo] {
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mdl-reset-button[b-mlv3dqatdo],
.mdl-cancel-button[b-mlv3dqatdo] {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.mdl-save-button[b-mlv3dqatdo] {
    border: 1px solid #1d4ed8;
    background: #2563eb;
    color: #ffffff;
}

.mdl-save-button:disabled[b-mlv3dqatdo] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/Etrans_Ka_Mail_Data/SummaryMultiSelect.razor.rz.scp.css */
.native-multiselect[b-vy4a2qqhw5] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.native-multiselect > summary[b-vy4a2qqhw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    min-width: 0;
    gap: 5px;
    padding: 0 9px;
    overflow: hidden;
    border: 1px solid #ddcdbf;
    border-radius: 8px;
    color: #4d4038;
    background: #fff;
    box-shadow: none;
    font-size: 0.72rem;
    list-style: none;
    cursor: pointer;
}

.native-multiselect[open] > summary[b-vy4a2qqhw5] {
    border-color: #c9824d;
    box-shadow: 0 0 0 3px rgba(190, 105, 43, 0.11);
}

.native-multiselect > summary[b-vy4a2qqhw5]::-webkit-details-marker {
    display: none;
}

.native-multiselect > summary span:first-child[b-vy4a2qqhw5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-multiselect__arrow[b-vy4a2qqhw5] {
    flex: 0 0 auto;
    color: #a16d48;
    font-size: 0.9rem;
}

.native-multiselect__menu[b-vy4a2qqhw5] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 220px);
    overflow: hidden;
    border: 1px solid #dfcdbd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91, 58, 35, 0.16);
}

.native-multiselect__header[b-vy4a2qqhw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-bottom: 1px solid #eee3da;
    color: #5a4435;
    font-size: 0.7rem;
}

.native-multiselect__header button[b-vy4a2qqhw5] {
    padding: 2px 6px;
    border: 0;
    color: #b45e27;
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.native-multiselect__search-wrap[b-vy4a2qqhw5] {
    padding: 7px 8px 3px;
}

.native-multiselect__search[b-vy4a2qqhw5] {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #e1d3c7;
    border-radius: 7px;
    color: #51443b;
    background: #fdfaf7;
    font: inherit;
    font-size: 0.7rem;
    outline: none;
}

.native-multiselect__search:focus[b-vy4a2qqhw5] {
    border-color: #c9824d;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(190, 105, 43, 0.09);
}

.native-multiselect__options[b-vy4a2qqhw5] {
    display: flex;
    max-height: 230px;
    padding: 5px;
    overflow-y: auto;
    flex-direction: column;
}

.native-multiselect__options label[b-vy4a2qqhw5] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    color: #51443b;
    font-size: 0.7rem;
    cursor: pointer;
}

.native-multiselect__options label:hover[b-vy4a2qqhw5] {
    background: #fff5ec;
}

.native-multiselect__options input[b-vy4a2qqhw5] {
    accent-color: #bd6a2e;
}

.native-multiselect__select-all[b-vy4a2qqhw5] {
    margin-bottom: 3px;
    border-bottom: 1px solid #eee4dc;
    color: #a45522 !important;
    font-weight: 750;
}

.native-multiselect__empty[b-vy4a2qqhw5] {
    padding: 12px;
    color: #8a7b70;
    font-size: 0.7rem;
    text-align: center;
}
/* /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);
}

.notification-truncated[b-ihczw8j3es] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Filter panel wraps when the filters + buttons don't fit on one row */
.filter-panel[b-ihczw8j3es] {
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-ihczw8j3es] {
    min-width: 160px;
}

.filter-actions[b-ihczw8j3es] {
    flex: 0 0 auto;
}

.filter-btn-row[b-ihczw8j3es] {
    display: flex;
    gap: 8px;
}

.btn-apply-filter[b-ihczw8j3es],
.btn-reset-filter[b-ihczw8j3es] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-apply-filter[b-ihczw8j3es] {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.btn-apply-filter:hover:not(:disabled)[b-ihczw8j3es] {
    filter: brightness(0.93);
}

.btn-reset-filter[b-ihczw8j3es] {
    border: 1px solid #cbd5e1;
    background: white;
    color: #475569;
}

.btn-reset-filter:hover:not(:disabled)[b-ihczw8j3es] {
    background: #f1f5f9;
}

.btn-apply-filter:disabled[b-ihczw8j3es],
.btn-reset-filter:disabled[b-ihczw8j3es] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 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);
}

/* Critical = unread approval-required notification (KHTB_REGISTRATION_CREATED).
   Overrides .unread tint so the card visually demands action. */
.notification-card.critical[b-ihczw8j3es] {
    background: linear-gradient(to right, #fee2e2, #ffffff);
    border-left: 4px solid #dc2626;
}

.notification-card.critical:hover[b-ihczw8j3es] {
    background: linear-gradient(to right, #fecaca, #fff5f5);
}

.notification-critical-badge[b-ihczw8j3es] {
    display: inline-flex;
    align-items: center;
    background: #dc2626;
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-right: 8px;
    text-transform: uppercase;
    animation: notif-critical-pulse-b-ihczw8j3es 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}

@keyframes notif-critical-pulse-b-ihczw8j3es {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

.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;
}

/* Mặt hàng (Ten_Hang) chip — neutral slate so it sits beside the colored type badge
   without competing. The cube icon distinguishes it as "what product, not what kind". */
.notification-product-chip[b-ihczw8j3es] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-product-chip i[b-ihczw8j3es] {
    color: #94a3b8;
    font-size: 0.7rem;
}

/* 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;
    }

    /* Stack filters full-width; override the desktop align-items:flex-end which would otherwise
       shrink each group to its min-width and right-align it in a column layout. */
    .filter-panel[b-ihczw8j3es] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-ihczw8j3es] {
        min-width: 0;
        width: 100%;
    }

    /* Drop the &nbsp; spacer label (only there to bottom-align buttons on desktop). */
    .filter-actions label[b-ihczw8j3es] {
        display: none;
    }

    .filter-actions[b-ihczw8j3es],
    .filter-btn-row[b-ihczw8j3es] {
        width: 100%;
    }

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

    /* Truncation chip drops onto its own line under the count. */
    .notification-truncated[b-ihczw8j3es] {
        margin-left: 0;
    }

    .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;
    }
}
/* /Components/Pages/PhieuCanControl/PhieuCanControl.razor.rz.scp.css */
/* ── Phiếu Cân Control — scoped, recolor theo appv2 tokens ── */
.pcc-root[b-mkw2db0tfk], .pcc-overlay[b-mkw2db0tfk], .pcc-img-mask[b-mkw2db0tfk] {
    --pcc-ok: #16a34a;   --pcc-ok-b: #f0fdf4;
    --pcc-warn: #b45309;  --pcc-warn-b: #fff7ed;
    --pcc-err: #b91c1c;   --pcc-err-b: #fef2f2;
    --pcc-issue: #9f1239; --pcc-issue-b: #fff1f2;
    --pcc-tech: #475569;  --pcc-tech-b: #f1f5f9;
    --pcc-neu: #64748b;   --pcc-neu-b: #f1f5f9;
    --pcc-ac: var(--primary-color, #ca3c19); --pcc-ac-b: #fdeee9;
    --pcc-ink: #1f2733; --pcc-ink-s: #475569; --pcc-ink-f: #94a3b8;
    --pcc-bdr: var(--border-light, #e2e8f0);
    --pcc-sf: #fff; --pcc-sf2: #f6f8fb;
}

.pcc-root[b-mkw2db0tfk] { font-size: 13px; color: var(--pcc-ink); padding: 10px 10px 60px; }
.pcc-gate[b-mkw2db0tfk] { padding: 48px; text-align: center; color: #64748b; font-size: 14px; }
.pcc-gate i[b-mkw2db0tfk] { font-size: 30px; display: block; margin-bottom: 12px; color: #94a3b8; }

/* Wrapper tabs+filter — không sticky (bỏ theo yêu cầu); render như luồng bình thường */
.pcc-stickytop[b-mkw2db0tfk] { display: contents; }

/* ── Tabs ── */
.pcc-tabs[b-mkw2db0tfk] { display: flex; gap: 4px; border-bottom: 1px solid var(--pcc-bdr); margin-bottom: 16px; }
.pcc-tab[b-mkw2db0tfk] { border: none; background: none; font-size: 13.5px; font-weight: 500; color: var(--pcc-ink-s);
    padding: 11px 18px; cursor: pointer; border-bottom: 2.5px solid transparent; display: flex; align-items: center; gap: 7px; }
.pcc-tab.active[b-mkw2db0tfk] { color: var(--pcc-ac); border-bottom-color: var(--pcc-ac); }
.pcc-tc[b-mkw2db0tfk] { background: var(--pcc-neu-b); color: var(--pcc-neu); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.pcc-strat-btn[b-mkw2db0tfk] { margin-left: auto; align-self: center; border: 1.5px solid var(--pcc-ok); background: var(--pcc-ok-b); color: var(--pcc-ok); font-size: 12px; font-weight: 600; border-radius: 20px; padding: 5px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pcc-strat-btn:hover[b-mkw2db0tfk] { filter: brightness(.97); }
.pcc-strat-btn + .pcc-strat-btn[b-mkw2db0tfk] { margin-left: 0; }
.pcc-issue-btn[b-mkw2db0tfk] { border-color: var(--pcc-ac); background: var(--pcc-ac-b); color: var(--pcc-ac); }

.pcc-strat-dialog[b-mkw2db0tfk] { background: var(--pcc-sf); border-radius: 12px; width: 520px; max-width: 94vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-2xl); overflow: hidden; cursor: default; }
.pcc-strat-head[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #0f172a; color: #e2e8f0; font-weight: 700; font-size: 14px; }
.pcc-strat-head i[b-mkw2db0tfk] { margin-right: 6px; }
.pcc-strat-close[b-mkw2db0tfk] { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #e2e8f0; cursor: pointer; }
.pcc-strat-body[b-mkw2db0tfk] { padding: 8px 0; overflow-y: auto; }
.pcc-strat-empty[b-mkw2db0tfk] { padding: 24px; text-align: center; color: var(--pcc-ink-f); }
.pcc-strat-row[b-mkw2db0tfk] { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--pcc-bdr); }
.pcc-strat-row:last-child[b-mkw2db0tfk] { border-bottom: none; }
.pcc-strat-row-off[b-mkw2db0tfk] { opacity: .6; }
.pcc-strat-name[b-mkw2db0tfk] { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--pcc-ink); }
.pcc-strat-case[b-mkw2db0tfk] { font-size: 11px; color: var(--pcc-ink-f); }
.pcc-issue-dialog[b-mkw2db0tfk] { background: var(--pcc-sf); border-radius: 12px; width: min(1120px, 96vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow-2xl); overflow: hidden; cursor: default; }
.pcc-issue-body[b-mkw2db0tfk] { padding: 12px; overflow: auto; }
.pcc-issue-filter[b-mkw2db0tfk] { margin-bottom: 12px; box-shadow: none; }
.pcc-issue-table-wrap[b-mkw2db0tfk] { position: relative; overflow: auto; border: 1px solid var(--pcc-bdr); border-radius: 10px; }
.pcc-issue-table[b-mkw2db0tfk] { min-width: 1860px; }
.pcc-issue-table thead tr:first-child th[b-mkw2db0tfk] { text-align: center; background: #eef2f7; }
.pcc-issue-table th.pcc-issue-group-trip[b-mkw2db0tfk],
.pcc-issue-table td.pcc-issue-group-trip[b-mkw2db0tfk] { background: #f5faff; color: #174a7c; }
.pcc-issue-table th.pcc-issue-group-status[b-mkw2db0tfk],
.pcc-issue-table td.pcc-issue-group-status[b-mkw2db0tfk] { background: #f5fbf7; color: #17633a; }
.pcc-issue-table th.pcc-issue-group-review[b-mkw2db0tfk],
.pcc-issue-table td.pcc-issue-group-review[b-mkw2db0tfk] { background: #f7f8fa; color: #334155; }
.pcc-issue-table th.pcc-issue-group-quantity[b-mkw2db0tfk],
.pcc-issue-table td.pcc-issue-group-quantity[b-mkw2db0tfk] { background: #fffaf2; color: #7a4813; }
.pcc-issue-table th.pcc-issue-group-document[b-mkw2db0tfk],
.pcc-issue-table td.pcc-issue-group-document[b-mkw2db0tfk] { background: #f8f5ff; color: #5b21b6; }
.pcc-issue-table tfoot td[b-mkw2db0tfk] { background: var(--pcc-sf2); border-top: 1.5px solid var(--pcc-bdr); font-weight: 800; color: var(--pcc-ink); padding: 10px 12px; }
.pcc-issue-num[b-mkw2db0tfk] { min-width: 34px; height: 28px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--pcc-ink-s); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.pcc-issue-num:hover[b-mkw2db0tfk] { border-color: var(--pcc-ac); background: var(--pcc-ac-b); color: var(--pcc-ac); }
.pcc-issue-num.has-value[b-mkw2db0tfk] { background: var(--pcc-ac-b); color: var(--pcc-ac); border-color: rgba(202, 60, 25, .28); box-shadow: inset 0 0 0 1px rgba(202, 60, 25, .08); }
.pcc-issue-num.has-value:hover[b-mkw2db0tfk] { background: var(--pcc-ac); border-color: var(--pcc-ac); color: #fff; }
.pcc-issue-num.is-ok:hover[b-mkw2db0tfk] { border-color: var(--pcc-ok); background: var(--pcc-ok-b); color: var(--pcc-ok); }
.pcc-issue-num.is-ok.has-value[b-mkw2db0tfk] { background: var(--pcc-ok-b); color: var(--pcc-ok); border-color: rgba(22, 163, 74, .28); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .08); }
.pcc-issue-num.is-ok.has-value:hover[b-mkw2db0tfk] { background: var(--pcc-ok); border-color: var(--pcc-ok); color: #fff; }
.pcc-issue-num:disabled[b-mkw2db0tfk] { cursor: default; opacity: 1; }
.pcc-issue-num:disabled:hover[b-mkw2db0tfk] { border-color: transparent; background: transparent; color: inherit; }
.pcc-issue-num.has-value:disabled[b-mkw2db0tfk] { background: rgba(202, 60, 25, .08); color: var(--pcc-ac); }
.pcc-issue-num.is-ok:disabled[b-mkw2db0tfk],
.pcc-issue-num.is-ok:disabled:hover[b-mkw2db0tfk] { background: var(--pcc-ok-b); color: var(--pcc-ok); border-color: rgba(22, 163, 74, .28); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .08); }
.pcc-issue-reference[b-mkw2db0tfk] { color: var(--pcc-ink-s); }
.pcc-issue-difference[b-mkw2db0tfk] { margin-left: 5px; color: var(--pcc-ac); font-weight: 800; }
.pcc-issue-num.has-value:hover .pcc-issue-reference[b-mkw2db0tfk],
.pcc-issue-num.has-value:hover .pcc-issue-difference[b-mkw2db0tfk] { color: #fff; }
.pcc-issue-num.is-ok .pcc-issue-reference[b-mkw2db0tfk],
.pcc-issue-num.is-ok .pcc-issue-difference[b-mkw2db0tfk] { color: inherit; }

/* ── Filter bar ── */
.pcc-filter[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; box-shadow: var(--card-shadow); }
.pcc-filter-wrap[b-mkw2db0tfk] { flex-wrap: wrap; }
.pcc-filter-ttl[b-mkw2db0tfk] { font-size: 11px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.pcc-filter input[b-mkw2db0tfk], .pcc-filter select[b-mkw2db0tfk] { font-size: 12.5px; border: 1.5px solid var(--pcc-bdr); border-radius: 7px;
    padding: 7px 10px; background: var(--pcc-sf2); color: var(--pcc-ink); outline: none; min-width: 120px; }
.pcc-filter input:focus[b-mkw2db0tfk], .pcc-filter select:focus[b-mkw2db0tfk] { border-color: var(--pcc-ac); }
.pcc-filter[b-mkw2db0tfk]  .pcc-tripcode-help.rz-autocomplete {
    min-width: 120px; border: 1.5px solid var(--pcc-bdr); border-radius: 7px;
    background: var(--pcc-sf2); box-shadow: none;
}
.pcc-filter[b-mkw2db0tfk]  .pcc-tripcode-help.rz-autocomplete:focus-within { border-color: var(--pcc-ac); }
.pcc-filter[b-mkw2db0tfk]  .pcc-tripcode-help .rz-autocomplete-input {
    min-width: 0; height: auto; padding: 7px 10px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; color: var(--pcc-ink); font-size: 12.5px; line-height: normal;
}

/* Chip đa chọn của RadzenDropDown: thu nhỏ cho vừa thanh lọc (mặc định Radzen 0.875rem quá to,
   6 dropdown đa chọn sẽ đẩy thanh lọc cao gấp đôi). Các biến --rz-chip-* kế thừa xuống component con;
   riêng icon ✕ và nút xoá không dùng biến nên phải với tới bằng ::deep. */
.pcc-filter[b-mkw2db0tfk] {
    --rz-chip-font-size: 10.5px;
    --rz-chip-gap: 3px;
    --rz-chip-padding-block: 0;
    --rz-chip-padding-inline: 7px 0;
    --rz-chip-border-radius: 5px;
}
.pcc-filter[b-mkw2db0tfk]  .rz-dropdown-chips .rz-chip { max-width: 150px; }
.pcc-filter[b-mkw2db0tfk]  .rz-dropdown-chips .rz-chip .rz-chip-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.6;
}
.pcc-filter[b-mkw2db0tfk]  .rz-dropdown-chips .rz-chip .rzi { font-size: .68rem; }
.pcc-filter[b-mkw2db0tfk]  .rz-dropdown-chips .rz-chip .rz-button {
    min-width: 0; width: auto; height: auto; padding: 0 4px;
}

.pcc-sep[b-mkw2db0tfk] { color: var(--pcc-ink-f); }
.pcc-count[b-mkw2db0tfk] { margin-left: auto; font-size: 11.5px; font-weight: 600; background: var(--pcc-ac-b); color: var(--pcc-ac); padding: 4px 12px; border-radius: 20px; }
.pcc-spin[b-mkw2db0tfk] { color: var(--pcc-ac); }

.pcc-btn[b-mkw2db0tfk] { font-size: 12.5px; font-weight: 500; border-radius: 7px; padding: 7px 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink); }
.pcc-btn:hover[b-mkw2db0tfk] { background: var(--pcc-sf2); }
.pcc-btn-primary[b-mkw2db0tfk] { background: var(--pcc-ac); border-color: var(--pcc-ac); color: #fff; }
.pcc-btn-primary:hover[b-mkw2db0tfk] { opacity: .9; background: var(--pcc-ac); }
.pcc-btn-ok[b-mkw2db0tfk] { border-color: var(--pcc-ok); color: var(--pcc-ok); }
.pcc-btn-ok:hover[b-mkw2db0tfk] { background: var(--pcc-ok-b); }
.pcc-btn-ok.on[b-mkw2db0tfk] { background: var(--pcc-ok); color: #fff; }
.pcc-btn-bulk-complete[b-mkw2db0tfk] { min-width: 118px; justify-content: center; }
.pcc-btn-bulk-complete:not(:disabled)[b-mkw2db0tfk] { background: var(--pcc-ok); border-color: var(--pcc-ok); color: #fff; }
.pcc-btn-bulk-complete:disabled[b-mkw2db0tfk] { opacity: .55; cursor: not-allowed; }
.pcc-list-head[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pcc-info[b-mkw2db0tfk] { font-size: 12.5px; color: var(--pcc-ink-s); margin-bottom: 10px; }
.pcc-list-head .pcc-info[b-mkw2db0tfk] { margin-bottom: 0; }
.pcc-pager[b-mkw2db0tfk] { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--pcc-ink-s);
    background: var(--pcc-sf); border-top: 1px solid var(--pcc-bdr); box-shadow: 0 -4px 10px -7px rgba(15, 23, 42, .25); }
.pcc-pager span[b-mkw2db0tfk] { font-weight: 600; color: var(--pcc-ink); }

/* Loading indicator nổi */
.pcc-loading[b-mkw2db0tfk] { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1400;
    background: #0f172a; color: #fff; padding: 8px 18px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--shadow-2xl); }
.pcc-legend[b-mkw2db0tfk] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11px; color: var(--pcc-ink-s); margin-bottom: 8px; }
.pcc-legend-ttl[b-mkw2db0tfk] { font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .05em; }
.pcc-legend-item[b-mkw2db0tfk] { display: inline-flex; align-items: center; gap: 5px; }
.pcc-legend-item .pcc-dot[b-mkw2db0tfk] { width: 10px; height: 10px; }
.pcc-legend-sep[b-mkw2db0tfk] { color: var(--pcc-bdr); }
.pcc-info b[b-mkw2db0tfk] { color: var(--pcc-ink); }

/* ── KPI thẻ lọc nhanh (task 31, tab danh sách) ── */
/* 8 thẻ KPI tách 2 nhóm rõ rệt: TRÁI = tiến độ review, PHẢI = tình trạng chuyến.
   Mỗi nhóm 4 thẻ, ngăn nhau bằng 1 vạch dọc. Màn hẹp thì xếp chồng, vạch chuyển thành ngang. */
.pcc-kpi-cards[b-mkw2db0tfk] { display: flex; align-items: stretch; gap: 16px; margin-bottom: 12px; }
.pcc-kpi-group[b-mkw2db0tfk] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pcc-kpi-group-ttl[b-mkw2db0tfk] { font-size: 10.5px; font-weight: 700; color: var(--pcc-ink-f);
    min-height: 24px; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 6px; }
.pcc-kpi-status-ttl > span:first-child[b-mkw2db0tfk] { display: inline-flex; align-items: center; gap: 6px; }
.pcc-kpi-total[b-mkw2db0tfk] { flex: none; padding: 2px 7px; border: 1px solid var(--pcc-bdr); border-radius: 6px;
    background: var(--pcc-sf); color: var(--pcc-ink-s); font-size: 11px; text-transform: none; letter-spacing: 0; }
.pcc-kpi-total b[b-mkw2db0tfk] { color: var(--pcc-ink); font-size: 12px; }
.pcc-kpi-group-cards[b-mkw2db0tfk] { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.pcc-kpi-split[b-mkw2db0tfk] { flex: none; width: 1px; background: var(--pcc-bdr); align-self: stretch; }

@media (max-width: 1100px) {
    .pcc-kpi-cards[b-mkw2db0tfk] { flex-direction: column; gap: 12px; }
    .pcc-kpi-split[b-mkw2db0tfk] { width: auto; height: 1px; }
}
.pcc-kpi-card[b-mkw2db0tfk] { --kc: var(--pcc-neu); flex: 1 1 0; min-width: 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--pcc-sf); border: 1.5px solid var(--pcc-bdr); border-left: 4px solid var(--kc); border-radius: 10px;
    padding: 10px 14px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pcc-kpi-card:hover[b-mkw2db0tfk] { border-color: var(--kc); box-shadow: 0 3px 10px -6px rgba(15, 23, 42, .3); transform: translateY(-1px); }
.pcc-kpi-card.on[b-mkw2db0tfk] { background: var(--kc); border-color: var(--kc); }
.pcc-kpi-card.on .pcc-kpi-c-num[b-mkw2db0tfk], .pcc-kpi-card.on .pcc-kpi-c-lbl[b-mkw2db0tfk] { color: #fff; }
.pcc-kpi-c-num[b-mkw2db0tfk] { font-size: 22px; font-weight: 800; line-height: 1; color: var(--pcc-ink); }
.pcc-kpi-c-lbl[b-mkw2db0tfk] { font-size: 11.5px; font-weight: 600; color: var(--pcc-ink-s); display: inline-flex; align-items: center; gap: 5px; }
.pcc-kpi-c-sub[b-mkw2db0tfk] { font-size: 10.5px; font-weight: 500; color: var(--pcc-ink-f); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pcc-kpi-card.on .pcc-kpi-c-sub[b-mkw2db0tfk] { color: rgba(255,255,255,.85); }
.pcc-kpi-card:nth-child(1)[b-mkw2db0tfk] { --kc: var(--pcc-err); }
.pcc-kpi-card:nth-child(2)[b-mkw2db0tfk] { --kc: var(--pcc-warn); }
.pcc-kpi-card:nth-child(3)[b-mkw2db0tfk] { --kc: var(--pcc-tech); }
.pcc-kpi-card:nth-child(4)[b-mkw2db0tfk] { --kc: var(--pcc-ok); }
.pcc-kpi-card-static[b-mkw2db0tfk] { cursor: default; }
.pcc-kpi-card-static:hover[b-mkw2db0tfk] { transform: none; box-shadow: var(--card-shadow); }
.pcc-kpi-card.kpi-trip-notcheckin[b-mkw2db0tfk] { --kc: #856404; }
.pcc-kpi-card.kpi-trip-checked[b-mkw2db0tfk] { --kc: #0c5460; }
.pcc-kpi-card.kpi-trip-pickuped[b-mkw2db0tfk] { --kc: #e67e22; }
.pcc-kpi-card.kpi-trip-delivered[b-mkw2db0tfk] { --kc: #155724; }
.pcc-kpi-card.kpi-trip-khac[b-mkw2db0tfk] { --kc: #475569; }
.pcc-kpi-card-static .pcc-kpi-c-num[b-mkw2db0tfk] { color: var(--kc); }
/* Chưa review + Chờ xử lý nổi hơn để tạo urgency */
.pcc-kpi-card.kpi-urgent[b-mkw2db0tfk] { border-left-width: 6px; }
.pcc-kpi-card.kpi-urgent:not(.on) .pcc-kpi-c-num[b-mkw2db0tfk] { color: var(--kc); }

/* ── KPI ── */
.pcc-kpi-row[b-mkw2db0tfk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.pcc-kpi[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; padding: 18px 20px;
    box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.pcc-kpi[b-mkw2db0tfk]::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kc, var(--pcc-ac)); }
.pcc-kpi.kc-lay[b-mkw2db0tfk] { --kc: var(--pcc-ac); } .pcc-kpi.kc-giao[b-mkw2db0tfk] { --kc: var(--pcc-ok); }
.pcc-kpi.kc-err[b-mkw2db0tfk] { --kc: var(--pcc-err); } .pcc-kpi.kc-st[b-mkw2db0tfk] { --kc: var(--pcc-neu); }
.pcc-kpi-hd[b-mkw2db0tfk] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.pcc-kpi-lbl[b-mkw2db0tfk] { font-size: 10.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .07em; }
.pcc-kpi-ico[b-mkw2db0tfk] { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--pcc-neu-b); color: var(--pcc-neu); }
.kc-lay .pcc-kpi-ico[b-mkw2db0tfk] { background: var(--pcc-ac-b); color: var(--pcc-ac); }
.kc-giao .pcc-kpi-ico[b-mkw2db0tfk] { background: var(--pcc-ok-b); color: var(--pcc-ok); }
.kc-err .pcc-kpi-ico[b-mkw2db0tfk] { background: var(--pcc-err-b); color: var(--pcc-err); }
.pcc-kpi-val[b-mkw2db0tfk] { font-size: 30px; font-weight: 700; line-height: 1; color: var(--pcc-ink); }
.pcc-kpi-val small[b-mkw2db0tfk] { font-size: 13px; font-weight: 500; color: var(--pcc-ink-s); }
.pcc-kpi-meta[b-mkw2db0tfk] { font-size: 12px; color: var(--pcc-ink-s); margin-top: 9px; }
.pcc-kpi-meta.neg[b-mkw2db0tfk] { color: var(--pcc-err); font-weight: 500; } .pcc-kpi-meta.pos[b-mkw2db0tfk] { color: var(--pcc-ok); font-weight: 500; }
/* Danh sách trong thẻ KPI: nhãn bám lề trái, số bám lề phải thành một cột thẳng hàng,
   có kẻ ngăn giữa các dòng → quét số theo cột thay vì đọc từng dòng. */
.pcc-err-list[b-mkw2db0tfk], .pcc-st-list[b-mkw2db0tfk] { display: flex; flex-direction: column; margin-top: 10px;
    border-top: 1px solid var(--pcc-bdr); }
.pcc-ei[b-mkw2db0tfk], .pcc-st-row[b-mkw2db0tfk] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    font-size: 12px; color: var(--pcc-ink-s); padding: 7px 0; border-bottom: 1px solid var(--pcc-bdr); }
.pcc-ei:last-child[b-mkw2db0tfk], .pcc-st-row:last-child[b-mkw2db0tfk] { border-bottom: none; padding-bottom: 0; }
.pcc-el[b-mkw2db0tfk] { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pcc-el[b-mkw2db0tfk], .pcc-st-row > span[b-mkw2db0tfk] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-ed[b-mkw2db0tfk] { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.pcc-ev[b-mkw2db0tfk], .pcc-st-row > b[b-mkw2db0tfk] { justify-self: end; font-weight: 700; font-size: 13.5px; color: var(--pcc-ink);
    font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }

/* ── Section + schedule ── */
.pcc-sec-hd[b-mkw2db0tfk] { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.pcc-sec-hd h3[b-mkw2db0tfk] { font-size: 15px; font-weight: 700; color: var(--pcc-ink); margin: 0; }
.pcc-sec-hd i[b-mkw2db0tfk] { color: var(--pcc-ac); }
.pcc-sbadge[b-mkw2db0tfk] { font-size: 11px; font-weight: 600; background: var(--pcc-ac-b); color: var(--pcc-ac); padding: 2px 10px; border-radius: 20px; }
.pcc-sched[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--card-shadow); }
.pcc-sched-click[b-mkw2db0tfk] { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.pcc-sched-click:hover[b-mkw2db0tfk] { border-color: var(--pcc-ac); box-shadow: var(--card-shadow-hover); }
.pcc-shn .pcc-badge[b-mkw2db0tfk] { margin-left: 8px; vertical-align: middle; }
.pcc-tbl .mono.bold .pcc-badge[b-mkw2db0tfk] { margin-left: 8px; font-weight: 600; }
.pcc-sched-hd[b-mkw2db0tfk] { background: var(--pcc-sf2); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-radius: 12px; }
.pcc-lichchip[b-mkw2db0tfk] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--pcc-ac-b); color: var(--pcc-ac); padding: 4px 10px; border-radius: 16px; margin-bottom: 8px; }
.pcc-lichchip-x[b-mkw2db0tfk] { border: none; background: transparent; color: var(--pcc-ac); cursor: pointer; padding: 0 2px; font-size: 12px; }
.pcc-sched-left[b-mkw2db0tfk] { min-width: 0; }
.pcc-shn[b-mkw2db0tfk] { font-weight: 700; font-size: 13.5px; }
.pcc-sched-meta[b-mkw2db0tfk] { font-size: 11.5px; color: var(--pcc-ink-s); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pcc-sched-meta i[b-mkw2db0tfk] { font-size: 11px; color: var(--pcc-ink-f); margin-right: 2px; }
.pcc-sched-sep[b-mkw2db0tfk] { color: var(--pcc-ink-f); }
.pcc-shs[b-mkw2db0tfk] { font-size: 11.5px; color: var(--pcc-ink-f); margin-top: 2px; }
.pcc-sched-stats[b-mkw2db0tfk] { display: flex; align-items: center; gap: 22px; }
.pcc-ss .sv[b-mkw2db0tfk] { font-weight: 600; font-size: 15px; } .pcc-ss .sl[b-mkw2db0tfk] { font-size: 10px; color: var(--pcc-ink-f); text-transform: uppercase; }
.pcc-ss.neg .sv[b-mkw2db0tfk] { color: var(--pcc-err); } .pcc-ss.pos .sv[b-mkw2db0tfk] { color: var(--pcc-ok); }

/* ── Table ── */
.pcc-tbl-wrap[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; overflow: auto; box-shadow: var(--card-shadow); position: relative; max-height: calc(100vh - 230px); }
.pcc-tbl-loading[b-mkw2db0tfk] { min-height: 160px; }
.pcc-tbl-loading .pcc-tbl[b-mkw2db0tfk] { opacity: .45; pointer-events: none; }
.pcc-tbl-overlay[b-mkw2db0tfk] { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, .62); backdrop-filter: blur(1px);
    font-size: 13px; font-weight: 600; color: var(--pcc-ac); }
.pcc-tbl[b-mkw2db0tfk] { width: 100%; min-width: 1680px; border-collapse: collapse; font-size: 12.5px; }
.pcc-tbl thead th[b-mkw2db0tfk] { background: var(--pcc-sf2); text-align: left; padding: 11px 12px; font-weight: 700; color: var(--pcc-ink-f);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--pcc-bdr); white-space: nowrap; }
.pcc-tbl thead th[b-mkw2db0tfk] { position: sticky; top: 0; z-index: 2; }
.pcc-tbl thead th.pcc-sort-col[b-mkw2db0tfk] { padding: 0; }
.pcc-sort-btn[b-mkw2db0tfk] { width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
    padding: 9px 12px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700;
    text-transform: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.pcc-sort-btn:hover[b-mkw2db0tfk] { background: var(--pcc-ac-b); color: var(--pcc-ac); }
.pcc-sort-btn.active[b-mkw2db0tfk] { color: var(--pcc-ac); }
.pcc-sort-btn i[b-mkw2db0tfk] { width: 10px; flex: none; text-align: center; font-size: 10px; }
.pcc-tbl tbody td[b-mkw2db0tfk] { padding: 11px 12px; border-bottom: 1px solid var(--pcc-bdr); vertical-align: middle; }
.pcc-tbl tbody tr[b-mkw2db0tfk] { cursor: pointer; }
.pcc-tbl tbody tr:hover[b-mkw2db0tfk] { background: var(--pcc-ac-b); }
.pcc-tbl tbody tr.pcc-row-selected[b-mkw2db0tfk] { background: var(--pcc-ok-b); }
.pcc-select-col[b-mkw2db0tfk] { width: 42px; min-width: 42px; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; }
.pcc-trip-check[b-mkw2db0tfk] { width: 16px; height: 16px; accent-color: var(--pcc-ok); cursor: pointer; vertical-align: middle; }
.pcc-trip-check:disabled[b-mkw2db0tfk] { cursor: not-allowed; opacity: .55; }
.pcc-tbl .mono[b-mkw2db0tfk] { font-family: 'IBM Plex Mono', monospace; }
.pcc-tbl .bold[b-mkw2db0tfk] { font-weight: 700; } .pcc-tbl .muted[b-mkw2db0tfk] { color: var(--pcc-ink-f); } .pcc-tbl .num[b-mkw2db0tfk] { text-align: right; font-weight: 600; }
.pcc-ok-pill[b-mkw2db0tfk] { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; border: 1px solid rgba(22, 163, 74, .35); border-radius: 7px; background: var(--pcc-ok-b); color: var(--pcc-ok); font-size: 11px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .08); }
.pcc-col-dialog[b-mkw2db0tfk] { background: var(--pcc-sf); border-radius: 12px; width: 440px; max-width: 94vw; max-height: 82vh; display: flex; flex-direction: column; box-shadow: var(--shadow-2xl); overflow: hidden; cursor: default; }
.pcc-col-body[b-mkw2db0tfk] { padding: 12px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pcc-col-option[b-mkw2db0tfk] { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid var(--pcc-bdr); border-radius: 8px; background: var(--pcc-sf2); color: var(--pcc-ink); font-size: 12.5px; cursor: pointer; }
.pcc-col-option:hover[b-mkw2db0tfk] { border-color: var(--pcc-ac); background: var(--pcc-ac-b); }
.pcc-col-option input[b-mkw2db0tfk] { accent-color: var(--pcc-ac); }
.pcc-col-option span[b-mkw2db0tfk] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-col-footer[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--pcc-bdr); background: var(--pcc-sf2); }
.pcc-route[b-mkw2db0tfk] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.pcc-route-chip[b-mkw2db0tfk] { display: inline-flex; align-items: center; max-width: 240px; padding: 2px 6px; color: #111827; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcc-route-arrow[b-mkw2db0tfk] { color: var(--pcc-ink-f); font-size: 10px; }
.pcc-route-chip.route-pickup[b-mkw2db0tfk],
.pcc-route-chip.route-delivery[b-mkw2db0tfk],
.pcc-route-chip.route-change[b-mkw2db0tfk],
.pcc-route-chip.route-return[b-mkw2db0tfk] { background: transparent; color: #111827; text-decoration: none; }
.pcc-route-chip.route-nodelivery[b-mkw2db0tfk],
.pcc-nodelivery-line[b-mkw2db0tfk] { background: transparent; color: #111827; text-decoration-line: line-through; text-decoration-color: #dc2626; text-decoration-thickness: 1px; text-decoration-skip-ink: none; }
.pcc-tagrow[b-mkw2db0tfk] { display: flex; flex-wrap: wrap; gap: 4px; }
.pcc-review-detail-tags[b-mkw2db0tfk] { min-width: 130px; max-width: 190px; }
.pcc-empty td[b-mkw2db0tfk] { text-align: center; padding: 48px; color: var(--pcc-ink-f); }
.pcc-empty i[b-mkw2db0tfk] { font-size: 26px; display: block; margin-bottom: 8px; }
.pcc-dots[b-mkw2db0tfk] { display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; }
.pcc-dot[b-mkw2db0tfk] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pcc-dot-unsupported[b-mkw2db0tfk] { box-shadow: 0 0 0 2px var(--pcc-warn); }
.pcc-dot-noimg[b-mkw2db0tfk] { background: transparent !important; border: 1.5px dashed var(--pcc-ink-f); }
.pcc-dot-nodelivery[b-mkw2db0tfk] { background: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, .18); }
.pcc-noimg[b-mkw2db0tfk] { font-size: 11px; color: var(--pcc-warn); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pcc-noimg i[b-mkw2db0tfk] { font-size: 11px; }
.pcc-empty-card-nodelivery[b-mkw2db0tfk] { border-color: #fecaca !important; background: #fef2f2 !important; color: #991b1b !important; }

/* ── Badge ── */
.pcc-badge[b-mkw2db0tfk] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.b-neu[b-mkw2db0tfk] { background: var(--pcc-neu-b); color: var(--pcc-neu); }
.b-err[b-mkw2db0tfk] { background: var(--pcc-err-b); color: var(--pcc-err); }
.b-warn[b-mkw2db0tfk] { background: var(--pcc-warn-b); color: var(--pcc-warn); }
.b-issue[b-mkw2db0tfk] { background: var(--pcc-issue-b); color: var(--pcc-issue); }
.b-ok[b-mkw2db0tfk] { background: var(--pcc-ok-b); color: var(--pcc-ok); }
.b-tech[b-mkw2db0tfk] { background: var(--pcc-tech-b); color: var(--pcc-tech); }
.b-ac[b-mkw2db0tfk] { background: var(--pcc-ac-b); color: var(--pcc-ac); }

/* Màu Tình trạng — đồng bộ ManageTruckV2 */
.pcc-st-notcheckin[b-mkw2db0tfk] { background: #fff3cd; color: #856404; }
.pcc-st-checked[b-mkw2db0tfk]    { background: #d1ecf1; color: #0c5460; }
.pcc-st-pickuped[b-mkw2db0tfk]   { background: #ffe4c4; color: #e67e22; }
.pcc-st-delivered[b-mkw2db0tfk]  { background: #d4edda; color: #155724; }
.pcc-st-cancel[b-mkw2db0tfk]     { background: #f8d7da; color: #721c24; }
.pcc-st-khac[b-mkw2db0tfk]       { background: #e2e8f0; color: #475569; }

/* ── Overlay + drawer ── */
.pcc-overlay[b-mkw2db0tfk] { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; justify-content: flex-end; z-index: 1200; backdrop-filter: blur(2px); }
.pcc-drawer[b-mkw2db0tfk] { width: 760px; max-width: 96vw; background: var(--pcc-sf2); height: 100%; overflow-y: auto; display: flex; flex-direction: column; box-shadow: var(--shadow-2xl); }
.pcc-drawer-loading[b-mkw2db0tfk] { padding: 40px; text-align: center; color: var(--pcc-ink-f); }
.pcc-dr-hd[b-mkw2db0tfk] { background: #0f172a; padding: 18px 24px 14px; position: sticky; top: 0; z-index: 5; }
.pcc-dr-hd-top[b-mkw2db0tfk] { display: flex; align-items: flex-start; justify-content: space-between; }
.pcc-dr-hd-top h2[b-mkw2db0tfk] { font-size: 18px; font-weight: 700; color: #e2e8f0; margin: 0; }
.pcc-dr-hd-top h2 small[b-mkw2db0tfk] { display: block; font-size: 12px; font-weight: 400; color: #7b90ae; margin-top: 3px; }
.pcc-dr-close[b-mkw2db0tfk] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #e2e8f0; cursor: pointer; }
.pcc-dr-meta[b-mkw2db0tfk] { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.pcc-dr-meta .dml[b-mkw2db0tfk] { font-size: 10px; color: #7b90ae; text-transform: uppercase; }
.pcc-dr-meta .dmv[b-mkw2db0tfk] { font-size: 12.5px; font-weight: 600; color: #e2e8f0; margin-top: 2px; }
.pcc-dr-body[b-mkw2db0tfk] { padding: 18px 22px; flex: 1; }
.pcc-empty-card[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; padding: 32px; text-align: center; color: var(--pcc-ink-f); }

.pcc-pt-grp[b-mkw2db0tfk] { margin-bottom: 18px; }
.pcc-pt-ttl[b-mkw2db0tfk] { font-size: 11.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.pcc-pt-ttl i[b-mkw2db0tfk] { color: var(--pcc-ac); }

/* ── PC card ── */
.pcc-pc[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--card-shadow); }
.pcc-pc.st-ok[b-mkw2db0tfk] { border-left: 3px solid var(--pcc-ok); } .pcc-pc.st-err[b-mkw2db0tfk] { border-left: 3px solid var(--pcc-err); } .pcc-pc.st-warn[b-mkw2db0tfk] { border-left: 3px solid var(--pcc-warn); }
.pcc-pc-hd[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--pcc-sf2); border-bottom: 1px solid var(--pcc-bdr); gap: 10px; flex-wrap: wrap; }
.pcc-pc-hdl[b-mkw2db0tfk] { display: flex; align-items: center; gap: 10px; }
.pcc-pc-thumb[b-mkw2db0tfk] { width: 42px; height: 42px; border-radius: 9px; background: var(--pcc-neu-b); display: flex; align-items: center; justify-content: center; color: var(--pcc-ink-f); overflow: hidden; }
.pcc-pc-thumb img[b-mkw2db0tfk] { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.pcc-pc-title-row[b-mkw2db0tfk] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcc-pc-ttl[b-mkw2db0tfk] { font-weight: 700; font-size: 13px; }
.pcc-pc-sub[b-mkw2db0tfk] { font-size: 11.5px; color: var(--pcc-ink-f); margin-top: 2px; }
.pcc-pc-alert[b-mkw2db0tfk] { padding: 9px 16px; border-bottom: 1px solid var(--pcc-bdr); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pcc-pc-alert.a-err[b-mkw2db0tfk] { background: var(--pcc-err-b); color: var(--pcc-err); }
.pcc-pc-alert.a-ok[b-mkw2db0tfk] { background: var(--pcc-ok-b); color: var(--pcc-ok); }
.pcc-pc-alert.a-warn[b-mkw2db0tfk] { background: var(--pcc-warn-b); color: var(--pcc-warn); }
.pcc-pc-alert div[b-mkw2db0tfk] { display: flex; align-items: center; gap: 7px; }

.pcc-flds[b-mkw2db0tfk] { padding: 12px 16px; }
.pcc-fg-hd[b-mkw2db0tfk] { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pcc-ink-f); padding-bottom: 7px; border-bottom: 1px solid var(--pcc-bdr); margin-bottom: 4px; }
.pcc-f-row[b-mkw2db0tfk] { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--pcc-bdr); }
.pcc-f-row:last-child[b-mkw2db0tfk] { border-bottom: none; }
.pcc-f-lbl[b-mkw2db0tfk] { font-size: 12px; color: var(--pcc-ink-s); font-weight: 500; padding-top: 7px; }
.pcc-f-et-wrap[b-mkw2db0tfk] { min-width: 0; }
.pcc-f-et[b-mkw2db0tfk] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; min-height: 31px; padding: 6px 9px; display: flex; align-items: center; background: var(--pcc-sf2); border-radius: 6px; border: 1px solid var(--pcc-bdr); }
.pcc-f-et-editable[b-mkw2db0tfk] { width: 100%; cursor: pointer; text-align: left; color: inherit; }
.pcc-f-et-editable:hover[b-mkw2db0tfk] { border-color: var(--pcc-ac); background: rgba(99, 102, 241, .08); }
.pcc-pcdate-edit[b-mkw2db0tfk] { display: flex; align-items: center; gap: 6px; min-height: 31px; }
.pcc-icon-btn[b-mkw2db0tfk] { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pcc-bdr); border-radius: 6px; background: var(--pcc-sf); color: var(--pcc-ink); }
.pcc-icon-btn:hover:not(:disabled)[b-mkw2db0tfk] { border-color: var(--pcc-ac); color: var(--pcc-ac); }
.pcc-icon-btn:disabled[b-mkw2db0tfk] { opacity: .65; cursor: not-allowed; }
.pcc-icon-save[b-mkw2db0tfk] { background: var(--pcc-ok); border-color: var(--pcc-ok); color: #fff; }
.pcc-icon-save:hover:not(:disabled)[b-mkw2db0tfk] { color: #fff; filter: brightness(.96); }
.pcc-f-note[b-mkw2db0tfk] { margin-bottom: 8px; font-family: inherit; font-size: 11px; font-weight: 500; color: var(--pcc-mut); }
.pcc-f-ai[b-mkw2db0tfk] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 100%; min-height: 31px; padding: 6px 9px; border-radius: 6px; border: 1.5px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink); outline: none; }
.pcc-f-ai:focus[b-mkw2db0tfk] { border-color: var(--pcc-ac); }
.pcc-f-ai[readonly][b-mkw2db0tfk] { background: var(--pcc-sf2); color: var(--pcc-ink-s); cursor: default; border-style: dashed; }
.pcc-f-row.mm .pcc-f-ai[b-mkw2db0tfk] { border-color: var(--pcc-err); background: var(--pcc-err-b); color: var(--pcc-err); font-weight: 600; }
.pcc-f-row.mm .pcc-f-et[b-mkw2db0tfk] { border-color: var(--pcc-err); color: var(--pcc-err); font-weight: 600; }
.pcc-f-row.mm .pcc-f-note[b-mkw2db0tfk] { color: var(--pcc-mut); font-weight: 500; }

/* ── PC actions ── */
.pcc-pc-acts[b-mkw2db0tfk] { padding: 12px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-top: 1px solid var(--pcc-bdr); background: var(--pcc-sf2); flex-wrap: wrap; }
.pcc-pa-labelcol[b-mkw2db0tfk] { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; flex: 1 1 420px; }
.pcc-pa-btns[b-mkw2db0tfk] { display: flex; gap: 6px; align-items: flex-start; margin-left: auto; }
.pcc-pa-hint[b-mkw2db0tfk] { font-size: 9.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .1em; }
.pcc-pa-group[b-mkw2db0tfk], .pcc-pa-labels[b-mkw2db0tfk], .pcc-pa-sub[b-mkw2db0tfk] { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-start; }
.pcc-pa-section[b-mkw2db0tfk] { display: flex; flex-direction: column; gap: 6px; }
.pcc-pa-section-title[b-mkw2db0tfk] { font-size: 9.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .06em; }
.pcc-chip[b-mkw2db0tfk] { font-size: 11.5px; font-weight: 500; padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink-s); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pcc-chip.chip-tech[b-mkw2db0tfk] { border-color: var(--pcc-err); color: var(--pcc-err); }
.pcc-chip.chip-tech.on[b-mkw2db0tfk] { background: var(--pcc-err); border-color: var(--pcc-err); color: #fff; font-weight: 700; }
.pcc-chip.chip-warn.on[b-mkw2db0tfk] { background: var(--pcc-warn); border-color: var(--pcc-warn); color: #fff; font-weight: 700; }
.pcc-chip.chip-ok[b-mkw2db0tfk] { border-color: var(--pcc-ok); color: var(--pcc-ok); }
.pcc-chip.chip-ok.on[b-mkw2db0tfk] { background: var(--pcc-ok); border-color: var(--pcc-ok); color: #fff; font-weight: 700; }
.pcc-chip.chip-danger[b-mkw2db0tfk] { border-color: var(--pcc-err); color: var(--pcc-err); }
.pcc-chip.chip-danger.on[b-mkw2db0tfk] { background: var(--pcc-err); border-color: var(--pcc-err); color: #fff; font-weight: 700; }
.pcc-chip.chip-clear[b-mkw2db0tfk] { color: var(--pcc-neu); }
.pcc-chip.chip-clear:hover[b-mkw2db0tfk] { background: var(--pcc-neu-b); border-color: var(--pcc-neu); }
.pcc-btn-clear[b-mkw2db0tfk] { border-color: var(--pcc-neu); color: var(--pcc-neu); }
.pcc-btn-clear:hover[b-mkw2db0tfk] { background: var(--pcc-neu-b); }
.pcc-subchip[b-mkw2db0tfk] { font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: 7px; border: 1.5px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink-s); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.pcc-subchip.on[b-mkw2db0tfk] { background: var(--pcc-warn-b); border-color: var(--pcc-warn); color: var(--pcc-warn); font-weight: 600; }

/* ── Notes ── */
.pcc-notes[b-mkw2db0tfk] { padding: 10px 16px 14px; border-top: 1px solid var(--pcc-bdr); }
.pcc-notes-head[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pcc-notes-lbl[b-mkw2db0tfk] { font-size: 9.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.pcc-notes-ta[b-mkw2db0tfk] { width: 100%; font-size: 12.5px; resize: vertical; border: 1.5px solid var(--pcc-bdr); border-radius: 7px; padding: 8px 10px; background: var(--pcc-sf2); color: var(--pcc-ink); outline: none; min-height: 54px; }
.pcc-notes-ta:focus[b-mkw2db0tfk] { border-color: var(--pcc-ac); }

/* ── Drawer footer ── */
.pcc-dr-ft[b-mkw2db0tfk] { position: sticky; bottom: 0; background: var(--pcc-sf); border-top: 1px solid var(--pcc-bdr); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pcc-dfn[b-mkw2db0tfk] { font-size: 12.5px; color: var(--pcc-ink-s); }
.pcc-btn-final[b-mkw2db0tfk] { background: var(--pcc-ok); color: #fff; border: none; font-weight: 700; font-size: 13.5px; padding: 10px 22px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pcc-btn-final:disabled[b-mkw2db0tfk] { background: var(--pcc-neu-b); color: var(--pcc-ink-f); cursor: not-allowed; }

/* ── Image popup ── */
.pcc-img-mask[b-mkw2db0tfk] { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 1300; cursor: zoom-out; }
.pcc-img-full[b-mkw2db0tfk] { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* ── Bulk PC date editor ── */
.pcc-bulk-date-overlay[b-mkw2db0tfk] { justify-content: center; align-items: center; padding: 20px; }
.pcc-btn-bulk-date[b-mkw2db0tfk] { color: #4338ca; border-color: #c7d2fe; background: #eef2ff; }
.pcc-btn-bulk-date:hover:not(:disabled)[b-mkw2db0tfk] { background: #e0e7ff; border-color: #818cf8; }
.pcc-bulk-date-dialog[b-mkw2db0tfk] { width: min(700px, 96vw); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--pcc-sf); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2xl); }
.pcc-bulk-date-head[b-mkw2db0tfk] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 18px; background: #0f172a; color: #e2e8f0; }
.pcc-bulk-date-head h2[b-mkw2db0tfk] { margin: 0; font-size: 16px; font-weight: 700; }
.pcc-bulk-date-head h2 i[b-mkw2db0tfk] { color: #a5b4fc; margin-right: 7px; }
.pcc-bulk-date-head p[b-mkw2db0tfk] { margin: 5px 0 0; color: #94a3b8; font-size: 12.5px; }
.pcc-bulk-date-body[b-mkw2db0tfk] { overflow-y: auto; padding: 12px 16px; background: var(--pcc-bg); }
.pcc-bulk-date-loading[b-mkw2db0tfk] { padding: 54px; text-align: center; color: var(--pcc-ink-f); }
.pcc-bulk-schedule[b-mkw2db0tfk] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.pcc-bulk-schedule-head[b-mkw2db0tfk] { padding: 8px 12px; background: var(--pcc-sf2); border-bottom: 1px solid var(--pcc-bdr); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--pcc-ink-s); }
.pcc-bulk-schedule-head strong[b-mkw2db0tfk] { color: var(--pcc-ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.pcc-bulk-schedule-route[b-mkw2db0tfk] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 10px 12px; border-bottom: 1px solid var(--pcc-bdr); }
.pcc-bulk-schedule-route > div[b-mkw2db0tfk] { min-width: 0; display: grid; grid-template-columns: 15px 1fr; column-gap: 6px; }
.pcc-bulk-schedule-route > div + div[b-mkw2db0tfk] { border-left: 1px solid #dbe3ef; padding-left: 12px; }
.pcc-bulk-schedule-route i[b-mkw2db0tfk] { grid-row: span 2; color: var(--pcc-ac); padding-top: 2px; }
.pcc-bulk-schedule-route span[b-mkw2db0tfk] { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--pcc-ink-f); }
.pcc-bulk-schedule-route strong[b-mkw2db0tfk] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pcc-ink); font-size: 12px; }
.pcc-bulk-schedule-dates[b-mkw2db0tfk] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 11px 12px; }
.pcc-bulk-schedule-dates label[b-mkw2db0tfk] { display: grid; grid-template-columns: 1fr 132px; align-items: center; gap: 8px; margin: 0; }
.pcc-bulk-schedule-dates label > span[b-mkw2db0tfk] { color: var(--pcc-ink-s); font-size: 12px; }
.pcc-bulk-schedule-dates label > span i[b-mkw2db0tfk] { color: var(--pcc-ac); margin-right: 5px; }
.pcc-bulk-schedule-dates small[b-mkw2db0tfk] { grid-column: 1; margin-top: -7px; color: #b45309; font-size: 10.5px; }
.pcc-bulk-schedule-dates .rz-datepicker[b-mkw2db0tfk] { grid-column: 2; grid-row: 1 / span 2; width: 132px; }
.pcc-bulk-date-footer[b-mkw2db0tfk] { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--pcc-bdr); background: var(--pcc-sf); font-size: 12.5px; color: var(--pcc-ink-s); }
.pcc-bulk-date-footer > div[b-mkw2db0tfk] { display: flex; gap: 8px; }

@media (max-width: 900px) {
    .pcc-kpi-row[b-mkw2db0tfk] { grid-template-columns: repeat(2, 1fr); }
    .pcc-fg-hd[b-mkw2db0tfk], .pcc-f-row[b-mkw2db0tfk] { grid-template-columns: 90px 1fr 1fr; }
    .pcc-bulk-date-overlay[b-mkw2db0tfk] { padding: 12px; }
    .pcc-bulk-date-dialog[b-mkw2db0tfk] { max-height: calc(100vh - 24px); }
    .pcc-bulk-schedule-dates[b-mkw2db0tfk] { grid-template-columns: 1fr; gap: 8px; }
}
/* /Components/Pages/RuleMappingEtransport/RuleMappingEtransportView.razor.rz.scp.css */

.rme-root[b-htu8jz63jx], .rme-overlay[b-htu8jz63jx] {
    --rme-ok: #16a34a;   --rme-ok-b: #f0fdf4;
    --rme-warn: #d97706;  --rme-warn-b: #fffbeb;
    --rme-err: #dc2626;   --rme-err-b: #fef2f2;
    --rme-tech: #7c3aed;  --rme-tech-b: #f5f3ff;
    --rme-neu: #64748b;   --rme-neu-b: #f1f5f9;
    --rme-manual: #1e4a73; --rme-manual-b: #e3ecf5;
    --rme-ac: var(--primary-color, #ca3c19); --rme-ac-b: #fdeee9;
    --rme-ink: #1f2733; --rme-ink-s: #475569; --rme-ink-f: #94a3b8;
    --rme-bdr: var(--border-light, #e2e8f0);
    --rme-sf: #fff; --rme-sf2: #f6f8fb;
    font-size: 13px; color: var(--rme-ink);
}


.rme-root[b-htu8jz63jx], .rme-overlay[b-htu8jz63jx] { zoom: 0.9; }
.rme-root[b-htu8jz63jx] {
    height: calc((100vh - 50px) / 0.9);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rme-loading[b-htu8jz63jx] { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1400;
    background: #0f172a; color: #fff; padding: 8px 18px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--shadow-2xl); }

.rme-panel[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 10px; margin-bottom: 12px; box-shadow: var(--card-shadow); overflow: hidden;
    flex-shrink: 0; max-height: 55vh; display: flex; flex-direction: column; }
.rme-panel-hd[b-htu8jz63jx] { flex-shrink: 0; }
.rme-panel-body[b-htu8jz63jx] { flex: 1; min-height: 0; overflow-y: auto; }
.rme-panel-hd[b-htu8jz63jx] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; gap: 12px; }
.rme-panel-hd:hover[b-htu8jz63jx] { background: var(--rme-sf2); }
.rme-panel-ttl[b-htu8jz63jx] { font-size: 12.5px; font-weight: 700; color: var(--rme-ink-s); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rme-panel-mini[b-htu8jz63jx] { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--rme-ink-f); font-size: 11.5px; }
.rme-panel-mini b[b-htu8jz63jx] { font-weight: 700; color: var(--rme-ink); }
.rme-panel-mini b.mn-err[b-htu8jz63jx] { color: var(--rme-err); }
.rme-panel-mini b.mn-warn[b-htu8jz63jx] { color: var(--rme-warn); }
.rme-panel-mini b.mn-ok[b-htu8jz63jx] { color: var(--rme-ok); }
.rme-panel-mini b.mn-info[b-htu8jz63jx] { color: #2563c9; }
.rme-panel-toggle[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); background: var(--rme-sf); color: var(--rme-ink-s); border-radius: 6px;
    width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; }
.rme-panel-toggle:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); }
.rme-panel-body[b-htu8jz63jx] { padding: 10px 12px; border-top: 1px solid var(--rme-bdr); display: flex; flex-direction: column; gap: 8px; }

.rme-panel-body .rme-filter[b-htu8jz63jx] { margin-bottom: 0; padding: 0; border: none; box-shadow: none; background: transparent; row-gap: 12px; column-gap: 8px; }


.rme-filter[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; box-shadow: var(--card-shadow); }
.rme-filter-wrap[b-htu8jz63jx] { flex-wrap: wrap; row-gap: 10px; column-gap: 8px; }
.rme-filter-ttl[b-htu8jz63jx] { font-size: 12.5px; font-weight: 700; color: var(--rme-ink-f); display: flex; align-items: center; gap: 6px; }
.rme-filter input[b-htu8jz63jx], .rme-filter select[b-htu8jz63jx] { font-size: 12.5px; border: 1.5px solid var(--rme-bdr); border-radius: 7px;
    padding: 7px 10px; background: var(--rme-sf2); color: var(--rme-ink); outline: none; min-width: 120px; }
.rme-filter input:focus[b-htu8jz63jx], .rme-filter select:focus[b-htu8jz63jx] { border-color: var(--rme-ac); }
.rme-btn[b-htu8jz63jx] { font-size: 12.5px; font-weight: 500; border-radius: 7px; padding: 7px 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rme-bdr); background: var(--rme-sf); color: var(--rme-ink); }
.rme-btn:hover[b-htu8jz63jx] { background: var(--rme-sf2); }
.rme-btn:disabled[b-htu8jz63jx] { opacity: .5; cursor: not-allowed; }
.rme-btn-ok[b-htu8jz63jx] { border-color: var(--rme-ok); color: var(--rme-ok); }
.rme-btn-ok:hover[b-htu8jz63jx] { background: var(--rme-ok-b); }
.rme-btn-bulk-complete[b-htu8jz63jx] { min-width: 118px; justify-content: center; }
.rme-btn-bulk-complete:not(:disabled)[b-htu8jz63jx] { background: var(--rme-ok); border-color: var(--rme-ok); color: #fff; }
.rme-btn-bulk-complete:disabled[b-htu8jz63jx] { opacity: .55; cursor: not-allowed; }

.rme-pager[b-htu8jz63jx] { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--rme-ink-s);
    background: var(--rme-sf); border-top: 1px solid var(--rme-bdr); box-shadow: 0 -4px 10px -7px rgba(15, 23, 42, .25); }
.rme-pager span[b-htu8jz63jx] { font-weight: 600; color: var(--rme-ink); }




.rme-pcc-tags[b-htu8jz63jx] { display: flex; flex-wrap: wrap; gap: 4px; min-width: 120px; }
.rme-pcc-error-cell[b-htu8jz63jx] { text-align: center !important; }
.rme-pcc-error-cell .rme-pcc-tags[b-htu8jz63jx] { justify-content: center; align-items: center; width: 100%; }
.rme-pcc-badge[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 3px 8px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: #f1f5f9; color: #64748b; }
.rme-pcc-badge.ok[b-htu8jz63jx] { background: #f0fdf4; color: #16a34a; }
.rme-pcc-badge.err[b-htu8jz63jx] { background: #fef2f2; color: #b91c1c; }
.rme-pcc-badge.issue[b-htu8jz63jx] { background: #fff1f2; color: #9f1239; }
.rme-pcc-badge.warn[b-htu8jz63jx] { background: #fff7ed; color: #b45309; }
.rme-pcc-badge.tech[b-htu8jz63jx] { background: #f1f5f9; color: #475569; }
.rme-pcc-badge.neutral[b-htu8jz63jx] { background: #f1f5f9; color: #64748b; }
.rme-pcc-badge.info[b-htu8jz63jx] { background: #eff6ff; color: #1d4ed8; }
.rme-inspection-cell[b-htu8jz63jx] { text-align: center; }
.rme-inspection-btn[b-htu8jz63jx] { border: 1px solid #fdba74; background: #fff7ed; color: #c2410c; border-radius: 7px; padding: 5px 9px; font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rme-inspection-btn:hover[b-htu8jz63jx] { background: #ffedd5; border-color: #fb923c; }
.rme-inspection-btn i[b-htu8jz63jx] { margin-right: 4px; }

@media (max-width: 1200px) {
}

@media (max-width: 700px) {
}


.rme-tabs[b-htu8jz63jx] { display: flex; gap: 4px; margin-bottom: 0; position: relative; z-index: 2; flex-shrink: 0; }
.rme-tab[b-htu8jz63jx] { background: var(--rme-sf2); color: var(--rme-ink-s); border: 1px solid var(--rme-bdr); border-bottom: none;
    border-radius: 9px 9px 0 0; padding: 9px 18px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.rme-tab.active[b-htu8jz63jx] { background: var(--rme-sf); color: var(--rme-ac); border-color: var(--rme-bdr); }
.rme-tab-cnt[b-htu8jz63jx] { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: var(--rme-ac-b); color: var(--rme-ac); font-size: 11px; font-weight: 700; }
.rme-tab-cnt-warn[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }

.rme-seg[b-htu8jz63jx] { display: inline-flex; align-items: center; background: var(--rme-sf2); border: 1px solid var(--rme-bdr); border-radius: 8px; padding: 2px; gap: 2px; flex-shrink: 0; }
.rme-seg-btn[b-htu8jz63jx] { border: none; background: transparent; color: var(--rme-ink-s); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.rme-seg-btn:hover[b-htu8jz63jx] { color: var(--rme-ink); }
.rme-seg-btn.active[b-htu8jz63jx] { background: var(--rme-sf); color: var(--rme-ac); box-shadow: var(--card-shadow); }


.rme-bulk-bar[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; background: var(--rme-ac-b); border: 1px solid var(--rme-ac);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; flex-shrink: 0; }


.rme-board[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 0 10px 10px 10px;
    flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }

.rme-board-hd[b-htu8jz63jx] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--rme-bdr); flex-shrink: 0; }
.rme-board-hd-ttl[b-htu8jz63jx] { font-size: 12.5px; font-weight: 700; color: var(--rme-ink-s); display: flex; align-items: center; gap: 7px; }
.rme-board-hd-cnt[b-htu8jz63jx] { font-size: 11.5px; color: var(--rme-ink-f); font-weight: 600; white-space: nowrap; }
.rme-board-actions[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; }
.rme-layout-button[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: var(--rme-pri); background: var(--rme-sf2); border: 1px solid var(--rme-bdr); border-radius: 7px; font-size: 12px; font-weight: 650; cursor: pointer; }
.rme-layout-button:hover[b-htu8jz63jx] { border-color: var(--rme-pri); background: var(--rme-pri-soft); }
.rme-flat-table[b-htu8jz63jx] { width: max-content; min-width: 100%; }
.rme-board.rme-candata .rme-filter[b-htu8jz63jx] { margin: 12px 14px 0; }
.rme-board.rme-candata .rme-bulk-bar[b-htu8jz63jx] { margin: 12px 14px 0; }
.rme-board.rme-candata .rme-tbl-wrap[b-htu8jz63jx] { margin: 12px 14px; }
.rme-board.rme-candata .rme-pager[b-htu8jz63jx] { margin: 0 14px 12px; border-top: none; box-shadow: none; }

.rme-caret[b-htu8jz63jx] { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--rme-ink-f); transition: transform .15s; font-size: 10px; }
.rme-caret.open[b-htu8jz63jx] { transform: rotate(90deg); color: var(--rme-ac); }
.rme-mrow[b-htu8jz63jx] { border-bottom: 1px solid var(--rme-bdr); cursor: pointer; }
.rme-mrow:hover[b-htu8jz63jx] { background: var(--rme-ac-b); }
.rme-mrow.open[b-htu8jz63jx] { background: var(--rme-sf2); }
.rme-mrow > td[b-htu8jz63jx] { padding: 9px 10px; vertical-align: middle; text-align: center; }
.rme-dvvc[b-htu8jz63jx] { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-top: 3px; }
.rme-dvvc.kh[b-htu8jz63jx] { background: var(--rme-manual-b); color: var(--rme-manual); }
.rme-dvvc.ce[b-htu8jz63jx] { background: var(--rme-ac-b); color: var(--rme-ac); }
.rme-dvvc.hybrid[b-htu8jz63jx] { background: var(--rme-tech-b); color: var(--rme-tech); }
.rme-dvvc.unk[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }
.rme-dvvc.chieu[b-htu8jz63jx] { background: var(--rme-neu-b); color: var(--rme-neu); margin-left: 4px; }
.rme-dvvc-warn[b-htu8jz63jx] { font-size: 9.5px; color: var(--rme-warn); font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 3px; justify-content: center; }
.rme-note[b-htu8jz63jx] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rme-detail > td[b-htu8jz63jx] { padding: 0; background: var(--rme-sf2); border-bottom: 1px solid var(--rme-bdr); }
.rme-detail-inner[b-htu8jz63jx] { padding: 12px 16px 16px 34px; }
.rme-detail-inner.hide[b-htu8jz63jx] { display: none; }
.rme-sub-ttl[b-htu8jz63jx] { font-size: 10.5px; font-weight: 700; color: var(--rme-ink-f); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.rme-badge-done[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-badge-ok[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-badge-warn[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }
.rme-badge-err[b-htu8jz63jx] { background: var(--rme-err-b); color: var(--rme-err); }
.rme-badge-info[b-htu8jz63jx] { background: var(--rme-tech-b); color: var(--rme-tech); }
.b-manual[b-htu8jz63jx] { background: var(--rme-manual-b); color: var(--rme-manual); }


.rme-tbl-wrap[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 12px; overflow: auto; box-shadow: var(--card-shadow); position: relative;
    flex: 1; min-width: 0; min-height: 0; box-sizing: border-box; }
.rme-tbl-loading[b-htu8jz63jx] { min-height: 160px; }
.rme-tbl-loading table[b-htu8jz63jx] { opacity: .45; pointer-events: none; }
.rme-board-loading-overlay[b-htu8jz63jx] { position: absolute; top: 43px; right: 0; bottom: 0; left: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, .62); backdrop-filter: blur(1px);
    font-size: 13px; font-weight: 600; color: var(--rme-ac); }
.rme-tbl[b-htu8jz63jx] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rme-tbl thead th[b-htu8jz63jx] { background: var(--rme-sf2); text-align: center; padding: 11px 12px; font-weight: 700; color: var(--rme-ink-f);
    font-size: 11.5px; text-transform: uppercase; border-bottom: 1px solid var(--rme-bdr); white-space: nowrap;
    position: sticky; top: 0; z-index: 4; }
.rme-tbl tbody td[b-htu8jz63jx] { padding: 10px 12px; border-bottom: 1px solid var(--rme-bdr); vertical-align: middle; text-align: center; }
.rme-tbl tbody tr[b-htu8jz63jx] { cursor: pointer; }
.rme-tbl tbody tr:hover[b-htu8jz63jx] { background: var(--rme-ac-b); }
.rme-tbl tbody tr:hover .rme-sticky-col[b-htu8jz63jx] { background: var(--rme-ac-b); }
.rme-tbl .mono[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; }
.rme-tbl .bold[b-htu8jz63jx] { font-weight: 700; } .rme-tbl .muted[b-htu8jz63jx] { color: var(--rme-ink-f); } .rme-tbl .num[b-htu8jz63jx] { text-align: center; font-weight: 600; }
.rme-tg[b-htu8jz63jx] { font-size: 11.5px; white-space: nowrap; }
.rme-empty td[b-htu8jz63jx] { text-align: center; padding: 48px; color: var(--rme-ink-f); }
.rme-empty i[b-htu8jz63jx] { font-size: 26px; display: block; margin-bottom: 8px; }


.rme-sticky-col[b-htu8jz63jx] { position: sticky; left: 0; z-index: 2; background: var(--rme-sf); }
.rme-tbl thead th.rme-sticky-col[b-htu8jz63jx] { z-index: 6; background: var(--rme-sf2); }


.rme-badge[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.b-neu[b-htu8jz63jx] { background: var(--rme-neu-b); color: var(--rme-neu); }
.b-err[b-htu8jz63jx] { background: var(--rme-err-b); color: var(--rme-err); }
.b-warn[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }
.b-ok[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.b-tech[b-htu8jz63jx] { background: var(--rme-tech-b); color: var(--rme-tech); }


.rme-sub-wrap[b-htu8jz63jx] { display: contents; }
.rme-sub-scroll[b-htu8jz63jx] { overflow-x: auto; max-width: 100%; border-radius: 8px; }
table.rme-sub[b-htu8jz63jx] { width: max-content; min-width: 100%; border-collapse: collapse; background: var(--rme-sf); border-radius: 8px; }
table.rme-sub thead th[b-htu8jz63jx] { background: #edf1f6; font-size: 11.5px; text-transform: uppercase; color: var(--rme-ink-f); font-weight: 700; padding: 7px 9px; text-align: center; border-bottom: 1px solid var(--rme-bdr); white-space: nowrap; }
.rme-flat-table thead th[b-htu8jz63jx] { position: sticky; top: 0; z-index: 4; }
table.rme-sub tbody td[b-htu8jz63jx] { padding: 8px 9px; font-size: 12px; border-bottom: 1px solid var(--rme-bdr); text-align: center; vertical-align: middle; }
table.rme-sub tbody tr:last-child td[b-htu8jz63jx] { border-bottom: none; }
table.rme-sub tbody tr.flagged[b-htu8jz63jx] { background: #fcf6ea; }
table.rme-sub tbody tr.unmapped[b-htu8jz63jx] { background: #fcedd0; }
.num[b-htu8jz63jx] { text-align: center; font-weight: 600; }
.qty[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.rme-lech[b-htu8jz63jx] { color: var(--rme-err); font-weight: 700; margin-left: 4px; font-size: 11px; white-space: nowrap; }
.machuyen[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--rme-ac); font-size: 11.5px; }
.machuyen.tech[b-htu8jz63jx] { color: var(--rme-ink-f); font-weight: 500; font-style: italic; }
.plate[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; }
.rme-flags[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.rme-flag[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--rme-warn-b); color: var(--rme-warn); width: fit-content; margin: 0 auto; }


.rme-src2[b-htu8jz63jx] { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 170px; text-align: center; margin: 0 auto; }
.srow[b-htu8jz63jx] { display: flex; align-items: center; justify-content: center; gap: 6px; }
.srow .leg[b-htu8jz63jx] { font-size: 9px; font-weight: 700; color: var(--rme-ink-f); width: auto; text-transform: uppercase; }
.rme-schip[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.rme-schip.live[b-htu8jz63jx] { background: #ddf0f0; color: #0a6e6e; }
.rme-schip.stamp[b-htu8jz63jx] { background: #edeff3; color: #55606f; }
.rme-schip.miss[b-htu8jz63jx] { background: var(--rme-err-b); color: var(--rme-err); }
.rme-schip .rt[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 3px; }
.rme-schip .d[b-htu8jz63jx] { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rme-schip .stime[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 9px; }

.rme-subact[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); background: #fff; color: var(--rme-ac); border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rme-subact:hover[b-htu8jz63jx] { background: var(--rme-ac); color: #fff; }
.rme-subact:disabled[b-htu8jz63jx] { opacity: .5; cursor: not-allowed; }
.rme-subact:disabled:hover[b-htu8jz63jx] { background: #fff; color: var(--rme-ac); }
.rme-addrow[b-htu8jz63jx] { margin-top: 10px; display: flex; gap: 8px; }
.rme-addbtn[b-htu8jz63jx] { border: 1px dashed var(--rme-bdr); background: #fff; color: var(--rme-ink-f); border-radius: 7px; padding: 7px 13px;
    font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rme-addbtn:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); background: var(--rme-ac-b); }


.rme-pwt[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 9px; padding: 11px 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rme-pwt-t[b-htu8jz63jx] { font-size: 11px; font-weight: 800; color: var(--rme-manual); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; }
.rme-pwt .pf[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 2px; }
.rme-pwt .pf .k[b-htu8jz63jx] { font-size: 10px; color: var(--rme-ink-s); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.rme-pwt .pf .v[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 800; color: var(--rme-ink); }
.rme-pwt .pf input[b-htu8jz63jx] { width: 68px; font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; border: 1px solid var(--rme-bdr); border-radius: 6px; padding: 3px 7px; text-align: center; color: var(--rme-manual); }
.rme-pwt .pf.auto .v[b-htu8jz63jx] { color: var(--rme-manual); }
.rme-pwt-warn[b-htu8jz63jx] { margin-left: auto; background: var(--rme-warn-b); color: var(--rme-warn); border-radius: 7px; padding: 7px 12px; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; max-width: 360px; }

.rme-hand-block[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 9px; padding: 12px 14px; }
.rme-hand-block .hb-t[b-htu8jz63jx] { font-size: 11.5px; font-weight: 700; color: var(--rme-ink-s); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rme-hand-block .hb-ref[b-htu8jz63jx] { font-size: 11.5px; color: var(--rme-ink-s); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; background: var(--rme-sf2); border: 1px dashed var(--rme-bdr); border-radius: 7px; padding: 6px 10px; width: fit-content; }
.rme-hand-grid[b-htu8jz63jx] { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.rme-hand-rows[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 10px; }
.rme-hand-uploads[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 14px; }
.hcol[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 8px; }
.hrow[b-htu8jz63jx] { display: flex; align-items: center; gap: 8px; }
.hrow input[b-htu8jz63jx] { font-size: 12px; border: 1px solid var(--rme-bdr); border-radius: 6px; padding: 5px 8px; }
.hrow .unit[b-htu8jz63jx] { font-size: 11px; color: var(--rme-ink-f); }
.hrow .unit-label[b-htu8jz63jx] { display: inline-block; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rme-hrow-del[b-htu8jz63jx] {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; padding: 0; margin-left: 2px;
    border: 1px solid var(--rme-bdr); border-radius: 50%;
    background: var(--rme-sf); color: var(--rme-ink-f);
    font-size: 10px; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.rme-hrow-del:hover[b-htu8jz63jx] { background: var(--rme-err); border-color: var(--rme-err); color: #fff; }
.rme-addk[b-htu8jz63jx] { font-size: 11px; color: var(--rme-ac); font-weight: 600; border: none; background: none; text-align: left; padding: 2px 0; cursor: pointer; }
.rme-upl-wrap[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; border-left: 1px solid var(--rme-bdr); min-width: 220px; }
.rme-upl-wrap .ut[b-htu8jz63jx] { font-size: 10.5px; font-weight: 700; color: var(--rme-warn); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.rme-req-upl[b-htu8jz63jx] { border: 1px dashed var(--rme-warn); background: var(--rme-warn-b); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--rme-warn); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.rme-req-upl.ok[b-htu8jz63jx] { border-style: solid; border-color: var(--rme-ok); background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-upl-row[b-htu8jz63jx] { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.rme-upl-other .ut[b-htu8jz63jx] { color: var(--rme-ac); }
.rme-upl-cnt[b-htu8jz63jx] { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rme-sf2); border: 1px solid var(--rme-bdr); color: var(--rme-ink-s); font-size: 10px; font-weight: 700; }
.rme-other-grid[b-htu8jz63jx] { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 8px; }
.rme-other-card[b-htu8jz63jx] { position: relative; width: 72px; height: 72px; border: 1px solid var(--rme-bdr); border-radius: 8px; overflow: hidden; background: var(--rme-sf2); }
.rme-other-thumb[b-htu8jz63jx] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--rme-err); font-size: 24px; }
.rme-other-thumb img[b-htu8jz63jx] { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.rme-other-card:hover .rme-other-thumb img[b-htu8jz63jx] { transform: scale(1.06); }
.rme-other-badge[b-htu8jz63jx] { position: absolute; top: 3px; left: 3px; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rme-other-del[b-htu8jz63jx] { position: absolute; top: 3px; right: 3px; z-index: 1; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rme-other-del:hover[b-htu8jz63jx] { background: var(--rme-err); }
.rme-hand-foot[b-htu8jz63jx] { margin-top: 12px; }


.rme-overlay[b-htu8jz63jx] { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; justify-content: flex-end; z-index: 1200; backdrop-filter: blur(2px); }
.rme-drawer[b-htu8jz63jx] { width: 560px; max-width: 94vw; background: var(--rme-sf2); height: 100%; overflow-y: auto; display: flex; flex-direction: column; box-shadow: var(--shadow-2xl); }
.rme-dr-hd[b-htu8jz63jx] { background: #0f172a; padding: 18px 24px 16px; position: sticky; top: 0; z-index: 5; }
.rme-dr-hd-top[b-htu8jz63jx] { display: flex; align-items: flex-start; justify-content: space-between; }
.rme-dr-hd-top h2[b-htu8jz63jx] { font-size: 17px; font-weight: 700; color: #e2e8f0; margin: 0; }
.rme-dr-hd-top h2 small[b-htu8jz63jx] { display: block; font-size: 12px; font-weight: 400; color: #7b90ae; margin-top: 3px; }
.rme-dr-close[b-htu8jz63jx] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #e2e8f0; cursor: pointer; }
.rme-dr-hd-badge[b-htu8jz63jx] { margin-top: 12px; }
.rme-dr-body[b-htu8jz63jx] { padding: 18px 22px 30px; flex: 1; }
.rme-dr-note[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-ink); border: 1px solid var(--rme-warn); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.rme-dr-note b[b-htu8jz63jx] { color: var(--rme-warn); }
.rme-dr-grp-ttl[b-htu8jz63jx] { font-size: 12.5px; font-weight: 700; color: var(--rme-ink-f); display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; }
.rme-dr-grp-ttl:first-of-type[b-htu8jz63jx] { margin-top: 0; }
.rme-dr-grp-ttl i[b-htu8jz63jx] { color: var(--rme-ac); }
.rme-f-row[b-htu8jz63jx] { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rme-bdr); text-align: center; }
.rme-f-row:last-child[b-htu8jz63jx] { border-bottom: none; }
.rme-f-lbl[b-htu8jz63jx] { font-size: 12px; color: var(--rme-ink-s); font-weight: 500; }
.rme-f-val[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--rme-ink); word-break: break-word; }


.rme-cmp[b-htu8jz63jx] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rme-cmp-box[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); border-radius: 8px; padding: 10px 12px; background: var(--rme-sf); }
.rme-cmp-box .k[b-htu8jz63jx] { font-size: 10.5px; color: var(--rme-ink-s); font-weight: 600; text-transform: uppercase; }
.rme-cmp-box .v[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 800; margin-top: 3px; color: var(--rme-ink); }
.rme-cmp-box .src[b-htu8jz63jx] { font-size: 10px; color: var(--rme-ink-f); margin-top: 2px; }
.rme-delta[b-htu8jz63jx] { margin-top: 9px; padding: 8px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rme-delta.ok[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-delta.warn[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }

.rme-opt[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rme-bdr); border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; }
.rme-opt:hover[b-htu8jz63jx] { border-color: var(--rme-ac); }
.rme-opt.sel[b-htu8jz63jx] { border-color: var(--rme-ac); background: var(--rme-ac-b); }
.rme-opt .rd[b-htu8jz63jx] { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rme-bdr); flex-shrink: 0; }
.rme-opt.sel .rd[b-htu8jz63jx] { border-color: var(--rme-ac); background: radial-gradient(var(--rme-ac) 40%, transparent 45%); }
.rme-opt .ov[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 800; font-size: 14px; margin-left: auto; }
.rme-opt .ol[b-htu8jz63jx] { font-size: 12px; font-weight: 600; text-align: left; }
.rme-opt .os[b-htu8jz63jx] { font-size: 10.5px; color: var(--rme-ink-f); text-align: left; }
.rme-opt-manual[b-htu8jz63jx] { border-style: dashed; }

.rme-manual-in[b-htu8jz63jx] { margin-top: 4px; margin-bottom: 10px; padding-left: 26px; display: flex; flex-direction: column; gap: 9px; }
.rme-manual-in .row[b-htu8jz63jx] { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; }
.rme-manual-in input[type=number][b-htu8jz63jx] { width: 130px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; border: 1px solid var(--rme-bdr); border-radius: 7px; padding: 6px 10px; text-align: right; }
.rme-manual-in .unit[b-htu8jz63jx] { font-size: 12px; font-weight: 600; color: var(--rme-ink-f); white-space: nowrap; }

.rme-pick-list[b-htu8jz63jx] { margin: 4px 0 10px 26px; border: 1px solid var(--rme-bdr); border-radius: 8px; max-height: 168px; overflow-y: auto; background: var(--rme-sf); }
.rme-pick-item[b-htu8jz63jx] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--rme-bdr); }
.rme-pick-item:last-child[b-htu8jz63jx] { border-bottom: none; }
.rme-pick-item:hover[b-htu8jz63jx] { background: var(--rme-sf2); }
.rme-pick-item.sel[b-htu8jz63jx] { background: var(--rme-ac-b); }
.rme-pick-item .pc[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--rme-ink); }
.rme-pick-item .qty[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; color: var(--rme-ink-s); }
.rme-pick-item .plate[b-htu8jz63jx] { flex-basis: 100%; order: 3; color: var(--rme-ink-f); font-weight: 600; }
.rme-pick-empty[b-htu8jz63jx] { padding: 12px; text-align: center; font-size: 11.5px; color: var(--rme-ink-f); }

.rme-wl-search[b-htu8jz63jx] { margin: 4px 0 10px 26px; }
.rme-wl-search input[b-htu8jz63jx], .rme-addtrip-input[b-htu8jz63jx] { width: 100%; border: 1px solid var(--rme-bdr); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 8px; }

.rme-flags-dr[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 6px; }
.rme-fdr[b-htu8jz63jx] { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 8px 11px; border-radius: 7px; }
.rme-fdr.w[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }

.rme-dr-foot[b-htu8jz63jx] { padding: 14px 18px; border-top: 1px solid var(--rme-bdr); display: flex; gap: 10px; align-items: center; justify-content: flex-end; background: var(--rme-sf2); position: sticky; bottom: 0; }


.rme-candata-filter[b-htu8jz63jx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rme-candata-filter input[type=text][b-htu8jz63jx] { font-size: 12.5px; border: 1.5px solid var(--rme-bdr); border-radius: 7px; padding: 7px 10px; background: var(--rme-sf2); }

.rme-match-list[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 8px; }
.rme-match-row[b-htu8jz63jx] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    border: 1px solid var(--rme-bdr); border-radius: 9px; padding: 10px 12px; background: var(--rme-sf); transition: border-color .12s, box-shadow .12s; }
.rme-match-row:hover[b-htu8jz63jx] { border-color: var(--rme-ac); box-shadow: var(--card-shadow); }
.rme-match-row.matched[b-htu8jz63jx] { border-color: var(--rme-ok); background: var(--rme-ok-b); }
.rme-match-info[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rme-match-info .mono[b-htu8jz63jx] { font-size: 12.5px; }
.rme-match-info .plate[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--rme-ink-s); background: var(--rme-sf2); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.rme-match-pick[b-htu8jz63jx] { min-width: 220px; flex-shrink: 0; }

/* ===== Thiết kế lại: thanh lọc rút gọn, tiến độ, nguồn dữ liệu, hành động trên hàng tab ===== */

/* Nút mở bộ lọc nâng cao */
.rme-morefilter[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rme-bdr);
    background: #fff; color: var(--rme-ink-s); border-radius: 7px; padding: 5px 11px; font-size: 12.5px;
    font-weight: 600; cursor: pointer; white-space: nowrap; }
.rme-morefilter:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); }
.rme-morefilter.on[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); background: var(--rme-ac-b); }
.rme-morefilter-cnt[b-htu8jz63jx] { background: var(--rme-ac); color: #fff; border-radius: 9px; padding: 0 6px;
    font-size: 10.5px; font-weight: 700; line-height: 16px; }

/* Dialog bộ lọc nâng cao */
.rme-advf[b-htu8jz63jx] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1300;
    width: min(920px, 94vw); max-height: 86vh; background: #fff; border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28); display: flex; flex-direction: column; overflow: hidden; }
.rme-advf-hd[b-htu8jz63jx] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
    border-bottom: 1px solid var(--rme-bdr); background: var(--rme-sf2); }
.rme-advf-hd h2[b-htu8jz63jx] { margin: 0; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rme-advf-body[b-htu8jz63jx] { flex: 1; overflow-y: auto; padding: 16px 18px; }
.rme-advf-grid[b-htu8jz63jx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 16px; }
.rme-advf-f[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rme-advf-f > span[b-htu8jz63jx] { font-size: 11px; font-weight: 700; color: var(--rme-ink-f);
    text-transform: uppercase; letter-spacing: .05em; }
.rme-advf-foot[b-htu8jz63jx] { display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--rme-bdr); background: var(--rme-sf2); }

/* Hành động hàng loạt nằm sát phải trên hàng tab */
.rme-tabs-actions[b-htu8jz63jx] { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.rme-btn-clearsel[b-htu8jz63jx] { font-size: 12px; }

/* Cột tiến độ WL / Phiếu */
.rme-prog[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 4px; min-width: 118px; }
.rme-prow[b-htu8jz63jx] { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--rme-ink-f); }
.rme-plbl[b-htu8jz63jx] { width: 34px; flex-shrink: 0; font-weight: 700; }
.rme-pbar[b-htu8jz63jx] { flex: 1; height: 5px; background: var(--rme-neu-b); border-radius: 3px; overflow: hidden; min-width: 36px; }
.rme-pfill[b-htu8jz63jx] { display: block; height: 100%; border-radius: 3px; background: var(--rme-ok); }
.rme-pfill.part[b-htu8jz63jx] { background: var(--rme-warn); }
.rme-pnum[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--rme-ink);
    min-width: 30px; text-align: right; flex-shrink: 0; }

/* Nhãn nguồn dữ liệu của lịch */
.rme-ds[b-htu8jz63jx] { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
    border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.rme-ds-rt[b-htu8jz63jx] { background: #ddf0f0; color: #0a6e6e; }
.rme-ds-nrt[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }
.rme-ds-unk[b-htu8jz63jx] { background: var(--rme-neu-b); color: var(--rme-neu); }

/* Chip nguồn cân: thêm biến thể WL + hiện trường */
.rme-schip.ht[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }

/* Dòng chuyến: gợi ý nháy đúp để mở chốt */
tr.rme-subrow[b-htu8jz63jx] { cursor: pointer; }

/* ===== KPI hàng đợi hành động (mỗi lịch thuộc đúng 1 hàng đợi) ===== */
.rme-pipeline[b-htu8jz63jx] { display: flex; gap: 12px; margin-top: 2px; }
.rme-pipeline .rme-step[b-htu8jz63jx] { --qc: var(--rme-ac); flex: 1; min-width: 0; appearance: none; font: inherit; text-align: left; background: var(--rme-sf);
    border: 1.5px solid var(--rme-bdr); border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: background .12s, border-color .12s; }
.rme-pipeline .rme-step:hover[b-htu8jz63jx] { background: #fafbfd; }
.rme-pipeline .rme-step.on[b-htu8jz63jx] { background: var(--rme-sf2); box-shadow: inset 0 -3px 0 var(--qc); }
.rme-pipeline .rme-step-num[b-htu8jz63jx] { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--qc); }
.rme-pipeline .rme-step-lbl[b-htu8jz63jx] { font-size: 12.5px; font-weight: 700; color: var(--qc); }
.rme-pipeline .rme-step-sub[b-htu8jz63jx] { font-size: 11.5px; color: var(--rme-ink-f); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rme-pipeline .q-act[b-htu8jz63jx] { --qc: var(--rme-err); }
.rme-pipeline .q-wait[b-htu8jz63jx] { --qc: var(--rme-warn); }
.rme-pipeline .q-ready[b-htu8jz63jx] { --qc: #2563c9; }
.rme-pipeline .q-done[b-htu8jz63jx] { --qc: var(--rme-ok); }

.rme-contextline[b-htu8jz63jx] { font-size: 12px; color: var(--rme-ink-f); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 0 2px; }
.rme-contextline b[b-htu8jz63jx] { color: var(--rme-ink); font-weight: 600; }
.rme-contextline b.c-err[b-htu8jz63jx] { color: var(--rme-err); }
.rme-contextline .dot[b-htu8jz63jx] { color: #cbd2dd; }
.rme-qchip[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 14px; padding: 3px 10px;
    background: #eaf1fc; color: #2563c9; }
.rme-qchip b[b-htu8jz63jx] { color: #2563c9; }
.rme-qchip-x[b-htu8jz63jx] { cursor: pointer; font-weight: 700; }

/* ===== Cột theo mẫu mới ===== */
.rme-tbl .rme-hint[b-htu8jz63jx] { font-size: 11px; color: var(--rme-ink-f); font-weight: 400; margin-top: 2px; text-align: inherit; }
.rme-tbl .rme-hint.diff-ok[b-htu8jz63jx] { color: var(--rme-ok); font-weight: 600; }
.rme-tbl .rme-hint.diff-warn[b-htu8jz63jx] { color: var(--rme-err); font-weight: 600; }
.rme-tbl .num .rme-hint[b-htu8jz63jx] { text-align: center; }
.rme-aiflag[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--rme-err); background: var(--rme-err-b);
    border: 1px solid #f5c9c2; border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.rme-aiflag:hover[b-htu8jz63jx] { background: #fbdcd7; }
.rme-ds-ht[b-htu8jz63jx] { background: #ecfdf5; color: #047857; }
.rme-tbl td.rme-wide[b-htu8jz63jx] { min-width: 220px; white-space: normal; line-height: 1.3; }
.rme-tbl td.rme-wide .rme-hint[b-htu8jz63jx] { white-space: normal; }
.rme-tbprog[b-htu8jz63jx] { font-size: 13px; font-weight: 700; white-space: nowrap; }
.rme-board-hd-actions[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; }
.rme-seg[b-htu8jz63jx] { display: inline-flex; background: var(--rme-sf2); border-radius: 8px; padding: 3px; gap: 2px; }
.rme-seg button[b-htu8jz63jx] { border: none; background: transparent; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--rme-ink-f); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rme-seg button.on[b-htu8jz63jx] { background: #fff; color: var(--rme-ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.haohut.warn[b-htu8jz63jx] { color: var(--rme-err); font-weight: 700; }
.rme-aiflags[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; cursor: pointer; }
.rme-subtabs[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; background: var(--rme-sf2); border: 1px solid var(--rme-bdr); border-radius: 9px; padding: 3px; }
.rme-subtab[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--rme-ink-s); font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.rme-subtab i[b-htu8jz63jx] { font-size: 11.5px; opacity: .75; }
.rme-subtab:hover[b-htu8jz63jx] { color: var(--rme-ink); background: rgba(16,24,40,.04); }
.rme-subtab.on[b-htu8jz63jx] { background: var(--rme-ac); color: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.18); }
.rme-subtab.on i[b-htu8jz63jx] { opacity: 1; }
.rme-subtab-cnt[b-htu8jz63jx] { display: inline-block; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 9px; background: var(--rme-ac-b); color: var(--rme-ac); font-size: 11px; font-weight: 700; line-height: 1.4; }
.rme-subtab.on .rme-subtab-cnt[b-htu8jz63jx] { background: rgba(255,255,255,.22); color: #fff; }
.rme-hd-sep[b-htu8jz63jx] { width: 1px; height: 22px; background: var(--rme-bdr); }

.ndm-backdrop[b-htu8jz63jx]{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);z-index:2000;display:flex;align-items:center;justify-content:center;animation:ndmFade-b-htu8jz63jx .15s ease}
.ndm-card[b-htu8jz63jx]{background:#fff;border-radius:14px;width:min(720px,calc(100vw - 32px));max-height:82vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(2,6,23,.35);animation:ndmUp-b-htu8jz63jx .18s ease;overflow:hidden}
.ndm-hd[b-htu8jz63jx]{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #eef2f7}
.ndm-hd-ic[b-htu8jz63jx]{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.ndm-hd-tt[b-htu8jz63jx]{flex:1;min-width:0}
.ndm-hd-tt h3[b-htu8jz63jx]{margin:0;font-size:15.5px;color:#0f172a}
.ndm-hd-tt span[b-htu8jz63jx]{font-size:12px;color:#64748b;display:block;margin-top:2px}
.ndm-x[b-htu8jz63jx]{border:none;background:#f1f5f9;color:#64748b;width:30px;height:30px;border-radius:8px;cursor:pointer;flex:none}
.ndm-x:hover[b-htu8jz63jx]{background:#e2e8f0;color:#0f172a}
.ndm-body[b-htu8jz63jx]{padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.ndm-item[b-htu8jz63jx]{border:1px solid #e5eaf1;border-radius:12px;padding:12px}
.ndm-item-lb[b-htu8jz63jx]{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ndm-item-type[b-htu8jz63jx]{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:99px}
.ndm-item-type.ds[b-htu8jz63jx]{background:#eff6ff;color:#1d4ed8}
.ndm-item-type.dd[b-htu8jz63jx]{background:#f0fdf4;color:#15803d}
.ndm-item-name[b-htu8jz63jx]{font-weight:600;font-size:13px;color:#0f172a}
.ndm-opts[b-htu8jz63jx]{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ndm-opt[b-htu8jz63jx]{border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;background:#fafbfc;user-select:none}
.ndm-opt:hover[b-htu8jz63jx]{border-color:#94a3b8}
.ndm-opt.sel[b-htu8jz63jx]{border-color:#d97706;background:#fffbeb;box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.ndm-opt-hd[b-htu8jz63jx]{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;font-weight:600}
.ndm-opt.sel .ndm-opt-hd[b-htu8jz63jx]{color:#b45309}
.ndm-check[b-htu8jz63jx]{margin-left:auto;color:#d97706}
.ndm-opt-qty[b-htu8jz63jx]{font-size:19px;font-weight:700;color:#0f172a;margin-top:4px;font-variant-numeric:tabular-nums}
.ndm-opt-qty small[b-htu8jz63jx]{font-size:11px;color:#94a3b8;font-weight:600}
.ndm-auto[b-htu8jz63jx]{font-size:12px;color:#64748b;background:#f8fafc;border:1px dashed #dbe3ec;border-radius:10px;padding:8px 12px}
.ndm-ft[b-htu8jz63jx]{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid #eef2f7;background:#fbfcfe}
.ndm-ft-sum[b-htu8jz63jx]{flex:1;font-size:12.5px;color:#475569}
@keyframes ndmFade-b-htu8jz63jx{from{opacity:0}to{opacity:1}}
@keyframes ndmUp-b-htu8jz63jx{from{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}

.ndm-bulk[b-htu8jz63jx]{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f8fafc;border:1px solid #e5eaf1;border-radius:10px}
.ndm-bulk-lb[b-htu8jz63jx]{font-size:12px;color:#64748b;font-weight:600}
.ndm-bulk-btn[b-htu8jz63jx]{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2e8f0;background:#fff;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.ndm-bulk-btn:hover[b-htu8jz63jx]{border-color:#94a3b8}
.ndm-bulk-btn.sel[b-htu8jz63jx]{border-color:#d97706;background:#fffbeb;color:#b45309}

.rme-subtab-sep[b-htu8jz63jx]{width:1px;height:18px;background:#cbd5e1;margin:0 8px;display:inline-block;vertical-align:middle}

.rme-pipeline .q-lichdone[b-htu8jz63jx] { --qc: #7c3aed; }


.rme-kpi-split[b-htu8jz63jx] { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.rme-kpi-group[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.rme-kpi-group:first-child[b-htu8jz63jx] { grid-column: span 4; }
.rme-kpi-group-review[b-htu8jz63jx] { grid-column: span 6; }
.rme-kpi-group .rme-pipeline[b-htu8jz63jx] { display: grid; gap: 12px; flex: 1; }
.rme-kpi-group:first-child .rme-pipeline[b-htu8jz63jx] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rme-kpi-group-review .rme-pipeline[b-htu8jz63jx] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rme-kpi-group-ttl[b-htu8jz63jx] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rme-ink-s); display: flex; align-items: center; gap: 6px; }
.rme-kpi-group-ttl i[b-htu8jz63jx] { color: var(--rme-ink-f); }
.rme-kpi-group-sub[b-htu8jz63jx] { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--rme-ink-f); }
.rme-kpi-group-review[b-htu8jz63jx]::before { content: ""; position: absolute; left: -6px; top: 0; bottom: 0; border-left: 1px dashed var(--rme-bdr); }
.rme-pipeline-review .rme-step-lbl[b-htu8jz63jx] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rme-pipeline-review .rme-step-lbl i[b-htu8jz63jx] { font-size: 11px; margin-right: 3px; opacity: .85; }
.rme-pipeline .q-neutral[b-htu8jz63jx] { --qc: var(--rme-ink-s); }
@media (max-width: 1400px) {
    .rme-kpi-group:first-child[b-htu8jz63jx], .rme-kpi-group-review[b-htu8jz63jx] { grid-column: span 10; }
    .rme-kpi-group-review[b-htu8jz63jx]::before { display: none; }
    .rme-kpi-group-review[b-htu8jz63jx] { border-top: 1px dashed var(--rme-bdr); padding-top: 10px; }
}

.rme-chotlich-btn[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    border: 1.5px solid var(--rme-ok); color: var(--rme-ok); background: var(--rme-ok-b); border-radius: 7px; padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s; }
.rme-chotlich-btn:hover:not(:disabled)[b-htu8jz63jx] { background: var(--rme-ok); color: #fff; }
.rme-chotlich-btn:disabled[b-htu8jz63jx] { border-color: var(--rme-bdr); color: var(--rme-ink-f); background: var(--rme-sf2); cursor: not-allowed; }

.rme-kpi-split.single .rme-kpi-group:first-child[b-htu8jz63jx] { grid-column: span 10; }
.rme-kpi-group-note[b-htu8jz63jx] { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--rme-ink-f); }

.rme-advf-err[b-htu8jz63jx] { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rme-err); background: var(--rme-err-b); border-radius: 10px; color: var(--rme-ink); font-size: 13px; }
.rme-advf-err > i[b-htu8jz63jx] { color: var(--rme-err); font-size: 18px; margin-top: 2px; }
.rme-advf-err-msg[b-htu8jz63jx] { margin-top: 4px; font-size: 12px; color: var(--rme-ink-s); word-break: break-word; }

.rme-drawer.rme-addtrip-wide[b-htu8jz63jx] { width: 1200px; max-width: 97vw; }
.rme-addtrip-rule[b-htu8jz63jx] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: #a9b8cf; }
.rme-addtrip-rule i[b-htu8jz63jx] { color: #f0a37a; margin-right: 4px; }
.rme-addtrip-rule b[b-htu8jz63jx] { color: #fff; }
.rme-addtrip-rule-hint[b-htu8jz63jx] { flex-basis: 100%; color: #7b90ae; font-size: 11.5px; }
.rme-addtrip-top .rme-addtrip-input[b-htu8jz63jx] { max-width: 420px; }
.rme-addtrip-cols[b-htu8jz63jx] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 6px; }
.rme-addtrip-col[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); border-radius: 10px; background: var(--rme-sf); padding: 10px; min-width: 0; }
.rme-addtrip-col .rme-addtrip-input[b-htu8jz63jx] { margin-bottom: 8px; }
.rme-addtrip-col .rme-pick-list[b-htu8jz63jx] { margin: 0; }
.rme-addtrip-col-hd[b-htu8jz63jx] { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--rme-ink-f); margin-bottom: 8px; }
.rme-addtrip-col-hd i[b-htu8jz63jx] { color: var(--rme-ac); margin-right: 4px; }
.rme-addtrip-col-hd small[b-htu8jz63jx] { margin-left: auto; font-weight: 600; color: var(--rme-ink-f); }
.rme-addtrip-toggle[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; cursor: pointer; color: var(--rme-ink-s); }
.rme-pick-list.tall[b-htu8jz63jx] { max-height: 26vh; }
.rme-pick-item.rme-addtrip-dest.best[b-htu8jz63jx] { background: var(--rme-ok-b); border-left: 3px solid var(--rme-ok); }
.rme-pick-item.rme-addtrip-dest.off[b-htu8jz63jx] { opacity: .62; }
.rme-pick-item.rme-addtrip-dest.off:hover[b-htu8jz63jx] { opacity: 1; }
.rme-addtrip-meta[b-htu8jz63jx] { flex-basis: 100%; order: 4; display: flex; flex-wrap: wrap; gap: 6px; }
.rme-addtrip-badge[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.rme-addtrip-badge.ok[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-addtrip-badge.warn[b-htu8jz63jx] { background: var(--rme-warn-b); color: var(--rme-warn); }
.rme-addtrip-badge.bad[b-htu8jz63jx] { background: #fef2f2; color: #dc2626; }
.rme-addtrip-badge.mute[b-htu8jz63jx] { background: var(--rme-sf2); color: var(--rme-ink-f); border: 1px solid var(--rme-bdr); }
.rme-addtrip-cnt[b-htu8jz63jx] { background: var(--rme-ac-b); color: var(--rme-ac); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.rme-addtrip-pairs[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); border-radius: 10px; background: var(--rme-sf); overflow-y: auto; max-height: 40vh; }
.rme-addtrip-pair[b-htu8jz63jx] { display: grid; grid-template-columns: 30px minmax(0,1fr) 22px minmax(0,1fr) auto 30px; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rme-bdr); font-size: 13px; }
.rme-addtrip-pair:last-child[b-htu8jz63jx] { border-bottom: none; }
.rme-addtrip-pair.warn[b-htu8jz63jx] { background: var(--rme-warn-b); }
.rme-addtrip-pair .idx[b-htu8jz63jx] { width: 24px; height: 24px; border-radius: 50%; background: var(--rme-ac-b); color: var(--rme-ac); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
.rme-addtrip-pair .side[b-htu8jz63jx] { display: flex; flex-direction: column; min-width: 0; }
.rme-addtrip-pair .side b[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--rme-ink); }
.rme-addtrip-pair .side small[b-htu8jz63jx] { color: var(--rme-ink-f); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rme-addtrip-pair .arr[b-htu8jz63jx] { color: var(--rme-ink-f); }
.rme-addtrip-pair .meta[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.rme-addtrip-pair .meta .rme-addtrip-badge[b-htu8jz63jx] { font-size: 11.5px; padding: 2px 9px; line-height: 18px; }
.rme-addtrip-pair .err[b-htu8jz63jx] { grid-column: 2 / 6; color: #dc2626; font-size: 11.5px; font-weight: 600; }
.rme-addtrip-pair .rm[b-htu8jz63jx] { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--rme-bdr); background: var(--rme-sf2); color: var(--rme-ink-f); cursor: pointer; }
.rme-addtrip-pair .rm:hover[b-htu8jz63jx] { color: #dc2626; border-color: #dc2626; }
@media (max-width: 900px) { .rme-addtrip-cols[b-htu8jz63jx] { grid-template-columns: 1fr; } }

/* ===== CR-002: drawer Chốt số liệu chuyến — layout 2 cột Lấy | Giao + spine hao hụt ===== */
.rme-drawer.rme-drawer-tb[b-htu8jz63jx] { width: 980px; max-width: 97vw; }
.rme-dr-strip[b-htu8jz63jx] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--rme-bdr); border-radius: 10px; background: var(--rme-sf); overflow: hidden; margin-bottom: 16px; }
.rme-dr-strip-cell[b-htu8jz63jx] { padding: 10px 14px; border-right: 1px solid var(--rme-bdr); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rme-dr-strip-cell:last-child[b-htu8jz63jx] { border-right: none; }
.rme-dr-strip-cell small[b-htu8jz63jx] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rme-ink-f); }
.rme-dr-strip-cell b[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--rme-ink); word-break: break-word; }
.rme-dr-strip-cell b.muted[b-htu8jz63jx] { font-family: inherit; font-weight: 500; color: var(--rme-ink-f); }
.rme-dr2-cols[b-htu8jz63jx] { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: start; }
.rme-dr2-col[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); border-radius: 10px; background: var(--rme-sf); padding: 0 12px 12px; min-width: 0; }
.rme-dr2-col .rme-f-row[b-htu8jz63jx] { grid-template-columns: 110px 1fr; text-align: left; }
.rme-dr2-col-hd[b-htu8jz63jx] { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: 0 -12px 6px; padding: 9px 12px; border-radius: 10px 10px 0 0; }
.rme-dr2-col-hd.lay[b-htu8jz63jx] { background: #eff6ff; color: #1d4ed8; }
.rme-dr2-col-hd.giao[b-htu8jz63jx] { background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-dr2-col-hd b[b-htu8jz63jx] { font-size: 11.5px; }
.rme-dr2-kl[b-htu8jz63jx] { display: flex; align-items: baseline; gap: 7px; padding: 9px 0; border-bottom: 1px solid var(--rme-bdr); margin-bottom: 4px; }
.rme-dr2-kl span[b-htu8jz63jx] { font-size: 12px; color: var(--rme-ink-s); font-weight: 600; flex: 1; }
.rme-dr2-kl b[b-htu8jz63jx] { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 800; color: var(--rme-ink); }
.rme-dr2-kl small[b-htu8jz63jx] { font-size: 11px; color: var(--rme-ink-f); font-weight: 600; }
.rme-dr2-spine[b-htu8jz63jx] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; align-self: center; color: var(--rme-ink-f); padding: 12px 0; }
.rme-dr2-spine-box[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); border-radius: 10px; background: var(--rme-sf); padding: 10px 14px; text-align: center; min-width: 86px; }
.rme-dr2-spine-box small[b-htu8jz63jx] { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rme-ink-f); }
.rme-dr2-spine-box b[b-htu8jz63jx] { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 800; margin-top: 2px; }
.rme-dr2-spine-box span[b-htu8jz63jx] { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 700; margin-top: 1px; }
.rme-dr2-spine-box.ok[b-htu8jz63jx] { border-color: var(--rme-ok); background: var(--rme-ok-b); color: var(--rme-ok); }
.rme-dr2-spine-box.warn[b-htu8jz63jx] { border-color: var(--rme-warn); background: var(--rme-warn-b); color: var(--rme-warn); }
.rme-dr2-spine-box.part[b-htu8jz63jx] { border-color: #ea580c; background: #fff7ed; color: #ea580c; }
.rme-dr2-spine-box.bad[b-htu8jz63jx] { border-color: var(--rme-err); background: var(--rme-err-b); color: var(--rme-err); }
.rme-delta.part[b-htu8jz63jx] { background: #fff7ed; color: #ea580c; }
.rme-delta.bad[b-htu8jz63jx] { background: var(--rme-err-b); color: var(--rme-err); }
.rme-loss-reason[b-htu8jz63jx] { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--rme-warn); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; font-family: inherit; resize: vertical; background: var(--rme-sf); }
.rme-pick-item.off[b-htu8jz63jx] { opacity: .55; cursor: not-allowed; }
.rme-pick-item.off:hover[b-htu8jz63jx] { background: inherit; }
@media (max-width: 760px) {
    .rme-drawer.rme-drawer-tb[b-htu8jz63jx] { width: 100%; max-width: 100vw; }
    .rme-dr2-cols[b-htu8jz63jx] { grid-template-columns: 1fr; }
    .rme-dr2-spine[b-htu8jz63jx] { flex-direction: row; padding: 0; }
    .rme-dr2-spine i[b-htu8jz63jx] { transform: rotate(90deg); }
}

/* ===== CR-003: drawer Thêm chuyến tăng bo — toolbar lọc ngày cân + range KL ===== */
.rme-addtrip-toolbar[b-htu8jz63jx] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.rme-addtrip-tool[b-htu8jz63jx] { display: flex; flex-direction: column; gap: 3px; }
.rme-addtrip-tool small[b-htu8jz63jx] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rme-ink-f); }
.rme-addtrip-tool .rme-addtrip-input[b-htu8jz63jx] { margin-bottom: 0; width: 170px; }
.rme-addtrip-tool .rme-addtrip-input.dt[b-htu8jz63jx] { width: 140px; }
.rme-addtrip-tool .rme-addtrip-input.kl[b-htu8jz63jx] { width: 110px; font-family: 'IBM Plex Mono', monospace; text-align: right; }
.rme-addtrip-datechips[b-htu8jz63jx] { display: flex; gap: 6px; padding-bottom: 2px; }
.rme-addtrip-chip[b-htu8jz63jx] { border: 1px solid var(--rme-bdr); background: var(--rme-sf); color: var(--rme-ink-s); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rme-addtrip-chip:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); }
.rme-addtrip-chip.on[b-htu8jz63jx] { background: var(--rme-ac); border-color: var(--rme-ac); color: #fff; }

/* ===== CR-004: filter bar — nhóm [Lượng] + chip preset ===== */
.rme-qty-filter[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rme-bdr); border-radius: 7px; padding: 2px 8px; background: var(--rme-sf2); }
.rme-qty-filter.on[b-htu8jz63jx] { border-color: var(--rme-ac); background: var(--rme-ac-b); }
.rme-qty-lbl[b-htu8jz63jx] { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--rme-ink-s); }
.rme-qty-filter.on .rme-qty-lbl[b-htu8jz63jx] { color: var(--rme-ac); }
.rme-filter .rme-qty-in[b-htu8jz63jx] { min-width: 0; width: 88px; border: 1px solid var(--rme-bdr); border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: 'IBM Plex Mono', monospace; text-align: right; background: var(--rme-sf); }
.rme-filter .rme-qty-in:focus[b-htu8jz63jx] { border-color: var(--rme-ac); }
.rme-qty-filter[b-htu8jz63jx]  .rz-dropdown { border: 1px solid var(--rme-bdr); border-radius: 6px; background: var(--rme-sf); }
.rme-qty-arrow[b-htu8jz63jx] { color: var(--rme-ink-f); font-size: 12px; }
.rme-qty-presets[b-htu8jz63jx] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: -4px 0 12px 2px; }
.rme-qty-presets .lbl[b-htu8jz63jx] { font-size: 11.5px; font-weight: 700; color: var(--rme-ink-f); }
.rme-qty-chip[b-htu8jz63jx] { border: 1.5px solid var(--rme-bdr); background: var(--rme-sf); color: var(--rme-ink-s); border-radius: 999px; padding: 4px 13px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rme-qty-chip:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); }
.rme-qty-chip.on[b-htu8jz63jx] { background: var(--rme-ac); border-color: var(--rme-ac); color: #fff; }


/* ===== Che do nhung trong Bang lam hang: dong bo token voi .cb ===== */
.rme-root.rme-embedded[b-htu8jz63jx] {
    zoom: 1;
    height: calc(100vh - 104px);
    padding: 0;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 12.5px;
    --rme-ac: #0F4C81; --rme-ac-b: #E9F0F8;
    --rme-bdr: #DDE3EA;
    --rme-ink: #18212E; --rme-ink-s: #3E4A58; --rme-ink-f: #6B7683;
    --rme-sf: #fff; --rme-sf2: #FAFBFC;
    --rme-manual: #0F4C81; --rme-manual-b: #E9F0F8;
    --card-shadow: none;
}
.rme-root.rme-embedded .rme-panel[b-htu8jz63jx] { border-radius: 6px; box-shadow: none; margin-bottom: 8px; }
.rme-root.rme-embedded .rme-panel-hd[b-htu8jz63jx] { padding: 6px 12px; }
.rme-root.rme-embedded .rme-panel-ttl[b-htu8jz63jx] { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rme-ink-f); }
.rme-root.rme-embedded .rme-panel-ttl .rme-panel-mini[b-htu8jz63jx] { text-transform: none; letter-spacing: 0; font-size: 11px; }
.rme-root.rme-embedded .rme-panel-body[b-htu8jz63jx] { padding: 6px 12px 8px; gap: 6px; }
.rme-root.rme-embedded .rme-panel-body .rme-filter[b-htu8jz63jx] { row-gap: 6px; column-gap: 6px; }
.rme-root.rme-embedded .rme-filter input[b-htu8jz63jx], .rme-root.rme-embedded .rme-filter select[b-htu8jz63jx] { border-width: 1px; border-radius: 6px; font-size: 11.5px; height: 30px; }
.rme-root.rme-embedded .rme-tabs[b-htu8jz63jx] { background: var(--rme-sf); border: 1px solid var(--rme-bdr); border-radius: 6px; padding: 6px 12px; margin-bottom: 8px; gap: 8px; align-items: center; }
.rme-root.rme-embedded .rme-tab-fixed[b-htu8jz63jx] { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--rme-ink); display: inline-flex; align-items: center; gap: 6px; }
.rme-root.rme-embedded .rme-tab-cnt[b-htu8jz63jx] { font-family: 'Consolas', ui-monospace, monospace; }
.rme-root.rme-embedded .rme-tabs-actions[b-htu8jz63jx] { padding-bottom: 0; gap: 6px; }
.rme-root.rme-embedded .rme-btn[b-htu8jz63jx], .rme-root.rme-embedded .rme-layout-button[b-htu8jz63jx], .rme-root.rme-embedded .rme-panel-toggle[b-htu8jz63jx] { border-radius: 6px; padding: 5px 11px; font-size: 11.5px; font-weight: 500; height: 30px; box-sizing: border-box; }
.rme-root.rme-embedded .rme-layout-button[b-htu8jz63jx] { color: var(--rme-ink); background: var(--rme-sf); }
.rme-root.rme-embedded .rme-layout-button:hover[b-htu8jz63jx] { border-color: var(--rme-ac); color: var(--rme-ac); background: var(--rme-sf); }
.rme-root.rme-embedded .rme-board[b-htu8jz63jx] { border-radius: 10px; }
.rme-root.rme-embedded .rme-board-hd[b-htu8jz63jx] { padding: 8px 12px; border-bottom: 2px solid var(--rme-ink); }
.rme-root.rme-embedded .rme-board-hd-ttl[b-htu8jz63jx] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rme-ink-f); }
.rme-root.rme-embedded .rme-seg[b-htu8jz63jx] { border-radius: 6px; padding: 0; gap: 0; overflow: hidden; background: var(--rme-sf2); }
.rme-root.rme-embedded .rme-seg button[b-htu8jz63jx] { border-radius: 0; padding: 5px 10px; font-size: 11.5px; font-weight: 500; color: var(--rme-ink-f); }
.rme-root.rme-embedded .rme-seg button.on[b-htu8jz63jx] { background: var(--rme-ac); color: #fff; box-shadow: none; }
.rme-root.rme-embedded .rme-subtabs[b-htu8jz63jx] { border-radius: 6px; padding: 0; gap: 0; overflow: hidden; }
.rme-root.rme-embedded .rme-subtab[b-htu8jz63jx] { border-radius: 0; padding: 5px 10px; font-size: 11.5px; font-weight: 500; }
.rme-root.rme-embedded .rme-subtab.on[b-htu8jz63jx] { box-shadow: none; }
.rme-root.rme-embedded .rme-tbl-wrap[b-htu8jz63jx] { border: 0; border-radius: 0 0 10px 10px; box-shadow: none; }
.rme-root.rme-embedded .rme-tbl[b-htu8jz63jx] { font-size: 12px; }
.rme-root.rme-embedded .rme-tbl thead th[b-htu8jz63jx] { padding: 4px 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--rme-ink-f); background: var(--rme-sf2); border-bottom: 1px solid var(--rme-bdr); }
.rme-root.rme-embedded .rme-tbl tbody td[b-htu8jz63jx] { padding: 4px 8px; border-bottom: 1px solid #EEF1F5; }
.rme-root.rme-embedded .rme-tbl tbody tr:hover[b-htu8jz63jx], .rme-root.rme-embedded .rme-tbl tbody tr:hover .rme-sticky-col[b-htu8jz63jx] { background: #FFF7F6; }
.rme-root.rme-embedded .rme-pager[b-htu8jz63jx] { padding: 8px 12px; font-size: 11.5px; }
.rme-root.rme-embedded .rme-qchip[b-htu8jz63jx] { border-radius: 999px; font-size: 11px; padding: 2px 9px; }
@media (max-width: 640px) {
    .rme-root.rme-embedded[b-htu8jz63jx] { height: auto; overflow: visible; }
    .rme-root.rme-embedded .rme-board[b-htu8jz63jx] { overflow: visible; }
}

.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-textbox, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-datepicker .rz-inputtext, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-numeric {
    height: 30px; min-height: 30px; border: 1px solid #DDE3EA; border-radius: 6px; font-size: 11.5px; background: #fff; box-shadow: none; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-inputtext, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-label { height: 28px; line-height: 28px; font-size: 11.5px; padding: 0 8px; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-trigger { height: 28px; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-datepicker .rz-datepicker-trigger { height: 30px; min-height: 30px; border-radius: 0 6px 6px 0; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown:focus-within, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-textbox:focus, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-datepicker .rz-inputtext:focus { border-color: #0F4C81; box-shadow: none; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn { height: 30px; min-height: 30px; padding: 5px 11px; border-radius: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; box-shadow: none; transform: none !important; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-primary { background: #0F4C81; color: #fff; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-primary:hover:not(:disabled) { background: #0C3D68; box-shadow: none; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-secondary { background: #fff; color: #18212E; border: 1px solid #DDE3EA; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-secondary:hover:not(:disabled) { background: #FAFBFC; box-shadow: none; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-success { background: #256C39; color: #fff; }
.rme-root.rme-embedded[b-htu8jz63jx]  .etrans-btn-warning { background: #C0392B; color: #fff; }
.rme-root.rme-embedded .rme-morefilter[b-htu8jz63jx] { height: 30px; border-width: 1px; border-radius: 6px; font-size: 11.5px; font-weight: 500; padding: 5px 11px; }
.rme-root.rme-embedded .rme-qty-filter[b-htu8jz63jx] { border-width: 1px; border-radius: 6px; padding: 0 8px; height: 30px; }
.rme-root.rme-embedded .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown { height: 24px; min-height: 24px; }
.rme-root.rme-embedded .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown .rz-inputtext, .rme-root.rme-embedded .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-label { height: 22px; line-height: 22px; }
.rme-root.rme-embedded .rme-qty-in[b-htu8jz63jx] { height: 24px; border-radius: 6px; font-size: 11.5px; }
.rme-root.rme-embedded .rme-qty-presets[b-htu8jz63jx] { margin: 0 0 6px 2px; gap: 5px; }
.rme-root.rme-embedded .rme-qty-presets .lbl[b-htu8jz63jx] { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rme-root.rme-embedded .rme-qty-chip[b-htu8jz63jx] { border-width: 1px; height: 24px; padding: 0 8px; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; }
.rme-root.rme-embedded .rme-qty-chip.on[b-htu8jz63jx] { background: #18212E; border-color: #18212E; color: #fff; }
.rme-root.rme-embedded .rme-kpi-split[b-htu8jz63jx] { gap: 8px; }
.rme-root.rme-embedded .rme-kpi-group[b-htu8jz63jx] { gap: 4px; }
.rme-root.rme-embedded .rme-kpi-group .rme-pipeline[b-htu8jz63jx] { gap: 6px; }
.rme-root.rme-embedded .rme-kpi-group-ttl[b-htu8jz63jx] { font-size: 10px; letter-spacing: .05em; color: #6B7683; }
.rme-root.rme-embedded .rme-pipeline .rme-step[b-htu8jz63jx] { border: 1px solid #DDE3EA; border-radius: 6px; padding: 4px 10px; display: flex; align-items: baseline; gap: 8px; flex-direction: row-reverse; justify-content: flex-end; }
.rme-root.rme-embedded .rme-pipeline .rme-step.on[b-htu8jz63jx] { background: #18212E; border-color: #18212E; box-shadow: none; }
.rme-root.rme-embedded .rme-pipeline .rme-step.on .rme-step-num[b-htu8jz63jx], .rme-root.rme-embedded .rme-pipeline .rme-step.on .rme-step-lbl[b-htu8jz63jx] { color: #fff; }
.rme-root.rme-embedded .rme-pipeline .rme-step-num[b-htu8jz63jx] { font-family: 'Consolas', ui-monospace, monospace; font-size: 13px; line-height: 1.3; }
.rme-root.rme-embedded .rme-pipeline .rme-step-lbl[b-htu8jz63jx] { font-size: 11px; font-weight: 600; color: #18212E; }
.rme-root.rme-embedded .rme-pipeline .rme-step-sub[b-htu8jz63jx] { display: none; }
.rme-root.rme-embedded .rme-qchip[b-htu8jz63jx] { height: 24px; }

.rme-root.rme-embedded .rme-panel-body[b-htu8jz63jx] { gap: 0; padding: 4px 12px 8px; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 4px 0; }
.rme-root.rme-embedded .rme-erow + .rme-erow[b-htu8jz63jx] { border-top: 1px solid #F0F2F5; }
.rme-root.rme-embedded .rme-elb[b-htu8jz63jx] { flex: 0 0 68px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6B7683; }
.rme-root.rme-embedded .rme-eseg[b-htu8jz63jx] { display: flex; border: 1px solid #DDE3EA; border-radius: 6px; overflow: hidden; background: #FAFBFC; }
.rme-root.rme-embedded .rme-eseg button[b-htu8jz63jx] { border: 0; background: none; padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 500; color: #6B7683; cursor: pointer; white-space: nowrap; }
.rme-root.rme-embedded .rme-eseg button.on[b-htu8jz63jx] { background: #0F4C81; color: #fff; }
.rme-root.rme-embedded .rme-erange[b-htu8jz63jx] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6B7683; }
.rme-root.rme-embedded .rme-erange[b-htu8jz63jx]  .rz-datepicker { width: 118px; }
.rme-root.rme-embedded .rme-eright[b-htu8jz63jx] { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown { border-radius: 8px; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown .rz-inputtext, .rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-label { font-weight: 500; color: #18212E; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown.rz-state-focused, .rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown:has(.rz-dropdown-chip), .rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)) { border-color: #0F4C81; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-chip { background: #E9F0F8; color: #0F4C81; border-radius: 999px; font-size: 10.5px; }
.rme-root.rme-embedded .rme-erow[b-htu8jz63jx]  .rz-textbox { padding: 4px 10px; }
.rme-root.rme-embedded .rme-erow .rme-qty-filter[b-htu8jz63jx] { height: 30px; }
.rme-root.rme-embedded .rme-erow .rme-qty-chip[b-htu8jz63jx] { height: 24px; }
.rme-root.rme-embedded .rme-kpi-split[b-htu8jz63jx] { margin-top: 6px; padding-top: 6px; border-top: 1px solid #F0F2F5; }
.rme-root.rme-embedded .rme-contextline[b-htu8jz63jx] { font-size: 11px; color: #6B7683; }
@media (max-width: 640px) {
    .rme-root.rme-embedded .rme-elb[b-htu8jz63jx] { flex-basis: 100%; }
    .rme-root.rme-embedded .rme-eright[b-htu8jz63jx] { margin-left: 0; width: 100%; }
}

.rme-root.rme-embedded .rme-board-hd[b-htu8jz63jx] { flex-wrap: wrap; gap: 6px 10px; padding: 6px 12px; }
.rme-root.rme-embedded .rme-board-hd-actions[b-htu8jz63jx] { flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rme-root.rme-embedded .rme-board-hd-actions[b-htu8jz63jx]  .etrans-btn-wrapper { display: inline-flex; }

.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-multiselect { height: 30px !important; min-height: 30px; padding: 0 26px 0 8px !important; display: flex; align-items: center; box-sizing: border-box; overflow: hidden; position: relative; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-inputtext, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-label, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-chips-wrapper, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-value { height: auto !important; line-height: 1.3; padding: 0 !important; margin: 0; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-trigger { position: absolute; right: 0; top: 0; bottom: 0; width: 24px; height: auto !important; display: flex; align-items: center; justify-content: center; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-clear-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-textbox, .rme-root.rme-embedded[b-htu8jz63jx]  .rz-datepicker .rz-inputtext { height: 30px !important; padding: 0 8px !important; box-sizing: border-box; font-size: 11.5px; }
.rme-root.rme-embedded[b-htu8jz63jx]  .rz-datepicker .rz-datepicker-trigger { height: 30px !important; }
.rme-root.rme-embedded .rme-kpi-group-sub[b-htu8jz63jx] { display: none; }

.rme-root.rme-embedded .rme-erow .rme-qty-filter[b-htu8jz63jx] { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid #DDE3EA; border-radius: 6px; background: #fff; padding: 0; gap: 0; overflow: hidden; box-sizing: border-box; }
.rme-root.rme-embedded .rme-erow .rme-qty-filter.on[b-htu8jz63jx] { border-color: #0F4C81; background: #fff; }
.rme-root.rme-embedded .rme-erow .rme-qty-lbl[b-htu8jz63jx] { display: flex; align-items: center; padding: 0 9px; background: #FAFBFC; border-right: 1px solid #DDE3EA; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6B7683; }
.rme-root.rme-embedded .rme-erow .rme-qty-filter.on .rme-qty-lbl[b-htu8jz63jx] { background: #0F4C81; border-right-color: #0F4C81; color: #fff; }
.rme-root.rme-embedded .rme-erow .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown { border: 0 !important; border-right: 1px solid #DDE3EA !important; border-radius: 0; height: 28px !important; min-height: 28px; width: 122px; background: #fff; }
.rme-root.rme-embedded .rme-erow .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown .rz-dropdown-label, .rme-root.rme-embedded .rme-erow .rme-qty-filter[b-htu8jz63jx]  .rz-dropdown .rz-inputtext { font-size: 11.5px; font-weight: 500; }
.rme-root.rme-embedded .rme-erow .rme-qty-in[b-htu8jz63jx] { border: 0; border-radius: 0; height: 28px; width: 82px; padding: 0 8px; font: inherit; font-size: 11.5px; background: transparent; outline: none; color: #18212E; -moz-appearance: textfield; }
.rme-root.rme-embedded .rme-erow .rme-qty-in[b-htu8jz63jx]::-webkit-inner-spin-button, .rme-root.rme-embedded .rme-erow .rme-qty-in[b-htu8jz63jx]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rme-root.rme-embedded .rme-erow .rme-qty-in:focus[b-htu8jz63jx] { background: #F3F7FB; }
.rme-root.rme-embedded .rme-erow .rme-qty-in[b-htu8jz63jx]::placeholder { color: #B9C1CC; }
.rme-root.rme-embedded .rme-erow .rme-qty-arrow[b-htu8jz63jx] { display: flex; align-items: center; padding: 0 2px; color: #B9C1CC; font-size: 11px; border-left: 1px solid #F0F2F5; border-right: 1px solid #F0F2F5; }

/* ===== nhung: tong mau xanh + header cha/con ro hon ===== */
.rme-root.rme-embedded .rme-tbl thead th[b-htu8jz63jx], .rme-root.rme-embedded .rme-tbl thead th.rme-sticky-col[b-htu8jz63jx] { background: #E9F0F8; color: #0F4C81; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 6px 8px; border-bottom: 2px solid #0F4C81; }
.rme-root.rme-embedded .rme-mrow > td[b-htu8jz63jx] { padding: 6px 8px; font-weight: 600; background: #fff; border-bottom: 1px solid #DDE3EA; }
.rme-root.rme-embedded .rme-mrow:hover > td[b-htu8jz63jx], .rme-root.rme-embedded .rme-mrow:hover .rme-sticky-col[b-htu8jz63jx] { background: #F3F7FB; }
.rme-root.rme-embedded .rme-mrow.open > td[b-htu8jz63jx], .rme-root.rme-embedded .rme-mrow.open .rme-sticky-col[b-htu8jz63jx] { background: #E9F0F8; border-bottom-color: #C9D9EA; }
.rme-root.rme-embedded .rme-mrow.open > td:first-child[b-htu8jz63jx] { box-shadow: inset 3px 0 0 #0F4C81; }
.rme-root.rme-embedded .rme-caret.open[b-htu8jz63jx] { color: #0F4C81; }
.rme-root.rme-embedded .rme-detail > td[b-htu8jz63jx] { background: #FAFBFC; border-bottom: 1px solid #DDE3EA; }
.rme-root.rme-embedded .rme-detail-inner[b-htu8jz63jx] { padding: 8px 10px 10px 24px; box-shadow: inset 3px 0 0 #DCE9FC; }
.rme-root.rme-embedded .rme-sub thead th[b-htu8jz63jx] { background: #FAFBFC; color: #6B7683; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid #DDE3EA; }
.rme-root.rme-embedded .rme-tbl tbody tr:hover[b-htu8jz63jx], .rme-root.rme-embedded .rme-tbl tbody tr:hover .rme-sticky-col[b-htu8jz63jx] { background: #F3F7FB; }
.rme-root.rme-embedded .rme-pipeline .rme-step.on[b-htu8jz63jx] { background: #0F4C81; border-color: #0F4C81; }
.rme-root.rme-embedded .rme-qty-chip.on[b-htu8jz63jx] { background: #0F4C81; border-color: #0F4C81; }
.rme-root.rme-embedded .rme-board-hd[b-htu8jz63jx] { border-bottom: 2px solid #0F4C81; }
.rme-root.rme-embedded .rme-board-hd-ttl[b-htu8jz63jx] { color: #0F4C81; }
.rme-root.rme-embedded .rme-panel-ttl[b-htu8jz63jx] { color: #0F4C81; }
.rme-root.rme-embedded .rme-panel-hd:hover[b-htu8jz63jx] { background: #F3F7FB; }
.rme-root.rme-embedded .rme-subtabs[b-htu8jz63jx], .rme-root.rme-embedded .rme-seg[b-htu8jz63jx] { border-color: #C9D9EA; }
.rme-root.rme-embedded .rme-pager .rme-btn:not(:disabled)[b-htu8jz63jx] { color: #0F4C81; border-color: #C9D9EA; }

.rme-root.rme-embedded .rme-erow:first-child[b-htu8jz63jx] { padding-top: 2px; }
.rme-root.rme-embedded .rme-esel[b-htu8jz63jx] { height: 30px; border: 1px solid #DDE3EA; border-radius: 6px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 500; color: #18212E; padding: 0 26px 0 8px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B7C' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; }
.rme-root.rme-embedded .rme-esel:focus[b-htu8jz63jx] { outline: none; border-color: #0F4C81; }
.rme-root.rme-embedded .rme-eqty[b-htu8jz63jx] { display: inline-flex; align-items: center; gap: 4px; }
.rme-root.rme-embedded .rme-eqty.on .rme-esel[b-htu8jz63jx] { border-color: #0F4C81; color: #0F4C81; font-weight: 600; }
.rme-root.rme-embedded .rme-eqty .rme-qty-in[b-htu8jz63jx] { height: 30px; width: 84px; border: 1px solid #DDE3EA; border-radius: 6px; padding: 0 8px; font: inherit; font-size: 11.5px; background: #fff; color: #18212E; -moz-appearance: textfield; }
.rme-root.rme-embedded .rme-eqty .rme-qty-in[b-htu8jz63jx]::-webkit-inner-spin-button, .rme-root.rme-embedded .rme-eqty .rme-qty-in[b-htu8jz63jx]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rme-root.rme-embedded .rme-eqty .rme-qty-in:focus[b-htu8jz63jx] { outline: none; border-color: #0F4C81; }
.rme-root.rme-embedded .rme-eqty .rme-qty-arrow[b-htu8jz63jx] { color: #B9C1CC; font-size: 11px; padding: 0 1px; }
.rme-root.rme-embedded .rme-hd-kpi[b-htu8jz63jx] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-split[b-htu8jz63jx] { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group[b-htu8jz63jx] { flex-direction: row; align-items: center; gap: 6px; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group-ttl[b-htu8jz63jx] { font-size: 9.5px; color: #8FA0B0; white-space: nowrap; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group-ttl i[b-htu8jz63jx] { display: none; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group-review[b-htu8jz63jx]::before { display: none; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group-review[b-htu8jz63jx] { padding-left: 8px; border-left: 1px solid #DDE3EA; }
.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group .rme-pipeline[b-htu8jz63jx] { display: flex; gap: 4px; flex: none; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step[b-htu8jz63jx] { padding: 2px 8px; height: 24px; border-radius: 999px; gap: 5px; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step-num[b-htu8jz63jx] { font-size: 11.5px; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step-lbl[b-htu8jz63jx] { font-size: 10.5px; }
.rme-root.rme-embedded .rme-board-hd-ttl[b-htu8jz63jx] { flex: 0 0 auto; }

.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group:first-child > .rme-kpi-group-ttl[b-htu8jz63jx] { display: none; }

.rme-root.rme-embedded .rme-hd-kpi .rme-kpi-split[b-htu8jz63jx], .rme-root.rme-embedded .rme-hd-kpi .rme-kpi-group[b-htu8jz63jx], .rme-root.rme-embedded .rme-hd-kpi .rme-pipeline[b-htu8jz63jx] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; grid-template-columns: none !important; grid-column: auto !important; width: auto; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step[b-htu8jz63jx] { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center; flex: 0 0 auto !important; width: auto; min-width: 0; white-space: nowrap; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step > div[b-htu8jz63jx] { display: inline; white-space: nowrap; }
.rme-root.rme-embedded .rme-hd-kpi .rme-pipeline .rme-step-num[b-htu8jz63jx] { padding-left: 2px; }

.rme-root.rme-embedded .rme-sub.rme-flat-table thead th[b-htu8jz63jx], .rme-root.rme-embedded .rme-sub.rme-flat-table thead th.rme-sticky-col[b-htu8jz63jx] { background: #E9F0F8; color: #0F4C81; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: none; padding: 6px 8px; border-bottom: 2px solid #0F4C81; }
.rme-root.rme-embedded .rme-sub.rme-flat-table[b-htu8jz63jx] { font-size: 12px; }
.rme-root.rme-embedded .rme-sub.rme-flat-table tbody td[b-htu8jz63jx] { padding: 4px 8px; border-bottom: 1px solid #EEF1F5; }
.rme-root.rme-embedded .rme-sub.rme-flat-table tbody tr:hover td[b-htu8jz63jx], .rme-root.rme-embedded .rme-sub.rme-flat-table tbody tr:hover .rme-sticky-col[b-htu8jz63jx] { background: #F3F7FB; }
/* /Components/Pages/RuleMappingEtransport/RuleMappingPccDetailDrawer.razor.rz.scp.css */
.pcc-overlay[b-2e3y3zfelb], .pcc-img-mask[b-2e3y3zfelb] {
    --pcc-ok: #16a34a;   --pcc-ok-b: #f0fdf4;
    --pcc-warn: #b45309;  --pcc-warn-b: #fff7ed;
    --pcc-err: #b91c1c;   --pcc-err-b: #fef2f2;
    --pcc-tech: #475569;  --pcc-tech-b: #f1f5f9;
    --pcc-neu: #64748b;   --pcc-neu-b: #f1f5f9;
    --pcc-ac: var(--primary-color, #ca3c19); --pcc-ac-b: #fdeee9;
    --pcc-ink: #1f2733; --pcc-ink-s: #475569; --pcc-ink-f: #94a3b8;
    --pcc-bdr: var(--border-light, #e2e8f0);
    --pcc-sf: #fff; --pcc-sf2: #f6f8fb;
}

.pcc-badge[b-2e3y3zfelb] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.pcc-badge.b-ok[b-2e3y3zfelb] { background: var(--pcc-ok-b); color: var(--pcc-ok); }
.pcc-badge.b-warn[b-2e3y3zfelb] { background: var(--pcc-warn-b); color: var(--pcc-warn); }
.pcc-badge.b-tech[b-2e3y3zfelb] { background: var(--pcc-tech-b); color: var(--pcc-tech); }
.pcc-badge.b-neu[b-2e3y3zfelb] { background: var(--pcc-neu-b); color: var(--pcc-neu); }

.pcc-overlay[b-2e3y3zfelb] { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; justify-content: flex-end; z-index: 1200; backdrop-filter: blur(2px); }
.pcc-drawer[b-2e3y3zfelb] { width: 760px; max-width: 96vw; background: var(--pcc-sf2); height: 100%; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(15, 23, 42, .32); font-size: 13px; color: var(--pcc-ink); }
.pcc-drawer-loading[b-2e3y3zfelb] { padding: 40px; text-align: center; color: var(--pcc-ink-f); }
.pcc-dr-hd[b-2e3y3zfelb] { background: #0f172a; padding: 18px 24px 14px; position: sticky; top: 0; z-index: 5; }
.pcc-dr-hd-top[b-2e3y3zfelb] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcc-dr-hd-top h2[b-2e3y3zfelb] { font-size: 18px; font-weight: 700; color: #e2e8f0; margin: 0; }
.pcc-dr-hd-top h2 small[b-2e3y3zfelb] { display: block; font-size: 12px; font-weight: 400; color: #7b90ae; margin-top: 3px; }
.pcc-dr-close[b-2e3y3zfelb] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #e2e8f0; cursor: pointer; }
.pcc-dr-meta[b-2e3y3zfelb] { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.pcc-dr-meta .dml[b-2e3y3zfelb] { font-size: 10px; color: #7b90ae; text-transform: uppercase; }
.pcc-dr-meta .dmv[b-2e3y3zfelb] { font-size: 12.5px; font-weight: 600; color: #e2e8f0; margin-top: 2px; }
.pcc-dr-body[b-2e3y3zfelb] { padding: 18px 22px; flex: 1; }
.pcc-empty-card[b-2e3y3zfelb] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; padding: 32px; text-align: center; color: var(--pcc-ink-f); }

.pcc-pt-grp[b-2e3y3zfelb] { margin-bottom: 18px; }
.pcc-pt-ttl[b-2e3y3zfelb] { font-size: 12px; font-weight: 700; color: var(--pcc-ink-s); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pcc-pc[b-2e3y3zfelb] { background: var(--pcc-sf); border: 1px solid var(--pcc-bdr); border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 8px 18px rgba(15, 23, 42, .06); }
.pcc-pc.st-ok[b-2e3y3zfelb] { border-left: 3px solid var(--pcc-ok); }
.pcc-pc.st-err[b-2e3y3zfelb] { border-left: 3px solid var(--pcc-err); }
.pcc-pc.st-warn[b-2e3y3zfelb] { border-left: 3px solid var(--pcc-warn); }
.pcc-pc-hd[b-2e3y3zfelb] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--pcc-sf2); border-bottom: 1px solid var(--pcc-bdr); gap: 10px; flex-wrap: wrap; }
.pcc-pc-hdl[b-2e3y3zfelb] { display: flex; align-items: center; gap: 10px; }
.pcc-pc-thumb[b-2e3y3zfelb] { width: 42px; height: 42px; border-radius: 9px; background: var(--pcc-neu-b); display: flex; align-items: center; justify-content: center; color: var(--pcc-ink-f); overflow: hidden; }
.pcc-pc-thumb img[b-2e3y3zfelb] { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.pcc-pc-title-row[b-2e3y3zfelb] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcc-pc-ttl[b-2e3y3zfelb] { font-weight: 700; font-size: 13px; }
.pcc-pc-sub[b-2e3y3zfelb] { font-size: 11.5px; color: var(--pcc-ink-f); margin-top: 2px; }
.pcc-pc-alert[b-2e3y3zfelb] { padding: 9px 16px; border-bottom: 1px solid var(--pcc-bdr); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pcc-pc-alert.a-err[b-2e3y3zfelb] { background: var(--pcc-err-b); color: var(--pcc-err); }
.pcc-pc-alert.a-ok[b-2e3y3zfelb] { background: var(--pcc-ok-b); color: var(--pcc-ok); }
.pcc-pc-alert.a-warn[b-2e3y3zfelb] { background: var(--pcc-warn-b); color: var(--pcc-warn); }
.pcc-pc-alert div[b-2e3y3zfelb] { display: flex; align-items: center; gap: 7px; }

.pcc-flds[b-2e3y3zfelb] { padding: 12px 16px; }
.pcc-fg-hd[b-2e3y3zfelb], .pcc-f-row[b-2e3y3zfelb] { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; align-items: center; }
.pcc-fg-hd[b-2e3y3zfelb] { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--pcc-ink-f); margin-bottom: 6px; }
.pcc-f-row[b-2e3y3zfelb] { margin-bottom: 6px; }
.pcc-f-row.mm .pcc-f-ai[b-2e3y3zfelb], .pcc-f-row.mm .pcc-f-et[b-2e3y3zfelb] { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.pcc-f-lbl[b-2e3y3zfelb] { font-size: 11px; font-weight: 700; color: var(--pcc-ink-s); }
.pcc-f-ai[b-2e3y3zfelb], .pcc-f-et[b-2e3y3zfelb] { width: 100%; min-height: 31px; border: 1px solid var(--pcc-bdr); border-radius: 7px; padding: 6px 8px; background: var(--pcc-sf2); font-size: 12px; color: var(--pcc-ink); text-align: left; }
.pcc-f-ai[b-2e3y3zfelb] { color: var(--pcc-ink-s); }
.pcc-f-et-wrap[b-2e3y3zfelb] { min-width: 0; }
.pcc-f-et-editable[b-2e3y3zfelb] { cursor: pointer; }
.pcc-f-et-editable:hover[b-2e3y3zfelb] { border-color: var(--pcc-ac); background: var(--pcc-ac-b); }
.pcc-pcdate-edit[b-2e3y3zfelb] { display: flex; align-items: center; gap: 6px; min-height: 31px; }
.pcc-icon-btn[b-2e3y3zfelb] { width: 30px; height: 30px; border: 1px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink-s); border-radius: 7px; cursor: pointer; }
.pcc-icon-save[b-2e3y3zfelb] { color: var(--pcc-ok); border-color: #bbf7d0; background: var(--pcc-ok-b); }

.pcc-pc-acts[b-2e3y3zfelb] { padding: 12px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-top: 1px solid var(--pcc-bdr); background: var(--pcc-sf2); flex-wrap: wrap; }
.pcc-pa-labelcol[b-2e3y3zfelb] { flex: 1; min-width: 0; }
.pcc-pa-hint[b-2e3y3zfelb], .pcc-pa-section-title[b-2e3y3zfelb] { font-size: 9.5px; font-weight: 800; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.pcc-pa-group[b-2e3y3zfelb], .pcc-pa-labels[b-2e3y3zfelb] { display: flex; gap: 7px; flex-wrap: wrap; }
.pcc-pa-section[b-2e3y3zfelb] { margin-top: 10px; }
.pcc-pa-btns[b-2e3y3zfelb] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pcc-chip[b-2e3y3zfelb] { font-size: 11.5px; font-weight: 500; padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink-s); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pcc-chip.chip-ok[b-2e3y3zfelb] { border-color: var(--pcc-ok); color: var(--pcc-ok); }
.pcc-chip.chip-ok.on[b-2e3y3zfelb] { background: var(--pcc-ok); border-color: var(--pcc-ok); color: #fff; font-weight: 700; }
.pcc-chip.chip-danger[b-2e3y3zfelb] { border-color: var(--pcc-err); color: var(--pcc-err); }
.pcc-chip.chip-danger.on[b-2e3y3zfelb] { background: var(--pcc-err); border-color: var(--pcc-err); color: #fff; font-weight: 700; }

.pcc-btn[b-2e3y3zfelb] { border: 1px solid var(--pcc-bdr); background: var(--pcc-sf); color: var(--pcc-ink-s); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pcc-btn-primary[b-2e3y3zfelb] { background: var(--pcc-ac); border-color: var(--pcc-ac); color: #fff; }
.pcc-btn-ok[b-2e3y3zfelb] { border-color: var(--pcc-ok); color: var(--pcc-ok); background: var(--pcc-ok-b); }
.pcc-btn-ok.on[b-2e3y3zfelb] { background: var(--pcc-ok); color: #fff; }
.pcc-btn-clear[b-2e3y3zfelb] { border-color: #fecaca; color: var(--pcc-err); background: var(--pcc-err-b); }
.pcc-notes[b-2e3y3zfelb] { padding: 10px 16px 14px; border-top: 1px solid var(--pcc-bdr); }
.pcc-notes-head[b-2e3y3zfelb] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pcc-notes-lbl[b-2e3y3zfelb] { font-size: 9.5px; font-weight: 700; color: var(--pcc-ink-f); text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.pcc-notes-ta[b-2e3y3zfelb] { width: 100%; font-size: 12.5px; resize: vertical; border: 1.5px solid var(--pcc-bdr); border-radius: 7px; padding: 8px 10px; background: var(--pcc-sf2); color: var(--pcc-ink); outline: none; min-height: 54px; }
.pcc-notes-ta:focus[b-2e3y3zfelb] { border-color: var(--pcc-ac); }

.pcc-dr-ft[b-2e3y3zfelb] { position: sticky; bottom: 0; background: var(--pcc-sf); border-top: 1px solid var(--pcc-bdr); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pcc-dfn[b-2e3y3zfelb] { color: var(--pcc-ink-s); font-size: 12px; }
.pcc-btn-final[b-2e3y3zfelb] { background: var(--pcc-ok); color: #fff; border: none; font-weight: 700; font-size: 13.5px; padding: 10px 22px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pcc-btn-final:disabled[b-2e3y3zfelb] { background: var(--pcc-neu-b); color: var(--pcc-ink-f); cursor: not-allowed; }
.pcc-img-mask[b-2e3y3zfelb] { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 1300; cursor: zoom-out; }
.pcc-img-full[b-2e3y3zfelb] { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

@media (max-width: 760px) {
    .pcc-fg-hd[b-2e3y3zfelb], .pcc-f-row[b-2e3y3zfelb] { grid-template-columns: 1fr; }
    .pcc-fg-hd[b-2e3y3zfelb] { display: none; }
    .pcc-pa-btns[b-2e3y3zfelb] { justify-content: flex-start; }
}
/* /Components/Pages/RuleMappingEtransport/RuleMappingTableLayoutDialog.razor.rz.scp.css */
.layout-overlay[b-77re49gtj4] { position: fixed; inset: 0; z-index: 1350; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .52); backdrop-filter: blur(3px); }
.layout-dialog[b-77re49gtj4] { width: min(920px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; color: #172033; background: #fff; border: 1px solid #dce3ec; border-radius: 14px; box-shadow: 0 24px 70px rgba(15, 23, 42, .25); }
.layout-header[b-77re49gtj4] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid #e5eaf0; }
.layout-header h2[b-77re49gtj4] { margin: 0; font-size: 18px; font-weight: 750; }
.layout-header h2 i[b-77re49gtj4] { margin-right: 8px; color: #2563eb; }
.layout-header p[b-77re49gtj4] { margin: 5px 0 0; color: #687386; font-size: 12.5px; }
.icon-button[b-77re49gtj4], .order-actions button[b-77re49gtj4] { display: grid; place-items: center; border: 1px solid #dce3ec; color: #5f6b7a; background: #fff; cursor: pointer; }
.icon-button[b-77re49gtj4] { width: 32px; height: 32px; border-radius: 8px; }
.layout-body[b-77re49gtj4] { min-height: 0; overflow: auto; padding: 18px 22px 22px; background: #f7f9fc; }
.layout-tab-picker[b-77re49gtj4] { display: grid; grid-template-columns: auto minmax(180px, 240px) 1fr; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: #fff; border: 1px solid #dce3ec; border-radius: 10px; }
.layout-tab-picker label[b-77re49gtj4] { color: #465266; font-size: 12px; font-weight: 700; }
.layout-tab-picker select[b-77re49gtj4] { width: 100%; padding: 8px 32px 8px 10px; color: #172033; background: #fff; border: 1px solid #ccd5e0; border-radius: 7px; font-size: 12.5px; font-weight: 650; }
.layout-tab-picker > span[b-77re49gtj4] { color: #7a8594; font-size: 11.5px; }
.layout-tab-picker .tab-loading[b-77re49gtj4] { color: #2563eb; }
.layout-mode-card[b-77re49gtj4] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; margin-bottom: 16px; background: #fff; border: 1px solid #dce3ec; border-radius: 10px; }
.layout-mode-card > div:first-child[b-77re49gtj4] { display: flex; flex-direction: column; gap: 3px; }
.layout-mode-card span[b-77re49gtj4], .panel-title span[b-77re49gtj4] { color: #7a8594; font-size: 11.5px; }
.mode-switch[b-77re49gtj4] { display: flex; padding: 3px; background: #eef2f7; border-radius: 9px; }
.mode-switch button[b-77re49gtj4] { padding: 8px 12px; border: 0; border-radius: 7px; color: #647084; background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }
.mode-switch button.active[b-77re49gtj4] { color: #1d4ed8; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.column-grid[b-77re49gtj4] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.column-grid.single[b-77re49gtj4] { grid-template-columns: 1fr; }
.column-panel[b-77re49gtj4] { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #dce3ec; border-radius: 10px; }
.panel-title[b-77re49gtj4] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid #e7ebf0; }
.panel-title > div[b-77re49gtj4] { display: flex; flex-direction: column; gap: 2px; }
.panel-actions[b-77re49gtj4] { display: flex; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.text-button[b-77re49gtj4], .reset-button[b-77re49gtj4], .cancel-button[b-77re49gtj4], .save-button[b-77re49gtj4] { border: 0; background: transparent; cursor: pointer; font-weight: 650; }
.text-button[b-77re49gtj4] { color: #2563eb; font-size: 11.5px; }
.text-button i[b-77re49gtj4] { margin-right: 4px; }
.column-list[b-77re49gtj4] { max-height: 390px; overflow: auto; padding: 6px; }
.column-row[b-77re49gtj4] { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; cursor: grab; transition: border-color .12s ease, background .12s ease, opacity .12s ease; }
.column-row:hover[b-77re49gtj4] { border-color: #bfdbfe; background: #eff6ff; }
.column-row:active[b-77re49gtj4] { cursor: grabbing; }
.column-row.dragging-client[b-77re49gtj4] { opacity: .45; }
.column-row.drag-over-client[b-77re49gtj4] { border-color: #3b82f6; background: #dbeafe; }
.column-row.is-hidden label span[b-77re49gtj4] { color: #929baa; }
.column-row label[b-77re49gtj4] { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; }
.column-row input[b-77re49gtj4] { accent-color: #2563eb; }
.column-origin[b-77re49gtj4] { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; color: #1d4ed8; background: #dbeafe; font-size: 10px; font-style: normal; font-weight: 750; }
.drag-handle[b-77re49gtj4] { width: 24px; height: 28px; display: grid; flex: 0 0 24px; place-items: center; color: #9aa4b2; border-radius: 5px; }
.drag-handle:hover[b-77re49gtj4] { color: #2563eb; background: #eaf2ff; }
.order-actions[b-77re49gtj4] { display: flex; gap: 4px; }
.order-actions button[b-77re49gtj4] { width: 27px; height: 27px; border-radius: 6px; font-size: 10px; cursor: pointer; }
.order-actions button:disabled[b-77re49gtj4] { opacity: .32; cursor: default; }
.layout-footer[b-77re49gtj4] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid #e5eaf0; }
.layout-footer > div[b-77re49gtj4] { display: flex; gap: 8px; }
.reset-button[b-77re49gtj4], .cancel-button[b-77re49gtj4], .save-button[b-77re49gtj4] { padding: 9px 14px; border-radius: 8px; font-size: 12.5px; }
.reset-button[b-77re49gtj4] { color: #596579; }
.cancel-button[b-77re49gtj4] { color: #374151; border: 1px solid #d5dce5; background: #fff; }
.save-button[b-77re49gtj4] { color: #fff; background: #2563eb; }
.save-button:disabled[b-77re49gtj4] { opacity: .65; cursor: wait; }
@media (max-width: 720px) { .layout-overlay[b-77re49gtj4] { padding: 8px; } .layout-tab-picker[b-77re49gtj4] { grid-template-columns: 1fr; } .layout-mode-card[b-77re49gtj4] { align-items: stretch; flex-direction: column; } .column-grid[b-77re49gtj4] { grid-template-columns: 1fr; } .column-list[b-77re49gtj4] { max-height: 270px; } }
/* /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;
	}
}
/* /Components/Pages/V2/CargoBoard/CargoBoard.razor.rz.scp.css */
.cb[b-fsvqg8unk3]{--bg:#F3F5F8;--surface:#fff;--ink:#18212E;--muted:#6B7683;--line:#DDE3EA;--brand:#0F4C81;--red:#D6453D;--y:#FFE86B;--b:#DCE9FC;--g:#DDF3E4;--x:#E3E6EB;--mono:'Consolas',ui-monospace,monospace;--sans:var(--font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);color:var(--ink);font-family:var(--sans);font-size:12.5px;line-height:1.35;padding-bottom:30px}
.cb *[b-fsvqg8unk3]{box-sizing:border-box}
.cb button[b-fsvqg8unk3]{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.cb .wrap[b-fsvqg8unk3]{margin:0 auto;padding:0 12px}
.cb .empty[b-fsvqg8unk3]{padding:30px;text-align:center;color:#8FA0B0}
.cb .top[b-fsvqg8unk3]{background:var(--surface);border:1px solid var(--line);border-radius:6px;position:sticky;top:var(--cb-mtabs-h, 42px);z-index:11;margin:0 12px 8px}
.cb .shead[b-fsvqg8unk3]{position:sticky;top:calc(var(--cb-top-h, 0px) + var(--cb-mtabs-h, 42px));z-index:9;background:var(--surface);padding-top:2px}
.cb .top .wrap[b-fsvqg8unk3]{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
.cb .top .hrow[b-fsvqg8unk3]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:2px 0}
.cb .top .hrow + .hrow[b-fsvqg8unk3]{border-top:1px solid #F0F2F5}
.cb .top .hlb[b-fsvqg8unk3]{flex:0 0 68px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cb .top .ghsel[b-fsvqg8unk3]{font:inherit;font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--surface);height:30px;color:var(--ink)}
.cb .top .kmini[b-fsvqg8unk3]{font-size:11px;font-weight:600;color:var(--muted)}
.cb .top .kmini b[b-fsvqg8unk3]{font-family:var(--mono)}
.cb .top .kmini .k1[b-fsvqg8unk3]{color:#0E5A8A}
.cb .top .kmini .k2[b-fsvqg8unk3]{color:#8A5B0E}
.cb .top .kmini .k3[b-fsvqg8unk3]{color:#256C39}
.cb h1[b-fsvqg8unk3]{font-size:14px;font-weight:700;margin:0;white-space:nowrap;color:#12395B}
.cb .seg[b-fsvqg8unk3]{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#FAFBFC}
.cb .seg button[b-fsvqg8unk3]{padding:5px 10px;font-weight:500;color:var(--muted);white-space:nowrap;font-size:11.5px}
.cb .seg button.on[b-fsvqg8unk3]{background:var(--brand);color:#fff}
.cb .range[b-fsvqg8unk3]{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.cb .range input[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit;font-size:11.5px;background:var(--surface);height:30px}
.cb .chips[b-fsvqg8unk3]{display:flex;gap:5px;flex-wrap:wrap}
.cb .chip[b-fsvqg8unk3]{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 8px;height:24px;font-size:11px;font-weight:500;display:inline-flex;align-items:center}
.cb .chips[b-fsvqg8unk3]{align-items:center}
.cb .chip.on[b-fsvqg8unk3]{background:var(--ink);border-color:var(--ink);color:#fff}
.cb .chip b[b-fsvqg8unk3]{font-family:var(--mono);font-weight:600;margin-left:4px;background:var(--y);color:#5A4300;border-radius:999px;padding:0 5px;font-size:10px}
.cb .tg[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:500;background:var(--surface);height:24px}
.cb .tg.on[b-fsvqg8unk3]{background:var(--ink);border-color:var(--ink);color:#fff}
.cb .search[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:6px;padding:5px 10px;font:inherit;min-width:220px;background:var(--surface);height:30px}
.cb .right[b-fsvqg8unk3]{margin-left:auto;display:flex;align-items:center;gap:8px}
.cb .sync[b-fsvqg8unk3]{font-size:11px;color:var(--muted);white-space:nowrap}
.cb .sync[b-fsvqg8unk3]:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#256C39;margin-right:6px;vertical-align:1px}
.cb .sync.off[b-fsvqg8unk3]:before{background:#B9C1CC}
.cb .btn[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:6px;padding:5px 11px;font-weight:500;font-size:11.5px;background:var(--surface);white-space:nowrap;height:30px}
.cb .btn:disabled[b-fsvqg8unk3]{opacity:.5;cursor:default}
.cb .btn.primary[b-fsvqg8unk3]{background:var(--brand);border-color:var(--brand);color:#fff}
.cb .btn.ok[b-fsvqg8unk3]{background:#C0392B;border-color:#C0392B;color:#fff}
.cb .btn.danger[b-fsvqg8unk3]{color:var(--red);border-color:#F0B4AF;margin-right:auto}
.cb .btn i[b-fsvqg8unk3]{margin-right:4px}
.cb .cards[b-fsvqg8unk3]{display:flex;gap:10px;padding:6px 0 8px;overflow-x:auto;scrollbar-width:thin}
.cb .card[b-fsvqg8unk3]{flex:0 0 200px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;text-align:left;display:flex;flex-direction:column;gap:5px}
.cb .card.on[b-fsvqg8unk3]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cb .card.all[b-fsvqg8unk3]{border-style:dashed}
.cb .card .k[b-fsvqg8unk3]{font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.cb .card .k small[b-fsvqg8unk3]{font-weight:500;color:var(--muted);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.cb .card .io[b-fsvqg8unk3]{display:flex;flex-direction:column;gap:2px;font-size:11px}
.cb .card .io span[b-fsvqg8unk3]{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.cb .card .io i[b-fsvqg8unk3]{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:3px;padding:0 4px}
.cb .card .io .out i[b-fsvqg8unk3]{background:#E6F4EA;color:#256C39}
.cb .card .io .in i[b-fsvqg8unk3]{background:#E3F0F9;color:#0E5A8A}
.cb .card .io b[b-fsvqg8unk3]{font-size:15px;font-weight:700;color:#12395B}
.cb .card .f[b-fsvqg8unk3]{font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between}
.cb .sheet[b-fsvqg8unk3]{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px}
.cb .sheet-h[b-fsvqg8unk3]{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:10px}
.cb .sheet-h .t[b-fsvqg8unk3]{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.cb .sheet-h .d[b-fsvqg8unk3]{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.cb .sheet-h .lg[b-fsvqg8unk3]{margin-left:auto;display:flex;gap:12px;font-size:10.5px;color:var(--muted);flex-wrap:wrap}
.cb .sheet-h .lg i[b-fsvqg8unk3]{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;border:1px solid rgba(0,0,0,.08)}
.cb .lg i.y[b-fsvqg8unk3]{background:var(--y)}.cb .lg i.b[b-fsvqg8unk3]{background:var(--b)}.cb .lg i.g[b-fsvqg8unk3]{background:var(--g)}.cb .lg i.x[b-fsvqg8unk3]{background:var(--x)}
.cb .lg .red[b-fsvqg8unk3]{color:var(--red);font-weight:600}
.cb .board[b-fsvqg8unk3]{columns:3;column-gap:10px}
.cb .board.c2[b-fsvqg8unk3]{columns:2}
@media (max-width:1200px){.cb .board[b-fsvqg8unk3]{columns:2}}
@media (max-width:760px){.cb .board[b-fsvqg8unk3]{columns:1}}
.cb .kb[b-fsvqg8unk3]{break-inside:avoid;background:var(--surface);border:1px solid #BFC8D2;border-radius:5px;margin:0 0 10px;overflow:hidden;font-size:12px}
.cb .kb-h[b-fsvqg8unk3]{display:flex;align-items:center;gap:4px 6px;padding:4px 7px;background:#FFF0C9;border-bottom:1px solid #EAD08F;font-weight:700;font-size:12.5px;line-height:1.25;flex-wrap:wrap}
.cb .kb-h .kb-l1[b-fsvqg8unk3]{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px}
.cb .kb-h .kb-l2[b-fsvqg8unk3]{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-left:auto;max-width:100%;flex-wrap:wrap}
.cb .kb-h .nm[b-fsvqg8unk3]{flex:1 1 auto;min-width:120px;font-weight:700;font-size:12.5px;white-space:normal;overflow-wrap:break-word}
.cb .kb-h .hgh[b-fsvqg8unk3]{flex:0 0 auto;font-family:var(--sans);font-size:12.5px;font-weight:700;color:#9A3B36;white-space:nowrap}
.cb .kb-h .pwt[b-fsvqg8unk3]{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--brand);flex:0 0 auto;white-space:nowrap}
.cb .kb-h .kho[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700;color:var(--red);font-size:12px;flex:0 0 auto;margin-left:4px}
.cb .kb-h .cont[b-fsvqg8unk3]{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--muted);background:#EEF1F5;border-radius:3px;padding:1px 5px;flex:0 0 auto;white-space:nowrap}
.cb .kb-h .cont.split[b-fsvqg8unk3]{background:#FDE3E1;color:#9A3B36}
.cb .kb-h .cont.nobook[b-fsvqg8unk3]{background:#FFE1C2;color:#8A4B0E}
.cb .kb-h .tb[b-fsvqg8unk3]{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#FFF1D6;color:#8A5B0E;border-radius:999px;padding:2px 7px}
.cb .bk[b-fsvqg8unk3]{font-size:9.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 7px}
.cb .bk.kab[b-fsvqg8unk3]{background:var(--brand);color:#fff}
.cb .bk.khtb[b-fsvqg8unk3]{background:#DCE9FC;color:var(--brand)}
.cb .kb-r[b-fsvqg8unk3]{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:3px 7px;font-family:var(--mono);font-weight:700;color:var(--red);font-size:12px;border-bottom:1px solid var(--line);background:#FFF7F6}
.cb .kb-n[b-fsvqg8unk3]{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 7px;font-size:11.5px;color:var(--ink);background:#FFFDF2;border-bottom:1px solid var(--line);cursor:text}
.cb .kb-r .lb[b-fsvqg8unk3]{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A3B36}
.cb .kb-n .lb[b-fsvqg8unk3]{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A6D00}
.cb .kb-r .chg[b-fsvqg8unk3]{font-size:10.5px;font-weight:600;color:#9A3B36;background:#FDE3E1;border-radius:3px;padding:0 5px}
.cb .kb-r .dl[b-fsvqg8unk3]{color:var(--muted)}
.cb .kb-n.e .tx[b-fsvqg8unk3]{color:#B9C1CC;font-style:italic}
.cb table[b-fsvqg8unk3]{width:100%;border-collapse:collapse}
.cb th[b-fsvqg8unk3]{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;text-align:left;padding:2px 3px;border-bottom:1px solid var(--line);background:#FAFBFC;white-space:nowrap}
.cb th.r[b-fsvqg8unk3],.cb td.r[b-fsvqg8unk3]{text-align:right}
.cb td[b-fsvqg8unk3]{padding:2px 3px;border-bottom:1px solid #EEF1F5;font-size:12px;line-height:1.3;vertical-align:top}
.cb tr:last-child td[b-fsvqg8unk3]{border-bottom:0}
.cb td.i[b-fsvqg8unk3]{width:22px;color:var(--muted);font-family:var(--mono);font-size:10.5px;text-align:right;padding-right:2px}
.cb td.p[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700;white-space:normal;overflow-wrap:break-word}
.cb td.p[b-fsvqg8unk3]{position:relative}
.cb td.p .tcp[b-fsvqg8unk3]{display:none;position:absolute;left:100%;top:-1px;z-index:6;margin-left:4px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.cb td.p .tcp i[b-fsvqg8unk3]{font-size:9.5px;margin-right:2px;opacity:.8}
.cb td.p .tcp small[b-fsvqg8unk3]{display:block;font-family:var(--sans);font-size:10px;font-weight:400;color:#D5DBE3}
.cb td.p:hover .tcp[b-fsvqg8unk3]{display:block}
.cb.nocin td.p .tcp[b-fsvqg8unk3]{display:none!important}
.cb td.p .vt[b-fsvqg8unk3]{display:inline-block;font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.03em;color:#5B6674;background:#EEF1F5;border-radius:3px;padding:0 4px;margin-right:5px;vertical-align:1px}
.cb td.p .keo[b-fsvqg8unk3],.cb td.p .ov[b-fsvqg8unk3]{display:block;font-family:var(--sans);font-size:10px;font-weight:400;color:var(--muted)}
.cb td.p .ov[b-fsvqg8unk3]{font-weight:700;color:var(--red)}
.cb tr:has(+ tr.ovr) td[b-fsvqg8unk3]{border-bottom:0;padding-bottom:0}
.cb tr.ovr td[b-fsvqg8unk3]{padding-top:0}
.cb tr.ovr td.ovc[b-fsvqg8unk3]{font-family:var(--sans);font-size:10px;font-weight:700;color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.cb tr.ovr td.ovc .ov[b-fsvqg8unk3]{display:inline;margin-right:10px}
.cb td.p .lap[b-fsvqg8unk3]{font-family:var(--sans);font-size:10px;font-weight:500;color:var(--muted);margin-left:3px}
.cb td.v[b-fsvqg8unk3]{color:#4C5866;max-width:90px;overflow-wrap:break-word}
.cb td.ci[b-fsvqg8unk3]{font-family:var(--mono);font-size:11px;color:#2A57A8;white-space:nowrap}
.cb td.c[b-fsvqg8unk3]{font-family:var(--mono);white-space:nowrap}
.cb td.c.dk[b-fsvqg8unk3]{color:var(--muted)}
.cb td.c.out .qty[b-fsvqg8unk3]{cursor:pointer;font-weight:700}
.cb td.c.out .qty.ro[b-fsvqg8unk3]{cursor:default;color:var(--muted)}
.cb td.c.out .man[b-fsvqg8unk3]{font-size:10px;color:var(--brand);margin-left:2px}
.cb td.c.out .inleg[b-fsvqg8unk3]{display:block;font-family:var(--sans);font-size:10px;font-weight:600;color:#0E5A8A}
.cb td.c.out .field[b-fsvqg8unk3]{display:block;font-family:var(--sans);font-size:10px;color:var(--muted)}
.cb td.c.out .chot[b-fsvqg8unk3]{color:var(--brand);font-family:var(--sans);font-size:10.5px;font-weight:600;opacity:.35;transition:.15s}
.cb td.c.out .sugq[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700;color:#8A5B0E;border-bottom:1px dashed #C9A227;cursor:pointer}
.cb td.c.out .sugq:hover[b-fsvqg8unk3]{color:#5A4300}
.cb tr:hover td.c.out .chot[b-fsvqg8unk3]{opacity:1}
.cb td.n[b-fsvqg8unk3]{color:var(--red);font-weight:600;font-size:11px;max-width:140px}
.cb tr.wait td[b-fsvqg8unk3]{background:var(--y)}
.cb tr.in td[b-fsvqg8unk3]{background:var(--b)}
.cb tr.done td[b-fsvqg8unk3]{background:var(--g)}
.cb tr.done td.ci[b-fsvqg8unk3]{color:var(--muted)}
.cb tr.cancel td[b-fsvqg8unk3]{background:var(--x);color:#8A94A6;text-decoration:line-through}
.cb tr.cancel td.n[b-fsvqg8unk3]{text-decoration:none}
.cb tr.nbr td.nb[b-fsvqg8unk3]{font-family:var(--sans);font-size:11.5px;font-style:italic;font-weight:600;color:#8A4B0E}
.cb.hidedone tr.done[b-fsvqg8unk3]{display:none}
.cb tr.kb-f td[b-fsvqg8unk3]{padding:3px 7px;font-family:var(--mono);font-size:11px;color:var(--muted);background:#FAFBFC;border-top:1px solid var(--line);border-bottom:0;vertical-align:middle;line-height:1.4}
.cb tr.kb-f td.r[b-fsvqg8unk3]{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap;padding-left:3px;padding-right:3px}
.cb tr.kb-f td.fr[b-fsvqg8unk3]{text-align:right}
.cb .kb-f b[b-fsvqg8unk3]{color:var(--ink);font-weight:700}
.cb .cs textarea.nta[b-fsvqg8unk3]{display:block;width:100%;box-sizing:border-box;min-height:96px;margin:10px 0 4px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12.5px;resize:vertical;background:#fff;color:var(--ink)}
.cb .cs textarea.nta:focus[b-fsvqg8unk3]{outline:none;border-color:var(--brand)}
.cb .toast[b-fsvqg8unk3]{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:1300;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw}
.cb .cmodal[b-fsvqg8unk3]{position:fixed;inset:0;background:rgba(15,23,32,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
.cb .cbox[b-fsvqg8unk3]{background:#fff;border-radius:12px;max-width:520px;width:100%;max-height:94vh;overflow:auto;font-size:12.5px}
.cb .ch[b-fsvqg8unk3]{background:#1A2230;color:#fff;padding:12px 16px;border-radius:12px 12px 0 0;position:sticky;top:0;z-index:2}
.cb .ch .t[b-fsvqg8unk3]{font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.cb .ch .x[b-fsvqg8unk3]{color:#fff;font-size:16px}
.cb .ch .sub[b-fsvqg8unk3]{font-size:11.5px;color:#B9C1CC;font-family:var(--mono);margin-top:2px}
.cb .ch .map[b-fsvqg8unk3]{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;background:#123B24;color:#7BE3A5;border-radius:6px;padding:2px 8px}
.cb .ch .map.no[b-fsvqg8unk3]{background:#4A1F1C;color:#F5A9A3}
.cb .cs[b-fsvqg8unk3]{padding:8px 16px 0}
.cb .cs.leg[b-fsvqg8unk3]{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.cb .cs.leg.off[b-fsvqg8unk3]{opacity:.75}
.cb .cs .st-l[b-fsvqg8unk3]{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 0;display:flex;align-items:center;gap:10px}
.cb .cs .st-l .dir[b-fsvqg8unk3]{border-radius:4px;padding:1px 6px}
.cb .cs .st-l .dir.out[b-fsvqg8unk3]{background:#E6F4EA;color:#256C39}
.cb .cs .st-l .dir.in[b-fsvqg8unk3]{background:#E3F0F9;color:#0E5A8A}
.cb .cs .st-l .sw[b-fsvqg8unk3]{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:4px;cursor:pointer}
.cb .cs .st-l .ldone[b-fsvqg8unk3]{font-size:10.5px;font-weight:600;color:#256C39;background:#E6F4EA;border-radius:999px;padding:1px 7px;text-transform:none;letter-spacing:0}
.cb .cs.leg .lskip[b-fsvqg8unk3]{font-size:11.5px;color:var(--muted);padding:2px 0 10px}
.cb .cs .kvrow[b-fsvqg8unk3]{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #EEF1F5;font-size:12.5px}
.cb .cs .kvrow b[b-fsvqg8unk3]{font-family:var(--mono);font-weight:600;text-align:right}
.cb .cs .kvrow b.bad[b-fsvqg8unk3]{color:var(--red)}
.cb .cs .kvrow select[b-fsvqg8unk3]{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:#fff;max-width:320px}
.cb .cs .kvrow input.note[b-fsvqg8unk3]{flex:1;font:inherit;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.cb .opt[b-fsvqg8unk3]{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0;display:flex;align-items:center;gap:10px;cursor:pointer}
.cb .opt.on[b-fsvqg8unk3]{border-color:var(--red);background:#FFF7F6}
.cb .opt.dis[b-fsvqg8unk3]{opacity:.55;cursor:default}
.cb .opt .rr2[b-fsvqg8unk3]{width:14px;height:14px;border-radius:50%;border:2px solid #B9C1CC;flex:0 0 auto}
.cb .opt.on .rr2[b-fsvqg8unk3]{border-color:var(--red);box-shadow:inset 0 0 0 3px #fff;background:var(--red)}
.cb .opt .ol[b-fsvqg8unk3]{flex:1}.cb .opt .ol small[b-fsvqg8unk3]{display:block;color:var(--muted);font-size:10.5px}
.cb .opt .ov2[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700}
.cb .opt input[type=number][b-fsvqg8unk3]{font:inherit;font-family:var(--mono);border:1px solid var(--line);border-radius:6px;padding:5px 8px;width:110px;text-align:right}
.cb .wllist[b-fsvqg8unk3]{max-height:220px;overflow:auto;margin:0 0 8px}
.cb .wllist .tip[b-fsvqg8unk3]{font-size:11px;color:var(--muted);padding:6px 10px}
.cb .wlitem[b-fsvqg8unk3]{margin:4px 0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer}
.cb .wlitem:hover[b-fsvqg8unk3]{border-color:var(--brand)}
.cb .wlitem.sel[b-fsvqg8unk3]{border-color:var(--red);background:#FFF7F6}
.cb .wlitem.used[b-fsvqg8unk3]{opacity:.5;cursor:not-allowed}
.cb .wlitem b[b-fsvqg8unk3]{font-family:var(--mono)}
.cb .wlitem .ie[b-fsvqg8unk3]{font-size:10.5px;color:#0E5A8A;font-weight:600}
.cb .wlitem .sub2[b-fsvqg8unk3]{color:var(--muted);font-family:var(--mono);font-size:10.5px}
.cb .cerr[b-fsvqg8unk3]{margin:8px 16px 0;padding:6px 10px;background:#FDE3E1;color:#9A3B36;border-radius:6px;font-size:12px}
.cb .cf[b-fsvqg8unk3]{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px}
@media (max-width:900px){
    .cb .board[b-fsvqg8unk3]{columns:1}
    .cb .top .wrap[b-fsvqg8unk3]{padding:8px}
    .cb .search[b-fsvqg8unk3]{min-width:0;flex:1 1 100%}
    .cb .right[b-fsvqg8unk3]{margin-left:0;width:100%}
    .cb .card[b-fsvqg8unk3]{flex-basis:70%}
}
.cb td.c.out .subleg[b-fsvqg8unk3]{display:block;font-family:var(--sans);font-size:10px;color:var(--muted)}
.cb .cs .kvrow .multi[b-fsvqg8unk3]{font-size:10px;font-weight:700;color:#8A5B0E;background:#FFF1D6;border-radius:999px;padding:1px 7px;margin-left:6px}

.cb .sheet-h .lg .redb[b-fsvqg8unk3]{color:var(--red);font-weight:700}
.cb td.i.rotk[b-fsvqg8unk3]{cursor:pointer}
.cb td.i.rotk:hover[b-fsvqg8unk3]{color:var(--red);font-weight:700}
.cb tr.rotf td:first-child[b-fsvqg8unk3]{box-shadow:inset 3px 0 0 var(--red)}
.cb tr.rotf td.i[b-fsvqg8unk3]{color:var(--red);font-weight:700}
.cb td.p .rott[b-fsvqg8unk3]{display:inline-block;font-family:var(--sans);font-size:9px;font-weight:700;color:#fff;background:var(--red);border-radius:3px;padding:0 4px;margin-left:4px;vertical-align:1px}
.cb td.n[b-fsvqg8unk3]{cursor:pointer;min-width:120px}
.cb td.n.e[b-fsvqg8unk3]{color:var(--brand);font-size:10.5px;font-weight:500}
.cb .kb-n .sv[b-fsvqg8unk3],.cb .kb-n .cx[b-fsvqg8unk3]{font-size:11px;font-weight:600;border-radius:5px;padding:2px 9px;border:1px solid var(--line);background:#fff}
.cb .kb-n .sv[b-fsvqg8unk3]{background:var(--brand);border-color:var(--brand);color:#fff}
.cb td.n .by[b-fsvqg8unk3]{display:block;font-size:9.5px;color:#8FA0B0;font-weight:400}
.cb td.n .sp[b-fsvqg8unk3],.cb .kb-n .sp[b-fsvqg8unk3]{font-size:10.5px;color:var(--muted);font-weight:400}
.cb td.n .ps[b-fsvqg8unk3]{display:inline-block;font-size:10px;font-weight:700;color:#9A3B36;background:#FDE3E1;border-radius:3px;padding:0 5px;margin:0 4px 2px 0}
.cb .kb-n[b-fsvqg8unk3]{cursor:text}
.cb .kb-n .ni[b-fsvqg8unk3]{flex:1;min-width:120px;border:1px solid var(--brand);border-radius:6px;padding:3px 8px;font:inherit;font-size:11.5px;background:#fff}
.cb .rmodal[b-fsvqg8unk3]{position:fixed;inset:0;background:rgba(15,23,32,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
.cb .rbox[b-fsvqg8unk3]{background:#fff;border-radius:12px;width:100%;height:93vh;display:flex;flex-direction:column;overflow:hidden}
.cb .rh[b-fsvqg8unk3]{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cb .rh .racts[b-fsvqg8unk3]{margin-left:auto;display:flex;gap:8px}
.cb .rflt[b-fsvqg8unk3]{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:#FAFBFC;flex-wrap:wrap}
.cb .rflt .lb[b-fsvqg8unk3]{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}
.cb .rflt select[b-fsvqg8unk3]{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff}
.cb .rbody[b-fsvqg8unk3]{flex:1;min-height:0;overflow:auto}
.cb .rpt[b-fsvqg8unk3]{padding:14px}
.cb .rpt h3[b-fsvqg8unk3]{text-align:center;font-size:14.5px;margin:14px 0 6px;text-transform:uppercase}
.cb .rpt table[b-fsvqg8unk3]{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:6px}
.cb .rpt th[b-fsvqg8unk3],.cb .rpt td[b-fsvqg8unk3]{border:1px solid #9AA4B0;padding:3px 6px}
.cb .rpt th[b-fsvqg8unk3]{background:#F2F5F8;font-weight:700;text-align:center}
.cb .rpt td.c[b-fsvqg8unk3]{text-align:center}
.cb .rpt td.r[b-fsvqg8unk3]{text-align:right;font-family:var(--mono)}
.cb .rpt tr.tot td[b-fsvqg8unk3]{background:#D9F2DC;font-weight:700}
.cb .rpt tr.tot.tot-y td[b-fsvqg8unk3]{background:#FFE699}
.cb .rpt td.rp-red[b-fsvqg8unk3]{color:#C00000;font-weight:700}
.cb .rpt td.rp-kho[b-fsvqg8unk3]{color:#1F7A46;font-weight:700}
.cb .rpt .note[b-fsvqg8unk3]{font-size:11.5px;color:var(--muted);margin:0 0 8px;text-align:center}
.cb .rpt th.nt[b-fsvqg8unk3],.cb .rpt td.nt[b-fsvqg8unk3]{width:240px;min-width:240px;max-width:240px;white-space:normal;overflow-wrap:anywhere;text-align:left}
.cb .rpt td.ecell[b-fsvqg8unk3]{cursor:pointer}
.cb .rpt td.ecell:hover[b-fsvqg8unk3]{background:#F0F6FC;box-shadow:inset 0 0 0 1px var(--brand)}
.cb .rpt td.ecell .ph[b-fsvqg8unk3]{color:#B9C1CC;font-size:11px}
.cb .rpt td.ed[b-fsvqg8unk3]{padding:2px 4px;min-width:180px}
.cb .rpt .rew[b-fsvqg8unk3]{display:flex;align-items:center;gap:4px}
.cb .rpt .rei[b-fsvqg8unk3]{flex:1;min-width:100px;border:1px solid var(--brand);border-radius:4px;padding:2px 6px;font:inherit;font-size:11.5px;background:#fff}
.cb .rpt .res[b-fsvqg8unk3]{border:0;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:600;background:var(--brand);color:#fff;cursor:pointer}
.cb .rpt .res:disabled[b-fsvqg8unk3]{opacity:.5}
.cb .rpt .rec[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:4px;padding:2px 7px;font-size:11px;background:#fff;cursor:pointer}

.cb .kb-r .cur[b-fsvqg8unk3]{font-size:10.5px;font-weight:700;color:var(--red)}
.cb td.c.out .wip[b-fsvqg8unk3]{font-family:var(--mono);white-space:nowrap}
.cb td.c.out .wip b[b-fsvqg8unk3]{font-weight:700;color:#2A57A8}
.cb td.c.out .wip .dang[b-fsvqg8unk3]{font-family:var(--sans);font-size:10px;color:#2A57A8;font-weight:600}
.cb.nocin td.ci[b-fsvqg8unk3]{display:none}
.cb td.tio[b-fsvqg8unk3]{font-family:var(--mono);font-size:10px;color:#4C5866;white-space:nowrap;line-height:1.25}
.cb td.tio span[b-fsvqg8unk3]{display:block}
.cb th.tio[b-fsvqg8unk3]{white-space:nowrap}
.cb.nocin td.tio[b-fsvqg8unk3],.cb.nocin th.tio[b-fsvqg8unk3]{display:none}
.cb.nocin th:nth-child(5)[b-fsvqg8unk3]{display:none}
.cb.nocin td.ck[b-fsvqg8unk3],.cb.nocin th.ck[b-fsvqg8unk3],.cb.nocin .kbck[b-fsvqg8unk3],.cb.nocin .selall[b-fsvqg8unk3]{display:none}
.cb.nocin td.n.e[b-fsvqg8unk3]{color:transparent}
.cb.nocin td.n.e>*[b-fsvqg8unk3]{visibility:hidden}
.cb.nocin td.c.out .chot[b-fsvqg8unk3]{display:none}
.cb.nocin td.okc[b-fsvqg8unk3],.cb.nocin th.okc[b-fsvqg8unk3]{display:none}
.cb.nocin .kb-n.e[b-fsvqg8unk3]{display:none}
.cb td.ck[b-fsvqg8unk3],.cb th.ck[b-fsvqg8unk3]{width:22px;text-align:center;padding:2px 3px}
.cb td.ck input[b-fsvqg8unk3],.cb .kbck[b-fsvqg8unk3]{margin:0;vertical-align:middle;cursor:pointer}
.cb .kb-h .kbck[b-fsvqg8unk3]{flex:0 0 auto}
.cb .sheet-tools[b-fsvqg8unk3]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.cb .sheet-tools .lbl[b-fsvqg8unk3]{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cb .sheet-tools .sep[b-fsvqg8unk3]{width:1px;height:18px;background:var(--line);margin:0 4px}
.cb .sheet-tools .selall[b-fsvqg8unk3]{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 11px;background:var(--surface);cursor:pointer;margin:0}
.cb .sheet-tools .selall input[b-fsvqg8unk3]{margin:0;cursor:pointer}
.cb .sheet-tools .selct[b-fsvqg8unk3]{font-size:11px;color:var(--muted)}
.cb .sheet-tools .selct b[b-fsvqg8unk3]{font-family:var(--mono);color:var(--brand)}
.cb .sheet-tools .kpi[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:600;background:var(--surface);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cb .sheet-tools .kpi b[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700;font-size:12px}
.cb .sheet-tools .kpi.ip b[b-fsvqg8unk3]{color:#0E5A8A}
.cb .sheet-tools .kpi.wt b[b-fsvqg8unk3]{color:#8A5B0E}
.cb .sheet-tools .kpi.dn b[b-fsvqg8unk3]{color:#256C39}
.cb .sheet-tools .kpi.on[b-fsvqg8unk3]{border-color:var(--ink);background:var(--ink);color:#fff}
.cb .sheet-tools .kpi.on b[b-fsvqg8unk3]{color:#fff}
.cb.nocin .sheet-tools[b-fsvqg8unk3]{display:none}
.cb td.okc[b-fsvqg8unk3],.cb th.okc[b-fsvqg8unk3]{width:20px;text-align:center;padding:2px}
.cb td.okc .tick[b-fsvqg8unk3]{display:inline-block;width:11px;height:15px;vertical-align:top;position:relative;font-size:0;line-height:0}
.cb td.okc .tick[b-fsvqg8unk3]:before{content:"";position:absolute;left:1px;top:3px;width:9px;height:5px;box-sizing:border-box;border-left:2px solid #1F7A46;border-bottom:2px solid #1F7A46;transform:rotate(-45deg)}
.cb .rpt td.mh-bap[b-fsvqg8unk3]{background:#FFF200}
.cb .rpt td.mh-ddgs[b-fsvqg8unk3]{background:#FCE4D6}
.cb .rpt td.mh-nanh[b-fsvqg8unk3]{background:#F4B183}
.cb .rpt td.mh-lua[b-fsvqg8unk3]{background:#DDEBF7}
.cb .rpt td.mh-canola[b-fsvqg8unk3]{background:#E2EFDA}

.cb .kb-h .kho[b-fsvqg8unk3]{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb .chip[b-fsvqg8unk3]{max-width:100%;white-space:normal;text-align:left;height:auto;min-height:24px;padding-top:2px;padding-bottom:2px}

.cb .kb-h .tb[b-fsvqg8unk3]{flex:0 0 auto}
.cb .kb-r .chg[b-fsvqg8unk3]{font-family:var(--sans)}
@media (max-width:900px){.cb .board[b-fsvqg8unk3]{columns:1}}

.cb .kb-h .tb.in[b-fsvqg8unk3]{background:#DCE9FC;color:#0E5A8A}

.cb .morewrap[b-fsvqg8unk3]{text-align:center;padding:12px 0 4px}

.cb .kb-h .dsid[b-fsvqg8unk3]{font-weight:700;color:#000;flex:0 0 auto;white-space:nowrap}

.cb .upl[b-fsvqg8unk3]{padding:6px 0}
.cb .uplmsg[b-fsvqg8unk3]{font-size:11.5px;color:var(--muted);padding:4px 0}
.cb .uplmsg.ok[b-fsvqg8unk3]{color:#256C39}
.cb .uplmsg a[b-fsvqg8unk3]{color:var(--brand);font-weight:600}

.cb .ms[b-fsvqg8unk3]{position:relative}
.cb .msb[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:8px;padding:4px 26px 4px 10px;font:inherit;font-size:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B7C' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;max-width:260px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--ink)}
.cb .msb.on[b-fsvqg8unk3]{border-color:var(--brand);color:var(--brand);font-weight:600}
.cb .msp[b-fsvqg8unk3]{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:240px;max-height:280px;overflow:auto}
.cb .ms.open .msp[b-fsvqg8unk3]{display:block}
.cb .ms .closer[b-fsvqg8unk3]{position:fixed;inset:0;z-index:39}
.cb .mss[b-fsvqg8unk3]{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font:inherit;font-size:12px;margin-bottom:4px;background:var(--bg)}
.cb .mss:focus[b-fsvqg8unk3]{outline:none;border-color:var(--brand)}
.cb .msp label[b-fsvqg8unk3]{display:block;padding:5px 8px;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.cb .msp label:hover[b-fsvqg8unk3]{background:var(--bg)}
.cb .msp .tip[b-fsvqg8unk3]{padding:6px 8px;font-size:11px;color:var(--muted)}
.cb .msp label input[type="checkbox"][b-fsvqg8unk3]{margin-right:5px;vertical-align:-1px}
.cb .msp label.sel[b-fsvqg8unk3]{background:#E9F0F8;color:var(--brand);font-weight:600}
.cb .cbms[b-fsvqg8unk3]{flex:0 0 auto;width:180px;min-width:0;display:flex;align-items:center}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown{width:100%;height:30px!important;min-height:30px;padding:0 26px 0 8px!important;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;position:relative;border:1px solid var(--line);border-radius:6px;background:var(--surface);box-shadow:none;font-size:11.5px}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-inputtext,.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-label,.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-chips-wrapper,.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-value{height:auto!important;line-height:1.3;padding:0!important;margin:0;display:flex;align-items:center;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;font-size:11.5px;color:var(--ink)}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-label.rz-placeholder{color:var(--ink);opacity:1}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-trigger{position:absolute;right:0;top:0;bottom:0;width:24px;height:auto!important;display:flex;align-items:center;justify-content:center;background:none;color:#5B6B7C}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-clear-icon{position:absolute;right:22px;top:50%;transform:translateY(-50%)}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown:focus-within,.cb .cbms[b-fsvqg8unk3]  .rz-dropdown.rz-state-focused{border-color:var(--brand);box-shadow:none}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)){border-color:var(--brand)}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)) .rz-dropdown-label{color:var(--brand);font-weight:600}
.cb .cbms[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-chip{background:#E9F0F8;color:var(--brand);border-radius:999px;font-size:10.5px}
.cb .snapov[b-fsvqg8unk3]{position:fixed;inset:0;background:rgba(243,245,248,.92);z-index:1400;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#12395B}
.cb .snapov i[b-fsvqg8unk3]{margin-right:8px}

.cb .tw[b-fsvqg8unk3]{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
    .cb[b-fsvqg8unk3]{font-size:12px;padding-bottom:16px}
    .cb .wrap[b-fsvqg8unk3]{padding:0 6px}
    .cb .top[b-fsvqg8unk3]{position:static;margin:0 6px 6px;border-radius:6px}
    .cb .shead[b-fsvqg8unk3]{position:static;padding-top:0}
    .cb .top .wrap[b-fsvqg8unk3]{padding:6px 8px;gap:6px}
    .cb .top .hrow[b-fsvqg8unk3]{gap:6px;padding:4px 0}
    .cb .top .hlb[b-fsvqg8unk3]{flex:0 0 100%;font-size:9.5px}
    .cb .seg[b-fsvqg8unk3]{flex-wrap:wrap;max-width:100%}
    .cb .seg button[b-fsvqg8unk3]{padding:6px 9px;flex:1 1 auto;text-align:center}
    .cb .range[b-fsvqg8unk3]{flex:1 1 100%}
    .cb .range input[b-fsvqg8unk3]{flex:1;min-width:0;height:34px}
    .cb .search[b-fsvqg8unk3]{height:34px;font-size:13px}
    .cb .top .ghsel[b-fsvqg8unk3]{flex:1 1 calc(50% - 3px);min-width:0;height:34px}
    .cb .ms[b-fsvqg8unk3]{flex:1 1 calc(50% - 3px);min-width:0}
    .cb .cbms[b-fsvqg8unk3]{flex:1 1 calc(50% - 3px);width:auto;min-width:0;max-width:none}
    .cb .cbms[b-fsvqg8unk3]  .rz-dropdown{height:34px!important;min-height:34px}
    .cb .msb[b-fsvqg8unk3]{width:100%;max-width:100%;height:34px}
    .cb .msp[b-fsvqg8unk3]{position:fixed;left:8px;right:8px;top:auto;bottom:8px;min-width:0;max-height:60vh;z-index:1250}
    .cb .ms .closer[b-fsvqg8unk3]{background:rgba(15,23,32,.35);z-index:1249}
    .cb .chips[b-fsvqg8unk3]{max-width:100%}
    .cb .chip[b-fsvqg8unk3]{max-width:100%;height:28px}
    .cb .tg[b-fsvqg8unk3]{height:28px;padding:2px 9px}
    .cb .right[b-fsvqg8unk3]{margin-left:0;width:100%;flex-wrap:wrap;gap:6px}
    .cb .right .sync[b-fsvqg8unk3]{flex:0 0 100%;text-align:right;font-size:10.5px}
    .cb .right .btn[b-fsvqg8unk3]{flex:1 1 calc(50% - 3px);height:36px;font-size:12px;padding:5px 8px}
    .cb .kmini[b-fsvqg8unk3]{flex:0 0 100%;text-align:center}
    .cb .sheet[b-fsvqg8unk3]{padding:8px 6px 10px;border-radius:8px}
    .cb .sheet-h[b-fsvqg8unk3]{gap:4px 8px;padding-bottom:6px;margin-bottom:8px}
    .cb .sheet-h .t[b-fsvqg8unk3]{font-size:13px}
    .cb .sheet-h .d[b-fsvqg8unk3]{flex:0 0 100%;font-size:11px}
    .cb .sheet-h .lg[b-fsvqg8unk3]{margin-left:0;flex:0 0 100%;gap:6px 10px}
    .cb .sheet-tools[b-fsvqg8unk3]{gap:6px}
    .cb .sheet-tools .lbl[b-fsvqg8unk3]{flex:0 0 100%}
    .cb .sheet-tools .sep[b-fsvqg8unk3]{display:none}
    .cb .sheet-tools .kpi[b-fsvqg8unk3],.cb .sheet-tools .selall[b-fsvqg8unk3]{padding:5px 10px}
    .cb .cards[b-fsvqg8unk3]{gap:8px}
    .cb .card[b-fsvqg8unk3]{flex-basis:78%}
    .cb .board[b-fsvqg8unk3]{columns:1;column-gap:0}
    .cb .kb[b-fsvqg8unk3]{margin:0 0 8px}
    .cb .kb-h[b-fsvqg8unk3]{padding:5px 7px;font-size:12px}
    .cb .kb-h .nm[b-fsvqg8unk3]{min-width:0;font-size:12px}
    .cb .kb-h .kho[b-fsvqg8unk3]{max-width:140px}
    .cb .kb-h .kb-l2[b-fsvqg8unk3]{margin-left:0;width:100%}
    .cb .tw table[b-fsvqg8unk3]{min-width:560px}
    .cb td[b-fsvqg8unk3],.cb th[b-fsvqg8unk3]{padding:4px 4px}
    .cb td.i[b-fsvqg8unk3]{width:24px;font-size:11px}
    .cb td.n[b-fsvqg8unk3]{min-width:130px;max-width:170px}
    .cb .toast[b-fsvqg8unk3]{bottom:12px;font-size:12.5px;padding:9px 12px}
    .cb .cmodal[b-fsvqg8unk3],.cb .rmodal[b-fsvqg8unk3]{padding:0;align-items:flex-end}
    .cb .cbox[b-fsvqg8unk3]{max-width:none;max-height:96vh;border-radius:12px 12px 0 0}
    .cb .rbox[b-fsvqg8unk3]{height:96vh;border-radius:12px 12px 0 0}
    .cb .rh[b-fsvqg8unk3],.cb .rflt[b-fsvqg8unk3]{padding:8px;gap:6px}
    .cb .rh .racts[b-fsvqg8unk3]{margin-left:0;width:100%}
    .cb .rh .racts .btn[b-fsvqg8unk3]{flex:1 1 auto;height:36px}
    .cb .rpt[b-fsvqg8unk3]{padding:8px}
    .cb .rpt table[b-fsvqg8unk3]{display:block;overflow-x:auto;white-space:nowrap}
    .cb .ch[b-fsvqg8unk3]{padding:10px 12px;border-radius:12px 12px 0 0}
    .cb .cs[b-fsvqg8unk3]{padding:6px 12px 0}
    .cb .cs .kvrow[b-fsvqg8unk3]{flex-wrap:wrap;gap:4px 10px}
    .cb .cs .kvrow select[b-fsvqg8unk3]{max-width:100%;width:100%}
    .cb .cs .kvrow input.note[b-fsvqg8unk3]{flex:1 1 100%}
    .cb .opt[b-fsvqg8unk3]{padding:8px 10px;gap:8px;flex-wrap:wrap}
    .cb .opt input[type=number][b-fsvqg8unk3]{width:100px;height:36px}
    .cb .cerr[b-fsvqg8unk3]{margin:8px 12px 0}
    .cb .cf[b-fsvqg8unk3]{flex-wrap:wrap;gap:6px;padding:10px 12px}
    .cb .cf .btn[b-fsvqg8unk3]{flex:1 1 auto;height:38px}
    .cb .cf .btn.danger[b-fsvqg8unk3]{flex:1 1 100%;margin-right:0}
    .cb .wllist[b-fsvqg8unk3]{max-height:40vh}
}
.cb td.fq .qty[b-fsvqg8unk3]{cursor:pointer;font-weight:700}
.cb td.fq .chot[b-fsvqg8unk3]{color:var(--brand);font-family:var(--sans);font-size:10.5px;font-weight:600;opacity:.35;transition:.15s}
.cb tr:hover td.fq .chot[b-fsvqg8unk3]{opacity:1}
.cb .cs .kvrow input.fqi[b-fsvqg8unk3]{width:150px;font:inherit;font-family:var(--mono);font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:6px;padding:5px 8px;text-align:right}
.cb .cs .kvrow input.fqi:focus[b-fsvqg8unk3]{outline:none;border-color:var(--brand)}
.cb .cs .kvrow input.fqi.fqd[b-fsvqg8unk3]{width:210px;font-weight:600;font-size:12px;text-align:left}
.cb .cs .fqchips[b-fsvqg8unk3]{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 4px;border-bottom:1px solid #EEF1F5}
.cb .cs .fqchips .chip[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:11.5px;font-weight:600;padding:3px 10px;cursor:pointer;color:var(--ink)}
.cb .cs .fqchips .chip.on[b-fsvqg8unk3]{border-color:var(--brand);background:#E9F0F8;color:var(--brand)}
.cb .cs .fqchips .chip.add[b-fsvqg8unk3]{color:var(--muted);border-style:dashed}
.cb .cs .fqchips .chip.add.on[b-fsvqg8unk3]{color:var(--brand);border-style:solid}
.cb .cs .fqprev[b-fsvqg8unk3]{display:block;margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:240px;background:#F3F5F8;text-align:center}
.cb .cs .fqprev img[b-fsvqg8unk3]{max-width:100%;max-height:240px;display:block;margin:0 auto}
.cb .cs .fqerr[b-fsvqg8unk3]{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid #EEF1F5;cursor:pointer}
.cb .cs .fqerr input[b-fsvqg8unk3]{margin:2px 0 0;cursor:pointer}
.cb .cs .fqerr b[b-fsvqg8unk3]{display:block;font-size:12.5px;color:var(--red)}
.cb .cs .fqerr small[b-fsvqg8unk3]{display:block;font-size:10.5px;color:var(--muted);line-height:1.3}
.cb .kb-h .hgh .edm[b-fsvqg8unk3]{font-style:normal;color:var(--brand);margin-left:1px}
.cb .cs .kvrow input.edi[b-fsvqg8unk3]{width:170px;text-align:left;font-weight:600}
.cb .cs .edlist[b-fsvqg8unk3]{max-height:240px;overflow:auto;margin:6px 0 4px}
.cb .cs .edrow[b-fsvqg8unk3]{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid #F3F5F8;font-size:11.5px}
.cb .cs .edrow .dsid[b-fsvqg8unk3]{font-family:var(--mono);font-weight:700;flex:0 0 auto}
.cb .cs .edrow .nm[b-fsvqg8unk3]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb .cs .edrow .dt[b-fsvqg8unk3]{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.cb .rpt .rblk[b-fsvqg8unk3]{padding:4px 0 10px}
.cb .rpt h3 .rsnap[b-fsvqg8unk3]{margin-left:8px;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12px;color:var(--brand);background:#fff;vertical-align:middle}
.cb .rpt h3 .rsnap:hover[b-fsvqg8unk3]{border-color:var(--brand)}
.cb.nocin .rpt .rsnap[b-fsvqg8unk3],.cb.nocin .rpt .ph[b-fsvqg8unk3]{visibility:hidden}
.cb .rflt .range[b-fsvqg8unk3]{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.cb .rflt .range input[b-fsvqg8unk3]{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit;font-size:11.5px;background:var(--surface);height:30px}
.cb .cs .kvrow .sp[b-fsvqg8unk3]{font-size:10.5px;color:var(--muted);font-weight:400;margin-left:auto;margin-right:8px}
.cb .rflt .rsw[b-fsvqg8unk3]{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.cb .rflt .rsw input[b-fsvqg8unk3]{position:absolute;opacity:0;width:0;height:0}
.cb .rflt .rsw .rsw-track[b-fsvqg8unk3]{position:relative;width:30px;height:16px;border-radius:999px;background:#C9D1DB;transition:.15s}
.cb .rflt .rsw .rsw-knob[b-fsvqg8unk3]{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.cb .rflt .rsw input:checked + .rsw-track[b-fsvqg8unk3]{background:var(--brand)}
.cb .rflt .rsw input:checked + .rsw-track .rsw-knob[b-fsvqg8unk3]{left:16px}
@media (max-width:640px){.cb .rflt .rsw[b-fsvqg8unk3]{margin-left:0}}
.cb .rpt th.sortable[b-fsvqg8unk3]{cursor:pointer;user-select:none;white-space:nowrap}
.cb .rpt th.sortable:hover[b-fsvqg8unk3]{background:#E9F0F8}
.cb .rpt th .sarr[b-fsvqg8unk3]{font-size:9px;margin-left:4px;color:#B9C1CC}
.cb .rpt th.sorted[b-fsvqg8unk3]{background:#E3EDF7;color:var(--brand)}
.cb .rpt th.sorted .sarr[b-fsvqg8unk3]{color:var(--brand)}
.cb.nocin .rpt th .sarr[b-fsvqg8unk3]{visibility:hidden}
.cb td.p .pln[b-fsvqg8unk3]{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;max-width:100%;vertical-align:top}
.cb td.p .pln .vt[b-fsvqg8unk3],.cb td.p .pln .lap[b-fsvqg8unk3]{margin:0;flex:0 0 auto}
.cb td.p .rotl[b-fsvqg8unk3]{display:flex;align-items:center;gap:4px;margin-top:2px;white-space:nowrap}
.cb td.p .rotl .rott[b-fsvqg8unk3]{margin:0}
.cb td.p .rotl .rotd[b-fsvqg8unk3]{display:inline-block;font-family:var(--sans);font-size:9.5px;font-weight:700;color:#9A3B36;background:#FDE3E1;border-radius:3px;padding:0 5px}
.cb td.i.rotk[b-fsvqg8unk3]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.cb td.i.rotk.nor[b-fsvqg8unk3]{cursor:not-allowed;color:#B9C1CC}
.cb td.i.rotk.nor:hover[b-fsvqg8unk3]{color:#B9C1CC;font-weight:400}
.cb tr.prev td[b-fsvqg8unk3]{opacity:.55}
.cb tr.prev td.ci[b-fsvqg8unk3]{color:#8A94A6;font-style:italic}
.cb tr.prev td.i[b-fsvqg8unk3]{color:#8A94A6;font-weight:400}
.cb tr.prevsep td[b-fsvqg8unk3]{background:#EEF1F5;border-bottom:1px solid var(--line);opacity:1}
.cb tr.prevsep td.psep[b-fsvqg8unk3]{font-family:var(--sans);font-size:10.5px;font-weight:700;color:#4C5866;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;user-select:none}
.cb tr.prevsep td.psep .tgi[b-fsvqg8unk3]{font-size:9px;color:var(--brand);margin-right:5px}
.cb tr.prevsep:hover td[b-fsvqg8unk3]{background:#E3E8EF}
.cb tr.hid[b-fsvqg8unk3]{display:none}
.cb.nocin tr.hid[b-fsvqg8unk3]{display:table-row}
.cb.nocin tr.prevsep .tgi[b-fsvqg8unk3]{display:none}
.cb .kb-h .cont.rotfrom[b-fsvqg8unk3]{background:#FDE3E1;color:#9A3B36}
.cb .kb-f .rf[b-fsvqg8unk3]{color:var(--red)}
.cb .cs .rothint[b-fsvqg8unk3]{font-size:10.5px;color:var(--muted);line-height:1.35;padding:6px 0 2px}

.cb .mtabs[b-fsvqg8unk3]{display:flex;gap:2px;margin:0 12px 8px;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:12;background:var(--bg);padding-top:4px}
.cb .mtabs button[b-fsvqg8unk3]{padding:8px 18px;font-weight:700;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.cb .mtabs button i[b-fsvqg8unk3]{margin-right:6px;font-size:11.5px}
.cb .mtabs button.on[b-fsvqg8unk3]{color:var(--brand);border-bottom-color:var(--brand)}
.cb.tbmode[b-fsvqg8unk3]{padding-bottom:0}
.cb-tb[b-fsvqg8unk3]{padding:0 12px 20px}
.cb .kb-h .tau[b-fsvqg8unk3]{font-family:var(--sans);font-size:10.5px;font-weight:700;color:#0E5A8A;background:#E3F0F9;border-radius:3px;padding:1px 6px;flex:0 1 auto;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.cb .kb-h .tau i[b-fsvqg8unk3]{font-size:9.5px;margin-right:4px}
.cb td.p .pln .plc[b-fsvqg8unk3]{cursor:pointer;border-bottom:1px dashed transparent}
.cb td.p .pln .plc:hover[b-fsvqg8unk3]{color:var(--brand);border-bottom-color:var(--brand)}
.cb td.n .ps.tau[b-fsvqg8unk3]{color:#0E5A8A;background:#E3F0F9}
.cb td.n .ps.tau i[b-fsvqg8unk3]{font-size:9px;margin-right:2px}
.cb .cs .kvrow small[b-fsvqg8unk3]{display:block;font-size:10px;color:var(--muted);font-weight:400;font-family:var(--sans)}
.cb .cs .mss[b-fsvqg8unk3]{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font:inherit;font-size:12px;margin:8px 0 4px;background:var(--bg)}
@media (max-width:640px){
    .cb .mtabs[b-fsvqg8unk3]{margin:0 8px 6px;position:static}
    .cb .mtabs button[b-fsvqg8unk3]{flex:1 1 auto;padding:8px 6px;font-size:12.5px}
    .cb-tb[b-fsvqg8unk3]{padding:0 6px 16px}
}

.cb .cs .kvrow.cmb[b-fsvqg8unk3]{flex-direction:column;align-items:stretch;gap:4px}
.cb .cs .kvrow.cmb > span[b-fsvqg8unk3]{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cb .cs .kvrow.cmb > span small[b-fsvqg8unk3]{display:inline}
.cb .cs .cbms.cbi[b-fsvqg8unk3]{flex:none;width:100%;min-width:0;max-width:none}
.cb .cs .cbms.cbi[b-fsvqg8unk3]  .rz-dropdown{height:32px!important;min-height:32px;font-size:12px;border-radius:8px;padding:0 26px 0 10px!important}
.cb .cs .cbms.cbi[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-label{font-size:12px;font-weight:600}
.cb .cs .cbms.cbi[b-fsvqg8unk3]  .rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)){border-color:var(--line)}
.cb .cs .cbms.cbi[b-fsvqg8unk3]  .rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)) .rz-dropdown-label{color:var(--ink)}
.cb .cs .cbms.cbi.on[b-fsvqg8unk3]  .rz-dropdown{border-color:var(--brand)}
.cb .cs .cbms.cbi.on[b-fsvqg8unk3]  .rz-dropdown .rz-dropdown-label{color:var(--brand)}

.cb .range[b-fsvqg8unk3]  .rz-datepicker{width:118px}
.cb[b-fsvqg8unk3]  .rz-datepicker .rz-inputtext{height:30px;min-height:30px;font-size:11.5px;font-family:inherit;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--surface);color:var(--ink);box-shadow:none}
.cb[b-fsvqg8unk3]  .rz-datepicker .rz-inputtext:focus{border-color:var(--brand);box-shadow:none}
.cb[b-fsvqg8unk3]  .rz-datepicker .rz-datepicker-trigger{height:30px;min-height:30px;border-radius:0 6px 6px 0}
.cb .cs .kvrow[b-fsvqg8unk3]  .rz-datepicker{width:170px}

.cb tr.diff td[b-fsvqg8unk3]{background:#F7F8FA}
.cb tr.diff td.p[b-fsvqg8unk3],.cb tr.diff td.v[b-fsvqg8unk3],.cb tr.diff td.c[b-fsvqg8unk3]{color:#6B7683}
.cb tr.diff td.c .qty[b-fsvqg8unk3],.cb tr.diff td.c .sugq[b-fsvqg8unk3]{opacity:.7}

.cb .rpt table.pin[b-fsvqg8unk3]{border-collapse:separate;border-spacing:0}
.cb .rpt table.pin th[b-fsvqg8unk3],.cb .rpt table.pin td[b-fsvqg8unk3]{border-width:0 1px 1px 0}
.cb .rpt table.pin th:first-child[b-fsvqg8unk3],.cb .rpt table.pin td:first-child[b-fsvqg8unk3]{border-left-width:1px}
.cb .rpt table.pin thead th[b-fsvqg8unk3]{position:sticky;top:0;z-index:3;border-top-width:1px}
.cb .rpt table.pin tr.tot td[b-fsvqg8unk3]{position:sticky;bottom:0;z-index:2;box-shadow:0 -1px 0 #9AA4B0}
@media (max-width:640px){.cb .rpt table.pin[b-fsvqg8unk3]{display:table}}
/* /Components/Pages/V2/DailyDeliveryDetailReport/DailyDeliveryDetailCostReport.razor.rz.scp.css */
.filters-section[b-jqxtpdoiqo] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

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

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

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

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

.filter-input[b-jqxtpdoiqo], .filter-select[b-jqxtpdoiqo] {
    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-jqxtpdoiqo], .filter-select:focus[b-jqxtpdoiqo] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.header[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-jqxtpdoiqo], .filter-select[b-jqxtpdoiqo] {
    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-jqxtpdoiqo], .filter-select:focus[b-jqxtpdoiqo] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.btn[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

.table-container[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-jqxtpdoiqo] {
    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-jqxtpdoiqo 0.3s ease;
    padding: 20px;
}

.modal-container[b-jqxtpdoiqo] {
    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-jqxtpdoiqo 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

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

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

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

.info-item[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

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

        .transport-grid-full .rz-grid-table th[b-jqxtpdoiqo] {
            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-jqxtpdoiqo] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        max-width: 95%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    background: rgba(255, 255, 255, 0.8);
}

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

/* Tooltip enhancements */
.rz-tooltip[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    user-select: none;
}

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-jqxtpdoiqo {
    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-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

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

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

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

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

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

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

/* Header styles */
.header[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-jqxtpdoiqo], .filter-select[b-jqxtpdoiqo] {
    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-jqxtpdoiqo], .filter-select:focus[b-jqxtpdoiqo] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal styles */
.modal-overlay[b-jqxtpdoiqo] {
    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-jqxtpdoiqo 0.3s ease;
}

.modal-container[b-jqxtpdoiqo] {
    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-jqxtpdoiqo 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        background-color: rgba(255, 255, 255, 0.1);
    }

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

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

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

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

/* Transport header actions */
.transport-header-actions[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-row-item[b-jqxtpdoiqo] {
    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-jqxtpdoiqo] {
        border-bottom: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-jqxtpdoiqo] {
    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-jqxtpdoiqo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-jqxtpdoiqo {
    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-jqxtpdoiqo] {
        width: 98%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-jqxtpdoiqo] {
    background-color: #f0f8ff;
}

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

/* Custom status indicators */
.status-indicator[b-jqxtpdoiqo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

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

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

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

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

/* Filter wrapper */
.filter-wrapper[b-jqxtpdoiqo] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-jqxtpdoiqo] {
        display: none !important;
    }
    
    .mobile-filters-content[b-jqxtpdoiqo] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-jqxtpdoiqo] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-jqxtpdoiqo] {
        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-jqxtpdoiqo] {
        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-jqxtpdoiqo] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-jqxtpdoiqo] {
        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-jqxtpdoiqo] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-jqxtpdoiqo] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-jqxtpdoiqo] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-jqxtpdoiqo] {
        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-jqxtpdoiqo] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-jqxtpdoiqo] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-jqxtpdoiqo] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-jqxtpdoiqo] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-jqxtpdoiqo], .filter-select[b-jqxtpdoiqo] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-jqxtpdoiqo] {
        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-jqxtpdoiqo] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-jqxtpdoiqo] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-jqxtpdoiqo],
    .rz-grid-table td[b-jqxtpdoiqo] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-jqxtpdoiqo] {
        position: static !important;
    }
}
/* /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;
    }
}

/* Ngăn các filter (đặc biệt dropdown Radzen) tràn ngang khỏi filters-grid,
   gây ra thanh cuộn ngang không mong muốn khi có nhiều filter trên 1 hàng. */
.filters-section[b-ifhjjz7bdv],
.filter-wrapper[b-ifhjjz7bdv],
.mobile-filters-content[b-ifhjjz7bdv],
.filters-grid[b-ifhjjz7bdv] {
    min-width: 0;
    max-width: 100%;
}

.filter-group[b-ifhjjz7bdv] {
    min-width: 0;
}

.filter-group .filter-select[b-ifhjjz7bdv],
.filter-group .filter-input[b-ifhjjz7bdv],
.filter-group .rz-dropdown[b-ifhjjz7bdv],
.filter-group .rz-textbox[b-ifhjjz7bdv] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* /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);
}
/* /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;
}
/* /Components/Pages/V2/Export_Command/Export_Command.razor.rz.scp.css */
.lx-app[b-xp2jh8zxyy], .lx-scrim[b-xp2jh8zxyy], .lx-toast[b-xp2jh8zxyy] {
    --primary: var(--primary-color, #ca3c19);
    --ink: #16202A;
    --steel: #46525E;
    --mute: #6B7785;
    --canvas: #F4F6F8;
    --surface: #fff;
    --sunk: #F1F4F7;
    --rule: #D9DFE6;
    --rule2: #B9C2CC;
    --signal: #9A5B00;
    --signal-bg: #FCF1DC;
    --stop: #B3261E;
    --stop-bg: #FBE5E3;
    --go: #237A45;
    --go-bg: #E2F2E7;
    --info: #1F4E8C;
    --info-bg: #E6EEF8;
}

.lx-app[b-xp2jh8zxyy] {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--canvas);
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    padding: 16px 20px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lx-sub[b-xp2jh8zxyy] {
    font-size: 12px;
    color: var(--mute);
    margin-left: auto;
}

.lx-tabs[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.lx-tabs button[b-xp2jh8zxyy] {
    padding: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--steel);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: -1px;
}

.lx-tabs button.on[b-xp2jh8zxyy] {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.lx-tabs button:hover:not(.on)[b-xp2jh8zxyy] {
    color: var(--ink);
}

.lx-kpi[b-xp2jh8zxyy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.lx-kpi > div[b-xp2jh8zxyy] {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 7px 11px;
}

.lx-kpi .lb[b-xp2jh8zxyy] {
    font-size: 10px;
    color: var(--mute);
}

.lx-kpi .vl[b-xp2jh8zxyy] {
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.02em;
    margin-top: 1px;
    color: var(--ink);
}

.lx-kpi .vl.w[b-xp2jh8zxyy] { color: var(--signal); }
.lx-kpi .vl.s[b-xp2jh8zxyy] { color: var(--stop); }

.lx-kpi .ex[b-xp2jh8zxyy] {
    font-size: 10px;
    color: var(--mute);
    margin-top: 1px;
}

.lx-fb[b-xp2jh8zxyy] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.lx-fbtools[b-xp2jh8zxyy] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.lx-fb select[b-xp2jh8zxyy] {
    padding: 6px 9px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.lx-fb .rs[b-xp2jh8zxyy] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--mute);
    cursor: pointer;
    text-decoration: underline;
}

.lx-fb .rs:hover[b-xp2jh8zxyy] { color: var(--ink); }

.lx-fbitem[b-xp2jh8zxyy] {
    width: 150px;
    font-size: 12px;
}

.lx-fbitem .rz-dropdown[b-xp2jh8zxyy] {
    min-height: 26px;
    border-radius: 6px;
    border-color: var(--rule2);
}

.lx-btn.sm[b-xp2jh8zxyy] {
    padding: 4px 10px;
    font-size: 11.5px;
    min-width: 64px;
    text-align: center;
}

.lx-btn:disabled[b-xp2jh8zxyy] {
    opacity: .4;
    cursor: not-allowed;
}

.lx-pager[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lx-pagelbl[b-xp2jh8zxyy] {
    font-size: 12px;
    color: var(--steel);
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
}

.lx-pill[b-xp2jh8zxyy] {
    padding: 5px 12px;
    border: 1px solid var(--rule2);
    background: var(--surface);
    border-radius: 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--steel);
    cursor: pointer;
}

.lx-pill.on[b-xp2jh8zxyy] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.lx-bar[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.lx-loading[b-xp2jh8zxyy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--mute);
}

.lx-search[b-xp2jh8zxyy] {
    padding: 6px 10px;
    border: 1px solid var(--rule2);
    font-family: inherit;
    font-size: 12px;
    width: 220px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
}

.lx-search:focus[b-xp2jh8zxyy] {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.lx-tw[b-xp2jh8zxyy] {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.lx-tw table[b-xp2jh8zxyy] {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.lx-tw th[b-xp2jh8zxyy] {
    font-size: 11px;
    color: var(--mute);
    font-weight: 500;
    text-align: left;
    padding: 9px 11px;
    border-bottom: 1px solid var(--rule2);
    background: var(--sunk);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.lx-tw td[b-xp2jh8zxyy] {
    padding: 10px 11px;
    border-bottom: 1px solid var(--rule);
}

.lx-tw th.r[b-xp2jh8zxyy], .lx-tw td.r[b-xp2jh8zxyy] {
    text-align: right;
}

.lx-mono[b-xp2jh8zxyy] {
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.lx-row[b-xp2jh8zxyy] {
    cursor: pointer;
}

.lx-row:hover td[b-xp2jh8zxyy], .lx-row.open td[b-xp2jh8zxyy] {
    background: var(--sunk);
}

.lx-row .lx-chev[b-xp2jh8zxyy] {
    color: var(--mute);
    display: inline-block;
    width: 11px;
    transition: transform .12s;
}

.lx-row.open .lx-chev[b-xp2jh8zxyy] {
    transform: rotate(90deg);
}

.lx-code[b-xp2jh8zxyy] {
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-weight: 500;
}

.lx-badge[b-xp2jh8zxyy] {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
}

.lx-badge.go[b-xp2jh8zxyy] { background: var(--go-bg); color: var(--go); }
.lx-badge.warn[b-xp2jh8zxyy] { background: var(--signal-bg); color: var(--signal); }
.lx-badge.stop[b-xp2jh8zxyy] { background: var(--stop-bg); color: var(--stop); }
.lx-badge.off[b-xp2jh8zxyy] { background: #EDEFF2; color: var(--steel); }
.lx-badge.info[b-xp2jh8zxyy] { background: var(--info-bg); color: var(--info); }

.lx-mute[b-xp2jh8zxyy] {
    color: var(--mute);
}

.warn[b-xp2jh8zxyy] { color: var(--stop); }

.lx-det > td[b-xp2jh8zxyy] {
    padding: 0;
    background: var(--sunk);
    border-bottom: 1px solid var(--rule2);
}

.lx-panel[b-xp2jh8zxyy] {
    padding: 13px 16px 15px 36px;
    border-left: 3px solid var(--primary);
}

.lx-kv[b-xp2jh8zxyy] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
}

.lx-kv span[b-xp2jh8zxyy] {
    color: var(--steel);
    min-width: 130px;
}

.lx-kv b[b-xp2jh8zxyy] {
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-weight: 500;
}

.lx-acts[b-xp2jh8zxyy] {
    margin-top: 11px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.lx-ptitle[b-xp2jh8zxyy] {
    font-size: 11px;
    color: var(--mute);
    font-weight: 600;
    margin: 18px 0 9px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

.lx-ptitle.first[b-xp2jh8zxyy] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.lx-tag[b-xp2jh8zxyy] {
    font-size: 10px;
    color: var(--steel);
    background: var(--sunk);
    border: 1px solid var(--rule);
    padding: 1px 6px;
    border-radius: 5px;
    display: inline-block;
}

.lx-comp[b-xp2jh8zxyy] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-collapse: collapse;
    border-radius: 6px;
}

.lx-comp th[b-xp2jh8zxyy] {
    background: var(--surface);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 9px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
}

.lx-comp th.r[b-xp2jh8zxyy] { text-align: right; }

.lx-comp td[b-xp2jh8zxyy] {
    padding: 6px 9px;
    font-size: 12px;
    border-bottom: 1px solid var(--rule);
}

.lx-comp td.r[b-xp2jh8zxyy] { text-align: right; }

.lx-comp tr:last-child td[b-xp2jh8zxyy] { border-bottom: none; }

.lx-track[b-xp2jh8zxyy] {
    width: 64px;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.lx-track i[b-xp2jh8zxyy] { display: block; height: 100%; background: var(--go); }
.lx-track.w i[b-xp2jh8zxyy] { background: var(--signal); }
.lx-track.s i[b-xp2jh8zxyy] { background: var(--stop); }

.lx-empty[b-xp2jh8zxyy] {
    padding: 38px;
    text-align: center;
    color: var(--mute);
}

.lx-foot[b-xp2jh8zxyy] {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.lx-cnt[b-xp2jh8zxyy] {
    font-size: 12px;
    color: var(--mute);
    margin-left: auto;
}

.lx-btn[b-xp2jh8zxyy] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--rule2);
    background: var(--surface);
    cursor: pointer;
    border-radius: 6px;
    color: var(--ink);
}

.lx-btn:hover[b-xp2jh8zxyy] { border-color: var(--steel); }

.lx-btn.pri[b-xp2jh8zxyy] {
    background: linear-gradient(135deg, var(--primary) 0%, #b33517 100%);
    border-color: var(--primary);
    color: #fff;
}

.lx-btn.pri:hover[b-xp2jh8zxyy] {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #cc4a2a 100%);
    border-color: var(--primary-hover);
}

.lx-btn.danger[b-xp2jh8zxyy] {
    color: var(--stop);
    border-color: var(--stop);
}

.lx-scrim[b-xp2jh8zxyy] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(18, 23, 30, .6);
    z-index: 9999;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.lx-scrim.on[b-xp2jh8zxyy] { display: flex; }

.lx-modal[b-xp2jh8zxyy] {
    background: var(--surface);
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 80px);
    border: 1px solid var(--rule2);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(18, 23, 30, .35);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--ink);
    display: flex;
    flex-direction: column;
}

.lx-modal.wide[b-xp2jh8zxyy] { max-width: 780px; }

.lx-grid2[b-xp2jh8zxyy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lx-grid3[b-xp2jh8zxyy] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.lx-mh[b-xp2jh8zxyy] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    flex: none;
}

.lx-mh h3[b-xp2jh8zxyy] { font-size: 15px; font-weight: 600; margin: 0; }

.lx-mh button[b-xp2jh8zxyy] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 19px;
    color: var(--mute);
    cursor: pointer;
    line-height: 1;
}

.lx-steps[b-xp2jh8zxyy] {
    display: flex;
    padding: 0 18px;
    border-bottom: 1px solid var(--rule);
    flex: none;
}

.lx-steps > div[b-xp2jh8zxyy] {
    flex: 1;
    padding: 10px 0 9px;
    font-size: 12px;
    color: var(--mute);
    text-align: center;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

.lx-steps > div.on[b-xp2jh8zxyy] { color: var(--ink); border-bottom-color: var(--primary); }
.lx-steps > div.dn[b-xp2jh8zxyy] { color: var(--go); }

.lx-steps em[b-xp2jh8zxyy] {
    font-style: normal;
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    opacity: .55;
    margin-right: 5px;
}

.lx-mb[b-xp2jh8zxyy] {
    padding: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.lx-mf[b-xp2jh8zxyy] {
    padding: 13px 18px;
    border-top: 1px solid var(--rule);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--sunk);
    flex: none;
}

.lx-fld[b-xp2jh8zxyy] { margin: 0 0 14px 0; }

.lx-fld label[b-xp2jh8zxyy] {
    display: block;
    font-size: 11px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 4px;
}

.lx-fld label.lx-check[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
    font-weight: 400;
}

.lx-fld input[type="text"][b-xp2jh8zxyy], .lx-fld input[type="number"][b-xp2jh8zxyy], .lx-fld input[type="date"][b-xp2jh8zxyy], .lx-fld input:not([type])[b-xp2jh8zxyy], .lx-fld select[b-xp2jh8zxyy] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--rule2);
    font-family: inherit;
    font-size: 13px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
}

.lx-fld input[disabled][b-xp2jh8zxyy] { background: var(--sunk); color: var(--steel); }

.lx-fld input:focus[b-xp2jh8zxyy], .lx-fld select:focus[b-xp2jh8zxyy] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(202, 60, 25, 0.12);
}

.lx-seg2[b-xp2jh8zxyy] {
    display: inline-flex;
    background: var(--sunk);
    padding: 3px;
    border-radius: 8px;
}

.lx-seg2 button[b-xp2jh8zxyy] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--steel);
    border-radius: 6px;
}

.lx-seg2 button.on[b-xp2jh8zxyy] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.lx-pick3[b-xp2jh8zxyy] {
    display: flex;
    gap: 6px;
}

.lx-pick3 button[b-xp2jh8zxyy] {
    flex: 1;
    padding: 9px 8px;
    border: 1px solid var(--rule2);
    background: var(--surface);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--steel);
    cursor: pointer;
    line-height: 1.4;
}

.lx-pick3 button span[b-xp2jh8zxyy] { font-weight: 400; opacity: .7; }

.lx-pick3 button.on[b-xp2jh8zxyy] {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.lx-pickwrap[b-xp2jh8zxyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lx-pickitem[b-xp2jh8zxyy] {
    padding: 6px 12px;
    border: 1px solid var(--rule2);
    background: var(--surface);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--steel);
    cursor: pointer;
}

.lx-pickitem.on[b-xp2jh8zxyy] {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.lx-combo[b-xp2jh8zxyy] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    background: var(--surface);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

.lx-combo:hover[b-xp2jh8zxyy] { border-color: var(--steel); }

.lx-combo-chev[b-xp2jh8zxyy] {
    color: var(--mute);
    font-size: 11px;
    flex: none;
}

.lx-combo-panel[b-xp2jh8zxyy] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--rule2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 23, 30, .18);
    z-index: 5;
    padding: 6px;
    cursor: default;
}

.lx-combo-item[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
}

.lx-combo-item:hover[b-xp2jh8zxyy] { background: var(--sunk); }

.lx-layer[b-xp2jh8zxyy] {
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
}

.lx-layerh[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--steel);
}

.lx-layerh input[b-xp2jh8zxyy] {
    width: 90px;
    padding: 5px 8px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-size: 12px;
    text-align: right;
}

.lx-cl[b-xp2jh8zxyy] {
    display: grid;
    grid-template-columns: 1fr 60px 90px 26px;
    gap: 7px;
    align-items: center;
    margin-bottom: 7px;
}

.lx-cl select[b-xp2jh8zxyy], .lx-cl input[b-xp2jh8zxyy] {
    padding: 6px 8px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--surface);
    color: var(--ink);
    min-width: 0;
}

.lx-o[b-xp2jh8zxyy] {
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--steel);
    text-align: right;
}

.lx-x[b-xp2jh8zxyy] {
    background: none;
    border: none;
    color: var(--mute);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.lx-x:hover[b-xp2jh8zxyy] { color: var(--stop); }

.lx-add[b-xp2jh8zxyy] {
    background: none;
    border: 1px dashed var(--rule2);
    border-radius: 6px;
    padding: 7px;
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    color: var(--steel);
    cursor: pointer;
    margin-top: 2px;
}

.lx-add:hover[b-xp2jh8zxyy] { border-color: var(--primary); color: var(--primary); }

.lx-rv[b-xp2jh8zxyy] {
    background: var(--sunk);
    border-radius: 8px;
    padding: 13px 15px;
    margin-top: 12px;
}

.lx-rv .h5[b-xp2jh8zxyy] {
    font-size: 11px;
    color: var(--mute);
    margin-bottom: 7px;
    font-weight: 600;
}

.lx-rv .ln[b-xp2jh8zxyy] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 5px 0;
}

.lx-rv .ln + .ln[b-xp2jh8zxyy] { border-top: 1px solid var(--rule); }

.lx-rv b[b-xp2jh8zxyy] { font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace; font-weight: 500; }

.lx-imp[b-xp2jh8zxyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 7px 0;
}

.lx-imp + .lx-imp[b-xp2jh8zxyy] { border-top: 1px solid var(--rule); }
.lx-imp .r[b-xp2jh8zxyy] { text-align: right; font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace; font-size: 12px; }

.lx-alert[b-xp2jh8zxyy] {
    margin-top: 4px;
    padding: 9px 12px;
    background: var(--info-bg);
    border-left: 3px solid var(--info);
    font-size: 12px;
    color: var(--info);
    border-radius: 4px;
}

.lx-alert.stop[b-xp2jh8zxyy] {
    background: var(--stop-bg);
    border-left-color: var(--stop);
    color: var(--stop);
}

.lx-toast[b-xp2jh8zxyy] {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    font-size: 12px;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    border-radius: 8px;
    z-index: 10000;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.lx-toast.on[b-xp2jh8zxyy] { opacity: 1; }

@media (max-width: 760px) {
    .lx-kpi[b-xp2jh8zxyy] { grid-template-columns: 1fr 1fr; }
    .lx-grid2[b-xp2jh8zxyy], .lx-grid3[b-xp2jh8zxyy] { grid-template-columns: 1fr; }
}

.lx-tabbadge[b-xp2jh8zxyy] {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 9px;
    background: var(--stop);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.lx-fbitem.wide[b-xp2jh8zxyy] {
    width: 260px;
}

.lx-range[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mute);
}

.lx-range input[type="date"][b-xp2jh8zxyy] {
    padding: 5px 8px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--surface);
    color: var(--ink);
}

.lx-tw th.lx-sort[b-xp2jh8zxyy] {
    cursor: pointer;
    user-select: none;
}

.lx-tw th.lx-sort:hover[b-xp2jh8zxyy] {
    color: var(--ink);
}

.lx-tw th.lx-sort i[b-xp2jh8zxyy] {
    font-style: normal;
    font-size: 9px;
    color: var(--rule2);
    margin-left: 2px;
}

.lx-tw th.lx-sort.on[b-xp2jh8zxyy] {
    color: var(--ink);
}

.lx-tw th.lx-sort.on i[b-xp2jh8zxyy] {
    color: var(--primary);
}

.lx-gan td[b-xp2jh8zxyy] {
    padding: 7px 9px;
    font-size: 12px;
    vertical-align: top;
}

.lx-gan .lx-tag[b-xp2jh8zxyy] {
    margin-top: 2px;
}

.lx-ganrow.unas td:first-child[b-xp2jh8zxyy] {
    box-shadow: inset 3px 0 0 var(--stop);
}

.lx-ganrow.sel td[b-xp2jh8zxyy] {
    background: var(--info-bg);
}

.lx-ganrow:hover td[b-xp2jh8zxyy] {
    background: var(--sunk);
}

.lx-ganrow.sel:hover td[b-xp2jh8zxyy] {
    background: var(--info-bg);
}

.lx-bulk[b-xp2jh8zxyy] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
    z-index: 3;
}

.lx-bulk .lx-fbitem .rz-dropdown[b-xp2jh8zxyy] {
    background: var(--surface);
}

.lx-eodhead[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    flex-shrink: 0;
}

.lx-eodhead > div:first-child[b-xp2jh8zxyy] {
    flex: 1;
}

.lx-eodhead .t[b-xp2jh8zxyy] {
    font-size: 14px;
    font-weight: 600;
}

.lx-eodwrap[b-xp2jh8zxyy] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lx-eodsec[b-xp2jh8zxyy] {
    flex-shrink: 0;
}

.lx-eodtitle[b-xp2jh8zxyy] {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.lx-eodtitle.warn[b-xp2jh8zxyy] {
    background: var(--signal-bg);
    color: var(--signal);
}

.lx-eodtitle.stop[b-xp2jh8zxyy] {
    background: var(--stop-bg);
    color: var(--stop);
}

.lx-tw.static[b-xp2jh8zxyy] {
    flex: none;
    border-radius: 0 0 8px 8px;
    overflow: visible;
}

.lx-alert.go[b-xp2jh8zxyy] {
    background: var(--go-bg);
    color: var(--go);
    border-left-color: var(--go);
    flex-shrink: 0;
    margin-bottom: 8px;
}

.lx-head[b-xp2jh8zxyy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.lx-head > div:first-child[b-xp2jh8zxyy] { flex: 1; }

.lx-title[b-xp2jh8zxyy] {
    font-size: 18px;
    letter-spacing: -.01em;
}

.lx-headtools[b-xp2jh8zxyy] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lx-tabcnt[b-xp2jh8zxyy] {
    font-size: 10px;
    color: var(--mute);
    margin-left: 3px;
}

.lx-kpi8[b-xp2jh8zxyy] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.lx-kpi8 > div[b-xp2jh8zxyy] {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    min-width: 0;
}

.lx-kpi8 > div .lb[b-xp2jh8zxyy] { font-size: 10px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-kpi8 > div .vl[b-xp2jh8zxyy] { font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace; font-size: 15px; font-weight: 600; margin-top: 1px; }
.lx-kpi8 > div .vl span[b-xp2jh8zxyy] { font-size: 10px; font-weight: 400; color: var(--mute); }
.lx-kpi8 > div .ex[b-xp2jh8zxyy] { font-size: 10px; color: var(--mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-kpi8 > div.warn[b-xp2jh8zxyy] { border-left: 3px solid var(--signal); }
.lx-kpi8 > div.warn .vl[b-xp2jh8zxyy] { color: var(--signal); }
.lx-kpi8 > div.bad[b-xp2jh8zxyy] { border-left: 3px solid var(--stop); }
.lx-kpi8 > div.bad .vl[b-xp2jh8zxyy] { color: var(--stop); }
.lx-kpi8 > div.act[b-xp2jh8zxyy] { background: var(--info-bg); border-color: var(--info); }

.lx-fbitem.sm[b-xp2jh8zxyy] { width: 120px; }

.lx-chip[b-xp2jh8zxyy] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid var(--rule2);
    cursor: pointer;
    background: var(--surface);
}

.lx-chip.on[b-xp2jh8zxyy] { background: var(--ink); color: #fff; border-color: var(--ink); }

.lx-legend[b-xp2jh8zxyy] {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 11px;
    color: var(--steel);
    margin-bottom: 6px;
    flex-shrink: 0;
}

.lx-legend i[b-xp2jh8zxyy], .lx-prog i[b-xp2jh8zxyy] {
    display: inline-block;
}

.lx-legend i[b-xp2jh8zxyy] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}

.c1[b-xp2jh8zxyy] { background: var(--primary); }
.c2[b-xp2jh8zxyy] { background: #f0a58a; }
.c3[b-xp2jh8zxyy] { background: var(--rule); }

.lx-prog[b-xp2jh8zxyy] {
    display: flex;
    height: 8px;
    background: var(--rule);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.lx-prog.big[b-xp2jh8zxyy] { height: 10px; }
.lx-prog i[b-xp2jh8zxyy] { height: 100%; }
.lx-prog i.c1[b-xp2jh8zxyy] { background: var(--primary); }
.lx-prog i.c2[b-xp2jh8zxyy] { background: #f0a58a; }

.lx-progl[b-xp2jh8zxyy] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--mute);
    margin-top: 2px;
    white-space: nowrap;
}

.lx-orders td[b-xp2jh8zxyy] { padding: 8px 10px; font-size: 12px; vertical-align: top; }
.lx-link[b-xp2jh8zxyy] { color: var(--primary); cursor: pointer; }
.lx-link:hover[b-xp2jh8zxyy] { text-decoration: underline; }

.lx-rowacts[b-xp2jh8zxyy] { display: flex; gap: 4px; flex-wrap: wrap; }

.lx-btn.xs[b-xp2jh8zxyy] { padding: 2px 7px; font-size: 11px; min-width: 0; }

.lx-warnrow td[b-xp2jh8zxyy] { padding: 0 10px 8px 10px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.lx-row.haswarn td[b-xp2jh8zxyy] { border-bottom: none; }

.lx-warnpill[b-xp2jh8zxyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
}

.lx-warnpill i[b-xp2jh8zxyy] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lx-warnpill.warn[b-xp2jh8zxyy] { background: var(--signal-bg); color: var(--signal); }
.lx-warnpill.bad[b-xp2jh8zxyy] { background: var(--stop-bg); color: var(--stop); }

.lx-dethead[b-xp2jh8zxyy] { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
.lx-detwrap[b-xp2jh8zxyy] { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.lx-detcard[b-xp2jh8zxyy] { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px 0; flex-shrink: 0; }
.lx-detgrid[b-xp2jh8zxyy] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.lx-detgrid .span2[b-xp2jh8zxyy] { grid-column: span 2; }
.lx-detgrid .lb[b-xp2jh8zxyy] { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .3px; }
.lx-detgrid .vl[b-xp2jh8zxyy] { font-size: 13px; margin-top: 2px; }
.lx-det4[b-xp2jh8zxyy] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); }
.lx-det4 .lb[b-xp2jh8zxyy] { font-size: 11px; color: var(--mute); }
.lx-det4 .vl[b-xp2jh8zxyy] { font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace; font-size: 22px; font-weight: 600; line-height: 1.2; }
.lx-det4 .vl span[b-xp2jh8zxyy] { font-size: 11px; font-weight: 400; color: var(--mute); font-family: inherit; }
.lx-subtabs[b-xp2jh8zxyy] { display: flex; gap: 18px; border-top: 1px solid var(--rule); }
.lx-subtabs button[b-xp2jh8zxyy] { padding: 10px 0; font-size: 12.5px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--steel); font-family: inherit; margin-bottom: -1px; }
.lx-subtabs button.on[b-xp2jh8zxyy] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }

.lx-secrow td[b-xp2jh8zxyy] { background: var(--sunk); font-weight: 600; font-size: 11.5px; color: var(--steel); padding: 6px 10px; text-transform: uppercase; letter-spacing: .3px; }
.lx-grouprow td[b-xp2jh8zxyy] { cursor: pointer; background: var(--surface); font-size: 12.5px; }
.lx-grouprow td:first-child[b-xp2jh8zxyy] { padding-left: 10px; }
.lx-grouprow.none td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 var(--stop); }
.lx-grouprow.part td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 var(--signal); }
.lx-grouprow.full td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 var(--go); }
.lx-grouprow .lx-chev[b-xp2jh8zxyy] { display: inline-block; color: var(--mute); transition: transform .12s; }
.lx-grouprow .lx-chev.open[b-xp2jh8zxyy] { transform: rotate(90deg); }
.lx-kho[b-xp2jh8zxyy] { color: var(--primary); }
.lx-rate[b-xp2jh8zxyy] { color: var(--info); }
.lx-ganrow.child td[b-xp2jh8zxyy] { background: #fcfcfd; }
.lx-ganrow.child td:nth-child(2)[b-xp2jh8zxyy] { padding-left: 22px; }

.lx-chipcmd[b-xp2jh8zxyy] {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-size: 11px;
    margin: 0 4px 3px 0;
    background: var(--surface);
    font-family: 'Consolas', 'Cascadia Mono', ui-monospace, monospace;
}

.lx-grouplinks[b-xp2jh8zxyy] { display: flex; gap: 12px; font-size: 11px; margin-top: 2px; }

.lx-select[b-xp2jh8zxyy] {
    width: 100%;
    max-width: 260px;
    padding: 4px 6px;
    border: 1px solid var(--rule2);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}

.lx-select.unas[b-xp2jh8zxyy] { border-color: var(--signal); background: var(--signal-bg); }

.lx-track.go i[b-xp2jh8zxyy] { background: var(--go); }

.lx-switch[b-xp2jh8zxyy] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.lx-switch input[b-xp2jh8zxyy] { display: none; }
.lx-switch span[b-xp2jh8zxyy] { width: 34px; height: 18px; border-radius: 9px; background: var(--rule2); position: relative; transition: background .15s; }
.lx-switch span[b-xp2jh8zxyy]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.lx-switch input:checked + span[b-xp2jh8zxyy] { background: var(--primary); }
.lx-switch input:checked + span[b-xp2jh8zxyy]::after { left: 18px; }

.lx-seg4[b-xp2jh8zxyy] { display: flex; border: 1px solid var(--rule2); border-radius: 8px; overflow: hidden; }
.lx-seg4 button[b-xp2jh8zxyy] { flex: 1; padding: 8px 6px; border: none; background: var(--surface); font-family: inherit; font-size: 12px; cursor: pointer; color: var(--steel); border-right: 1px solid var(--rule); }
.lx-seg4 button:last-child[b-xp2jh8zxyy] { border-right: none; }
.lx-seg4 button.on[b-xp2jh8zxyy] { background: var(--ink); color: #fff; font-weight: 600; }

.lx-scrim .lx-modal.lx-drawer[b-xp2jh8zxyy] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    max-height: 100vh;
    width: min(720px, 96vw);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.lx-modal.lx-drawer .lx-mb[b-xp2jh8zxyy] { flex: 1; overflow: auto; }
.lx-modal.lx-drawer .lx-mh h3[b-xp2jh8zxyy] { flex: 1; }
.lx-modal.lx-drawer .lx-mh .lx-mute[b-xp2jh8zxyy] { font-size: 11px; margin-right: 10px; }

.lx-dash[b-xp2jh8zxyy] { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lx-dashcard[b-xp2jh8zxyy] { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.lx-dashcard .t[b-xp2jh8zxyy] { font-size: 13px; font-weight: 600; }
.lx-dashcard > .lx-mute[b-xp2jh8zxyy] { font-size: 11px; margin-bottom: 8px; }
.lx-bar[b-xp2jh8zxyy] { display: grid; grid-template-columns: 110px 1fr 120px; gap: 8px; align-items: center; font-size: 11px; padding: 3px 0; }
.lx-bar .lb[b-xp2jh8zxyy] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-bar .vl[b-xp2jh8zxyy] { text-align: right; color: var(--steel); white-space: nowrap; }

@media (max-width: 1100px) {
    .lx-kpi8[b-xp2jh8zxyy] { grid-template-columns: repeat(4, 1fr); }
    .lx-dash[b-xp2jh8zxyy] { grid-template-columns: 1fr 1fr; }
    .lx-detgrid[b-xp2jh8zxyy] { grid-template-columns: 1fr 1fr; }
}

.lx-nav[b-xp2jh8zxyy] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--rule2);
}

.lx-nav button[b-xp2jh8zxyy] {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--steel);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}

.lx-nav button:hover[b-xp2jh8zxyy] { color: var(--ink); }

.lx-nav button.on[b-xp2jh8zxyy] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.lx-tabs button[b-xp2jh8zxyy] { transition: color .15s, border-color .15s; }
.lx-tabs button.on[b-xp2jh8zxyy] { color: var(--primary); border-bottom-color: var(--primary); }
.lx-app > *[b-xp2jh8zxyy] { animation: lxfade-b-xp2jh8zxyy .18s ease; }
@keyframes lxfade-b-xp2jh8zxyy { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.lx-nav .lx-sub[b-xp2jh8zxyy] { margin-right: 8px; }

.lx-sub-table[b-xp2jh8zxyy] { min-width: 0 !important; border-left: 3px solid var(--primary); }
.lx-sub-table th[b-xp2jh8zxyy] { position: static; background: var(--sunk); font-size: 10.5px; padding: 6px 9px; }
.lx-ganrow.child td[b-xp2jh8zxyy] { background: var(--surface); }

.lx-fbright[b-xp2jh8zxyy] { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lx-btn.on[b-xp2jh8zxyy] { background: var(--ink); color: #fff; border-color: var(--ink); }

.lx-cmdcell[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.lx-cmdcell > div[b-xp2jh8zxyy] { min-width: 0; font-size: 11.5px; }
.lx-bulk[b-xp2jh8zxyy] { justify-content: flex-start; }

.lx-dsec[b-xp2jh8zxyy] { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lx-dsec:first-child[b-xp2jh8zxyy] { margin-top: 0; padding-top: 0; border-top: none; }
.lx-form[b-xp2jh8zxyy] { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; align-items: start; }
.lx-form > label[b-xp2jh8zxyy] { font-size: 12px; color: var(--steel); padding-top: 7px; }
.lx-form > input[b-xp2jh8zxyy], .lx-form input[type="number"][b-xp2jh8zxyy], .lx-form input[type="text"][b-xp2jh8zxyy], .lx-form input:not([type])[b-xp2jh8zxyy] { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--rule2); border-radius: 6px; font-family: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.lx-form input[readonly][b-xp2jh8zxyy] { background: var(--sunk); color: var(--steel); }
.lx-form .lx-pick3[b-xp2jh8zxyy] { margin: 0; }
.lx-form .span2[b-xp2jh8zxyy] { grid-column: span 2; }
.lx-hint[b-xp2jh8zxyy] { font-size: 11px; color: var(--mute); margin-top: 4px; }
.lx-hint.warn[b-xp2jh8zxyy] { color: var(--stop); }
.lx-seg4.big button[b-xp2jh8zxyy] { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.lx-seg4.big button span[b-xp2jh8zxyy] { font-size: 10.5px; font-weight: 400; opacity: .75; }
.lx-seg4 button:disabled[b-xp2jh8zxyy] { cursor: default; opacity: .6; }
.lx-seg4 button.on:disabled[b-xp2jh8zxyy] { opacity: 1; }
.lx-clh[b-xp2jh8zxyy] { display: grid; grid-template-columns: 1fr 60px 90px 26px; gap: 6px; font-size: 10.5px; color: var(--mute); padding: 4px 0 2px; }
.lx-layerh b[b-xp2jh8zxyy] { margin-right: 8px; }
.lx-rv .ln[b-xp2jh8zxyy] { display: grid; grid-template-columns: 1fr auto 60px; gap: 10px; }
.lx-rv .ln > b:last-child[b-xp2jh8zxyy] { text-align: right; }

.lx-group .lx-grouprow td[b-xp2jh8zxyy] { background: var(--sunk); padding: 9px 10px; font-size: 12.5px; border-bottom: 1px solid var(--rule2); }
.lx-group .lx-grouprow:hover td[b-xp2jh8zxyy] { background: #eef1f5; }
.lx-group .lx-ganrow.child td[b-xp2jh8zxyy] { background: var(--surface); padding: 7px 10px; }
.lx-group .lx-ganrow.child td:first-child[b-xp2jh8zxyy] { padding-left: 26px; }
.lx-group .lx-ganrow.child.unas td:first-child[b-xp2jh8zxyy] { box-shadow: none; }
.lx-group .lx-ganrow.child.unas td:nth-child(2)[b-xp2jh8zxyy] { box-shadow: inset 3px 0 0 var(--signal); }

.lx-app[b-xp2jh8zxyy] { font-size: 13px; }
.lx-tw th[b-xp2jh8zxyy] { color: var(--steel); font-weight: 600; font-size: 11px; background: #EEF1F5; }
.lx-tw td[b-xp2jh8zxyy] { color: var(--ink); }
.lx-mute[b-xp2jh8zxyy] { color: var(--mute); }
.lx-badge[b-xp2jh8zxyy] { font-weight: 600; }
.lx-kpi8 > div .vl[b-xp2jh8zxyy] { font-size: 17px; }
.lx-kpi8 > div .lb[b-xp2jh8zxyy], .lx-kpi8 > div .ex[b-xp2jh8zxyy] { color: var(--steel); }
.lx-tabs button[b-xp2jh8zxyy] { color: var(--steel); font-weight: 600; }
.lx-scrim.center[b-xp2jh8zxyy] { align-items: center; }
.lx-cellcb[b-xp2jh8zxyy] { min-width: 200px; }
.lx-cellcb .lx-cb[b-xp2jh8zxyy] { width: 100%; font-size: 12px; }
.lx-cellcb .rz-dropdown[b-xp2jh8zxyy] { min-height: 28px; border-color: var(--rule2); border-radius: 6px; width: 100%; }
.lx-cellcb .rz-dropdown .rz-inputtext[b-xp2jh8zxyy] { font-size: 12px; }
.lx-form textarea[b-xp2jh8zxyy] { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--rule2); border-radius: 6px; font-family: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); resize: vertical; }

.lx-inputbad[b-xp2jh8zxyy] { border-color: var(--stop) !important; background: var(--stop-bg, #fff5f5); }
.lx-mute.ok[b-xp2jh8zxyy] { color: var(--go); font-weight: 600; }
.lx-mute.warn[b-xp2jh8zxyy] { color: var(--stop); }
label.lx-check[b-xp2jh8zxyy] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
label.lx-check input[b-xp2jh8zxyy] { margin: 0; }
tr.lx-blocked td[b-xp2jh8zxyy] { background: var(--stop-bg, #fff5f5); }
.lx-form textarea[b-xp2jh8zxyy] { width: 100%; box-sizing: border-box; border: 1px solid var(--rule2); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; resize: vertical; }
.lx-dsec[b-xp2jh8zxyy] { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin: 14px 0 6px; }
.lx-pick3 button span[b-xp2jh8zxyy] { display: block; font-size: 10px; font-weight: 400; color: var(--mute); }
.lx-modal.lx-drawer[b-xp2jh8zxyy] { max-height: 92vh; }


/* ===== Prototype v1.1 fidelity ===== */
.lx-app[b-xp2jh8zxyy] { background: #F4F6F8; color: #16202A; font-size: 13px; }
.lx-btn[b-xp2jh8zxyy] { border-radius: 6px; padding: 7px 12px; font-size: 12.5px; border: 1px solid #D9DFE6; background: #FFFFFF; color: #16202A; font-weight: 500; }
.lx-btn:hover[b-xp2jh8zxyy] { background: #F4F6F8; border-color: #D9DFE6; }
.lx-btn.pri[b-xp2jh8zxyy] { background: #1F4E8C; border-color: #1F4E8C; color: #fff; font-weight: 600; }
.lx-btn.pri:hover[b-xp2jh8zxyy] { background: #1A427A; border-color: #1A427A; }
.lx-btn.ol[b-xp2jh8zxyy] { border-color: #1F4E8C; color: #1F4E8C; font-weight: 600; }
.lx-btn.ol:hover[b-xp2jh8zxyy] { background: #E6EEF8; }
.lx-btn.red[b-xp2jh8zxyy] { background: #C0392B; border-color: #C0392B; color: #fff; font-weight: 600; }
.lx-btn.red:hover[b-xp2jh8zxyy] { background: #A93226; border-color: #A93226; }
.lx-btn.lnk[b-xp2jh8zxyy] { border: 0; background: none; color: #1F4E8C; font-weight: 600; padding: 6px 4px; }
.lx-btn.sm[b-xp2jh8zxyy] { padding: 5px 10px; font-size: 12px; }
.lx-btn:disabled[b-xp2jh8zxyy] { opacity: .45; cursor: default; }
.lx-btn.red:disabled[b-xp2jh8zxyy], .lx-btn.pri:disabled[b-xp2jh8zxyy] { opacity: .45; }

.lx-nav[b-xp2jh8zxyy] { border-bottom: 1px solid #D9DFE6; margin: -16px -20px 14px; padding: 0 24px; background: #FFFFFF; height: 44px; }
.lx-nav button[b-xp2jh8zxyy] { padding: 0 14px; height: 44px; font-size: 13px; font-weight: 600; color: #5F6B78; border-bottom: 2px solid transparent; }
.lx-nav button.on[b-xp2jh8zxyy] { color: #1F4E8C; border-bottom-color: #1F4E8C; }

.lx-head[b-xp2jh8zxyy] { align-items: flex-end; margin-bottom: 16px; }
.lx-title[b-xp2jh8zxyy] { font-size: 20px; font-weight: 600; line-height: 1.2; }
.lx-head .lx-mute[b-xp2jh8zxyy] { margin-top: 4px; font-size: 12.5px; color: #5F6B78; }
.lx-headtools[b-xp2jh8zxyy] { gap: 8px; }

.lx-tabs[b-xp2jh8zxyy] { gap: 2px; border-bottom: 1px solid #D9DFE6; margin-bottom: 14px; }
.lx-tabs button[b-xp2jh8zxyy] { padding: 9px 14px; margin-bottom: -1px; font-weight: 600; color: #5F6B78; display: flex; gap: 6px; align-items: center; }
.lx-tabs button.on[b-xp2jh8zxyy] { color: #1F4E8C; border-bottom-color: #1F4E8C; }
.lx-tabcnt[b-xp2jh8zxyy] { background: #EAEDF0; color: #5F6B78; border-radius: 999px; padding: 0 6px; font-size: 11.5px; min-width: 8px; display: inline-block; }
.lx-tabcnt:empty[b-xp2jh8zxyy] { display: none; }
.lx-tabcnt.bad[b-xp2jh8zxyy] { background: #FBE5E3; color: #B3261E; }

.lx-seg[b-xp2jh8zxyy] { display: inline-flex; border: 1px solid #D9DFE6; border-radius: 6px; overflow: hidden; background: #FFFFFF; padding: 0; }
.lx-seg button[b-xp2jh8zxyy] { border: 0; background: #FFFFFF; color: #16202A; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; border-radius: 0; box-shadow: none; }
.lx-seg button.on[b-xp2jh8zxyy] { background: #1F4E8C; color: #FFFFFF; }
.lx-seg.big button[b-xp2jh8zxyy] { padding: 7px 16px; font-size: 13px; }
.lx-seg.big[b-xp2jh8zxyy] { margin-bottom: 6px; }

.lx-kpi8[b-xp2jh8zxyy] { gap: 8px; margin-bottom: 14px; }
.lx-kpi8 > button[b-xp2jh8zxyy] { text-align: left; border: 1px solid #D9DFE6; background: #FFFFFF; border-radius: 6px; padding: 10px 12px; cursor: pointer; display: block; min-width: 0; font-family: inherit; color: #16202A; }
.lx-kpi8 > button:hover[b-xp2jh8zxyy] { background: #F7F9FB; }
.lx-kpi8 > button .lb[b-xp2jh8zxyy] { font-size: 11.5px; color: #5F6B78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-kpi8 > button .vl[b-xp2jh8zxyy] { font-size: 20px; line-height: 1.2; margin-top: 3px; white-space: nowrap; font-family: inherit; }
.lx-kpi8 > button .vl span[b-xp2jh8zxyy] { font-size: 12px; font-weight: 500; color: #5F6B78; margin-left: 4px; }
.lx-kpi8 > button .ex[b-xp2jh8zxyy] { font-size: 11.5px; color: #5F6B78; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-kpi8 > button.warn[b-xp2jh8zxyy] { border-left: 3px solid #E0A33A; background: #FFFBF2; }
.lx-kpi8 > button.warn .vl[b-xp2jh8zxyy], .lx-kpi8 > button.warn .ex[b-xp2jh8zxyy] { color: #9A5B00; }
.lx-kpi8 > button.bad[b-xp2jh8zxyy] { border-left: 3px solid #B3261E; background: #FFF7F6; }
.lx-kpi8 > button.bad .vl[b-xp2jh8zxyy], .lx-kpi8 > button.bad .ex[b-xp2jh8zxyy] { color: #B3261E; }
.lx-kpi8 > button.act[b-xp2jh8zxyy] { background: #E6EEF8; border-color: #1F4E8C; }

.lx-fb[b-xp2jh8zxyy] { gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.lx-fgrp[b-xp2jh8zxyy] { display: inline-flex; align-items: center; gap: 4px; }
.lx-flbl[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; margin-right: 2px; white-space: nowrap; }
.lx-chipf[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; background: #FFFFFF; color: #16202A; border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; font-size: 12px; font-family: inherit; }
.lx-chipf.on[b-xp2jh8zxyy] { background: #1F4E8C; color: #FFFFFF; border-color: #1F4E8C; }
.lx-chipf.kpi[b-xp2jh8zxyy] { border-color: #1F4E8C; background: #E6EEF8; color: #1F4E8C; font-weight: 600; margin-left: 6px; }
.lx-vsep[b-xp2jh8zxyy] { width: 1px; height: 20px; background: #D9DFE6; margin: 0 6px; display: inline-block; }
.lx-search[b-xp2jh8zxyy] { flex: 1; min-width: 260px; max-width: 420px; border: 1px solid #D9DFE6; border-radius: 6px; padding: 6px 10px; background: #FFFFFF; font-size: 12.5px; }
.lx-legend[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; gap: 16px; margin-bottom: 8px; }
.lx-legend i[b-xp2jh8zxyy] { width: 10px; height: 10px; border-radius: 2px; }
.lx-legend i.c1[b-xp2jh8zxyy], .lx-prog i.c1[b-xp2jh8zxyy] { background: #1F4E8C; }
.lx-legend i.c2[b-xp2jh8zxyy], .lx-prog i.c2[b-xp2jh8zxyy] { background: #9DB9D9; }
.lx-legend i.c3[b-xp2jh8zxyy] { background: #E3E8ED; }

.lx-tw[b-xp2jh8zxyy] { background: #FFFFFF; border: 1px solid #D9DFE6; border-radius: 6px; }
.lx-tw th[b-xp2jh8zxyy] { font-weight: 600; color: #5F6B78; font-size: 11.5px; padding: 9px 12px; border-bottom: 1px solid #D9DFE6; background: #FAFBFC; letter-spacing: .3px; text-transform: uppercase; }
.lx-tw td[b-xp2jh8zxyy] { padding: 9px 12px; border-bottom: 1px solid #ECF0F3; font-size: 13px; }
.lx-orders tbody.lx-grp[b-xp2jh8zxyy] { border-bottom: 1px solid #ECF0F3; }
.lx-orders tbody.lx-grp td[b-xp2jh8zxyy] { border-bottom: 0; }
.lx-orders tr.lx-row td[b-xp2jh8zxyy] { padding: 11px 12px 6px; vertical-align: top; }
.lx-orders tr.lx-row:hover td[b-xp2jh8zxyy], .lx-orders tr.lx-warnrow:hover td[b-xp2jh8zxyy] { background: #F7F9FB; }
.lx-orders tbody.lx-grp.open tr.lx-row td[b-xp2jh8zxyy] { background: #F7F9FB; }
.lx-orders tr.lx-sp td[b-xp2jh8zxyy] { padding: 0 0 5px; }
.lx-orders tr.lx-warnrow td[b-xp2jh8zxyy] { padding: 0 12px 9px; }
.lx-warnpill[b-xp2jh8zxyy] { width: auto; display: inline-flex; padding: 3px 9px; font-size: 12px; border-radius: 4px; }
.lx-orders td.lx-code[b-xp2jh8zxyy], .lx-code[b-xp2jh8zxyy] { font-weight: 600; color: #1F4E8C; font-family: inherit; }
.lx-orders td.lx-ratio[b-xp2jh8zxyy] { letter-spacing: .2px; white-space: nowrap; }
.lx-orders td.lx-ratio span[b-xp2jh8zxyy] { font-weight: 500; color: #5F6B78; margin-left: 5px; }
.lx-prog[b-xp2jh8zxyy] { height: 8px; background: #E3E8ED; border-radius: 4px; overflow: hidden; display: flex; }
.lx-prog i[b-xp2jh8zxyy] { display: block; height: 100%; }
.lx-progl[b-xp2jh8zxyy] { display: flex; justify-content: space-between; font-size: 11.5px; color: #5F6B78; margin-top: 4px; }
.lx-badge[b-xp2jh8zxyy] { border-radius: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.lx-badge.info[b-xp2jh8zxyy] { background: #E6EEF8; color: #1F4E8C; }
.lx-badge.go[b-xp2jh8zxyy] { background: #E2F2E7; color: #237A45; }
.lx-badge.warn[b-xp2jh8zxyy] { background: #FCF1DC; color: #9A5B00; }
.lx-badge.off[b-xp2jh8zxyy] { background: #EAEDF0; color: #5F6B78; }
.lx-badge.stop[b-xp2jh8zxyy] { background: #FBE5E3; color: #B3261E; }
.lx-det > td[b-xp2jh8zxyy] { padding: 0 !important; }
.lx-panel[b-xp2jh8zxyy] { border-left: 3px solid #1F4E8C; background: #FAFBFC; }
.lx-mute[b-xp2jh8zxyy] { color: #5F6B78; }
.lx-mute.sig[b-xp2jh8zxyy] { color: #9A5B00; font-size: 12px; margin-top: 2px; }
.lx-link[b-xp2jh8zxyy] { cursor: pointer; }
.lx-link:hover[b-xp2jh8zxyy] { text-decoration: underline; }
.warn[b-xp2jh8zxyy] { color: #B3261E; }

.lx-dethead[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lx-detwrap[b-xp2jh8zxyy] { flex: 1; min-height: 0; overflow: auto; }
.lx-detcard[b-xp2jh8zxyy] { background: #FFFFFF; border: 1px solid #D9DFE6; border-radius: 6px; overflow: hidden; }
.lx-detgrid[b-xp2jh8zxyy] { display: flex; gap: 28px; align-items: flex-start; padding: 16px 20px 14px; flex-wrap: wrap; }
.lx-detgrid > div.grow[b-xp2jh8zxyy] { flex: 1; min-width: 280px; }
.lx-detgrid .lb[b-xp2jh8zxyy] { font-size: 11px; color: #5F6B78; text-transform: uppercase; letter-spacing: .3px; }
.lx-detgrid .vl[b-xp2jh8zxyy] { margin-top: 4px; font-size: 13.5px; line-height: 20px; }
.lx-detgrid .vl.b[b-xp2jh8zxyy] { font-weight: 600; }
.lx-detgrid .vl.big[b-xp2jh8zxyy] { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.lx-detgrid .vl.note[b-xp2jh8zxyy] { background: #FCF1DC; color: #6B4400; border-radius: 4px; padding: 5px 10px; font-weight: 500; font-size: 13px; }
.lx-det4[b-xp2jh8zxyy] { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #D9DFE6; background: #FAFBFC; margin: 0; padding: 0; gap: 0; }
.lx-det4 > div[b-xp2jh8zxyy] { padding: 12px 20px; border-right: 1px solid #ECF0F3; }
.lx-det4 > div:last-child[b-xp2jh8zxyy] { border-right: 0; }
.lx-det4 .lb[b-xp2jh8zxyy] { font-size: 11px; color: #5F6B78; text-transform: uppercase; letter-spacing: .3px; }
.lx-det4 .vl[b-xp2jh8zxyy] { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: 4px; font-family: inherit; }
.lx-det4 .vl span[b-xp2jh8zxyy] { font-size: 12px; font-weight: 500; color: #5F6B78; }
.lx-subtabs[b-xp2jh8zxyy] { display: flex; gap: 2px; border-bottom: 1px solid #D9DFE6; border-top: 0; }
.lx-subtabs button[b-xp2jh8zxyy] { padding: 10px 12px; font-size: 13px; font-weight: 600; color: #5F6B78; margin-bottom: -1px; }
.lx-subtabs button.on[b-xp2jh8zxyy] { color: #1F4E8C; border-bottom-color: #1F4E8C; }
.lx-detcard .lx-tw[b-xp2jh8zxyy] { border: 0; border-radius: 0; }
.lx-detcard .lx-tw th[b-xp2jh8zxyy] { position: static; }
.lx-note[b-xp2jh8zxyy] { padding: 12px 20px; font-size: 12.5px; color: #5F6B78; border-bottom: 1px solid #ECF0F3; }
.lx-note.box[b-xp2jh8zxyy] { background: #F4F6F8; border-radius: 6px; padding: 10px 12px; border: 0; margin-bottom: 14px; }
tr.lx-blocked td[b-xp2jh8zxyy] { background: #FFF7F6; }
.lx-tag[b-xp2jh8zxyy] { background: #EAEDF0; color: #5F6B78; border-radius: 4px; padding: 0 7px; font-size: 11.5px; font-weight: 600; line-height: 18px; }

.lx-dashwrap[b-xp2jh8zxyy] { flex: 1; min-height: 0; overflow: auto; }
.lx-dgrid2[b-xp2jh8zxyy] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lx-dgrid3[b-xp2jh8zxyy] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lx-dcard[b-xp2jh8zxyy] { background: #FFFFFF; border: 1px solid #D9DFE6; border-radius: 6px; overflow: hidden; min-width: 0; }
.lx-dcard .hd[b-xp2jh8zxyy] { padding: 12px 16px 8px; }
.lx-dcard .hd .t[b-xp2jh8zxyy] { font-weight: 600; }
.lx-dcard .hd .lx-mute[b-xp2jh8zxyy] { font-size: 12px; margin-top: 2px; }
.lx-dcard .bd[b-xp2jh8zxyy] { padding: 4px 16px 14px; }
.lx-dcard .bd.grid[b-xp2jh8zxyy] { display: grid; gap: 8px; }
.lx-dlegend[b-xp2jh8zxyy] { display: flex; gap: 14px; font-size: 11.5px; color: #5F6B78; margin-bottom: 8px; }
.lx-dlegend span[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 5px; }
.lx-dlegend i[b-xp2jh8zxyy] { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lx-dlegend i.ln[b-xp2jh8zxyy] { width: 14px; height: 2px; border-radius: 0; }
.lx-dlegend i.dash[b-xp2jh8zxyy] { width: 14px; height: 0; border-top: 1px dashed #5F6B78; }
.lx-bars7[b-xp2jh8zxyy] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; border-bottom: 1px solid #D9DFE6; }
.lx-bars7.h120[b-xp2jh8zxyy] { height: 120px; }
.lx-bars7.lbls[b-xp2jh8zxyy] { height: auto; border: 0; margin-top: 6px; align-items: start; }
.lx-bars7.lbls > div[b-xp2jh8zxyy] { text-align: center; font-size: 11px; color: #5F6B78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-bars7.lbls > div .b[b-xp2jh8zxyy] { color: #16202A; font-weight: 600; }
.lx-bars7 .col[b-xp2jh8zxyy] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.lx-bars7 .col .pct[b-xp2jh8zxyy] { font-size: 11px; color: #5F6B78; margin-bottom: 3px; }
.lx-bars7 .col .pair[b-xp2jh8zxyy] { display: flex; gap: 2px; align-items: flex-end; width: 100%; justify-content: center; }
.lx-bars7 .col .pair > div[b-xp2jh8zxyy] { width: 38%; }
.lx-bars7 .col .stack[b-xp2jh8zxyy] { width: 60%; display: flex; flex-direction: column; }
.lx-hbar[b-xp2jh8zxyy] { display: grid; grid-template-columns: 200px 1fr 36px; gap: 10px; align-items: center; font-size: 12.5px; }
.lx-hbar > span[b-xp2jh8zxyy] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-hbar .trk[b-xp2jh8zxyy] { height: 14px; background: #E3E8ED; border-radius: 2px; overflow: hidden; }
.lx-hbar .trk > div[b-xp2jh8zxyy] { height: 100%; background: #1F4E8C; }
.lx-hbar b[b-xp2jh8zxyy] { text-align: right; font-weight: 600; }
.lx-dtbl[b-xp2jh8zxyy] { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-dtbl th[b-xp2jh8zxyy] { font-weight: 600; color: #5F6B78; text-align: left; font-size: 11.5px; padding: 8px 12px; border-bottom: 1px solid #D9DFE6; white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; background: #FAFBFC; }
.lx-dtbl th.r[b-xp2jh8zxyy], .lx-dtbl td.r[b-xp2jh8zxyy] { text-align: right; }
.lx-dtbl td[b-xp2jh8zxyy] { padding: 8px 12px; border-bottom: 1px solid #ECF0F3; }
.lx-dtbl tfoot tr[b-xp2jh8zxyy] { background: #FAFBFC; }
.lx-dtbl tfoot td[b-xp2jh8zxyy] { font-weight: 600; }

.lx-scrim[b-xp2jh8zxyy] { background: rgba(16, 32, 42, .38); padding: 24px 20px; align-items: center; }
.lx-modal[b-xp2jh8zxyy] { border-radius: 8px; border: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); max-height: 86vh; }
.lx-modal.w720[b-xp2jh8zxyy] { max-width: 720px; }
.lx-modal.w780[b-xp2jh8zxyy] { max-width: 780px; }
.lx-modal.w820[b-xp2jh8zxyy] { max-width: 820px; }
.lx-mh[b-xp2jh8zxyy] { padding: 14px 22px; border-bottom: 1px solid #D9DFE6; display: flex; align-items: center; gap: 12px; }
.lx-mh h3[b-xp2jh8zxyy] { font-size: 15px; font-weight: 600; }
.lx-mh button[b-xp2jh8zxyy] { border: 0; background: none; cursor: pointer; color: #5F6B78; font-size: 16px; }
.lx-mb[b-xp2jh8zxyy] { padding: 16px 22px; overflow: auto; }
.lx-mf[b-xp2jh8zxyy] { padding: 12px 22px; border-top: 1px solid #D9DFE6; display: flex; gap: 8px; align-items: center; background: #FAFBFC; border-radius: 0 0 8px 8px; }
.lx-codetag[b-xp2jh8zxyy] { display: inline-block; border-radius: 4px; padding: 1px 8px; font-size: 12px; background: #EAEDF0; color: #5F6B78; margin-left: auto; }
.lx-mh .lx-codetag + button[b-xp2jh8zxyy] { margin-left: 0; }
.lx-scrim .lx-modal.lx-drawer[b-xp2jh8zxyy] { box-shadow: -8px 0 30px rgba(0, 0, 0, .14); border-radius: 0; max-height: 100vh; }
.lx-modal.lx-drawer .lx-mh[b-xp2jh8zxyy] { padding: 14px 24px; }
.lx-modal.lx-drawer .lx-mb[b-xp2jh8zxyy] { padding: 4px 24px 24px; }
.lx-modal.lx-drawer .lx-mf[b-xp2jh8zxyy] { background: #FFFFFF; border-radius: 0; padding: 12px 24px; }
.lx-dsec[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; font-weight: 600; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #ECF0F3; letter-spacing: .3px; text-transform: uppercase; }
.lx-form[b-xp2jh8zxyy] { grid-template-columns: 150px 1fr; gap: 10px 12px; align-items: center; }
.lx-form.c170[b-xp2jh8zxyy] { grid-template-columns: 170px 1fr; }
.lx-form > label[b-xp2jh8zxyy] { color: #5F6B78; padding-top: 0; font-size: 12.5px; }
.lx-form > input[b-xp2jh8zxyy], .lx-form input[type="number"][b-xp2jh8zxyy], .lx-form input[type="text"][b-xp2jh8zxyy], .lx-form input:not([type])[b-xp2jh8zxyy], .lx-form textarea[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; padding: 7px 9px; font-size: 13px; }
.lx-form input[readonly][b-xp2jh8zxyy] { background: #F4F6F8; color: #5F6B78; }
.lx-form input.num[b-xp2jh8zxyy] { text-align: right; font-weight: 600; }
.lx-form input.w200[b-xp2jh8zxyy] { width: 200px; }
.lx-form .lx-hint.c2[b-xp2jh8zxyy] { grid-column: 2; margin-top: 0; font-size: 12px; }
.lx-hint[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; }
.lx-hint.warn[b-xp2jh8zxyy] { color: #B3261E; }
.lx-hint.sig[b-xp2jh8zxyy] { color: #9A5B00; }
.lx-form .lx-range input[type="date"][b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; padding: 7px 9px; font-size: 13px; }
.lx-kind[b-xp2jh8zxyy] { display: flex; gap: 8px; }
.lx-kind button[b-xp2jh8zxyy] { flex: 1; border: 1px solid #D9DFE6; background: #FFFFFF; color: #16202A; border-radius: 6px; padding: 9px 10px; cursor: pointer; text-align: center; font-family: inherit; }
.lx-kind button > div[b-xp2jh8zxyy] { font-weight: 600; font-size: 13px; }
.lx-kind button > span[b-xp2jh8zxyy] { font-size: 11.5px; color: #5F6B78; display: block; }
.lx-kind button.on[b-xp2jh8zxyy] { background: #16202A; color: #FFFFFF; border-color: #16202A; }
.lx-kind button.on > span[b-xp2jh8zxyy] { color: #C9D2DC; }
.lx-layer[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; padding: 12px; margin-bottom: 10px; background: #FFFFFF; }
.lx-clh[b-xp2jh8zxyy] { grid-template-columns: 1fr 70px 90px 24px; gap: 8px; font-size: 11.5px; color: #5F6B78; margin-bottom: 6px; }
.lx-clh .r[b-xp2jh8zxyy] { text-align: right; }
.lx-cl[b-xp2jh8zxyy] { display: grid; grid-template-columns: 1fr 70px 90px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
.lx-cl input.num[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; padding: 7px 9px; text-align: right; font-weight: 600; width: 100%; box-sizing: border-box; }
.lx-o[b-xp2jh8zxyy] { text-align: right; font-size: 12px; color: #5F6B78; white-space: nowrap; }
.lx-x[b-xp2jh8zxyy] { border: 0; background: none; color: #8A95A0; cursor: pointer; font-size: 16px; }
.lx-add[b-xp2jh8zxyy] { width: 100%; border: 1px dashed #C0392B; background: #FFFFFF; color: #C0392B; border-radius: 6px; padding: 8px; cursor: pointer; font-size: 12.5px; }
.lx-add:hover[b-xp2jh8zxyy] { border-color: #C0392B; color: #C0392B; background: #FFF7F6; }
.lx-layerh[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lx-layerh input.num[b-xp2jh8zxyy] { width: 110px; border: 1px solid #D9DFE6; border-radius: 6px; padding: 5px 8px; text-align: right; font-weight: 600; }
.lx-rv[b-xp2jh8zxyy] { background: #F4F6F8; border-radius: 6px; padding: 10px 12px; margin-top: 10px; }
.lx-rv .h5[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; margin-bottom: 6px; font-weight: 400; }
.lx-rv .h5 b[b-xp2jh8zxyy] { color: #16202A; font-family: inherit; }
.lx-rv .h5 b.warn[b-xp2jh8zxyy] { color: #B3261E; }
.lx-rv .ln[b-xp2jh8zxyy] { display: flex; gap: 8px; padding: 8px 0; border-top: 0; border-bottom: 1px solid #E3E8ED; font-size: 13px; }
.lx-rv .ln:last-child[b-xp2jh8zxyy] { border-bottom: 0; }
.lx-rv .ln > b[b-xp2jh8zxyy] { font-family: inherit; font-weight: 600; margin-left: auto; }
.lx-rv .ln.eff[b-xp2jh8zxyy] { display: grid; grid-template-columns: 110px 1fr 90px 60px; gap: 8px; font-size: 12.5px; padding: 3px 0; border: 0; }
.lx-rv .ln.eff > b[b-xp2jh8zxyy] { margin-left: 0; }
.lx-rv .ln.eff .r[b-xp2jh8zxyy] { text-align: right; }
.lx-mf .lx-mute.ok[b-xp2jh8zxyy] { color: #237A45; font-weight: 500; }
.lx-steps[b-xp2jh8zxyy] { display: flex; border-bottom: 1px solid #D9DFE6; background: #FFFFFF; }
.lx-steps > div[b-xp2jh8zxyy] { flex: 1; text-align: center; padding: 10px; font-weight: 600; font-size: 13px; color: #8A95A0; border: 0; }
.lx-steps > div.on span[b-xp2jh8zxyy] { color: #C0392B; border-bottom: 2px solid #C0392B; padding-bottom: 9px; }
.lx-steps > div.dn[b-xp2jh8zxyy] { color: #237A45; }
.lx-steps > div.on[b-xp2jh8zxyy] { color: #C0392B; }
input.num.big[b-xp2jh8zxyy] { width: 100%; box-sizing: border-box; border: 1px solid #D9DFE6; border-radius: 6px; padding: 7px 9px; background: #FFFFFF; font-size: 15px; font-weight: 600; text-align: right; font-family: inherit; }
input.lx-in[b-xp2jh8zxyy] { width: 100%; box-sizing: border-box; border: 1px solid #D9DFE6; border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px; }
input.lx-inline[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; width: 160px; }
.lx-3box[b-xp2jh8zxyy] { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lx-3box > div[b-xp2jh8zxyy] { background: #F4F6F8; border-radius: 6px; padding: 10px 12px; }
.lx-3box .lb[b-xp2jh8zxyy] { font-size: 11.5px; color: #5F6B78; }
.lx-3box .vl[b-xp2jh8zxyy] { font-size: 18px; }
.lx-refrow[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 16px; padding: 8px 10px; border: 1px solid #ECF0F3; border-radius: 6px; margin-bottom: 6px; }
.lx-choice2[b-xp2jh8zxyy] { display: flex; gap: 16px; margin-bottom: 8px; }
.lx-choice2 button[b-xp2jh8zxyy] { flex: 1; border: 1px solid #D9DFE6; background: #FFFFFF; color: #16202A; border-radius: 6px; padding: 9px; cursor: pointer; font-weight: 600; font-family: inherit; }
.lx-choice2 button.on[b-xp2jh8zxyy] { background: #16202A; color: #FFFFFF; }
.lx-pendrow[b-xp2jh8zxyy] { display: flex; gap: 12px; padding: 6px 10px; border-bottom: 1px solid #ECF0F3; font-size: 12.5px; align-items: center; }
.lx-pendrow .nm[b-xp2jh8zxyy] { color: #C0392B; font-weight: 600; }
.lx-alert[b-xp2jh8zxyy] { background: #E6EEF8; color: #1F4E8C; border-radius: 6px; padding: 10px 12px; font-size: 12.5px; border: 0; }
.lx-alert.stop[b-xp2jh8zxyy] { background: #FBE5E3; color: #B3261E; }
.lx-comp input.num[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; padding: 5px 8px; text-align: right; font-family: inherit; }
.lx-toast[b-xp2jh8zxyy] { background: #16202A; color: #FFFFFF; border-radius: 6px; font-size: 13px; }

.lx-foot[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 12px; padding: 8px 0 0; flex-shrink: 0; font-size: 12px; }
.lx-pager[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 6px; }
.lx-pagelbl[b-xp2jh8zxyy] { font-size: 12px; color: #5F6B78; }
.lx-fbitem.wide .rz-dropdown[b-xp2jh8zxyy] { min-width: 260px; }

.lx-seg2[b-xp2jh8zxyy] { display: inline-flex; border: 1px solid #D9DFE6; border-radius: 6px; overflow: hidden; background: #FFFFFF; padding: 0; }
.lx-seg2 button[b-xp2jh8zxyy] { border: 0; background: #FFFFFF; color: #16202A; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: inherit; border-radius: 0; box-shadow: none; white-space: nowrap; }
.lx-seg2 button.on[b-xp2jh8zxyy] { background: #1F4E8C; color: #FFFFFF; }
.lx-seg2 button.on .lx-mute[b-xp2jh8zxyy] { color: rgba(255,255,255,.75); }
.lx-btn.on[b-xp2jh8zxyy] { background: #1F4E8C; color: #fff; border-color: #1F4E8C; }
.lx-switch input:checked + span[b-xp2jh8zxyy] { background: #1F4E8C; }
.lx-cnt[b-xp2jh8zxyy] { font-size: 12.5px; color: #5F6B78; }
.lx-cnt b.warn[b-xp2jh8zxyy] { color: #B3261E; }

.lx-gan[b-xp2jh8zxyy] { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-gan th[b-xp2jh8zxyy] { font-weight: 600; color: #5F6B78; font-size: 11px; padding: 8px 10px; border-bottom: 1px solid #D9DFE6; white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; background: #FAFBFC; text-align: left; }
.lx-gan th.r[b-xp2jh8zxyy] { text-align: right; }
.lx-gan td[b-xp2jh8zxyy] { padding: 7px 10px; border-bottom: 1px solid #ECF0F3; vertical-align: middle; font-size: 13px; }
.lx-gan td.r[b-xp2jh8zxyy] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-ganrow td[b-xp2jh8zxyy] { background: #FFFFFF; }
.lx-ganrow.unas td[b-xp2jh8zxyy] { background: #FBFCFD; }
.lx-ganrow.unas td:first-child[b-xp2jh8zxyy] { box-shadow: none; }
.lx-ganrow.sel td[b-xp2jh8zxyy], .lx-ganrow.sel:hover td[b-xp2jh8zxyy] { background: #E6EEF8; }
.lx-ganrow:hover td[b-xp2jh8zxyy] { background: #F7F9FB; }
.lx-gan .lx-kho[b-xp2jh8zxyy], .lx-kho[b-xp2jh8zxyy] { color: #C0392B; font-weight: 600; }
.lx-gan .lx-rate[b-xp2jh8zxyy], .lx-rate[b-xp2jh8zxyy] { color: #1F4E8C; font-weight: 600; }
.lx-group .lx-grouprow td[b-xp2jh8zxyy] { background: #FFFFFF; padding: 7px 10px; font-weight: 600; border-bottom: 1px solid #ECF0F3; cursor: pointer; }
.lx-group .lx-grouprow:hover td[b-xp2jh8zxyy] { background: #F7F9FB; }
.lx-group .lx-grouprow.none td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 #B3261E; }
.lx-group .lx-grouprow.part td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 #E0A33A; }
.lx-group .lx-grouprow.full td:first-child[b-xp2jh8zxyy] { box-shadow: inset 4px 0 0 #237A45; }
.lx-group .lx-ganrow.child td[b-xp2jh8zxyy] { background: #FBFCFD; font-weight: 400; }
.lx-group .lx-ganrow.child.sel td[b-xp2jh8zxyy] { background: #E6EEF8; }
.lx-group .lx-ganrow.child td:first-child[b-xp2jh8zxyy] { padding-left: 30px; }
.lx-group .lx-ganrow.child.unas td:nth-child(2)[b-xp2jh8zxyy] { box-shadow: none; }
.lx-grouplinks[b-xp2jh8zxyy] { display: flex; gap: 10px; font-size: 12px; margin-top: 4px; }
.lx-grouplinks .lx-link[b-xp2jh8zxyy] { color: #1F4E8C; font-weight: 600; }
.lx-chipcmd[b-xp2jh8zxyy] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D9DFE6; border-radius: 4px; padding: 2px 8px; background: #FFFFFF; color: #1F4E8C; margin-right: 4px; font-weight: 600; font-size: 12.5px; }
.lx-chipcmd .lx-mute[b-xp2jh8zxyy] { font-weight: 500; font-size: 11.5px; }
.lx-track[b-xp2jh8zxyy] { display: inline-block; height: 6px; width: 100px; background: #EAEDF0; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.lx-track i[b-xp2jh8zxyy] { display: block; height: 100%; background: #237A45; }
.lx-cellcb .rz-dropdown[b-xp2jh8zxyy] { min-height: 28px; border: 1px solid #D9DFE6; border-radius: 4px; background: #FFFFFF; }
.lx-ganrow.unas .lx-cellcb:last-child .rz-dropdown[b-xp2jh8zxyy] { border-color: #E0A33A; background: #FFFBF2; }
.lx-eodtitle.warn[b-xp2jh8zxyy] { background: #FCF1DC; color: #9A5B00; }
.lx-eodtitle.stop[b-xp2jh8zxyy] { background: #FBE5E3; color: #B3261E; }


.lx-app .rz-numeric[b-xp2jh8zxyy], .lx-modal .rz-numeric[b-xp2jh8zxyy] { border: 1px solid #D9DFE6; border-radius: 6px; background: #FFFFFF; box-sizing: border-box; }
.lx-modal .rz-numeric input[b-xp2jh8zxyy], .lx-app .rz-numeric input[b-xp2jh8zxyy] { text-align: right; font-weight: 600; font-family: inherit; font-size: 13px; padding: 6px 9px; }
.lx-cl .rz-numeric[b-xp2jh8zxyy] { width: 100%; }

.lx-inl[b-xp2jh8zxyy] { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lx-inl .lx-cellcb[b-xp2jh8zxyy] { display: inline-block; width: 220px; min-width: 180px; }

.lx-secrow td[b-xp2jh8zxyy] { background: #EEF2F6; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid #D9DFE6; color: #16202A; }
.lx-chipf .lx-tabcnt[b-xp2jh8zxyy] { margin-left: 4px; }
.lx-chipf.on .lx-tabcnt[b-xp2jh8zxyy] { background: rgba(255,255,255,.25); color: #fff; }

.lx-editcell[b-xp2jh8zxyy] { cursor: pointer; min-height: 24px; border: 1px dashed transparent; border-radius: 4px; padding: 2px 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; }
.lx-editcell:hover[b-xp2jh8zxyy] { border-color: #9DB9D9; background: #F7F9FB; }
.lx-editcell.empty[b-xp2jh8zxyy] { color: #9A5B00; background: #FFFBF2; border-color: #E0A33A; }
.lx-editcell .lx-chipcmd[b-xp2jh8zxyy] { margin: 0; }

.lx-editcell[b-xp2jh8zxyy] { border: none; background: transparent; padding: 2px 0; min-height: 26px; box-sizing: border-box; border-radius: 4px; }
.lx-editcell:hover[b-xp2jh8zxyy] { background: #F2F5F8; }
.lx-editcell.empty[b-xp2jh8zxyy] { border: none; background: transparent; color: #9A5B00; }
.lx-editcell.empty:hover[b-xp2jh8zxyy] { background: #FFFBF2; }
.lx-editcell .lx-caret[b-xp2jh8zxyy] { margin-left: auto; color: #8A95A0; font-size: 11px; }
.lx-chipwh[b-xp2jh8zxyy] { display: inline-flex; align-items: center; border: 1px solid #D9DFE6; border-radius: 4px; padding: 1px 7px; background: #F4F6F8; color: #16202A; font-size: 12px; font-weight: 500; }

.lx-dform[b-xp2jh8zxyy] { display: inline-block; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 3px; background: #E6EEF8; color: #1F4E8C; margin-left: 4px; vertical-align: middle; }
.lx-dform.KHTB[b-xp2jh8zxyy] { background: #EDE7F6; color: #5E35B1; }
.lx-dform.TANGBO[b-xp2jh8zxyy] { background: #FFF3E0; color: #E65100; }

.lx-detload[b-xp2jh8zxyy] { display: flex; flex-direction: column; align-items: center; gap: 14px; background: #FFFFFF; border-radius: 10px; padding: 28px 40px; font-size: 13.5px; color: #5F6B78; box-shadow: 0 12px 40px rgba(0,0,0,.18); }


@media (max-width: 640px) {
    .lx-scrim[b-xp2jh8zxyy] { padding: 0; align-items: stretch; }
    .lx-modal[b-xp2jh8zxyy], .lx-modal.wide[b-xp2jh8zxyy], .lx-modal.w720[b-xp2jh8zxyy], .lx-modal.w780[b-xp2jh8zxyy], .lx-modal.w820[b-xp2jh8zxyy] { max-width: 100%; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .lx-modal .lx-mb[b-xp2jh8zxyy] { flex: 1; overflow: auto; }
    .lx-scrim .lx-modal.lx-drawer[b-xp2jh8zxyy] { width: 100vw; }
    .lx-mh[b-xp2jh8zxyy] { padding: 12px 14px; }
    .lx-mh h3[b-xp2jh8zxyy] { font-size: 14px; }
    .lx-mb[b-xp2jh8zxyy] { padding: 12px 14px; }
    .lx-mf[b-xp2jh8zxyy] { padding: 10px 14px; flex-wrap: wrap; border-radius: 0; }
    .lx-mf .lx-btn[b-xp2jh8zxyy] { flex: 1 1 auto; text-align: center; }
    .lx-mf > span[style*="flex:1"][b-xp2jh8zxyy] { display: none; }
    .lx-modal.lx-drawer .lx-mh[b-xp2jh8zxyy], .lx-modal.lx-drawer .lx-mb[b-xp2jh8zxyy], .lx-modal.lx-drawer .lx-mf[b-xp2jh8zxyy] { padding-left: 14px; padding-right: 14px; }
    .lx-form[b-xp2jh8zxyy], .lx-form.c170[b-xp2jh8zxyy] { grid-template-columns: 1fr; gap: 4px 0; }
    .lx-form > label[b-xp2jh8zxyy] { padding-top: 8px; font-size: 12px; }
    .lx-form input.w200[b-xp2jh8zxyy], .lx-form .rz-numeric[b-xp2jh8zxyy], .lx-form .rz-dropdown[b-xp2jh8zxyy] { width: 100% !important; }
    .lx-form .lx-hint.c2[b-xp2jh8zxyy] { grid-column: 1; }
    .lx-kind[b-xp2jh8zxyy] { flex-direction: column; }
    .lx-seg[b-xp2jh8zxyy], .lx-seg.big[b-xp2jh8zxyy] { display: flex; flex-wrap: wrap; }
    .lx-seg.big button[b-xp2jh8zxyy] { flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px; }
    .lx-range[b-xp2jh8zxyy] { flex-wrap: wrap; }
    .lx-range input[type="date"][b-xp2jh8zxyy] { flex: 1 1 45%; min-width: 0; }
    .lx-steps > div[b-xp2jh8zxyy] { font-size: 11.5px; padding: 8px 4px; }
    .lx-grid2[b-xp2jh8zxyy], .lx-grid3[b-xp2jh8zxyy] { grid-template-columns: 1fr; }
    .lx-cl[b-xp2jh8zxyy] { grid-template-columns: 1fr; }
    .lx-detgrid[b-xp2jh8zxyy] { gap: 12px 16px; padding: 14px; }
    .lx-detgrid > div[b-xp2jh8zxyy] { flex: 1 1 45%; min-width: 45%; }
    .lx-detgrid > div.grow[b-xp2jh8zxyy] { min-width: 100%; }
    .lx-det4[b-xp2jh8zxyy] { grid-template-columns: 1fr 1fr; }
    .lx-det4 > div[b-xp2jh8zxyy] { padding: 10px 14px; }
    .lx-det4 > div:nth-child(2)[b-xp2jh8zxyy] { border-right: 0; }
    .lx-kpi8[b-xp2jh8zxyy] { grid-template-columns: 1fr 1fr; }
    .lx-dash[b-xp2jh8zxyy] { grid-template-columns: 1fr; }
    .lx-subtabs[b-xp2jh8zxyy] { overflow-x: auto; }
    .lx-subtabs button[b-xp2jh8zxyy] { white-space: nowrap; }
    .lx-detload[b-xp2jh8zxyy] { margin: 0 16px; padding: 22px 24px; }
}
/* /Components/Pages/V2/ReceivingProgressReport/ReceivingProgressReport.razor.rz.scp.css */
.rp[b-5b481q0aim]{--bg:#F4F6F8;--surface:#fff;--ink:#1C2B3A;--muted:#5B6B7C;--line:#E2E7ED;--brand:#0E5A8A;--brand-bg:#E3F0F9;--done:#256C39;--here:#0E5A8A;--soon:#A9C4EE;--warn:#B3261E;--done-bg:#E6F4EA;--here-bg:#E3F0F9;--warn-bg:#FCE9E7;--miss:repeating-linear-gradient(135deg,#E6EAF0 0 4px,#F7F9FB 4px 8px);--mono:'Consolas',monospace;--sans:var(--font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1.4;padding-bottom:30px}
.rp *[b-5b481q0aim]{box-sizing:border-box}
.rp button[b-5b481q0aim]{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.rp .wrap[b-5b481q0aim]{max-width:1400px;margin:0 auto;padding:0 12px}
.rp .empty[b-5b481q0aim]{padding:30px;text-align:center;color:#8FA0B0}
.rp .top[b-5b481q0aim]{background:var(--surface);border:1px solid var(--line);border-radius:6px;position:sticky;top:0;z-index:10;margin:0 12px 8px}
.rp .top .wrap[b-5b481q0aim]{display:flex;align-items:center;gap:12px;padding:8px 12px;flex-wrap:wrap}
.rp h1[b-5b481q0aim]{font-size:14px;font-weight:700;margin:0;white-space:nowrap;color:#12395B}
.rp .seg[b-5b481q0aim]{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#FAFBFC}
.rp .seg button[b-5b481q0aim]{padding:5px 11px;font-weight:500;color:var(--muted);white-space:nowrap;font-size:11.5px}
.rp .seg button.on[b-5b481q0aim]{background:var(--brand);color:#fff}
.rp .sw[b-5b481q0aim]{position:relative;margin-left:auto;min-width:240px}
.rp .search[b-5b481q0aim]{border:1px solid var(--line);border-radius:6px;padding:5px 10px;font:inherit;width:100%;background:var(--surface);height:30px}
.rp .sh[b-5b481q0aim]{display:none;position:absolute;top:calc(100% + 4px);right:0;width:380px;z-index:35;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;max-height:320px;overflow:auto}
.rp .sw.open .sh[b-5b481q0aim]{display:block}
.rp .sw .closer[b-5b481q0aim]{position:fixed;inset:0;z-index:34}
.rp .sh .grp[b-5b481q0aim]{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:6px 8px 2px}
.rp .sh .it[b-5b481q0aim]{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:6px;font-size:11.5px;cursor:pointer}
.rp .sh .it:hover[b-5b481q0aim],.rp .sh .it.act[b-5b481q0aim]{background:var(--bg)}
.rp .sh .it b[b-5b481q0aim]{font-weight:600}
.rp .sh .it span[b-5b481q0aim]{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp .sh .tip[b-5b481q0aim]{padding:6px 8px;font-size:11px;color:var(--muted)}
.rp .sh .tip code[b-5b481q0aim]{font-family:var(--mono);background:var(--bg);border-radius:3px;padding:0 4px}
.rp .range[b-5b481q0aim]{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.rp .range input[b-5b481q0aim]{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:inherit;font-size:11.5px;background:var(--surface);height:30px}
.rp .gh .n .dt[b-5b481q0aim]{font-size:10px;font-weight:500;color:var(--muted);background:#F1F4F7;border-radius:4px;padding:1px 6px;display:none}
.rp.multiday .gh .n .dt[b-5b481q0aim]{display:inline-block}
.rp .sync[b-5b481q0aim]{font-size:11px;color:var(--muted);white-space:nowrap}
.rp .sync[b-5b481q0aim]:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--done);margin-right:6px;vertical-align:1px}
.rp .sync.off[b-5b481q0aim]:before{background:#B9C1CC}
.rp .btn[b-5b481q0aim]{border:1px solid var(--line);border-radius:6px;padding:5px 11px;font-weight:500;font-size:11.5px;background:var(--surface);white-space:nowrap;height:30px}
.rp .btn:disabled[b-5b481q0aim]{opacity:.5;cursor:default}
.rp .btn.primary[b-5b481q0aim]{background:var(--brand);border-color:var(--brand);color:#fff}
.rp .btn i[b-5b481q0aim]{margin-right:4px}
.rp .cards[b-5b481q0aim]{display:flex;gap:10px;padding:6px 0 6px;overflow-x:auto;scrollbar-width:thin}
.rp .cards .card[b-5b481q0aim]{flex:0 0 170px}
.rp .card[b-5b481q0aim]{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:6px}
.rp .card.on[b-5b481q0aim]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.rp .card .k[b-5b481q0aim]{font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.rp .card .k small[b-5b481q0aim]{font-weight:500;color:var(--muted);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.rp .card .big[b-5b481q0aim]{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1;color:#12395B}
.rp .card .big span[b-5b481q0aim]{font-size:10.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.rp .card .f[b-5b481q0aim]{font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.3px}
.rp .bar[b-5b481q0aim]{height:7px;border-radius:4px;background:var(--miss);display:flex;overflow:hidden}
.rp .bar i[b-5b481q0aim]{display:block;height:100%}
.rp .bar .d[b-5b481q0aim]{background:var(--done)} .rp .bar .h[b-5b481q0aim]{background:var(--here)} .rp .bar .s[b-5b481q0aim]{background:var(--soon)}
.rp .legend[b-5b481q0aim]{display:flex;gap:14px;font-size:10.5px;color:var(--muted);padding:2px 0 8px}
.rp .legend span[b-5b481q0aim]:before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--c)}
.rp .legend .m[b-5b481q0aim]:before{background:var(--miss);border:1px solid var(--line)}
.rp .ms[b-5b481q0aim]{position:relative}
.rp .msb[b-5b481q0aim]{border:1px solid var(--line);border-radius:6px;padding:5px 26px 5px 11px;font:inherit;font-size:11.5px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B7C' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--ink);height:30px}
.rp .msb.on[b-5b481q0aim]{border-color:var(--brand);color:var(--brand);font-weight:600;background-color:var(--brand-bg)}
.rp .msp[b-5b481q0aim]{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:220px;max-height:280px;overflow:auto}
.rp .ms.open .msp[b-5b481q0aim]{display:block}
.rp .ms .closer[b-5b481q0aim]{position:fixed;inset:0;z-index:29}
.rp .mss[b-5b481q0aim]{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font:inherit;font-size:11.5px;margin-bottom:4px;background:var(--bg);color:var(--ink)}
.rp .mss:focus[b-5b481q0aim]{outline:none;border-color:var(--brand)}
.rp .msp label[b-5b481q0aim]{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:11.5px;cursor:pointer;white-space:nowrap;margin:0}
.rp .msp label:hover[b-5b481q0aim]{background:var(--bg)}
.rp .msp input[b-5b481q0aim]{accent-color:var(--brand)}
.rp .todo[b-5b481q0aim]{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-weight:500;font-size:10.5px;background:var(--surface);display:inline-flex;gap:5px;align-items:center;height:24px;color:var(--muted)}
.rp .todo b[b-5b481q0aim]{font-size:10px;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:0 6px}
.rp .todo.on[b-5b481q0aim]{background:var(--warn);border-color:var(--warn);color:#fff}
.rp .todo.on b[b-5b481q0aim]{color:#fff;background:rgba(255,255,255,.2)}
.rp .sec[b-5b481q0aim]{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rp .sec-t[b-5b481q0aim]{font-size:10.5px;font-weight:700;color:#43566B;text-transform:uppercase;letter-spacing:.3px;padding:0 2px}
.rp .g[b-5b481q0aim]{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rp .g.warn[b-5b481q0aim]{border-color:#EFB7B1}
.rp .gh[b-5b481q0aim]{display:grid;grid-template-columns:1fr 220px 200px;gap:16px;align-items:center;padding:8px 12px;width:100%;text-align:left;border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer;user-select:text}
.rp .gh:hover[b-5b481q0aim]{background:#FAFBFC}
.rp .g.closed .gh[b-5b481q0aim]{border-bottom:0}
.rp .g.closed table[b-5b481q0aim],.rp .g.closed .ship[b-5b481q0aim],.rp .g.closed .pool[b-5b481q0aim]{display:none}
.rp .gh .n[b-5b481q0aim]{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.rp .gh .n .pwt[b-5b481q0aim]{font-size:10.5px;font-weight:500;color:var(--brand);background:#E9F0F8;border-radius:999px;padding:1px 7px}
.rp .gh .n .src[b-5b481q0aim]{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#E3F0F9;color:#0E5A8A;border-radius:999px;padding:2px 7px}
.rp .gh .n .src.kho[b-5b481q0aim]{background:#EEF1F5;color:#4C5866}
.rp .gh .n .al[b-5b481q0aim],.rp .pool .al[b-5b481q0aim]{font-size:10px;font-weight:700;background:var(--warn-bg);color:var(--warn);border-radius:999px;padding:2px 7px}
.rp .gh .m[b-5b481q0aim]{font-size:10.5px;color:var(--muted);margin-top:2px}
.rp .gh .m b[b-5b481q0aim]{font-weight:600;color:var(--ink)}
.rp .gh .m .rt[b-5b481q0aim]{color:var(--ink);font-family:var(--sans)}
.rp .gh .m .mg[b-5b481q0aim]{color:var(--warn);font-weight:600;font-family:var(--sans)}
.rp .gh .m .mg2[b-5b481q0aim]{color:#8A5B0E;font-family:var(--sans)}
.rp .gh .nums[b-5b481q0aim]{font-size:11.5px;display:flex;justify-content:space-between;white-space:nowrap;margin-top:3px}
.rp .gh .nums b[b-5b481q0aim]{font-weight:700;color:#12395B}
.rp .gh .cnt[b-5b481q0aim]{font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.rp .gh .cnt[b-5b481q0aim]:after{content:"▾";display:inline-block;margin-left:6px;transition:transform .15s;color:var(--brand)}
.rp .g.closed .cnt[b-5b481q0aim]:after{transform:rotate(-90deg)}
.rp table[b-5b481q0aim]{width:100%;border-collapse:collapse}
.rp th[b-5b481q0aim]{font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;color:#43566B;font-weight:600;text-align:left;padding:6px 12px;border-bottom:1px solid var(--line);background:#F7F9FB}
.rp th.r[b-5b481q0aim],.rp td.r[b-5b481q0aim]{text-align:right}
.rp td[b-5b481q0aim]{padding:6px 12px;border-bottom:1px solid #EDF1F5;font-size:11.5px}
.rp tr:last-child td[b-5b481q0aim]{border-bottom:0}
.rp tr[data-st="wait"] td[b-5b481q0aim]{background:#EEF4FD}
.rp tr[data-st="in"] td[b-5b481q0aim]{background:#FFF9E3}
.rp tr[data-st="picked"] td[b-5b481q0aim]{background:#F0ECFA}
.rp tr[data-st="delivered"] td[b-5b481q0aim]{background:#EEF9F2}
.rp tr[data-st="cancel"] td[b-5b481q0aim]{background:#F3F5F7}
.rp td.pt[b-5b481q0aim]{font-family:var(--mono);font-weight:600;white-space:nowrap;position:relative;cursor:default;user-select:text}
.rp td.pt[data-trip]:hover[b-5b481q0aim]::after,.rp td.pt[data-trip]:focus[b-5b481q0aim]::after{content:"Mã chuyến " attr(data-trip);position:absolute;left:12px;top:calc(100% - 4px);z-index:5;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.rp td.pt[data-trip]:hover[b-5b481q0aim],.rp td.pt[data-trip]:focus[b-5b481q0aim]{color:var(--brand);outline:none}
.rp td.pt .vt[b-5b481q0aim]{font-family:var(--sans);font-size:9px;font-weight:700;background:#F1F4F7;border-radius:3px;padding:1px 4px;margin-right:6px;color:#43566B;vertical-align:1px}
.rp td.pt small[b-5b481q0aim]{font-family:var(--sans);font-weight:400;color:#8FA0B0;margin-left:6px;font-size:10.5px}
.rp td.w[b-5b481q0aim]{font-family:var(--mono);white-space:nowrap}
.rp td.w small[b-5b481q0aim]{color:#8FA0B0;font-size:10px;margin-left:4px;font-family:var(--mono)}
.rp .st[b-5b481q0aim]{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.rp .st[b-5b481q0aim]:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rp .st.wait[b-5b481q0aim]{background:#E8F0FC;color:#2A57A8}
.rp .st.in[b-5b481q0aim]{background:#E6EEFC;color:#2F6FDE}
.rp .st.picked[b-5b481q0aim]{background:#EBE6FA;color:#5B3FBF}
.rp .st.delivered[b-5b481q0aim]{background:#E3F5EA;color:#127A44}
.rp .st.cancel[b-5b481q0aim]{background:#EEF1F5;color:#4C5866;text-decoration:line-through}
.rp .st small[b-5b481q0aim]{font-weight:500;font-size:10px;opacity:.8}
.rp tr.cancel td[b-5b481q0aim]{color:#8FA0B0}
.rp tr.cancel td.pt[b-5b481q0aim]{text-decoration:line-through}
.rp .bk[b-5b481q0aim]{font-size:9.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 7px}
.rp .bk.kab[b-5b481q0aim]{background:#E6F4EA;color:#256C39}
.rp .bk.khtb[b-5b481q0aim]{background:#F1E9FB;color:#6A35A8}
.rp .chips[b-5b481q0aim]{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 0 10px}
.rp .chips .lb[b-5b481q0aim]{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-right:2px}
.rp .chip[b-5b481q0aim]{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:500;background:var(--surface);display:inline-flex}
.rp .chip.on[b-5b481q0aim]{background:var(--brand);border-color:var(--brand);color:#fff}
.rp .pool .ed[b-5b481q0aim]{color:var(--brand);font-weight:600;margin-left:4px}
.rp .etaedit[b-5b481q0aim]{display:inline-flex;gap:4px;align-items:center}
.rp .etaedit input[b-5b481q0aim]{border:1px solid var(--brand);border-radius:6px;padding:2px 6px;font:inherit;font-size:11px}
.rp .etaedit button[b-5b481q0aim],.rp td.note .nb button[b-5b481q0aim]{font-size:11px;font-weight:600;border-radius:5px;padding:3px 9px;border:1px solid var(--line);background:#fff}
.rp .etaedit button.sv[b-5b481q0aim],.rp td.note .nb button.sv[b-5b481q0aim]{background:var(--brand);border-color:var(--brand);color:#fff}
.rp td.note[b-5b481q0aim]{font-size:11.5px;color:var(--ink);cursor:text;min-width:180px}
.rp td.note.e[b-5b481q0aim]{color:var(--brand);font-size:11px}
.rp td.note.editing[b-5b481q0aim]{padding:4px 8px}
.rp td.note textarea[b-5b481q0aim]{width:100%;min-height:52px;border:1px solid var(--brand);border-radius:6px;padding:6px 8px;font:inherit;font-size:11.5px;resize:vertical;background:#fff}
.rp td.note .nb[b-5b481q0aim]{display:flex;gap:6px;margin-top:4px}
.rp td.note .by[b-5b481q0aim]{display:block;font-size:10px;color:#8FA0B0;margin-top:2px}
.rp td.note .fum[b-5b481q0aim]{color:var(--warn);font-weight:700}
.rp td.note .sp[b-5b481q0aim]{font-size:11px;color:var(--muted)}
.rp .ship[b-5b481q0aim]{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 12px;font-size:11px;color:var(--ink);background:#EDF2F8;border-bottom:1px solid var(--line)}
.rp .ship .lb[b-5b481q0aim]{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#0E5A8A;background:#E3F0F9;border-radius:999px;padding:2px 7px;margin-right:4px}
.rp .ship b[b-5b481q0aim]{font-weight:600}
.rp .pool[b-5b481q0aim]{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 12px;font-size:11px;color:var(--muted);background:#FAFBFC;border-top:1px solid var(--line)}
.rp .pool .lb[b-5b481q0aim]{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#5B6674;background:#EEF1F5;border-radius:999px;padding:2px 7px;margin-right:4px}
.rp .pool b[b-5b481q0aim]{color:var(--ink);font-weight:600}
.rp .pool .tg[b-5b481q0aim]{color:var(--brand);font-weight:600;font-size:11px;margin-left:8px}
.rp .pool .pl-list[b-5b481q0aim]{display:none;flex-basis:100%;gap:6px;flex-wrap:wrap;padding-top:4px}
.rp .pool .pl-list.open[b-5b481q0aim]{display:flex}
.rp .pool .pl[b-5b481q0aim]{font-size:10.5px;border:1px dashed #B9C1CC;border-radius:4px;padding:1px 7px;color:#43566B;background:#fff}
.rp .pool.warnp[b-5b481q0aim]{background:#FFF8F7}
.rp .fbtn[b-5b481q0aim]{display:none}
.rp .fhead[b-5b481q0aim],.rp .fpanel .x[b-5b481q0aim]{display:none}
.rp .fpanel[b-5b481q0aim]{display:contents}
.rp .frow[b-5b481q0aim]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 100%;order:2}
.rp .frow .todo[b-5b481q0aim]{margin-left:6px}
.rp .ffoot[b-5b481q0aim]{display:flex;align-items:center;gap:8px;margin-left:auto;order:1}
.rp .backdrop[b-5b481q0aim]{display:none}
@media (max-width:820px){
    .rp .wrap[b-5b481q0aim]{padding:0 8px}
    .rp .top[b-5b481q0aim]{margin:0 8px 8px}
    .rp .top .wrap[b-5b481q0aim]{justify-content:space-between;flex-wrap:nowrap;padding:8px}
    .rp .fbtn[b-5b481q0aim]{display:inline-flex;gap:6px;align-items:center}
    .rp .fbtn b[b-5b481q0aim]{font-family:var(--mono);background:var(--brand);color:#fff;border-radius:999px;padding:0 6px;font-size:10px}
    .rp .fpanel[b-5b481q0aim]{display:block;position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--surface);border-radius:16px 16px 0 0;padding:14px 16px 20px;box-shadow:0 -8px 30px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .2s;z-index:40}
    .rp .fpanel.open[b-5b481q0aim]{transform:none}
    .rp .fhead[b-5b481q0aim]{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;margin-bottom:12px}
    .rp .fpanel .x[b-5b481q0aim]{display:inline;color:var(--muted);font-weight:500}
    .rp .frow[b-5b481q0aim]{gap:8px;margin-bottom:10px}
    .rp .frow .seg[b-5b481q0aim]{flex-wrap:wrap}
    .rp .frow .seg button[b-5b481q0aim]{flex:1 1 auto}
    .rp .frow .ms[b-5b481q0aim]{flex:1 1 45%}.rp .frow .msb[b-5b481q0aim]{max-width:none;width:100%;text-align:left}
    .rp .msp[b-5b481q0aim]{position:static;box-shadow:none;border-radius:8px;margin-top:4px}
    .rp .frow .todo[b-5b481q0aim]{margin-left:0;flex:1 1 100%;justify-content:center}
    .rp .range[b-5b481q0aim]{width:100%}.rp .range input[b-5b481q0aim]{flex:1}
    .rp .ffoot[b-5b481q0aim]{margin:14px 0 0;flex-wrap:wrap}
    .rp .legend[b-5b481q0aim]{display:none}
    .rp .chips[b-5b481q0aim]{flex-wrap:nowrap;overflow-x:auto;padding:8px 0 10px}
    .rp .chips .lb[b-5b481q0aim]{display:none}
    .rp .chip[b-5b481q0aim]{flex:0 0 auto}
    .rp .backdrop[b-5b481q0aim]{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39}
    .rp .sw[b-5b481q0aim]{min-width:0;width:100%;margin-left:0}
    .rp .sh[b-5b481q0aim]{position:static;box-shadow:none;margin-top:4px;width:100%}
    .rp .cards .card[b-5b481q0aim]{flex-basis:60%}
    .rp .gh[b-5b481q0aim]{grid-template-columns:1fr;gap:6px}
    .rp .gh .cnt[b-5b481q0aim]{text-align:left}
    .rp thead[b-5b481q0aim]{display:none}
    .rp table[b-5b481q0aim],.rp tbody[b-5b481q0aim],.rp tr[b-5b481q0aim],.rp td[b-5b481q0aim]{display:block;width:100%}
    .rp tr[b-5b481q0aim]{padding:8px 12px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:1px 10px}
    .rp td[b-5b481q0aim]{border:0;padding:1px 0}
    .rp td.pt[b-5b481q0aim]{font-size:13px}
    .rp td.stc[b-5b481q0aim]{grid-column:2;grid-row:1;justify-self:end}
    .rp td.r[b-5b481q0aim]{text-align:left}
    .rp td.note[b-5b481q0aim]{grid-column:1/-1}
    .rp td.nvc[b-5b481q0aim]:before{content:"Vận tải · "}
    .rp td.nvc[b-5b481q0aim]{color:var(--muted);font-size:11px}
}
/* /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;
    }
}
/* /Components/Pages/V2/Transport/Booking/BookBarger.razor.rz.scp.css */
/* BookTruck Page Specific Styles */


@media (max-width: 769px) {
    [b-mnkq1mfy7x] .e-pager .e-mfirst, [b-mnkq1mfy7x] .e-pager .e-mprev, [b-mnkq1mfy7x] .e-pager .e-mnext, [b-mnkq1mfy7x] .e-pager .e-mlast {
        display: none !important;
    }

    [b-mnkq1mfy7x] .e-pager.e-adaptive .e-mlast {
        display: none !important;
    }

    [b-mnkq1mfy7x] .mainpager.e-pager.e-adaptive {
        display: none !important;
    }

    [b-mnkq1mfy7x] .e-pager.e-adaptive {
        display: none !important;
    }

    [b-mnkq1mfy7x] .e-parentmsgbar {
        display: none !important;
    }

    .e-pager.e-adaptive div.e-parentmsgbar[b-mnkq1mfy7x] {
        display: none !important;
    }
}

.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;
    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;
}

/* 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;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.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;
    justify-content: flex-end;
}

.btn-fuction-container .filter-group[b-mnkq1mfy7x] {
    flex-shrink: 0;
    min-width: auto;
}

.filter-group-btn[b-mnkq1mfy7x] {
    display: flex;
    align-items: flex-end;
}

.btn-group-function[b-mnkq1mfy7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    padding-top: 10px;
}

.fn-zone-left[b-mnkq1mfy7x] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

    .fn-zone-left .subtasks-level2[b-mnkq1mfy7x] {
        flex-shrink: 0;
    }

    .fn-zone-left .switch[b-mnkq1mfy7x] {
        white-space: nowrap;
    }

.fn-zone-center[b-mnkq1mfy7x] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

    .fn-zone-center[b-mnkq1mfy7x]::-webkit-scrollbar {
        height: 3px;
    }

.fn-zone-right[b-mnkq1mfy7x] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    justify-content: flex-end;
}

.fn-divider[b-mnkq1mfy7x] {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: #e2e8f0;
}

.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;
    }



.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: 174px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

@media (max-width: 1600px) {
    .table-container[b-mnkq1mfy7x] {
        position: fixed;
        top: 227px !important;
    }
}

@media (max-width: 1600px) and (min-width: 769px) {
    .btn-group-function[b-mnkq1mfy7x] {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .fn-zone-left[b-mnkq1mfy7x] {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

        .fn-zone-left[b-mnkq1mfy7x]::-webkit-scrollbar {
            height: 3px;
        }

    .fn-zone-center[b-mnkq1mfy7x] {
        flex: 0 0 auto;
        justify-content: flex-start;
        overflow: visible;
    }

    .fn-zone-right[b-mnkq1mfy7x] {
        flex: 1 0 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .subtasks-level2[b-mnkq1mfy7x] {
        flex-shrink: 0;
        border-bottom: none;
        padding: 0.15rem;
    }

    .subtasks-level2 .switch[b-mnkq1mfy7x] {
        white-space: nowrap;
    }
}

.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);
}

@media (max-width: 1400px) {
    .table-container[b-mnkq1mfy7x] {
        position: fixed;
        top: 222px;
    }
}


/* 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;
        }

        .btn-fuction-container[b-mnkq1mfy7x] {
            overflow-x: visible !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
        }

        .subtasks-level2[b-mnkq1mfy7x] {
            overflow-x: visible !important;
            width: auto !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.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-mnkq1mfy7x] {
        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-mnkq1mfy7x]::-webkit-scrollbar {
            height: 4px;
        }

        .btn-fuction-container[b-mnkq1mfy7x]::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }

        .btn-fuction-container[b-mnkq1mfy7x]::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 2px;
        }

            .btn-fuction-container[b-mnkq1mfy7x]::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 0, 0, 0.5);
            }

        .btn-fuction-container .filter-group[b-mnkq1mfy7x] {
            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-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: 8px;
        align-items: stretch;
    }

    .filter-group-btn[b-mnkq1mfy7x] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: stretch;
    }

    .fn-zone-center[b-mnkq1mfy7x], .fn-zone-right[b-mnkq1mfy7x] {
        width: 100%;
        margin-left: 0;
        overflow-x: visible;
    }

    .fn-divider[b-mnkq1mfy7x] {
        display: none;
    }

    /* Mobile switches container - horizontal scroll */
    .subtasks-level2[b-mnkq1mfy7x] {
        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-mnkq1mfy7x]::-webkit-scrollbar {
            height: 3px;
        }

        .subtasks-level2[b-mnkq1mfy7x]::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 2px;
        }

        .subtasks-level2[b-mnkq1mfy7x]::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }



    .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: 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-mnkq1mfy7x] {
        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-mnkq1mfy7x] {
            font-size: 0.9rem;
        }



    /* 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;
}

/* 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;
}

/* New Status Button Styles for BookTruck */
.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);
    }

/* Advanced Filter Panel Styles */
.advanced-filters-panel[b-mnkq1mfy7x] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px;
}

    .advanced-filters-panel.expanded[b-mnkq1mfy7x] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible;
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-mnkq1mfy7x] {
    padding: 20px;
    position: relative;
    z-index: 2001;
    background: white;
    border-radius: 20px;
}

.advanced-filters-header[b-mnkq1mfy7x] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-mnkq1mfy7x] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-mnkq1mfy7x] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-mnkq1mfy7x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-mnkq1mfy7x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-mnkq1mfy7x] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-mnkq1mfy7x] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-mnkq1mfy7x] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-mnkq1mfy7x] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-mnkq1mfy7x] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-mnkq1mfy7x] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-mnkq1mfy7x] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-mnkq1mfy7x] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-mnkq1mfy7x] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-mnkq1mfy7x] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-mnkq1mfy7x] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-mnkq1mfy7x] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-mnkq1mfy7x] {
        color: inherit !important;
    }

/* Vehicle Type Button Outline Styles */
.vehicle-type-btn[b-mnkq1mfy7x] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: 1px solid;
    background-color: transparent;
    transition: all 0.3s ease;
    cursor: default;
    min-width: 90px;
}



/* Container - Blue */
.vehicle-type-cont[b-mnkq1mfy7x] {
    border-color: #3b82f6;
    color: #2563eb;
}

/* Truck - Green */
.vehicle-type-truck[b-mnkq1mfy7x] {
    border-color: #10b981;
    color: #059669;
}

/* Barger/Sà lan - Orange */
.vehicle-type-barger[b-mnkq1mfy7x] {
    border-color: #f59e0b;
    color: #d97706;
}

/* Coaster/Tàu chuột - Purple */
.vehicle-type-coaster[b-mnkq1mfy7x] {
    border-color: #0cbf35;
    color: #0cbf35;
}

/* Exported Ship - Cyan */
.vehicle-type-ship[b-mnkq1mfy7x] {
    border-color: #06b6d4;
    color: #0891b2;
}

/* No Transport - Gray */
.vehicle-type-none[b-mnkq1mfy7x] {
    border-color: #6b7280;
    color: #4b5563;
}



/* Mobile responsive for vehicle type buttons */
@media (max-width: 768px) {
    .vehicle-type-btn[b-mnkq1mfy7x] {
        padding: 3px 8px;
        font-size: 0.7rem;
        min-width: 75px;
    }
}

/* Ensure parent container has relative positioning */
.filters-section[b-mnkq1mfy7x] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-mnkq1mfy7x] .rz-dropdown-panel,
[b-mnkq1mfy7x] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-mnkq1mfy7x] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-mnkq1mfy7x] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-mnkq1mfy7x] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-mnkq1mfy7x] {
        max-height: 800px;
    }

    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-mnkq1mfy7x] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }

    .advanced-filters-content[b-mnkq1mfy7x] {
        z-index: 2001 !important;
    }
}
/* /Components/Pages/V2/Transport/Booking/BookContainer.razor.rz.scp.css */
/* BookTruck Page Specific Styles */


@media (max-width: 769px) {
    [b-s5m4k88vxb] .e-pager .e-mfirst, [b-s5m4k88vxb] .e-pager .e-mprev, [b-s5m4k88vxb] .e-pager .e-mnext, [b-s5m4k88vxb] .e-pager .e-mlast {
        display: none !important;
    }

    [b-s5m4k88vxb] .e-pager.e-adaptive .e-mlast {
        display: none !important;
    }

    [b-s5m4k88vxb] .mainpager.e-pager.e-adaptive {
        display: none !important;
    }

    [b-s5m4k88vxb] .e-pager.e-adaptive {
        display: none !important;
    }

    [b-s5m4k88vxb] .e-parentmsgbar {
        display: none !important;
    }

    .e-pager.e-adaptive div.e-parentmsgbar[b-s5m4k88vxb] {
        display: none !important;
    }
}

.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;
}

/* 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;
    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;
}

/* 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;
}

.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;
    justify-content: flex-end;
}

.btn-fuction-container .filter-group[b-s5m4k88vxb] {
    flex-shrink: 0;
    min-width: auto;
}

.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: 174px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

@media (max-width: 1600px) {
    .table-container[b-s5m4k88vxb] {
        position: fixed;
        top: 217px !important;
    }
}

.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);
}

@media (max-width: 1400px) {
    .table-container[b-s5m4k88vxb] {
        position: fixed;
        top: 222px;
    }
}


/* 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 */
    .subtasks-level2[b-s5m4k88vxb] {
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        justify-content: center;
    }

        .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: 8px;
        align-items: stretch;
    }

    .filter-group-btn[b-s5m4k88vxb] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: stretch;
    }

    /* 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;
        }



    .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: 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-s5m4k88vxb] {
        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-s5m4k88vxb] {
            font-size: 0.9rem;
        }



    /* 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;
}

/* 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;
}

/* New Status Button Styles for BookTruck */
.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);
    }

/* Advanced Filter Panel Styles */
.advanced-filters-panel[b-s5m4k88vxb] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px;
}

    .advanced-filters-panel.expanded[b-s5m4k88vxb] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible;
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-s5m4k88vxb] {
    padding: 20px;
    position: relative;
    z-index: 2001;
    background: white;
    border-radius: 20px;
}

.advanced-filters-header[b-s5m4k88vxb] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-s5m4k88vxb] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-s5m4k88vxb] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-s5m4k88vxb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-s5m4k88vxb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-s5m4k88vxb] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-s5m4k88vxb] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-s5m4k88vxb] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-s5m4k88vxb] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-s5m4k88vxb] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-s5m4k88vxb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-s5m4k88vxb] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-s5m4k88vxb] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-s5m4k88vxb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-s5m4k88vxb] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-s5m4k88vxb] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-s5m4k88vxb] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-s5m4k88vxb] {
        color: inherit !important;
    }

/* Ensure parent container has relative positioning */
.filters-section[b-s5m4k88vxb] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-s5m4k88vxb] .rz-dropdown-panel,
[b-s5m4k88vxb] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-s5m4k88vxb] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-s5m4k88vxb] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-s5m4k88vxb] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-s5m4k88vxb] {
        max-height: 800px;
    }

    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-s5m4k88vxb] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }

    .advanced-filters-content[b-s5m4k88vxb] {
        z-index: 2001 !important;
    }
}

.vehicle-type-btn[b-s5m4k88vxb] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: 1px solid;
    background-color: transparent;
    transition: all 0.3s ease;
    cursor: default;
    min-width: 90px;
}

.vehicle-type-cont[b-s5m4k88vxb] {
    border-color: #3b82f6;
    color: #2563eb;
}

.vehicle-type-truck[b-s5m4k88vxb] {
    border-color: #10b981;
    color: #059669;
}

.vehicle-type-barger[b-s5m4k88vxb] {
    border-color: #f59e0b;
    color: #d97706;
}

.vehicle-type-coaster[b-s5m4k88vxb] {
    border-color: #0cbf35;
    color: #0cbf35;
}

.vehicle-type-ship[b-s5m4k88vxb] {
    border-color: #06b6d4;
    color: #0891b2;
}

.vehicle-type-none[b-s5m4k88vxb] {
    border-color: #6b7280;
    color: #4b5563;
}

@media (max-width: 768px) {
    .vehicle-type-btn[b-s5m4k88vxb] {
        padding: 3px 8px;
        font-size: 0.7rem;
        min-width: 75px;
    }
}
/* /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);
}
/* /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;
    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;
    justify-content: flex-end;
}

.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: 174px;
    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: 227px !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);
}

/* Advanced Filter Panel Styles */
.advanced-filters-panel[b-bvnlh7508l] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000; 
    max-height: 0;
    overflow: hidden; 
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px; 
}

    .advanced-filters-panel.expanded[b-bvnlh7508l] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible; 
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-bvnlh7508l] {
    padding: 20px;
    position: relative;
    z-index: 2001; 
    background: white; 
    border-radius: 20px;
}

.advanced-filters-header[b-bvnlh7508l] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-bvnlh7508l] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-bvnlh7508l] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-bvnlh7508l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-bvnlh7508l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-bvnlh7508l] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-bvnlh7508l] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-bvnlh7508l] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-bvnlh7508l] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-bvnlh7508l] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-bvnlh7508l] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-bvnlh7508l] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-bvnlh7508l] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-bvnlh7508l] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-bvnlh7508l] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-bvnlh7508l] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-bvnlh7508l] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-bvnlh7508l] {
        color: inherit !important;
    }

/* Ensure parent container has relative positioning */
.filters-section[b-bvnlh7508l] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-bvnlh7508l] .rz-dropdown-panel,
[b-bvnlh7508l] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-bvnlh7508l] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-bvnlh7508l] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-bvnlh7508l] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-bvnlh7508l] {
        max-height: 800px;
    }
    
    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-bvnlh7508l] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }
    
    .advanced-filters-content[b-bvnlh7508l] {
        z-index: 2001 !important;
    }
}

.vehicle-type-btn[b-bvnlh7508l] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: 1px solid;
    background-color: transparent;
    transition: all 0.3s ease;
    cursor: default;
    min-width: 90px;
}

.vehicle-type-cont[b-bvnlh7508l] {
    border-color: #3b82f6;
    color: #2563eb;
}

.vehicle-type-truck[b-bvnlh7508l] {
    border-color: #10b981;
    color: #059669;
}

.vehicle-type-barger[b-bvnlh7508l] {
    border-color: #f59e0b;
    color: #d97706;
}

.vehicle-type-coaster[b-bvnlh7508l] {
    border-color: #0cbf35;
    color: #0cbf35;
}

.vehicle-type-ship[b-bvnlh7508l] {
    border-color: #06b6d4;
    color: #0891b2;
}

.vehicle-type-none[b-bvnlh7508l] {
    border-color: #6b7280;
    color: #4b5563;
}

@media (max-width: 768px) {
    .vehicle-type-btn[b-bvnlh7508l] {
        padding: 3px 8px;
        font-size: 0.7rem;
        min-width: 75px;
    }
}

/* /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;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

    .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;
    }
}

/* Grid Layout Styles */
.shipment-grid[b-ku6sx09qh2] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 1rem 1rem;
    align-items: center;
}

.grid-label[b-ku6sx09qh2] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

.grid-value[b-ku6sx09qh2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #212529;
}

.grid-full-width[b-ku6sx09qh2] {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

    .grid-full-width .grid-label[b-ku6sx09qh2] {
        display: block;
        margin-bottom: 0.25rem;
    }

/* Input Grid Styles */
.input-grid[b-ku6sx09qh2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

.input-grid-item[b-ku6sx09qh2] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent overflow in grid items */
}

    .input-grid-item.full-width[b-ku6sx09qh2] {
        grid-column: 1 / -1;
    }

    .input-grid-item .grid-label[b-ku6sx09qh2] {
        margin-bottom: 0.25rem;
    }

    /* Horizontal Input Grid Item */
    .input-grid-item.horizontal[b-ku6sx09qh2] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

        .input-grid-item.horizontal .grid-label[b-ku6sx09qh2] {
            margin-bottom: 0;
            white-space: nowrap;
            min-width: fit-content;
        }

        .input-grid-item.horizontal .grid-value[b-ku6sx09qh2] {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Adjust inner components for grid */
    .input-grid-item .form-control[b-ku6sx09qh2],
    .input-grid-item .form-select[b-ku6sx09qh2] {
        width: 100%;
    }

.card[b-ku6sx09qh2] {
    border-radius: 8px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
    .card[b-ku6sx09qh2] {
        margin-bottom: 1rem !important;
    }

    .card-header[b-ku6sx09qh2] {
        display: none !important;
    }

    .card-body[b-ku6sx09qh2] {
        padding: 1rem !important;
    }

    .shipment-grid[b-ku6sx09qh2] {
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1rem;
    }

    .grid-value[b-ku6sx09qh2] {
        word-break: break-word;
        min-width: 0;
    }

    .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;
    }
}

/* Mobile Responsive for Input Grid */
@media (max-width: 768px) {
    .input-grid[b-ku6sx09qh2] {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive for Horizontal Items */
@media (max-width: 768px) {
    .input-grid-item.horizontal[b-ku6sx09qh2] {
        flex-direction: column;
        align-items: flex-start;
    }

        .input-grid-item.horizontal .grid-label[b-ku6sx09qh2] {
            margin-bottom: 0.25rem;
        }
}
/* /Components/Pages/V2/Transport/Booking/BookTruck_New/Components/ShipmentSummaryCard_Container.razor.rz.scp.css */
/* Shipment Summary Card Compact Styles */
.shipment-grid[b-nxlaj3dj9r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.grid-label[b-nxlaj3dj9r] {
    font-weight: 600;
    color: #495057;
}

.grid-value[b-nxlaj3dj9r] {
    font-weight: 500;
}

.input-grid[b-nxlaj3dj9r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.input-grid-item.full-width[b-nxlaj3dj9r] {
    grid-column: 1 / -1;
}

.input-grid-item.horizontal[b-nxlaj3dj9r] {
    grid-column: 1 / -1;
}

.table th[b-nxlaj3dj9r] {
    font-weight: 600;
    vertical-align: middle;
}

.table td[b-nxlaj3dj9r] {
    vertical-align: middle;
}
/* 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;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.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;
}
.card[b-nxlaj3dj9r] {
    border-radius: 8px;
}
/* Mobile optimizations */
@media (max-width: 768px) {
    .card[b-nxlaj3dj9r] {
        margin-bottom: 1rem !important;
    }
    
    .card-header[b-nxlaj3dj9r] {
        display: none !important;
    }
    
    .card-body[b-nxlaj3dj9r] {
        padding: 1rem !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;
    }
}

/* Grid Layout Styles */
.shipment-grid[b-nxlaj3dj9r] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 1rem 1rem;
    align-items: center;
}

.grid-label[b-nxlaj3dj9r] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

.grid-value[b-nxlaj3dj9r] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #212529;
}

.grid-full-width[b-nxlaj3dj9r] {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

.grid-full-width .grid-label[b-nxlaj3dj9r] {
    display: block;
    margin-bottom: 0.25rem;
}

/* Input Grid Styles */
.input-grid[b-nxlaj3dj9r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

.input-grid-item[b-nxlaj3dj9r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.input-grid-item.full-width[b-nxlaj3dj9r] {
    grid-column: 1 / -1;
}

.input-grid-item .grid-label[b-nxlaj3dj9r] {
    margin-bottom: 0.25rem;
}

.input-grid-item .form-control[b-nxlaj3dj9r],
.input-grid-item .form-select[b-nxlaj3dj9r] {
    width: 100%;
}

/* Horizontal Input Grid Item */
.input-grid-item.horizontal[b-nxlaj3dj9r] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.input-grid-item.horizontal .grid-label[b-nxlaj3dj9r] {
    margin-bottom: 0;
    white-space: nowrap;
    min-width: fit-content;
}

.input-grid-item.horizontal .grid-value[b-nxlaj3dj9r] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .input-grid-item.horizontal[b-nxlaj3dj9r] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .input-grid-item.horizontal .grid-label[b-nxlaj3dj9r] {
        margin-bottom: 0.25rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .shipment-grid[b-nxlaj3dj9r] {
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1rem;
    }
    
    .grid-label[b-nxlaj3dj9r] {
        margin-bottom: 0.1rem;
    }
    
    .grid-value[b-nxlaj3dj9r] {
        padding-left: 0.5rem;
        border-left: 2px solid var(--primary-color);
        word-break: break-word;
        min-width: 0;
    }
    
    .grid-full-width[b-nxlaj3dj9r] {
        grid-column: 1 / -1;
    }
    
    .input-grid[b-nxlaj3dj9r] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/V2/Transport/Booking/BookTruck_New/Components/ShipmentSummaryCard_Truck.razor.rz.scp.css */
/* Shipment Summary Card Compact Styles */
.shipment-grid[b-a1wzu5tx1i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.grid-label[b-a1wzu5tx1i] {
    font-weight: 600;
    color: #495057;
}

.grid-value[b-a1wzu5tx1i] {
    font-weight: 500;
}

.input-grid[b-a1wzu5tx1i] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.input-grid-item.full-width[b-a1wzu5tx1i] {
    grid-column: 1 / -1;
}

.input-grid-item.horizontal[b-a1wzu5tx1i] {
    grid-column: 1 / -1;
}

.table th[b-a1wzu5tx1i] {
    font-weight: 600;
    vertical-align: middle;
}

.table td[b-a1wzu5tx1i] {
    vertical-align: middle;
}

/* 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;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.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;
    }
}

/* Grid Layout Styles */
.shipment-grid[b-a1wzu5tx1i] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 1rem 1rem;
    align-items: center;
}

.grid-label[b-a1wzu5tx1i] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

.grid-value[b-a1wzu5tx1i] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #212529;
}

.grid-full-width[b-a1wzu5tx1i] {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

.grid-full-width .grid-label[b-a1wzu5tx1i] {
    display: block;
    margin-bottom: 0.25rem;
}

/* Input Grid Styles */
.input-grid[b-a1wzu5tx1i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #dee2e6;
}

.input-grid-item[b-a1wzu5tx1i] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent overflow in grid items */
}

.input-grid-item.full-width[b-a1wzu5tx1i] {
    grid-column: 1 / -1;
}

.input-grid-item .grid-label[b-a1wzu5tx1i] {
    margin-bottom: 0.25rem;
}

/* Horizontal Input Grid Item */
.input-grid-item.horizontal[b-a1wzu5tx1i] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.input-grid-item.horizontal .grid-label[b-a1wzu5tx1i] {
    margin-bottom: 0;
    white-space: nowrap;
    min-width: fit-content;
}

.input-grid-item.horizontal .grid-value[b-a1wzu5tx1i] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adjust inner components for grid */
.input-grid-item .form-control[b-a1wzu5tx1i],
.input-grid-item .form-select[b-a1wzu5tx1i] {
    width: 100%;
}
.card[b-a1wzu5tx1i] {
    border-radius: 8px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
    .card[b-a1wzu5tx1i] {
        margin-bottom: 1rem !important;
    }
    
    .card-header[b-a1wzu5tx1i] {
        display: none !important;
    }
    
    .card-body[b-a1wzu5tx1i] {
        padding: 1rem !important;
    }
    
    .shipment-grid[b-a1wzu5tx1i] {
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1rem;
    }

    .grid-value[b-a1wzu5tx1i] {
        word-break: break-word;
        min-width: 0;
    }
    
    .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;
    }
}

/* Mobile Responsive for Input Grid */
@media (max-width: 768px) {
    .input-grid[b-a1wzu5tx1i] {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive for Horizontal Items */
@media (max-width: 768px) {
    .input-grid-item.horizontal[b-a1wzu5tx1i] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .input-grid-item.horizontal .grid-label[b-a1wzu5tx1i] {
        margin-bottom: 0.25rem;
    }
}
/* /Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/CreateScheduleModal.razor.rz.scp.css */
.modal-container[b-ds0inv6ajm] {
	max-width: 1000px;
	padding: 10px;
}

.form-grid[b-ds0inv6ajm] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

/* Mỗi hàng — stretch để 2 cột luôn bằng chiều cao nhau */
.form-row[b-ds0inv6ajm] {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

/* Mỗi field — label trên, control ngay dưới, space thừa dồn xuống đáy */
.form-field[b-ds0inv6ajm] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 4px;
}

/* Chuẩn hoá label Radzen — xoá margin mặc định làm lệch khoảng cách */
.form-field[b-ds0inv6ajm]  label {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	display: block;
}

/* Chuẩn hoá chiều cao control đơn (dropdown, datepicker, numeric) */
.form-field[b-ds0inv6ajm]  .rz-dropdown,
.form-field[b-ds0inv6ajm]  .rz-dropdowndatagrid,
.form-field[b-ds0inv6ajm]  .rz-numeric,
.form-field[b-ds0inv6ajm]  .rz-datepicker {
	margin: 0;
}

/* Footer button layout */
.modal-footer[b-ds0inv6ajm] {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #dee2e6;
}

.footer-buttons[b-ds0inv6ajm] {
	gap: 10px;
	display: flex;
	justify-content: flex-end;
}

.btn-primary[b-ds0inv6ajm] {
	justify-content: center;
	margin-left: 0px;
}
.btn[b-ds0inv6ajm] {
	height: 35px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
}

/* ——— Group Schedule Styles ——— */
.source-type-section[b-ds0inv6ajm] {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.source-type-row[b-ds0inv6ajm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.source-type-label[b-ds0inv6ajm] {
    font-size: 11px;
    white-space: nowrap;
}

.ship-plan-selector[b-ds0inv6ajm] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.group-schedule-section[b-ds0inv6ajm] {
    margin-bottom: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.group-schedule-header[b-ds0inv6ajm] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f0f4ff;
    border-bottom: 1px solid #dee2e6;
}

.group-schedule-list[b-ds0inv6ajm] {
    padding: 0;
}

.group-schedule-item[b-ds0inv6ajm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.group-schedule-item:last-child[b-ds0inv6ajm] {
    border-bottom: none;
}

.group-schedule-item:hover[b-ds0inv6ajm] {
    background: #f8f9fa;
}

.group-schedule-item input[type="checkbox"][b-ds0inv6ajm] {
    flex-shrink: 0;
    cursor: pointer;
}

.ds-code[b-ds0inv6ajm] {
    font-weight: 600;
    color: #0d6efd;
    min-width: 80px;
}

.ds-date[b-ds0inv6ajm] {
    color: #495057;
    min-width: 110px;
}

.ds-qty[b-ds0inv6ajm] {
    color: #198754;
    font-weight: 600;
    min-width: 60px;
}

.ds-location[b-ds0inv6ajm] {
    color: #6c757d;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-schedules[b-ds0inv6ajm] {
    padding: 16px;
    text-align: center;
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

/* ——— Schedule Group Table ——— */
.group-table-wrapper[b-ds0inv6ajm] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 260px;
}

.schedule-group-table[b-ds0inv6ajm] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    white-space: nowrap;
}

/* Sticky header — dùng border-collapse: separate để sticky hoạt động đúng */
.schedule-group-table th[b-ds0inv6ajm] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 8px;
    background: #f0f4ff;
    font-weight: 600;
    color: #495057;
    text-align: left;
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #c5cfe8;
    border-right: 1px solid #dee2e6;
}

.schedule-group-table th:first-child[b-ds0inv6ajm] {
    border-left: 1px solid #dee2e6;
}

.schedule-group-table td[b-ds0inv6ajm] {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-group-table tbody tr[b-ds0inv6ajm] {
    cursor: pointer;
}

.schedule-group-table tbody tr:hover[b-ds0inv6ajm] {
    background: #f8f9fa;
}

.schedule-group-table tbody tr.row-selected[b-ds0inv6ajm] {
    background: #e8f0fe;
}

/* Checkbox chọn tất cả trong header */
.th-select-all[b-ds0inv6ajm] {
    width: 30px;
    text-align: center;
    cursor: pointer;
}

/* Hide legacy flex-based items */
.group-schedule-item[b-ds0inv6ajm] {
    display: none;
}

/* ——— Filter row in thead ——— */
.schedule-group-table .grp-filter-row th[b-ds0inv6ajm] {
    background: #e8edf8;
    padding: 3px 4px;
    border-bottom: 1px solid #c5cfe8;
    position: sticky;
    top: 29px; /* height of the header row above */
    z-index: 2;
}

.grp-filter[b-ds0inv6ajm] {
    width: 100%;
    border: 1px solid #c9d3e8;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 11px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

.grp-filter:focus[b-ds0inv6ajm] {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 2px rgba(13,110,253,.15);
}
/* /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-6:first-child[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-6:last-child[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;
    }
}
/* /Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalDataGrid_Barger.razor.rz.scp.css */
body[b-lrt1p3u401] {
}

.booking-card[b-lrt1p3u401] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.booking-header[b-lrt1p3u401] {
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.fleet-selection[b-lrt1p3u401] {
    flex: 1;
    min-width: 250px;
}

.booking-status-container[b-lrt1p3u401] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.booking-inputs[b-lrt1p3u401] {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.input-item[b-lrt1p3u401] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.booking-products[b-lrt1p3u401] {
    padding: 1rem;
    background-color: #fff;
}

.booking-footer[b-lrt1p3u401] {
    padding: 0.5rem 1rem 1rem 1rem;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
}

/* Status Badge Styles */
.status-badge[b-lrt1p3u401] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

    .status-badge.bg-secondary[b-lrt1p3u401] {
        background-color: #6c757d !important;
        color: white;
    }

    .status-badge.bg-success[b-lrt1p3u401] {
        background-color: #198754 !important;
        color: white;
    }

    .status-badge.bg-danger[b-lrt1p3u401] {
        background-color: #dc3545 !important;
        color: white;
    }

.cancel-note[b-lrt1p3u401] {
    font-size: 0.85rem;
    color: #dc3545;
    background-color: #fff5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #ffc9c9;
    max-width: 300px;
}

.switch-150[b-lrt1p3u401] {
    width: 150px;
}

.canceled-card[b-lrt1p3u401] {
    opacity: 0.8;
    background-color: #f8f9fa;
}

    .canceled-card .booking-header[b-lrt1p3u401] {
        background-color: #e9ecef;
    }
/* /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;
    }
}

.booking-card[b-x8j8rzca7b] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.booking-header[b-x8j8rzca7b] {
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.fleet-selection[b-x8j8rzca7b] {
    flex: 1;
    min-width: 250px;
}

.booking-status-container[b-x8j8rzca7b] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.booking-inputs[b-x8j8rzca7b] {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.input-item[b-x8j8rzca7b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.booking-products[b-x8j8rzca7b] {
    padding: 1rem;
    background-color: #fff;
}

.booking-footer[b-x8j8rzca7b] {
    padding: 0.5rem 1rem 1rem 1rem;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
}

/* Status Badge Styles */
.status-badge[b-x8j8rzca7b] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.status-badge.bg-secondary[b-x8j8rzca7b] { background-color: #6c757d !important; color: white; }
.status-badge.bg-success[b-x8j8rzca7b] { background-color: #198754 !important; color: white; }
.status-badge.bg-danger[b-x8j8rzca7b] { background-color: #dc3545 !important; color: white; }

.cancel-note[b-x8j8rzca7b] {
    font-size: 0.85rem;
    color: #dc3545;
    background-color: #fff5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #ffc9c9;
    max-width: 300px;
}

.switch-150[b-x8j8rzca7b] {
    width: 150px;
}

.canceled-card[b-x8j8rzca7b] {
    opacity: 0.8;
    background-color: #f8f9fa;
}

.canceled-card .booking-header[b-x8j8rzca7b] {
    background-color: #e9ecef;
}
/* /Components/Pages/V2/Transport/Booking/BookTruck_New/Modals/TransportPlanningModalFolder/VehicleRentalDataGrid_Truck.razor.rz.scp.css */
body[b-ym5ex10995] {
}

.booking-card[b-ym5ex10995] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.booking-header[b-ym5ex10995] {
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.fleet-selection[b-ym5ex10995] {
    flex: 1;
    min-width: 250px;
}

.booking-status-container[b-ym5ex10995] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.booking-inputs[b-ym5ex10995] {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.input-item[b-ym5ex10995] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.booking-products[b-ym5ex10995] {
    padding: 1rem;
    background-color: #fff;
}

.booking-footer[b-ym5ex10995] {
    padding: 0.5rem 1rem 1rem 1rem;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
}

/* Status Badge Styles */
.status-badge[b-ym5ex10995] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.status-badge.bg-secondary[b-ym5ex10995] { background-color: #6c757d !important; color: white; }
.status-badge.bg-success[b-ym5ex10995] { background-color: #198754 !important; color: white; }
.status-badge.bg-danger[b-ym5ex10995] { background-color: #dc3545 !important; color: white; }

.cancel-note[b-ym5ex10995] {
    font-size: 0.85rem;
    color: #dc3545;
    background-color: #fff5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #ffc9c9;
    max-width: 300px;
}

.switch-150[b-ym5ex10995] {
    width: 150px;
}

.canceled-card[b-ym5ex10995] {
    opacity: 0.8;
    background-color: #f8f9fa;
}

.canceled-card .booking-header[b-ym5ex10995] {
    background-color: #e9ecef;
}
/* /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;
    }
}
/* /Components/Pages/V2/Transport/Booking/Shared/ScheduleTripsModal.razor.rz.scp.css */
/* Schedule-trips modal header — mirrors the trips group-header in ManageTruckV2 */
.custom-group-header[b-0litsaacz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%);
    box-shadow: 0 1px 4px rgba(202, 60, 25, 0.15);
    border: 1px solid #f3d6c4;
}

.group-header-left[b-0litsaacz4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.group-header-center[b-0litsaacz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: #000;
}

.group-header-right[b-0litsaacz4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.group-schedule-type[b-0litsaacz4] {
    font-size: 11px;
    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;
    white-space: nowrap;
}

.group-schedule-id[b-0litsaacz4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    background: linear-gradient(135deg, #fff 0%, #ffe8e1 100%);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-color, #ca3c19);
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.2);
    white-space: nowrap;
}

.group-divider[b-0litsaacz4] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.group-info-text[b-0litsaacz4] {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
}

.group-info-button[b-0litsaacz4] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border-radius: 50px;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.06), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
}

.group-stat[b-0litsaacz4] {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.group-stat-type[b-0litsaacz4] {
    color: #fff;
    background: linear-gradient(135deg, #ca3c19 0%, #ff6b35 100%);
    border: 1px solid var(--primary-color, #ca3c19);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Mobile (<768px): stack the three header sections vertically */
@media (max-width: 767.98px) {
    .custom-group-header[b-0litsaacz4] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .group-header-left[b-0litsaacz4],
    .group-header-center[b-0litsaacz4],
    .group-header-right[b-0litsaacz4] {
        justify-content: flex-start;
    }

    .group-info-button[b-0litsaacz4] {
        border-radius: 12px;
        padding: 6px 10px;
    }
}

/* Status badges — ported from ManageTruckV2.razor.css so the modal matches the Manage grid.
   Column <Template> spans are authored in this component, so they get its scope attribute. */
.status-badge[b-0litsaacz4] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    display: inline-block;
    font-weight: 600;
}

/* Delivery-status variants (exact colors from ManageTruckV2) */
.status-badge.status-notcheckin[b-0litsaacz4] { background: #fff3cd; color: #856404; }
.status-badge.status-checked[b-0litsaacz4] { background: #d1ecf1; color: #0c5460; }
.status-badge.status-arrivedpickup[b-0litsaacz4] { background: #ffeeba; color: #856404; }
.status-badge.status-pickuped[b-0litsaacz4] { background: #ffe4c4; color: #e67e22; }
.status-badge.status-arriveddelivery[b-0litsaacz4] { background: #b8daff; color: #004085; }
.status-badge.status-delivered[b-0litsaacz4] { background: #d4edda; color: #155724; }
.status-badge.status-cancel[b-0litsaacz4] { background: #f8d7da; color: #721c24; }
.status-badge.status-changeddeliverycompany[b-0litsaacz4] { background: #fff3cd; color: #856404; }
.status-badge.status-waitingreturntowarehouse[b-0litsaacz4] { background: #d1ecf1; color: #0c5460; }
.status-badge.status-returnedtowarehouse[b-0litsaacz4] { background: #d4edda; color: #155724; }
/* Derived/extra tokens (Manage leaves these unstyled — give them sensible colors) */
.status-badge.status-chuyendiem[b-0litsaacz4] { background: #e2d9f3; color: #4b2e83; }
.status-badge.status-trahang[b-0litsaacz4] { background: #fde2cf; color: #8a4b00; }
.status-badge.status-datrahang[b-0litsaacz4] { background: #d4edda; color: #155724; }
.status-badge.status-emptydropoff[b-0litsaacz4] { background: #d4edda; color: #155724; }

/* Register-status (Tình trạng đăng tài) — IsRegisterCp int suffix */
.status-badge.status-0[b-0litsaacz4] { background: #bfbfbf; color: #fff; }
.status-badge.status-1[b-0litsaacz4] { background: #fff3cd; color: #856404; }
.status-badge.status-2[b-0litsaacz4] { background: #d4edda; color: #155724; }
.status-badge.status-3[b-0litsaacz4] { background: #f8d7da; color: #721c24; }

/* Phát Sinh items */
.special-status[b-0litsaacz4] {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

.special-status:empty[b-0litsaacz4] {
    display: none;
}
/* /Components/Pages/V2/Transport/Booking/Shared/VehicleListExportPreviewModal.razor.rz.scp.css */
.vlp-modal-backdrop[b-3lmyp7ax3o] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vlp-modal[b-3lmyp7ax3o] {
    background: #fff;
    border-radius: 8px;
    width: 1150px;
    max-width: 95vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.vlp-modal-header[b-3lmyp7ax3o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 15px;
}

.vlp-modal-close[b-3lmyp7ax3o] {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.vlp-modal-close:hover[b-3lmyp7ax3o] {
    color: #111827;
}

.vlp-modal-body[b-3lmyp7ax3o] {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}

.vlp-loading[b-3lmyp7ax3o] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 14px;
}

.vlp-preview-table[b-3lmyp7ax3o] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.vlp-preview-table th[b-3lmyp7ax3o],
.vlp-preview-table td[b-3lmyp7ax3o] {
    border: 1px solid #d1d5db;
    border-top: none;
    border-left: none;
    padding: 6px 10px;
    white-space: nowrap;
}

.vlp-preview-table th:first-child[b-3lmyp7ax3o],
.vlp-preview-table td:first-child[b-3lmyp7ax3o] {
    border-left: 1px solid #d1d5db;
}

.vlp-preview-table thead th[b-3lmyp7ax3o] {
    position: sticky;
    top: 0;
    background: #f3f4f6;
    border-top: 1px solid #d1d5db;
    z-index: 10;
    font-weight: 600;
}

.vlp-preview-table tbody td[b-3lmyp7ax3o] {
    position: relative;
    z-index: 0;
}

.vlp-preview-table tbody tr:hover[b-3lmyp7ax3o] {
    background: #f9fafb;
}

.vlp-num[b-3lmyp7ax3o] {
    text-align: right;
}

.vlp-modal-footer[b-3lmyp7ax3o] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
}

.vlp-row-count[b-3lmyp7ax3o] {
    margin-right: auto;
    font-size: 13px;
    color: #374151;
}
/* /Components/Pages/V2/Transport/Manage/Components/BulkChangeLocationModal.razor.rz.scp.css */
/* ========================================
   GLOBAL & DIALOG STYLES
   ======================================== */
[b-duwifuz8ln] .bulk-change-location-modal .e-dlg-content,
[b-duwifuz8ln] .change-location-modal .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
}

.bulk-change-container[b-duwifuz8ln],
.change-location-container[b-duwifuz8ln] {
    background: #fff;
    font-size: 12px;
    font-family: -apple-system, BlinkMacOSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ========================================
   TYPE SWITCH & HEADER
   ======================================== */
.modal-header-content[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.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, #ca3c19 0%, #d96b47 100%);
        color: #fff;
        font-weight: 600;
    }

    .switch-option:not(.active):hover[b-duwifuz8ln] {
        background: #f8f9fa;
        color: #495057;
    }

.switch-badge[b-duwifuz8ln] {
    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-duwifuz8ln] {
    background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   SUMMARY & TRIPS LIST
   ======================================== */
.summary-section[b-duwifuz8ln] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.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: #ca3c19;
        font-size: 14px;
    }

.trip-code[b-duwifuz8ln] {
    font-weight: 600;
    color: #495057;
}

.trip-schedule[b-duwifuz8ln],
.trip-company[b-duwifuz8ln] {
    color: #6c757d;
    font-size: 11px;
}

.trip-item.load-more[b-duwifuz8ln] {
    background: #ca3c19;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    justify-content: center;
    transition: all 0.2s;
}

    .trip-item.load-more:hover[b-duwifuz8ln] {
        background: #d96b47;
        transform: translateY(-1px);
    }

/* ========================================
   FORM & GROUP CARD
   ======================================== */
.form-section[b-duwifuz8ln] {
    padding: 16px;
}

.schedule-group-card[b-duwifuz8ln] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.group-header[b-duwifuz8ln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

    .group-header .badge[b-duwifuz8ln] {
        background: #ca3c19;
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
    }

.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: #ca3c19;
        font-size: 14px;
    }

.record-badge[b-duwifuz8ln] {
    margin-left: auto;
    background: #ca3c19;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Fields */
.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;
}

.field-textarea[b-duwifuz8ln] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    min-height: 80px;
}

    .field-textarea:focus[b-duwifuz8ln] {
        outline: none;
        border-color: #ca3c19;
        box-shadow: 0 0 0 2px rgba(202, 60, 25, 0.1);
    }

.field-hint[b-duwifuz8ln] {
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}

/* ========================================
   CHECKBOX ENHANCED
   ======================================== */
.checkbox-container[b-duwifuz8ln] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 14px;
    transition: all 0.3s ease;
}

    .checkbox-container:not(.disabled)[b-duwifuz8ln] {
        border-color: #28a745;
        background: #f0f9f4;
    }

.checkbox-label-enhanced[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

    .checkbox-label-enhanced input[type="checkbox"][b-duwifuz8ln] {
        width: 18px;
        height: 18px;
        accent-color: #ca3c19;
    }

.checkbox-text[b-duwifuz8ln] {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    flex: 1;
}

    .checkbox-text i[b-duwifuz8ln] {
        color: #ca3c19;
        font-size: 14px;
    }

/* ========================================
   BUTTONS
   ======================================== */
.btn-add[b-duwifuz8ln],
.btn-save-update[b-duwifuz8ln] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ca3c19 0%, #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-duwifuz8ln],
    .btn-save-update:hover[b-duwifuz8ln] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(202, 60, 25, 0.3);
    }

.btn-update-notdelivery[b-duwifuz8ln] {
    padding: 6px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.btn-delete-row[b-duwifuz8ln] {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.btn-cancel-row[b-duwifuz8ln] {
    background: #ffc107;
    color: #000;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
}

/* ========================================
   HISTORY & TABLE (nếu có trong bulk sau này)
   ======================================== */
.table-container[b-duwifuz8ln] {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.history-table[b-duwifuz8ln] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .history-table th[b-duwifuz8ln] {
        padding: 10px;
        background: #f8f9fa;
        font-weight: 600;
        text-align: left;
    }

    .history-table td[b-duwifuz8ln] {
        padding: 10px;
        border-bottom: 1px solid #e9ecef;
    }

/* ========================================
   STATUS & BADGES
   ======================================== */
.status-badge[b-duwifuz8ln] {
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.status-latest[b-duwifuz8ln] {
    background: #d4edda;
    color: #155724;
}

.status-old[b-duwifuz8ln] {
    background: #f8f9fa;
    color: #6c757d;
}

.badge-goc[b-duwifuz8ln] {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}

.badge-chuyen-diem[b-duwifuz8ln] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.badge-tra-hang[b-duwifuz8ln] {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: white;
}

/* ========================================
   LOADING / ERROR / EMPTY
   ======================================== */
.loading-state[b-duwifuz8ln], .error-message[b-duwifuz8ln], .empty-message[b-duwifuz8ln] {
    padding: 20px;
    text-align: center;
    border-radius: 6px;
    margin: 16px 0;
}

.loading-state[b-duwifuz8ln] {
    background: #e3f2fd;
    color: #1565c0;
}

.error-message[b-duwifuz8ln] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.empty-message[b-duwifuz8ln] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffb74d;
}

/* ========================================
   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;
    }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .form-fields[b-duwifuz8ln] {
        grid-template-columns: 1fr;
    }

    .trips-summary[b-duwifuz8ln] {
        max-height: 150px;
    }

    .schedule-group-card[b-duwifuz8ln] {
        padding: 12px;
    }

    .btn-add[b-duwifuz8ln], .btn-save-update[b-duwifuz8ln] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-header-content[b-duwifuz8ln] {
        font-size: 13px;
    }

    .field-label[b-duwifuz8ln] {
        font-size: 13px;
    }

    .warning-section[b-duwifuz8ln] {
        flex-direction: column;
        text-align: center;
    }
}
/* /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 — plain stack; ETransUpload supplies the dropzone visual */
.edit-upload-container[b-y0kzsypa6g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ========================================
   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;
    }
}
/* /Components/Pages/V2/Transport/Manage/Components/PhieuCanDownloadModal.razor.rz.scp.css */
.pcd-backdrop[b-mrcimjy5j1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.pcd-modal[b-mrcimjy5j1] {
    background: #fff;
    width: 460px;
    max-width: calc(100vw - 32px);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: pcd-pop-b-mrcimjy5j1 0.15s ease-out;
}

@keyframes pcd-pop-b-mrcimjy5j1 {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.pcd-header[b-mrcimjy5j1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #ca3c19;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.pcd-header i[b-mrcimjy5j1] {
    margin-right: 6px;
}

.pcd-close[b-mrcimjy5j1] {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.pcd-close:hover:not(:disabled)[b-mrcimjy5j1] {
    opacity: 1;
}

.pcd-close:disabled[b-mrcimjy5j1] {
    cursor: not-allowed;
    opacity: 0.4;
}

.pcd-body[b-mrcimjy5j1] {
    padding: 18px;
}

.pcd-count[b-mrcimjy5j1] {
    margin: 0 0 12px;
    font-size: 14px;
    color: #333;
}

.pcd-label[b-mrcimjy5j1] {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.pcd-options[b-mrcimjy5j1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcd-option[b-mrcimjy5j1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.12s ease;
}

.pcd-option:hover[b-mrcimjy5j1] {
    border-color: #ca3c19;
    background: #fff7f4;
}

.pcd-option.active[b-mrcimjy5j1] {
    border-color: #ca3c19;
    background: #fdeee9;
    font-weight: 600;
}

.pcd-option i[b-mrcimjy5j1] {
    color: #ca3c19;
    width: 16px;
    text-align: center;
}

.pcd-option input[b-mrcimjy5j1] {
    accent-color: #ca3c19;
}

.pcd-note[b-mrcimjy5j1] {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: #f6f8fa;
    border-radius: 8px;
    font-size: 12.5px;
    color: #555;
    line-height: 1.5;
}

.pcd-note i[b-mrcimjy5j1] {
    color: #ca3c19;
    margin-right: 4px;
}

.pcd-progress-wrap[b-mrcimjy5j1] {
    padding: 6px 0;
}

.pcd-status[b-mrcimjy5j1] {
    margin: 0 0 12px;
    font-size: 14px;
    color: #333;
    min-height: 20px;
}

.pcd-bar[b-mrcimjy5j1] {
    height: 10px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.pcd-bar-fill[b-mrcimjy5j1] {
    height: 100%;
    background: linear-gradient(90deg, #ca3c19, #e8623f);
    border-radius: 6px;
    transition: width 0.2s ease;
}

.pcd-stats[b-mrcimjy5j1] {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
}

.pcd-stats i[b-mrcimjy5j1] {
    margin-right: 4px;
    color: #888;
}

.pcd-err[b-mrcimjy5j1] {
    color: #d32f2f;
}

.pcd-err i[b-mrcimjy5j1] {
    color: #d32f2f;
}

.pcd-footer[b-mrcimjy5j1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
/* /Components/Pages/V2/Transport/Manage/Components/TransferHistoryViewModal.razor.rz.scp.css */
.transfer-medium-modal[b-02r5wcrh9d] {
        max-width: 900px;
        width: 92vw;
        max-height: 92vh;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .transfer-modal-overlay[b-02r5wcrh9d] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        padding: 20px;
        box-sizing: border-box;
    }

    .transfer-modal-header[b-02r5wcrh9d] {
        padding: 16px 20px;
        background: #0d6efd;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }

    .transfer-modal-title[b-02r5wcrh9d] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .transfer-modal-close[b-02r5wcrh9d] {
        background: none;
        border: none;
        font-size: 24px;
        color: #fff;
        opacity: 0.8;
    }

        .transfer-modal-close:hover[b-02r5wcrh9d] {
            opacity: 1;
        }

    .transfer-modal-body[b-02r5wcrh9d] {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: white;
    }

    .transfer-modal-footer[b-02r5wcrh9d] {
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        text-align: right;
        flex-shrink: 0;
    }

    /* Bảng rõ ràng, chữ đen đậm */
    .transfer-history-grid .rz-cell-data[b-02r5wcrh9d],
    .transfer-history-grid .rz-header-content[b-02r5wcrh9d] {
        text-align: center !important;
        justify-content: center !important;
        font-weight: 600 !important;
        color: #212529 !important;
    }

    .transfer-history-grid .rz-cell-data[b-02r5wcrh9d] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px !important;
        line-height: 1.4;
    }

    .transfer-history-grid .badge[b-02r5wcrh9d] {
        font-size: 12px;
        min-width: 80px;
    }

    .transfer-spinner[b-02r5wcrh9d] {
        border: 4px solid #f0f0f0;
        border-top: 4px solid #0d6efd;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        animation: transfer-spin-b-02r5wcrh9d 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes transfer-spin-b-02r5wcrh9d {
        to

    {
        transform: rotate(360deg);
    }

    }


.optimized-modal[b-02r5wcrh9d] {
    max-width: 1500px;
    width: 95vw;
    max-height: 90vh;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

    .modal-body > .p-3.bg-light.border-bottom[b-02r5wcrh9d] {
        flex-shrink: 0;
    }

.centered-grid[b-02r5wcrh9d] {
    flex: 1;
    height: 100% !important;
    overflow: hidden;
}

    .centered-grid .rz-datatable[b-02r5wcrh9d] {
        height: 100% !important;
    }

    .centered-grid .rz-datatable-data td[b-02r5wcrh9d] {
        overflow: hidden;
    }

    .centered-grid .rz-datatable-scrollable-body[b-02r5wcrh9d] {
        overflow-y: auto !important;
    }

    .centered-grid .rz-cell-data[b-02r5wcrh9d] {
        text-align: center !important;
        justify-content: center !important;
        font-size: 13px;
    }

.modal-footer[b-02r5wcrh9d] {
    flex-shrink: 0;
}

.btn-close-white[b-02r5wcrh9d] {
    font-size: 1.8rem;
    font-weight: 300;
    color: white;
    opacity: 0.9;
    background: none;
    border: none;
    line-height: 1;
}

    .btn-close-white:hover[b-02r5wcrh9d] {
        opacity: 1;
        color: #fff;
    }

/* Container cho grid có chiều cao cố định và cuộn nội bộ */
.grid-container[b-02r5wcrh9d] {
    height: 500px; /* Có thể điều chỉnh độ cao tùy ý, ví dụ 500px hoặc 60vh */
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Đảm bảo RadzenDataGrid chiếm toàn bộ không gian và có cuộn */
.centered-grid.h-100[b-02r5wcrh9d] {
    height: 100% !important;
}

.centered-grid .rz-data-grid-data[b-02r5wcrh9d] {
    overflow-y: auto !important;
    max-height: calc(100% - 50px); /* Trừ đi chiều cao header và pager */
}

.filter-label[b-02r5wcrh9d] {
    font-size: 0.65rem;
    margin-bottom: 2px;
    color: #6c757d;
}
/* /Components/Pages/V2/Transport/Manage/Components/TransferScheduleModal.razor.rz.scp.css */
.transfer-schedule-container[b-4odtdt08c2] {
    background: #fff;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.summary-section[b-4odtdt08c2] {
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.trips-summary[b-4odtdt08c2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.trip-item[b-4odtdt08c2] {
    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-4odtdt08c2] {
        color: #ca3c19;
        font-size: 14px;
    }

.trip-code[b-4odtdt08c2] {
    font-weight: 600;
    color: #495057;
}

.trip-docnum[b-4odtdt08c2],
.trip-schedule[b-4odtdt08c2],
.trip-company[b-4odtdt08c2] {
    color: #6c757d;
    font-size: 11px;
}

.trip-item.load-more[b-4odtdt08c2] {
    background: #ca3c19;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    justify-content: center;
    transition: all 0.2s;
}

    .trip-item.load-more:hover[b-4odtdt08c2] {
        background: #d96b47;
        transform: translateY(-1px);
    }

.form-section[b-4odtdt08c2] {
    padding: 16px;
}

.schedule-group-card[b-4odtdt08c2] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.group-header[b-4odtdt08c2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

    .group-header .badge[b-4odtdt08c2] {
        background: #ca3c19;
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
    }

.section-header[b-4odtdt08c2] {
    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-4odtdt08c2] {
        color: #ca3c19;
        font-size: 14px;
    }

.record-badge[b-4odtdt08c2] {
    margin-left: auto;
    background: #ca3c19;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.field-group[b-4odtdt08c2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field-group + .field-group[b-4odtdt08c2] {
        margin-top: 14px;
    }

.field-label[b-4odtdt08c2] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.required[b-4odtdt08c2] {
    color: #dc3545;
    margin-left: 2px;
}

.field-textarea[b-4odtdt08c2] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    min-height: 70px;
}

    .field-textarea:focus[b-4odtdt08c2] {
        outline: none;
        border-color: #ca3c19;
        box-shadow: 0 0 0 2px rgba(202, 60, 25, 0.1);
    }

.field-hint[b-4odtdt08c2] {
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}

.loading-state[b-4odtdt08c2], .error-message[b-4odtdt08c2], .empty-message[b-4odtdt08c2] {
    padding: 20px;
    text-align: center;
    border-radius: 6px;
    margin: 16px 0;
}

.loading-state[b-4odtdt08c2] {
    background: #e3f2fd;
    color: #1565c0;
}

.error-message[b-4odtdt08c2] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.empty-message[b-4odtdt08c2] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffb74d;
}

.alert-text[b-4odtdt08c2] {
    white-space: pre-line;
    margin: 0;
    padding: 16px;
    font-size: 12px;
    color: #495057;
}

@media (max-width: 768px) {
    .trips-summary[b-4odtdt08c2] {
        max-height: 150px;
    }

}

.tsm-modal-backdrop[b-4odtdt08c2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.tsm-modal[b-4odtdt08c2] {
    background: #fff;
    width: min(620px, 95vw);
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tsm-modal-alert[b-4odtdt08c2] {
    width: min(460px, 92vw);
    z-index: 1080;
}

.tsm-modal-header[b-4odtdt08c2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    gap: 8px;
}

    .tsm-modal-header > span[b-4odtdt08c2] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .tsm-modal-header i[b-4odtdt08c2] {
        color: #ca3c19;
    }

.tsm-modal-close[b-4odtdt08c2] {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #6c757d;
}

.tsm-modal-body[b-4odtdt08c2] {
    overflow-y: auto;
    flex: 1;
}

.tsm-modal-footer[b-4odtdt08c2] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.company-filter-options[b-4odtdt08c2] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.company-filter-option[b-4odtdt08c2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    margin: 0;
}

    .company-filter-option input[type="radio"][b-4odtdt08c2] {
        margin: 0;
        cursor: pointer;
    }
/* /Components/Pages/V2/Transport/Manage/Components/TripDetailModal.razor.rz.scp.css */
/* Bootstrap Modal Backdrop */
.trip-detail-modal.modal[b-sfjbrdovv1] {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.trip-detail-modal .modal-content[b-sfjbrdovv1] {
    display: flex;
    flex-direction: column;
}

.trip-detail-modal .modal-body[b-sfjbrdovv1] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.trip-detail-modal .modal-footer[b-sfjbrdovv1] {
    border-top: 1px solid #dee2e6;
    padding: 12px 16px;
}

/* 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-emptydropoff[b-sfjbrdovv1] { color: #155724; }
    .status-pill.badge-changeddeliverycompany[b-sfjbrdovv1] { color: #856404; }
    .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(3, 1fr);
        gap: 8px;
        padding: 12px 16px;
        background: #fafbfc;
        border-bottom: 1px solid #e9ecef;
    }

    /* Full-width items */
    .export-command-section[b-sfjbrdovv1] {
        grid-column: 1 / -1 !important;
    }

    .container-info[b-sfjbrdovv1] {
        grid-column: 1 / -1;
    }

    .info-item[b-sfjbrdovv1] {
        display: flex;
        align-items: flex-start;
        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;
        word-break: break-word;
    }

    .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 + Nơi hạ rỗng cùng hàng */
    .container-emptydrop-row[b-sfjbrdovv1] {
        grid-column: span 3;
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
    }

    .info-item.container-info[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex: 0 1 auto;
    }

    .info-item.container-info .value[b-sfjbrdovv1] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        flex: 0 1 auto;
    }

    .info-item.empty-drop-info[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex: 0 1 auto;
    }

    .info-item.empty-drop-info .value[b-sfjbrdovv1] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        flex: 0 1 auto;
    }

    .info-item.bag-quantity-info[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .info-item.bag-quantity-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;
    }

    /* Barge Kiểm Tra Action */
    .barge-check-action[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #fff8f0;
        border-bottom: 1px solid #e9ecef;
    }

    .barge-check-action.checked[b-sfjbrdovv1] {
        background: #f0faf0;
        color: #155724;
        font-size: 11px;
        font-weight: 600;
    }

    .barge-check-action.checked i[b-sfjbrdovv1] {
        color: #155724;
        font-size: 12px;
    }

    .barge-check-time[b-sfjbrdovv1] {
        margin-left: auto;
        font-size: 10px;
        color: #6c757d;
        font-weight: 500;
    }

    .barge-check-btn[b-sfjbrdovv1] {
        padding: 6px 14px;
        background: rgba(202, 60, 25, 0.1);
        color: var(--primary-color, #ca3c19);
        border: 1px solid rgba(202, 60, 25, 0.3);
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .barge-check-btn:hover[b-sfjbrdovv1] {
        background: rgba(202, 60, 25, 0.18);
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(202, 60, 25, 0.2);
    }

    .barge-check-btn i[b-sfjbrdovv1] {
        font-size: 11px;
    }

    /* Timeline Section */
    .timeline-section[b-sfjbrdovv1] {
        padding: 14px 16px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .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;
    }

    .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);
    }

    /* Generic active stage fallback — must come BEFORE specific stage rules */
    .timeline-stage.active .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        color: #fff;
        box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3);
    }

    /* 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-road-transport.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.stage-emptydropoff.active .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        color: #fff;
        box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3);
    }

    .stage-label[b-sfjbrdovv1] {
        font-size: 10px;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 3px;
    }

    /* Generic active label fallback — must come BEFORE specific stage rules */
    .timeline-stage.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .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-road-transport.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .timeline-stage.stage-changed.active .stage-label[b-sfjbrdovv1] {
        color: #856404;
	}
    .timeline-stage.stage-emptydropoff.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .timeline-stage.stage-emptydropoff .stage-sublabel[b-sfjbrdovv1] {
        font-size: 10px;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px;
        margin-top: 2px;
    }

    /* 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;
    }

    /* Barge inline confirm button inside Kiểm Tra stage */
    .barge-check-btn-inline[b-sfjbrdovv1] {
        margin-top: 4px;
        padding: 3px 8px;
        background: rgba(202, 60, 25, 0.1);
        color: var(--primary-color, #ca3c19);
        border: 1px solid rgba(202, 60, 25, 0.3);
        border-radius: 4px;
        font-size: 9px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .barge-check-btn-inline:hover[b-sfjbrdovv1] {
        background: rgba(202, 60, 25, 0.2);
        border-color: var(--primary-color, #ca3c19);
        transform: translateY(-1px);
    }

    .barge-check-btn-inline i[b-sfjbrdovv1] {
        font-size: 9px;
    }

    /* 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;
    }

    /* Multiple Order Delivery Point Stages */
    .timeline-stage.stage-delivery[b-sfjbrdovv1] {
        min-width: 100px;
        max-width: 120px;
    }

    .timeline-stage.stage-delivery .stage-sublabel[b-sfjbrdovv1] {
        font-size: 10px;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
        margin-top: 2px;
    }

    .timeline-stage.stage-delivery.active .stage-icon[b-sfjbrdovv1] {
        background: #155724;
        color: #fff;
        box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3);
    }

    .timeline-stage.stage-delivery.active .stage-label[b-sfjbrdovv1] {
        color: #155724;
    }

    .timeline-stage.stage-delivery.inactive .stage-icon[b-sfjbrdovv1] {
        background: #e9ecef;
        color: #6c757d;
    }

    .timeline-stage.stage-delivery.inactive .stage-label[b-sfjbrdovv1] {
        color: #6c757d;
    }

    .timeline-stage.stage-delivery.not-delivery .stage-icon[b-sfjbrdovv1] {
        background: #dc3545 !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }

    .timeline-stage.stage-delivery.not-delivery .stage-label[b-sfjbrdovv1] {
        color: #dc3545;
        text-decoration: line-through;
    }

    .timeline-stage.stage-delivery.not-delivery .stage-sublabel[b-sfjbrdovv1] {
        color: #dc3545;
        text-decoration: line-through;
    }

    .timeline-stage.stage-delivery .stage-complete-badge[b-sfjbrdovv1] {
        font-size: 9px;
        color: #155724;
        background: rgba(21, 87, 36, 0.1);
        padding: 2px 6px;
        border-radius: 10px;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    .timeline-stage.stage-delivery .stage-complete-badge i[b-sfjbrdovv1] {
        font-size: 8px;
    }

    .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 — informational, doesn't take equal flex space */
    .stage-driver-arrived[b-sfjbrdovv1] {
        cursor: default !important;
        flex: 0 0 auto;
        min-width: 70px;
        max-width: 100px;
    }

        .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:disabled[b-sfjbrdovv1] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

    .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;
    }

    .wh-breakdown[b-sfjbrdovv1] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 6px;
    }

    .wh-breakdown-item[b-sfjbrdovv1] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        background: rgba(202, 60, 25, 0.08);
        color: #495057;
        border: 1px solid rgba(202, 60, 25, 0.2);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

    .wh-breakdown-item i[b-sfjbrdovv1] {
        color: var(--primary-color, #ca3c19);
        font-size: 9px;
    }

    .wh-breakdown-card[b-sfjbrdovv1] {
        padding-top: 6px;
        border-top: 1px dashed #e9ecef;
    }

    .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-trip-status[b-sfjbrdovv1] {
        min-width: 120px;
        width: 120px;
    }

    .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;
    }

    .replacement-table .td-trip-status[b-sfjbrdovv1],
    .replacement-table .td-trip-status .status-pill[b-sfjbrdovv1] {
        white-space: nowrap;
    }

    .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: 420px;
        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-by-text[b-sfjbrdovv1] {
        font-size: 9px;
        color: #fff;
        margin-left: 6px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .cancel-by-text i[b-sfjbrdovv1] {
        font-size: 9px;
    }

    .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;
    }

    .hrow[b-sfjbrdovv1] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hrow .unit[b-sfjbrdovv1] {
        font-size: 11px;
        color: #6c757d;
    }

    .hrow .unit-label[b-sfjbrdovv1] {
        display: inline-block;
        flex: 1;
        min-width: 0;
        font-size: 12px;
        color: #495057;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rme-hrow-del[b-sfjbrdovv1] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 1px solid #e9ecef;
        border-radius: 50%;
        background: #fff;
        color: #6c757d;
        font-size: 10px;
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s;
    }

    .rme-hrow-del:hover[b-sfjbrdovv1] {
        background: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

    .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);
        }

        .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],
.btn-multiple-order[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],
.btn-multiple-order:hover[b-sfjbrdovv1] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.multiple-order-badge[b-sfjbrdovv1] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-primary);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 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: repeat(2, 1fr) !important;
        gap: 8px;
        padding: 12px;
        background: #f8f9fa;
    }

    .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(3, 1fr) !important;
        gap: 10px;
    }

    .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(3, 1fr) !important;
        gap: 12px;
    }

    .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(3, 1fr) !important;
        gap: 16px;
        padding: 16px;
    }

    .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;
    }
}

.kcs-badge-yes[b-sfjbrdovv1] {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}

/* Fumigation "Không" badge (#13) */
.kcs-badge-no[b-sfjbrdovv1] {
    background: #f5f5f5;
    color: #666;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #e0e0e0;
}

/* ===== KCS Timeline Section ===== */
.kcs-timeline-section[b-sfjbrdovv1] {
    margin: 8px 0;
    padding: 12px 16px;
    background: #fdf6f3;
    border-left: 3px solid #ca3c19;
}

.kcs-timeline-header[b-sfjbrdovv1] {
    font-size: 13px;
    font-weight: 700;
    color: #ca3c19;
    margin-bottom: 10px;
}

.kcs-timeline-header i[b-sfjbrdovv1] {
    margin-right: 6px;
}

.kcs-timeline-track[b-sfjbrdovv1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding: 0 8px;
    overflow-x: auto;
}

/* Consistent with Trip Status: ::after = gray background, ::before = progress */
.kcs-timeline-track[b-sfjbrdovv1]::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #e0e0e0;
    z-index: 0;
}

.kcs-timeline-track[b-sfjbrdovv1]::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 8px;
    height: 3px;
    width: var(--kcs-progress, 0%);
    background: #ca3c19;
    z-index: 1;
    transition: width 0.3s ease;
}

.kcs-stage[b-sfjbrdovv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    min-width: 90px;
    flex: 1;
}

.kcs-stage-icon[b-sfjbrdovv1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 6px;
    transition: all 0.2s;
}

/* KCS timeline — read-only */
.kcs-stage[b-sfjbrdovv1] {
    cursor: default;
}

.kcs-stage.active .kcs-stage-icon[b-sfjbrdovv1] {
    background: #ca3c19;
    color: #fff;
    box-shadow: 0 2px 6px rgba(202, 60, 25, 0.3);
}

.kcs-stage.inactive .kcs-stage-icon[b-sfjbrdovv1] {
    background: #f0f0f0;
    color: #bbb;
    border: 2px solid #ddd;
}

.kcs-stage-label[b-sfjbrdovv1] {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #555;
    line-height: 1.3;
}

.kcs-stage.inactive .kcs-stage-label[b-sfjbrdovv1] {
    color: #bbb;
}

.kcs-stage-time[b-sfjbrdovv1] {
    font-size: 10px;
    color: #ca3c19;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .kcs-timeline-track[b-sfjbrdovv1] {
        min-width: 400px;
    }

    .kcs-timeline-section[b-sfjbrdovv1] {
        overflow-x: auto;
    }
}

/* ===== File Preview (non-image) ===== */
.file-card-preview[b-sfjbrdovv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    min-height: 120px;
    gap: 8px;
}

.file-card-preview .file-icon[b-sfjbrdovv1] {
    font-size: 32px;
    color: #6c757d;
}

.file-card-preview .file-icon.fa-file-pdf[b-sfjbrdovv1] {
    color: #dc3545;
}

.file-card-preview .file-icon.fa-file-word[b-sfjbrdovv1] {
    color: #2b579a;
}

.file-card-preview .file-icon.fa-file-excel[b-sfjbrdovv1] {
    color: #217346;
}

.file-card-preview .file-name[b-sfjbrdovv1] {
    font-size: 11px;
    color: #495057;
    text-align: center;
    word-break: break-all;
    max-width: 140px;
}

.btn-download-file[b-sfjbrdovv1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #155724;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download-file:hover[b-sfjbrdovv1] {
    background: #1a7a32;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(21, 87, 36, 0.3);
}

.btn-view-file[b-sfjbrdovv1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #0c5460;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-file:hover[b-sfjbrdovv1] {
    background: #117a8b;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(12, 84, 96, 0.3);
}

/* ===== Road Transport Section ===== */
.road-transport-section[b-sfjbrdovv1] {
    margin: 8px 0;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.road-transport-section .section-header[b-sfjbrdovv1] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.road-transport-section .section-header > i[b-sfjbrdovv1] {
    color: #ca3c19;
}

.road-transport-section .section-header .btn-edit-inline[b-sfjbrdovv1] {
    margin-left: auto;
}

.road-transport-table-wrapper[b-sfjbrdovv1] {
    overflow-x: auto;
}

.road-transport-table[b-sfjbrdovv1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.road-transport-table thead th[b-sfjbrdovv1] {
    background: #f5f7fa;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.road-transport-table tbody td[b-sfjbrdovv1] {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}

.road-transport-table tbody td.nowrap[b-sfjbrdovv1] {
    white-space: nowrap;
}

.road-transport-table tbody tr:hover[b-sfjbrdovv1] {
    background: #f9f9f9;
}

/* Road transport row striping (#24) */
.road-transport-table tbody tr:nth-child(even)[b-sfjbrdovv1] {
    background: #fafbfc;
}

.road-transport-table tbody tr:nth-child(even):hover[b-sfjbrdovv1] {
    background: #f5f5f5;
}

/* Road transport "Số lượng" alignment (#14) */
.road-transport-table thead th.text-right[b-sfjbrdovv1] {
    text-align: right;
}

.text-right[b-sfjbrdovv1] {
    text-align: right;
}

.no-data-text[b-sfjbrdovv1] {
    text-align: center;
    color: #999;
    padding: 16px;
    font-size: 13px;
    font-style: italic;
}

/* Road transport dialog extracted styles */
.dialog-header-flex[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-required[b-sfjbrdovv1] {
    color: #dc3545;
}

.upload-loading[b-sfjbrdovv1] {
    margin-top: 8px;
    color: #1a73e8;
}

.image-preview-clickable[b-sfjbrdovv1] {
    cursor: pointer;
    margin-top: 10px;
}

/* Road transport image thumbnails — base styles (BEFORE media query) */
.road-transport-thumb[b-sfjbrdovv1] {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
}

.road-transport-thumb img[b-sfjbrdovv1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.road-transport-thumb .thumb-overlay[b-sfjbrdovv1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.road-transport-thumb .thumb-overlay i[b-sfjbrdovv1] {
    color: #fff;
    font-size: 16px;
}

.road-transport-thumb:hover .thumb-overlay[b-sfjbrdovv1] {
    opacity: 1;
}

.road-transport-img-placeholder[b-sfjbrdovv1] {
    color: #ccc;
    font-size: 13px;
}

/* Road transport mobile responsiveness */
@media (max-width: 768px) {
    .road-transport-section[b-sfjbrdovv1] {
        padding: 8px 12px;
    }

    .road-transport-table[b-sfjbrdovv1] {
        font-size: 12px;
    }

    .road-transport-table thead th[b-sfjbrdovv1],
    .road-transport-table tbody td[b-sfjbrdovv1] {
        padding: 6px 8px;
    }

    .road-transport-section .section-header[b-sfjbrdovv1] {
        font-size: 12px;
    }

    .rt-hide-mobile[b-sfjbrdovv1] {
        display: none;
    }

    .road-transport-thumb[b-sfjbrdovv1] {
        width: 40px;
        height: 40px;
    }

    /* Touch devices: always show overlay on thumbnails */
    .road-transport-thumb .thumb-overlay[b-sfjbrdovv1] {
        opacity: 0.6;
        background: rgba(0, 0, 0, 0.25);
    }

    /* Limit preview image size inside dialog */
    .edit-preview-image[b-sfjbrdovv1] {
        max-width: 100%;
        height: auto;
        max-height: 200px;
    }
}

/* ===== Barge Activity Log ===== */
.barge-activity-log-section[b-sfjbrdovv1] {
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
}

.activity-log-header[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background 0.2s ease;
    border-top: 1px solid #e9ecef;
}

.activity-log-header:hover[b-sfjbrdovv1] {
    background: #f0f1f3;
}

.activity-log-header-left[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
}

.activity-log-header-left i[b-sfjbrdovv1] {
    color: #6c757d;
    font-size: 11px;
}

.activity-log-count[b-sfjbrdovv1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary-color, #ca3c19);
    color: #fff;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 700;
}

.activity-log-chevron[b-sfjbrdovv1] {
    font-size: 10px;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.activity-log-body[b-sfjbrdovv1] {
    padding: 8px 16px;
    max-height: 250px;
    overflow-y: auto;
}

.activity-log-loading[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #6c757d;
    font-size: 11px;
}

.activity-log-entry[b-sfjbrdovv1] {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f1f3;
}

.activity-log-entry:last-child[b-sfjbrdovv1] {
    border-bottom: none;
}

.activity-log-icon[b-sfjbrdovv1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: #f0f1f3;
    border-radius: 50%;
    color: #495057;
    font-size: 10px;
}

.activity-log-content[b-sfjbrdovv1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-log-desc[b-sfjbrdovv1] {
    font-size: 11px;
    font-weight: 600;
    color: #212529;
}

.activity-log-values[b-sfjbrdovv1] {
    font-size: 10px;
    color: #6c757d;
    font-style: italic;
}

.activity-log-meta[b-sfjbrdovv1] {
    font-size: 10px;
    color: #adb5bd;
}

.activity-log-empty[b-sfjbrdovv1] {
    text-align: center;
    padding: 16px;
    color: #adb5bd;
    font-size: 11px;
    font-style: italic;
}

@media (max-width: 768px) {
    .activity-log-header[b-sfjbrdovv1] {
        padding: 6px 12px;
    }

    .activity-log-body[b-sfjbrdovv1] {
        padding: 6px 12px;
        max-height: 200px;
    }

    .activity-log-icon[b-sfjbrdovv1] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 9px;
    }

    .activity-log-entry[b-sfjbrdovv1] {
        gap: 8px;
        padding: 5px 0;
    }

    .activity-log-desc[b-sfjbrdovv1] {
        font-size: 10px;
    }

    .activity-log-values[b-sfjbrdovv1] {
        font-size: 9px;
    }

    .activity-log-meta[b-sfjbrdovv1] {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .activity-log-header[b-sfjbrdovv1] {
        padding: 6px 10px;
    }

    .activity-log-body[b-sfjbrdovv1] {
        padding: 4px 10px;
        max-height: 180px;
    }

    .activity-log-header-left[b-sfjbrdovv1] {
        font-size: 10px;
        gap: 6px;
    }

    .activity-log-desc[b-sfjbrdovv1] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── CP Registration Card ── */
.cp-registration-card[b-sfjbrdovv1] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    font-size: 13px;
}

    /* Barcode box căn giữa */
    .cp-registration-card .barcode-box[b-sfjbrdovv1] {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
    }

    /* Tiêu đề */
    .cp-registration-card .information__title[b-sfjbrdovv1] {
        text-align: center;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 8px;
    }

    /* Mỗi hàng thông tin */
    .cp-registration-card .information__row[b-sfjbrdovv1] {
        display: flex;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px 0;
        gap: 8px;
    }

    .cp-registration-card .information__row--left[b-sfjbrdovv1] {
        font-weight: 600;
        color: #333;
        min-width: 160px;
        flex-shrink: 0;
    }

    .cp-registration-card .information__row--right[b-sfjbrdovv1] {
        color: #555;
        flex: 1;
    }

    /* Mill box bên trong */
    .cp-registration-card .mill-box[b-sfjbrdovv1] {
        width: 100%;
    }

        .cp-registration-card .mill-box .row[b-sfjbrdovv1] {
            display: flex;
            gap: 8px;
            padding: 2px 0;
        }

    /* Ghi chú cuối */
    .cp-registration-card .information__note[b-sfjbrdovv1] {
        text-align: center;
        font-weight: 700;
        font-size: 12px;
        margin-top: 12px;
        padding-top: 8px;
        border-top: 1px solid #ccc;
        color: #333;
    }

.btn-print-cp[b-sfjbrdovv1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

    .btn-print-cp:hover[b-sfjbrdovv1] {
        background-color: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    }

    .btn-print-cp:active[b-sfjbrdovv1] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    }

    .btn-print-cp i[b-sfjbrdovv1] {
        font-size: 13px; 
        transition: transform 0.3s ease;
    }

    .btn-print-cp:hover i[b-sfjbrdovv1] {
        transform: scale(1.15);
    }
/* /Components/Pages/V2/Transport/Manage/Components/TripSelectorModal.razor.rz.scp.css */
/* ========================================
   OVERLAY & MODAL CONTAINER
   ======================================== */
.transfer-modal-overlay[b-wa7zv3bo1g],
.modal-overlay[b-wa7zv3bo1g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    box-sizing: border-box;
}

.transfer-medium-modal[b-wa7zv3bo1g],
.optimized-modal[b-wa7zv3bo1g] {
    max-width: 1500px;
    width: 95vw;
    max-height: 92vh;
    height: 90vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: white;
}

/* ========================================
   HEADER & CLOSE BUTTON
   ======================================== */
.transfer-modal-header[b-wa7zv3bo1g],
.modal-header[b-wa7zv3bo1g] {
    padding: 16px 20px;
    background: #0d6efd;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .transfer-modal-title[b-wa7zv3bo1g],
    .modal-header h5[b-wa7zv3bo1g] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.transfer-modal-close[b-wa7zv3bo1g],
.btn-close-white[b-wa7zv3bo1g] {
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 300;
    color: #fff;
    opacity: 0.9;
    line-height: 1;
    cursor: pointer;
}

    .transfer-modal-close:hover[b-wa7zv3bo1g],
    .btn-close-white:hover[b-wa7zv3bo1g] {
        opacity: 1;
        color: #fff;
    }

/* ========================================
   BODY & LAYOUT
   ======================================== */
.transfer-modal-body[b-wa7zv3bo1g],
.modal-body[b-wa7zv3bo1g] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 16px;
}

    .modal-body > .p-3.bg-light.border-bottom[b-wa7zv3bo1g] {
        flex-shrink: 0;
    }

/* Grid / Table Container */
.grid-container[b-wa7zv3bo1g],
.grid-section[b-wa7zv3bo1g],
.centered-grid[b-wa7zv3bo1g] {
    flex: 1;
    height: 100% !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .centered-grid .rz-datatable[b-wa7zv3bo1g],
    .centered-grid .rz-data-grid[b-wa7zv3bo1g] {
        height: 100% !important;
    }

    .centered-grid .rz-datatable-data td[b-wa7zv3bo1g],
    .centered-grid .rz-cell-data[b-wa7zv3bo1g] {
        text-align: center !important;
        justify-content: center !important;
        font-size: 13px;
        font-weight: 600 !important;
        color: #212529 !important;
        padding: 8px 4px !important;
        line-height: 1.4;
    }

    .centered-grid .rz-datatable-scrollable-body[b-wa7zv3bo1g] {
        overflow-y: auto !important;
    }

/* Bảng rõ ràng, chữ đen đậm */
.transfer-history-grid .rz-cell-data[b-wa7zv3bo1g],
.transfer-history-grid .rz-header-content[b-wa7zv3bo1g] {
    text-align: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    color: #212529 !important;
}

.transfer-history-grid .rz-cell-data[b-wa7zv3bo1g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px !important;
}

.transfer-history-grid .badge[b-wa7zv3bo1g] {
    font-size: 12px;
    min-width: 80px;
}

/* ========================================
   FOOTER
   ======================================== */
.transfer-modal-footer[b-wa7zv3bo1g],
.modal-footer[b-wa7zv3bo1g] {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    text-align: right;
    flex-shrink: 0;
}

/* ========================================
   CHECKBOX ENHANCED (từ modal bulk cũ)
   ======================================== */
.checkbox-container[b-wa7zv3bo1g] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 14px;
    transition: all 0.3s ease;
}

    .checkbox-container:not(.disabled)[b-wa7zv3bo1g] {
        border-color: #28a745;
        background: #f0f9f4;
    }

.checkbox-label-enhanced[b-wa7zv3bo1g] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

    .checkbox-label-enhanced input[type="checkbox"][b-wa7zv3bo1g] {
        width: 18px;
        height: 18px;
        accent-color: #0d6efd;
    }

.checkbox-text[b-wa7zv3bo1g] {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    flex: 1;
}

    .checkbox-text i[b-wa7zv3bo1g] {
        color: #0d6efd;
        font-size: 14px;
    }

/* ========================================
   LOADING & SPINNER
   ======================================== */
.transfer-spinner[b-wa7zv3bo1g],
.loading-state[b-wa7zv3bo1g] {
    border: 4px solid #f0f0f0;
    border-top: 4px solid #0d6efd;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: transfer-spin-b-wa7zv3bo1g 1s linear infinite;
    margin: 20px auto;
}

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

.loading-state[b-wa7zv3bo1g] {
    text-align: center;
    padding: 20px;
    color: #6c757d;
}

    .loading-state i[b-wa7zv3bo1g] {
        font-size: 24px;
        margin-bottom: 8px;
    }

/* ========================================
   WARNING & ERROR
   ======================================== */
.warning-section[b-wa7zv3bo1g] {
    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-wa7zv3bo1g] {
        font-size: 20px;
        color: #ffc107;
    }

    .warning-section strong[b-wa7zv3bo1g] {
        color: #856404;
        font-weight: 700;
    }

/* ========================================
   FIELD & LABEL
   ======================================== */
.field-group[b-wa7zv3bo1g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field-label[b-wa7zv3bo1g],
.form-label[b-wa7zv3bo1g] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.required[b-wa7zv3bo1g],
.text-danger[b-wa7zv3bo1g] {
    color: #dc3545;
    margin-left: 2px;
}

.field-textarea[b-wa7zv3bo1g],
.form-control[b-wa7zv3bo1g] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
}

    .field-textarea:focus[b-wa7zv3bo1g],
    .form-control:focus[b-wa7zv3bo1g] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
    }

.field-hint[b-wa7zv3bo1g] {
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .transfer-medium-modal[b-wa7zv3bo1g],
    .optimized-modal[b-wa7zv3bo1g] {
        width: 96vw;
        height: 94vh;
    }

    .modal-body[b-wa7zv3bo1g] {
        padding: 12px;
    }

    .row.g-3 > div[b-wa7zv3bo1g] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .grid-container[b-wa7zv3bo1g] {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .transfer-modal-header[b-wa7zv3bo1g],
    .modal-header[b-wa7zv3bo1g] {
        padding: 12px 16px;
    }

        .transfer-modal-title[b-wa7zv3bo1g],
        .modal-header h5[b-wa7zv3bo1g] {
            font-size: 16px;
        }

    .btn-primary[b-wa7zv3bo1g],
    .btn-secondary[b-wa7zv3bo1g] {
        width: 100%;
        margin-bottom: 8px;
    }

    .modal-footer[b-wa7zv3bo1g] {
        flex-direction: column;
    }
}
/* /Components/Pages/V2/Transport/Manage/Components/TripSoAllocationModal.razor.rz.scp.css */
.tsa-modal-backdrop[b-utcqmsie8f] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1060; }
.tsa-modal[b-utcqmsie8f] { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.tsa-modal-header[b-utcqmsie8f] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.tsa-header-content[b-utcqmsie8f] { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.tsa-modal-close[b-utcqmsie8f] { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.tsa-modal-close:hover[b-utcqmsie8f] { color: #111827; }
.tsa-modal-body[b-utcqmsie8f] { padding: 12px 16px; overflow-y: auto; flex: 1 1 auto; }
.tsa-modal-footer[b-utcqmsie8f] { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e7eb; background: #f9fafb; }
.tsa-loading[b-utcqmsie8f] { text-align: center; padding: 30px; color: #6b7280; }
.tsa-empty[b-utcqmsie8f] { padding: 10px 14px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; color: #856404; }
.tsa-badge-warn[b-utcqmsie8f] { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.tsa-table[b-utcqmsie8f] { width: 100%; border-collapse: collapse; font-size: 13px; }
.tsa-table th[b-utcqmsie8f], .tsa-table td[b-utcqmsie8f] { border: 1px solid #e5e7eb; padding: 4px 8px; vertical-align: middle; }
.tsa-table th[b-utcqmsie8f] { background: #f9fafb; font-weight: 600; }
.tsa-table tbody tr.tsa-row-first td[b-utcqmsie8f] { border-top: 2px solid #d1d5db; }
.tsa-actions[b-utcqmsie8f] { white-space: nowrap; text-align: center; }
.tsa-actions .btn-xs[b-utcqmsie8f] { padding: 1px 6px; font-size: 12px; margin: 0 1px; }
.tsa-warning[b-utcqmsie8f] { color: #b45309; font-size: 12px; }
/* /Components/Pages/V2/Transport/Manage/ManageBarger.razor.rz.scp.css */
.info-icon[b-4wrjs6chv0] {
    font-size: 12px;
    color: #007bff;
    margin-left: 4px;
    transition: color 0.2s ease;
}

    .info-icon:hover[b-4wrjs6chv0] {
        color: #0056b3;
    }

.group-info:hover[b-4wrjs6chv0]::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-4wrjs6chv0]::after {
    opacity: 1;
    visibility: visible;
}

.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;
}

.filter-group-btn[b-4wrjs6chv0] {
    display: flex;
    align-items: flex-end;
}

/* CR_Fields.xlsx — cụm nút gán nhanh (Áp tải / Lót bạt / Bù tải).
   .filters-grid là grid CỘT CỨNG 150px nên MỖI con là MỘT ô: để 3 nút rời nhau thì chúng bị dàn
   xa như 3 ô lọc, và nút cuối rớt xuống dòng mới đứng lẻ loi bên trái khi hết cột. Gộp vào MỘT ô
   span 2 cột → 3 nút dính liền thành một cụm, xuống dòng cả cụm. */
.bulk-field-actions[b-4wrjs6chv0] {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* thẳng đáy với ô lọc — ô lọc có nhãn phía trên nên cao hơn */
    gap: 4px;
}
/* Level 2 switches styling */
.subtasks-level2[b-4wrjs6chv0] {
    display: flex;
    background: white;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 7px;
    padding: 0.3rem;
}

.switch[b-4wrjs6chv0] {
    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-4wrjs6chv0] {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }

    .switch.active[b-4wrjs6chv0] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-weight: 500;
    }
/* 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;
    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-light, #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-light, #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;
}

.manage-trips-grid-wrapper[b-4wrjs6chv0] {
    position: fixed;
    top: 220px;
}

@media (max-width: 1650px) {
    .manage-trips-grid-wrapper[b-4wrjs6chv0] {
        position: fixed;
        top: 220px;
    }

    .radzen-grouped-grid-container[b-4wrjs6chv0] {
        height: calc(100vh - 285px) !important;
        overflow: hidden;
        position: relative;
    }
}
/* 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 1 cột: cụm nút chiếm trọn hàng, giãn cách như .filter-group. */
    .bulk-field-actions[b-4wrjs6chv0] {
        grid-column: 1 / -1;
        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: 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-4wrjs6chv0]::-webkit-scrollbar {
            height: 4px;
        }

        .subtasks-level2[b-4wrjs6chv0]::-webkit-scrollbar-track {
            background: transparent;
        }

        .subtasks-level2[b-4wrjs6chv0]::-webkit-scrollbar-thumb {
            background: var(--primary-color, #ca3c19);
            border-radius: 2px;
        }

        .subtasks-level2 .switch[b-4wrjs6chv0] {
            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-4wrjs6chv0] {
        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-4wrjs6chv0]::-webkit-scrollbar {
            height: 4px;
        }

        .btn-fuction-container[b-4wrjs6chv0]::-webkit-scrollbar-track {
            background: transparent;
        }

        .btn-fuction-container[b-4wrjs6chv0]::-webkit-scrollbar-thumb {
            background: var(--primary-color, #ca3c19);
            border-radius: 2px;
        }

        .btn-fuction-container .filters-grid-btn[b-4wrjs6chv0] {
            display: flex;
            flex-wrap: nowrap !important;
            gap: 8px;
            min-width: max-content;
        }

        .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] {
    height: calc(100vh - 285px);
    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;
        }

    /* Override hover for group header rows - apply to entire row */
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-group-header:hover > td {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-group-header:hover {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .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: 16px 0px 16px 0px;
    width: 100%;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
    background: rgb(225 64 24 / 33%) !important;
    /*border-bottom: 1px solid #d75f0a;*/
}

[b-4wrjs6chv0] .rz-group-row > td {
    cursor: pointer;
    padding: 0px;
    padding-top: 0px;
    /*background: linear-gradient(90deg, #ff8f73 0%, var(--primary-active), #ff8c42 50%, #ff6b35 75%, var(--primary-color, #ca3c19) 100%);*/
}


.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: 11px;
    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-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: black;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: default;
}

.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-arrivedpickup[b-4wrjs6chv0] {
        background: #ffeeba;
        color: #856404;
    }

    .status-badge.status-pickuped[b-4wrjs6chv0] {
        background: #ffe4c4;
        color: #e67e22;
    }

    .status-badge.status-arriveddelivery[b-4wrjs6chv0] {
        background: #b8daff;
        color: #004085;
    }

    .status-badge.status-delivered[b-4wrjs6chv0] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-chuyendiem[b-4wrjs6chv0] {
        background: #e7dcf7;
        color: #5b21b6;
    }

    .status-badge.status-trahang[b-4wrjs6chv0] {
        background: #fde2e7;
        color: #ad1457;
    }

    .status-badge.status-datrahang[b-4wrjs6chv0] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-khonggiao[b-4wrjs6chv0] {
        background: #f8d7da;
        color: #721c24;
    }

    .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;
    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;
    }

/* Group Header Checkbox Alignment */
[b-4wrjs6chv0] .rz-group-row .select-all-checkbox,
[b-4wrjs6chv0] .custom-group-header .select-all-checkbox,
.group-header-left .select-all-checkbox[b-4wrjs6chv0] {
    margin-right: 12px; /* Tạo khoảng cách với element tiếp theo */
}


.group-filter-button[b-4wrjs6chv0] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.filters-grid-btn[b-4wrjs6chv0] {
    display: flex;
    flex-direction: row;
}

/* Advanced Filter Dialog Styles */
.advanced-filter-dialog[b-4wrjs6chv0] {
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.advanced-filters-grid[b-4wrjs6chv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 10px;
}

.advanced-filter-dialog .filter-group[b-4wrjs6chv0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.advanced-filter-dialog .filter-label[b-4wrjs6chv0] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

/* Fix dropdown z-index in dialog */
.advanced-filter-dialog .rz-dropdown-panel[b-4wrjs6chv0],
.advanced-filter-dialog .rz-popup[b-4wrjs6chv0],
.rz-dropdown-panel[b-4wrjs6chv0],
.rz-popup[b-4wrjs6chv0] {
    z-index: 99999 !important;
}

.advanced-filter-dialog .filter-input[b-4wrjs6chv0],
.advanced-filter-dialog .filter-select[b-4wrjs6chv0] {
    width: 100%;
}

/* Advanced Filter Dialog Footer Buttons */
.advanced-filter-dialog-footer[b-4wrjs6chv0] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 4px 0;
}

.btn-advanced-filter[b-4wrjs6chv0] {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 70px;
}

    .btn-advanced-filter.btn-apply[b-4wrjs6chv0] {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-4wrjs6chv0] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-4wrjs6chv0] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-4wrjs6chv0] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-4wrjs6chv0] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-4wrjs6chv0] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-4wrjs6chv0] {
    border: 1.5px solid var(--primary-color) !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-4wrjs6chv0] {
        background-color: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-4wrjs6chv0] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-4wrjs6chv0] {
        color: inherit !important;
    }

@media (max-width: 768px) {
    .advanced-filters-grid[b-4wrjs6chv0] {
        grid-template-columns: 1fr;
    }

    .advanced-filter-dialog-footer[b-4wrjs6chv0] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-4wrjs6chv0] {
        width: 100%;
    }
}


/* Mobile horizontal scroll for button groups */
@media (max-width: 768px) {
    .group-filter-button[b-4wrjs6chv0] {
        display: flex;
        flex-direction: column !important;
        gap: 8px;
    }
    /* Enable horizontal scroll for button groups on mobile */
    .group-filter-button[b-4wrjs6chv0] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-group-btn .subtasks-level2[b-4wrjs6chv0],
    .btn-fuction-container .filters-grid-btn[b-4wrjs6chv0] {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: max-content;
    }

        .filter-group-btn .subtasks-level2 button[b-4wrjs6chv0],
        .btn-fuction-container .filters-grid-btn .filter-group[b-4wrjs6chv0] {
            flex-shrink: 0;
            white-space: nowrap;
        }

    .filter-group-btn[b-4wrjs6chv0] {
        order: 1; /* KAB/KHTB/All ở trên */
    }

    .btn-fuction-container[b-4wrjs6chv0] {
        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-4wrjs6chv0]::-webkit-scrollbar {
            height: 4px;
        }

        .btn-fuction-container[b-4wrjs6chv0]::-webkit-scrollbar-track {
            background: transparent;
        }

        .btn-fuction-container[b-4wrjs6chv0]::-webkit-scrollbar-thumb {
            background: var(--primary-dark, #ca3c19);
            border-radius: 2px;
        }

    .filter-group-btn .subtasks-level2[b-4wrjs6chv0] {
        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-4wrjs6chv0]::-webkit-scrollbar {
            height: 4px;
        }

        .filter-group-btn .subtasks-level2[b-4wrjs6chv0]::-webkit-scrollbar-track {
            background: transparent;
        }

        .filter-group-btn .subtasks-level2[b-4wrjs6chv0]::-webkit-scrollbar-thumb {
            background: var(--primary-dark, #ca3c19);
            border-radius: 2px;
        }

    .btn-fuction-container .filters-grid-btn[b-4wrjs6chv0] {
        flex-wrap: nowrap !important;
        min-width: max-content;
    }

        .filter-group-btn .subtasks-level2 button[b-4wrjs6chv0],
        .btn-fuction-container .filters-grid-btn .filter-group[b-4wrjs6chv0] {
            flex-shrink: 0;
            white-space: nowrap;
        }
}

/* Advanced Filters Panel - Positioned right below base filters and overlay section 2 */
.advanced-filters-panel[b-4wrjs6chv0] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px;
}

    .advanced-filters-panel.expanded[b-4wrjs6chv0] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible;
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-4wrjs6chv0] {
    padding: 20px;
    position: relative;
    z-index: 2001;
    background: white;
    border-radius: 20px;
}

.advanced-filters-header[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-4wrjs6chv0] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-4wrjs6chv0] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-4wrjs6chv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-4wrjs6chv0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-4wrjs6chv0] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-4wrjs6chv0] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-4wrjs6chv0] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-4wrjs6chv0] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-4wrjs6chv0] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-4wrjs6chv0] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-4wrjs6chv0] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-4wrjs6chv0] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-4wrjs6chv0] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-4wrjs6chv0] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-4wrjs6chv0] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-4wrjs6chv0] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-4wrjs6chv0] {
        color: inherit !important;
    }

/* Ensure parent container has relative positioning */
.filters-section[b-4wrjs6chv0] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-4wrjs6chv0] .rz-dropdown-panel,
[b-4wrjs6chv0] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-4wrjs6chv0] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-4wrjs6chv0] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-4wrjs6chv0] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-4wrjs6chv0] {
        max-height: 800px;
    }

    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-4wrjs6chv0] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }

    .advanced-filters-content[b-4wrjs6chv0] {
        z-index: 2001 !important;
    }
}

/* Group Border Styling - Tạo border cho từng group để dễ phân biệt */

/* Border cho group header */
.radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row {
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.1) !important;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    position: relative;
    overflow: hidden;
}

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row:first-child {
        margin-top: 0 !important;
    }

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row > td {
        border-left: none !important;
        border-right: none !important;
    }

/* Border cho các dòng data trong group */
.radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
}

/* Dòng cuối cùng của mỗi group */
.radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row ~ tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
}

    /* Dòng cuối trong group sẽ có border-bottom đậm và bo góc */
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row ~ tr:not(.rz-group-row):last-child,
    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data tr:not(.rz-group-row):has(+ .rz-group-row) {
        border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
        border-radius: 0 0 8px 8px !important;
    }

/* Xử lý trường hợp dòng cuối cùng của bảng */
.radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-datatable-data tr:last-child:not(.rz-group-row) {
    border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
    border-radius: 0 0 8px 8px !important;
}


/* Background cho group để tạo sự tương phản */
.radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row ~ tr:not(.rz-group-row) {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

    .radzen-grouped-grid-container[b-4wrjs6chv0]  .rz-group-row ~ tr:not(.rz-group-row):nth-child(even) {
        background-color: rgba(248, 249, 250, 0.98) !important;
    }

/* Enhanced Group Header Styling - Đẹp và nổi bật hơn */



@keyframes header-glow-b-4wrjs6chv0 {
    0% {
        opacity: 0.8;
        transform: scaleX(1);
    }

    100% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Cải thiện style cho custom group header */
[b-4wrjs6chv0] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    width: 100%;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    box-shadow: 0 1px 4px rgba(202, 60, 25, 0.15);
}

/* Hover effect cho group header */
/*::deep .custom-group-header:hover {
        background: linear-gradient(135deg, #fef7f0 0%, #fbbd91c2 50%, #ffeaa7 100%) !important;
        box-shadow: 0 4px 16px rgba(202, 60, 25, 0.25);
        transform: translateY(-1px);
    }*/

/* Enhanced group header left section - Align với checkbox column */
.group-header-left[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding-left: 9px;
}

    /* Tạo space cho checkbox giống như column layout */
    .group-header-left .checkbox-space[b-4wrjs6chv0] {
        width: 40px; /* Match checkbox column width */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    /* Style cho checkbox trong group header */
    .group-header-left .select-all-checkbox[b-4wrjs6chv0] {
        margin: 0;
    }

/* Highlight Schedule ID với style đặc biệt - Bỏ hover */
.group-schedule-id[b-4wrjs6chv0] {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #fff 0%, #ffe8e1 100%);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-color, #ca3c19);
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.2);
    position: relative;
    text-transform: uppercase;
    min-width: 40px;
    text-align: center;
}

/* Highlight ngày với animation */
.group-info.date-highlight[b-4wrjs6chv0] {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #3b82f6;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
    animation: date-pulse-b-4wrjs6chv0 2s ease-in-out infinite;
    position: relative;
}

@keyframes date-pulse-b-4wrjs6chv0 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
}

/* Enhanced group schedule type badge - Ngày xuất với màu giống hover của Lịch */
.group-schedule-type[b-4wrjs6chv0] {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ca3c19 0%, #ff6b35 100%);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--primary-color, #ca3c19);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
}

/* Enhanced group header center */
.group-header-center[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    gap: 6px;
    flex: 1;
    font-size: 11px;
    color: #000000; /* Màu đen tuyền */
    overflow: hidden;
    padding: 0 8px;
}

/* Group Info Button - Button Inner Style (Lõm xuống) */
.group-info-button[b-4wrjs6chv0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    color: #333;
    border: 2px solid white;
    border-radius: 50px;
    font-size: 11px;
    cursor: default;
    /* Inner shadow effect với viền trắng mềm mại */
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.08), inset -3px -3px 8px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    position: relative;
}

/* Text bên trong button */
.group-info-text[b-4wrjs6chv0] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

/* Divider bên trong button */
.group-info-button .group-divider[b-4wrjs6chv0] {
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Info icon bên trong button */
.group-info-button .info-icon[b-4wrjs6chv0] {
    font-size: 10px;
    color: #6b7280;
    margin-left: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Group Info Button Secondary - Cụm thông tin bổ sung */
.group-info-secondary[b-4wrjs6chv0] {
    margin-left: 8px;
    /* Hoàn toàn giống group chính */
    background: white;
    border: 2px solid white;
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.08), inset -3px -3px 8px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Căn giữa riêng cho group 2 */
.group-info-centered[b-4wrjs6chv0] {
    margin-left: auto;
    margin-right: auto;
}

.group-info-secondary .group-info-text[b-4wrjs6chv0] {
    /* Giống hoàn toàn group chính */
    color: #374151;
    font-weight: 500;
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Single Line Group Info - Gộp tất cả thông tin thành một dòng */
.group-info-single-line[b-4wrjs6chv0] {
    /* Kế thừa từ group-info-button nhưng có thể wrap nếu cần */
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
    /* Tăng padding để có nhiều chỗ hơn */
    padding: 10px 20px;
    /* Font size 11 theo yêu cầu */
    font-size: 11px;
    /* Căn giữa hoàn toàn */
    margin: 0 auto;
    text-align: center;
}

    .group-info-single-line .group-info-text[b-4wrjs6chv0] {
        font-size: 11px;
        /* Màu đen tuyền */
        color: #000000 !important;
        font-weight: 500;
        /* Cho phép text wrap nếu quá dài */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px; /* Giới hạn độ rộng mỗi text */
        /* Loại bỏ text-shadow để màu đen tuyền rõ ràng */
        text-shadow: none;
    }

    .group-info-single-line .group-divider[b-4wrjs6chv0] {
        font-size: 10px;
        margin: 0 4px; /* Giảm margin để tiết kiệm không gian */
        /* Màu đen tuyền cho divider */
        color: #000000 !important;
        text-shadow: none;
    }

.group-info-secondary .group-divider[b-4wrjs6chv0] {
    /* Giống hoàn toàn group chính */
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Enhanced group info items */
.group-info[b-4wrjs6chv0] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .group-info:hover[b-4wrjs6chv0] {
        background: rgba(255, 255, 255, 0.9);
        border-color: var(--primary-color, #ca3c19);
        color: var(--primary-color, #ca3c19);
        transform: scale(1);
    }

/* Enhanced dividers */
.group-divider[b-4wrjs6chv0] {
    color: var(--primary-color, #ca3c19);
    font-weight: 700;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* Enhanced group header right section */
.group-header-right[b-4wrjs6chv0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    justify-content: flex-end;
    padding-right: 10px;
}




/* Special highlight for important info */
.group-info.highlight[b-4wrjs6chv0] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffc107;
    font-weight: 600;
    animation: info-glow-b-4wrjs6chv0 2s ease-in-out infinite alternate;
}

@keyframes info-glow-b-4wrjs6chv0 {
    0% {
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    }

    100% {
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.5);
    }
}

/* Icon styling in group header */
.group-header-left i[b-4wrjs6chv0],
.group-header-center i[b-4wrjs6chv0],
.group-header-right i[b-4wrjs6chv0] {
    color: var(--primary-color, #ca3c19);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .group-header-left i:hover[b-4wrjs6chv0],
    .group-header-center i:hover[b-4wrjs6chv0],
    .group-header-right i:hover[b-4wrjs6chv0] {
        color: #ff6b35;
        transform: scale(1.2);
    }

/* Responsive adjustments */
@media (max-width: 1400px) {
    .group-header-left[b-4wrjs6chv0] {
        min-width: 120px;
        gap: 6px;
    }

        .group-header-left .checkbox-space[b-4wrjs6chv0] {
            width: 35px; /* Slightly smaller on medium screens */
        }

    .group-schedule-id[b-4wrjs6chv0] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .group-header-right[b-4wrjs6chv0] {
        min-width: 125px;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    [b-4wrjs6chv0] .custom-group-header {
        flex-wrap: nowrap;
        padding: 8px 4px;
        gap: 4px;
    }

    .group-header-left[b-4wrjs6chv0] {
        min-width: auto;
        padding-left: 4px; /* Maintain checkbox alignment */
        flex-shrink: 0;
    }

        .group-header-left .checkbox-space[b-4wrjs6chv0] {
            width: 30px; /* Smaller on tablets */
        }

    .group-header-center[b-4wrjs6chv0] {
        flex: 1;
        padding: 0 4px;
        flex-wrap: nowrap;
        gap: 2px;
        overflow: hidden;
    }

    .group-header-right[b-4wrjs6chv0] {
        min-width: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    [b-4wrjs6chv0] .custom-group-header {
        flex-wrap: nowrap;
        padding: 6px 2px;
        gap: 2px;
    }

    .group-header-left[b-4wrjs6chv0] {
        padding-left: 2px; /* Tighter spacing on mobile */
        flex-shrink: 0;
        gap: 4px;
    }

        .group-header-left .checkbox-space[b-4wrjs6chv0] {
            width: 25px; /* Smallest on mobile */
        }

    .group-schedule-id[b-4wrjs6chv0] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-schedule-type[b-4wrjs6chv0] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-header-center[b-4wrjs6chv0] {
        flex: 1;
        padding: 0 2px;
        overflow: hidden;
        min-width: 0;
    }

    .group-header-right[b-4wrjs6chv0] {
        flex-shrink: 0;
        gap: 4px;
        padding-right: 2px;
    }

    .group-stat[b-4wrjs6chv0] {
        font-size: 9px;
        padding: 3px 5px;
        color: black;
    }

    .group-info.date-highlight[b-4wrjs6chv0] {
        font-size: 8px;
        padding: 2px 4px;
    }

    /* Responsive cho group info button */
    .group-info-button[b-4wrjs6chv0] {
        padding: 4px 8px;
        font-size: 9px;
        gap: 2px;
        overflow: hidden;
        max-width: 100%;
        border: 2px solid white;
        border-radius: 50px;
        /* Giữ hiệu ứng inner trên mobile với viền trắng mềm mại */
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .group-info-text[b-4wrjs6chv0] {
        font-size: 9px;
    }

    .group-info-button .group-divider[b-4wrjs6chv0] {
        font-size: 8px;
    }

    .group-info-button .info-icon[b-4wrjs6chv0] {
        font-size: 8px;
    }

    /* Responsive cho single line layout - giữ trên 1 dòng */
    .group-info-single-line[b-4wrjs6chv0] {
        padding: 4px 8px;
        font-size: 9px;
        flex-direction: row; /* Giữ nguyên hướng ngang */
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex-wrap: nowrap; /* Không cho wrap */
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .group-info-single-line .group-info-text[b-4wrjs6chv0] {
            font-size: 9px;
            color: #000000 !important; /* Màu đen tuyền */
            text-shadow: none;
            max-width: 80px; /* Giảm width trên mobile */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .group-info-single-line .group-divider[b-4wrjs6chv0] {
            font-size: 8px;
            color: #000000 !important; /* Màu đen tuyền */
            text-shadow: none;
            margin: 0 1px;
            flex-shrink: 0;
        }

    /* Responsive cho cụm thông tin thứ hai */
    .group-info-secondary[b-4wrjs6chv0] {
        margin-left: 2px;
        /* Giống responsive của group chính */
        border: 2px solid white;
        border-radius: 50px;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

        .group-info-secondary .group-info-text[b-4wrjs6chv0] {
            font-size: 9px;
        }

        .group-info-secondary .group-divider[b-4wrjs6chv0] {
            font-size: 8px;
        }
}

/* RadZen DataGrid Row Hover Effect - Class-based approach */
.trips-grid-row[b-4wrjs6chv0] {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.hoverable-row[b-4wrjs6chv0] {
    transition: background-color 0.2s ease;
    cursor: pointer;
    background-color: #f8f9fa !important;
}

    /* Hover effect cho data rows */
    .trips-grid-row:hover[b-4wrjs6chv0],
    .hoverable-row:hover[b-4wrjs6chv0] {
        background-color: #f8f9fa !important;
    }

    /* Selected row styling */
    .trips-grid-row.selected[b-4wrjs6chv0],
    .hoverable-row.selected[b-4wrjs6chv0] {
        /*    background-color: rgba(233, 236, 239, 0.8) !important;*/
    }

        .hoverable-row.selected:hover[b-4wrjs6chv0] {
            background-color: rgba(0, 123, 255, 0.25) !important;
        }

    /* Ensure cells inherit background */
    .hoverable-row:hover td[b-4wrjs6chv0] {
        background-color: transparent !important;
    }

/* RadZen DataGrid Hover - Class-based approach tốt hơn */
[b-4wrjs6chv0] .rz-datatable-data tr.trips-grid-row:hover,
[b-4wrjs6chv0] .rz-datatable-data tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
}

    /* Đảm bảo cells trong dòng hover không bị override */
    [b-4wrjs6chv0] .rz-datatable-data tr.trips-grid-row:hover td,
    [b-4wrjs6chv0] .rz-datatable-data tr.hoverable-row:hover td {
        background-color: inherit !important;
    }

/* Selected rows */
[b-4wrjs6chv0] .rz-datatable-data tr.trips-grid-row.selected,
[b-4wrjs6chv0] .rz-datatable-data tr.hoverable-row.selected {
    /* background-color: rgba(233, 236, 239, 0.8) !important;*/
}

/* Group row hover effect - giữ nguyên, không hover group headers */
[b-4wrjs6chv0] .rz-datatable-data tr.rz-group-row:hover {
    background-color: initial !important;
}

/* Row hover effects - Multiple approaches to ensure compatibility */
[b-4wrjs6chv0] .trips-data-grid .trips-grid-row:hover,
[b-4wrjs6chv0] .trips-data-grid tr.trips-grid-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

    [b-4wrjs6chv0] .trips-data-grid .trips-grid-row:hover td,
    [b-4wrjs6chv0] .trips-data-grid tr.trips-grid-row:hover td {
        background-color: #f8f9fa !important;
    }

/* Selection styles */
[b-4wrjs6chv0] .trips-data-grid .trips-grid-row.selected,
[b-4wrjs6chv0] .trips-data-grid tr.trips-grid-row.selected,
[b-4wrjs6chv0] .trips-data-grid .rz-state-highlight {
    /*background-color: #ffb596 !important;*/
}

    [b-4wrjs6chv0] .trips-data-grid .trips-grid-row.selected td,
    [b-4wrjs6chv0] .trips-data-grid tr.trips-grid-row.selected td,
    [b-4wrjs6chv0] .trips-data-grid .rz-state-highlight td {
        /*background-color: #ffb596 !important;*/
    }

/* Radzen specific selectors */
[b-4wrjs6chv0] .trips-data-grid tbody tr:hover {
    background-color: #f8f9fa !important;
}

    [b-4wrjs6chv0] .trips-data-grid tbody tr:hover td {
        background-color: #f8f9fa !important;
    }

/* Fallback selectors for maximum compatibility */
[b-4wrjs6chv0] .rz-datatable-data tr:hover,
[b-4wrjs6chv0] .rz-datatable tbody tr:hover,
[b-4wrjs6chv0] tr.trips-grid-row:hover,
[b-4wrjs6chv0] tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
}

    [b-4wrjs6chv0] .rz-datatable-data tr:hover td,
    [b-4wrjs6chv0] .rz-datatable tbody tr:hover td,
    [b-4wrjs6chv0] tr.trips-grid-row:hover td,
    [b-4wrjs6chv0] tr.hoverable-row:hover td {
        background-color: #f8f9fa !important;
    }

[b-4wrjs6chv0] .rz-datatable-data tr.rz-state-highlight,
[b-4wrjs6chv0] .rz-datatable-data tr.rz-state-highlight td {
    background-color: #ffb596 !important;
    color: var(--primary-text) !important;
}

/* Căn giữa cột Tình trạng */
[b-4wrjs6chv0] .col-status,
[b-4wrjs6chv0] .col-status .status-badge {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
/* /Components/Pages/V2/Transport/Manage/ManageContainer.razor.rz.scp.css */
.status-0[b-hnbqvncsbb] {
    background: #bfbfbf;
    color: white;
}

.status-1[b-hnbqvncsbb] {
    background: #fff3cd;
    color: #856404;
}

.status-2[b-hnbqvncsbb] {
    background: #d4edda;
    color: #155724;
}

.status-badge[b-hnbqvncsbb] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.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;
}

/* CR_Fields.xlsx — cụm nút gán nhanh (Áp tải / Lót bạt / Bù tải).
   .filters-grid là grid CỘT CỨNG 150px nên MỖI con là MỘT ô: để 3 nút rời nhau thì chúng bị dàn
   xa như 3 ô lọc, và nút cuối rớt xuống dòng mới đứng lẻ loi bên trái khi hết cột. Gộp vào MỘT ô
   span 2 cột → 3 nút dính liền thành một cụm, xuống dòng cả cụm. */
.bulk-field-actions[b-hnbqvncsbb] {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* thẳng đáy với ô lọc — ô lọc có nhãn phía trên nên cao hơn */
    gap: 4px;
}
/* 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;
    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-light, #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-light, #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: 125px;
}

/* 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;
}

.manage-trips-grid-wrapper[b-hnbqvncsbb] {
    position: fixed;
    top: 220px;
}

@media (max-width: 1650px) {
    .manage-trips-grid-wrapper[b-hnbqvncsbb] {
        position: fixed;
        top: 220px;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb] {
        height: calc(100vh - 285px) !important;
        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 1 cột: cụm nút chiếm trọn hàng, giãn cách như .filter-group. */
    .bulk-field-actions[b-hnbqvncsbb] {
        grid-column: 1 / -1;
        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: 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-hnbqvncsbb]::-webkit-scrollbar {
            height: 4px;
        }

        .subtasks-level2[b-hnbqvncsbb]::-webkit-scrollbar-track {
            background: transparent;
        }

        .subtasks-level2[b-hnbqvncsbb]::-webkit-scrollbar-thumb {
            background: var(--primary-color, #ca3c19);
            border-radius: 2px;
        }

        .subtasks-level2 .switch[b-hnbqvncsbb] {
            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-hnbqvncsbb] {
        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-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;
        }

        .btn-fuction-container .filters-grid-btn[b-hnbqvncsbb] {
            display: flex;
            flex-wrap: nowrap !important;
            gap: 8px;
            min-width: max-content;
        }

        .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] {
    height: calc(100vh - 285px);
    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;
        }

    /* Override hover for group header rows - apply to entire row */
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-group-header:hover > td {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-group-header:hover {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .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: 16px 0px 16px 0px;
    width: 100%;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
    background: rgb(225 64 24 / 33%) !important;
    /*border-bottom: 1px solid #d75f0a;*/
}

[b-hnbqvncsbb] .rz-group-row > td {
    cursor: pointer;
    padding: 0px;
    padding-top: 0px;
    /*background: linear-gradient(90deg, #ff8f73 0%, var(--primary-active), #ff8c42 50%, #ff6b35 75%, var(--primary-color, #ca3c19) 100%);*/
}


.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: 11px;
    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-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: black;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: default;
}

.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-chuyendiem[b-hnbqvncsbb] {
        background: #e7dcf7;
        color: #5b21b6;
    }

    .status-badge.status-trahang[b-hnbqvncsbb] {
        background: #fde2e7;
        color: #ad1457;
    }

    .status-badge.status-datrahang[b-hnbqvncsbb] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-khonggiao[b-hnbqvncsbb] {
        background: #f8d7da;
        color: #721c24;
    }

    .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;
    }

/* Modal footer buttons must not be constrained by the icon-only .btn rule */
.mcont-modal-footer .btn[b-hnbqvncsbb] {
    max-width: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

@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 Header Checkbox Alignment */
[b-hnbqvncsbb] .rz-group-row .select-all-checkbox,
[b-hnbqvncsbb] .custom-group-header .select-all-checkbox,
.group-header-left .select-all-checkbox[b-hnbqvncsbb] {
    margin-right: 12px; /* Tạo khoảng cách với element tiếp theo */
}


.group-filter-button[b-hnbqvncsbb] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.filters-grid-btn[b-hnbqvncsbb] {
    display: flex;
    flex-direction: row;
}

/* Advanced Filter Dialog Styles */
.advanced-filter-dialog[b-hnbqvncsbb] {
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.advanced-filters-grid[b-hnbqvncsbb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 10px;
}

.advanced-filter-dialog .filter-group[b-hnbqvncsbb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.advanced-filter-dialog .filter-label[b-hnbqvncsbb] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

/* Fix dropdown z-index in dialog */
.advanced-filter-dialog .rz-dropdown-panel[b-hnbqvncsbb],
.advanced-filter-dialog .rz-popup[b-hnbqvncsbb],
.rz-dropdown-panel[b-hnbqvncsbb],
.rz-popup[b-hnbqvncsbb] {
    z-index: 99999 !important;
}

.advanced-filter-dialog .filter-input[b-hnbqvncsbb],
.advanced-filter-dialog .filter-select[b-hnbqvncsbb] {
    width: 100%;
}

/* Advanced Filter Dialog Footer Buttons */
.advanced-filter-dialog-footer[b-hnbqvncsbb] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 4px 0;
}

.btn-advanced-filter[b-hnbqvncsbb] {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 70px;
}

    .btn-advanced-filter.btn-apply[b-hnbqvncsbb] {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-hnbqvncsbb] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-hnbqvncsbb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-hnbqvncsbb] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-hnbqvncsbb] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-hnbqvncsbb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-hnbqvncsbb] {
    border: 1.5px solid var(--primary-color) !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-hnbqvncsbb] {
        background-color: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-hnbqvncsbb] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-hnbqvncsbb] {
        color: inherit !important;
    }

@media (max-width: 768px) {
    .advanced-filters-grid[b-hnbqvncsbb] {
        grid-template-columns: 1fr;
    }

    .advanced-filter-dialog-footer[b-hnbqvncsbb] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-hnbqvncsbb] {
        width: 100%;
    }
}


/* Mobile horizontal scroll for button groups */
@media (max-width: 768px) {
    .group-filter-button[b-hnbqvncsbb] {
        display: flex;
        flex-direction: column !important;
        gap: 8px;
    }
    /* Enable horizontal scroll for button groups on mobile */
    .group-filter-button[b-hnbqvncsbb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-group-btn .subtasks-level2[b-hnbqvncsbb],
    .btn-fuction-container .filters-grid-btn[b-hnbqvncsbb] {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: max-content;
    }

        .filter-group-btn .subtasks-level2 button[b-hnbqvncsbb],
        .btn-fuction-container .filters-grid-btn .filter-group[b-hnbqvncsbb] {
            flex-shrink: 0;
            white-space: nowrap;
        }

    .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-dark, #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;
    }

        .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-dark, #ca3c19);
            border-radius: 2px;
        }

    .btn-fuction-container .filters-grid-btn[b-hnbqvncsbb] {
        flex-wrap: nowrap !important;
        min-width: max-content;
    }

        .filter-group-btn .subtasks-level2 button[b-hnbqvncsbb],
        .btn-fuction-container .filters-grid-btn .filter-group[b-hnbqvncsbb] {
            flex-shrink: 0;
            white-space: nowrap;
        }
}

/* Advanced Filters Panel - Positioned right below base filters and overlay section 2 */
.advanced-filters-panel[b-hnbqvncsbb] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px;
}

    .advanced-filters-panel.expanded[b-hnbqvncsbb] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible;
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-hnbqvncsbb] {
    padding: 20px;
    position: relative;
    z-index: 2001;
    background: white;
    border-radius: 20px;
}

.advanced-filters-header[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-hnbqvncsbb] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-hnbqvncsbb] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-hnbqvncsbb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-hnbqvncsbb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-hnbqvncsbb] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-hnbqvncsbb] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-hnbqvncsbb] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-hnbqvncsbb] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-hnbqvncsbb] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-hnbqvncsbb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-hnbqvncsbb] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-hnbqvncsbb] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-hnbqvncsbb] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-hnbqvncsbb] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-hnbqvncsbb] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-hnbqvncsbb] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-hnbqvncsbb] {
        color: inherit !important;
    }

/* Ensure parent container has relative positioning */
.filters-section[b-hnbqvncsbb] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-hnbqvncsbb] .rz-dropdown-panel,
[b-hnbqvncsbb] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-hnbqvncsbb] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-hnbqvncsbb] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-hnbqvncsbb] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-hnbqvncsbb] {
        max-height: 800px;
    }

    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-hnbqvncsbb] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }

    .advanced-filters-content[b-hnbqvncsbb] {
        z-index: 2001 !important;
    }
}

/* Group Border Styling - Tạo border cho từng group để dễ phân biệt */

/* Border cho group header */
.radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row {
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.1) !important;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    position: relative;
    overflow: hidden;
}

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row:first-child {
        margin-top: 0 !important;
    }

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row > td {
        border-left: none !important;
        border-right: none !important;
    }

/* Border cho các dòng data trong group */
.radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
}

/* Dòng cuối cùng của mỗi group */
.radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row ~ tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
}

    /* Dòng cuối trong group sẽ có border-bottom đậm và bo góc */
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row ~ tr:not(.rz-group-row):last-child,
    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data tr:not(.rz-group-row):has(+ .rz-group-row) {
        border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
        border-radius: 0 0 8px 8px !important;
    }

/* Xử lý trường hợp dòng cuối cùng của bảng */
.radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-datatable-data tr:last-child:not(.rz-group-row) {
    border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
    border-radius: 0 0 8px 8px !important;
}


/* Background cho group để tạo sự tương phản */
.radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row ~ tr:not(.rz-group-row) {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

    .radzen-grouped-grid-container[b-hnbqvncsbb]  .rz-group-row ~ tr:not(.rz-group-row):nth-child(even) {
        background-color: rgba(248, 249, 250, 0.98) !important;
    }

/* Enhanced Group Header Styling - Đẹp và nổi bật hơn */



@keyframes header-glow-b-hnbqvncsbb {
    0% {
        opacity: 0.8;
        transform: scaleX(1);
    }

    100% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Cải thiện style cho custom group header */
[b-hnbqvncsbb] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    width: 100%;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    box-shadow: 0 1px 4px rgba(202, 60, 25, 0.15);
}

/* Hover effect cho group header */
/*::deep .custom-group-header:hover {
        background: linear-gradient(135deg, #fef7f0 0%, #fbbd91c2 50%, #ffeaa7 100%) !important;
        box-shadow: 0 4px 16px rgba(202, 60, 25, 0.25);
        transform: translateY(-1px);
    }*/

/* Enhanced group header left section - Align với checkbox column */
.group-header-left[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding-left: 9px;
}

    /* Tạo space cho checkbox giống như column layout */
    .group-header-left .checkbox-space[b-hnbqvncsbb] {
        width: 40px; /* Match checkbox column width */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    /* Style cho checkbox trong group header */
    .group-header-left .select-all-checkbox[b-hnbqvncsbb] {
        margin: 0;
    }

/* Highlight Schedule ID với style đặc biệt - Bỏ hover */
.group-schedule-id[b-hnbqvncsbb] {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #fff 0%, #ffe8e1 100%);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-color, #ca3c19);
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.2);
    position: relative;
    text-transform: uppercase;
    min-width: 40px;
    text-align: center;
}

/* Highlight ngày với animation */
.group-info.date-highlight[b-hnbqvncsbb] {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #3b82f6;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
    animation: date-pulse-b-hnbqvncsbb 2s ease-in-out infinite;
    position: relative;
}

@keyframes date-pulse-b-hnbqvncsbb {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
}

/* Enhanced group schedule type badge - Ngày xuất với màu giống hover của Lịch */
.group-schedule-type[b-hnbqvncsbb] {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ca3c19 0%, #ff6b35 100%);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--primary-color, #ca3c19);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
}

/* Enhanced group header center */
.group-header-center[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    gap: 6px;
    flex: 1;
    font-size: 11px;
    color: #000000; /* Màu đen tuyền */
    overflow: hidden;
    padding: 0 8px;
}

/* Group Info Button - Button Inner Style (Lõm xuống) */
.group-info-button[b-hnbqvncsbb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    color: #333;
    border: 2px solid white;
    border-radius: 50px;
    font-size: 11px;
    cursor: default;
    /* Inner shadow effect với viền trắng mềm mại */
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.08), inset -3px -3px 8px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    position: relative;
}

/* Text bên trong button */
.group-info-text[b-hnbqvncsbb] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

/* Divider bên trong button */
.group-info-button .group-divider[b-hnbqvncsbb] {
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Info icon bên trong button */
.group-info-button .info-icon[b-hnbqvncsbb] {
    font-size: 10px;
    color: #6b7280;
    margin-left: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Group Info Button Secondary - Cụm thông tin bổ sung */
.group-info-secondary[b-hnbqvncsbb] {
    margin-left: 8px;
    /* Hoàn toàn giống group chính */
    background: white;
    border: 2px solid white;
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.08), inset -3px -3px 8px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Căn giữa riêng cho group 2 */
.group-info-centered[b-hnbqvncsbb] {
    margin-left: auto;
    margin-right: auto;
}

.group-info-secondary .group-info-text[b-hnbqvncsbb] {
    /* Giống hoàn toàn group chính */
    color: #374151;
    font-weight: 500;
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Single Line Group Info - Gộp tất cả thông tin thành một dòng */
.group-info-single-line[b-hnbqvncsbb] {
    /* Kế thừa từ group-info-button nhưng có thể wrap nếu cần */
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
    /* Tăng padding để có nhiều chỗ hơn */
    padding: 10px 20px;
    /* Font size 11 theo yêu cầu */
    font-size: 11px;
    /* Căn giữa hoàn toàn */
    margin: 0 auto;
    text-align: center;
}

    .group-info-single-line .group-info-text[b-hnbqvncsbb] {
        font-size: 11px;
        /* Màu đen tuyền */
        color: #000000 !important;
        font-weight: 500;
        /* Cho phép text wrap nếu quá dài */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px; /* Giới hạn độ rộng mỗi text */
        /* Loại bỏ text-shadow để màu đen tuyền rõ ràng */
        text-shadow: none;
    }

    .group-info-single-line .group-divider[b-hnbqvncsbb] {
        font-size: 10px;
        margin: 0 4px; /* Giảm margin để tiết kiệm không gian */
        /* Màu đen tuyền cho divider */
        color: #000000 !important;
        text-shadow: none;
    }

.group-info-secondary .group-divider[b-hnbqvncsbb] {
    /* Giống hoàn toàn group chính */
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Enhanced group info items */
.group-info[b-hnbqvncsbb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .group-info:hover[b-hnbqvncsbb] {
        background: rgba(255, 255, 255, 0.9);
        border-color: var(--primary-color, #ca3c19);
        color: var(--primary-color, #ca3c19);
        transform: scale(1);
    }

/* Enhanced dividers */
.group-divider[b-hnbqvncsbb] {
    color: var(--primary-color, #ca3c19);
    font-weight: 700;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* Enhanced group header right section */
.group-header-right[b-hnbqvncsbb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    justify-content: flex-end;
    padding-right: 10px;
}




/* Special highlight for important info */
.group-info.highlight[b-hnbqvncsbb] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffc107;
    font-weight: 600;
    animation: info-glow-b-hnbqvncsbb 2s ease-in-out infinite alternate;
}

@keyframes info-glow-b-hnbqvncsbb {
    0% {
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    }

    100% {
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.5);
    }
}

/* Icon styling in group header */
.group-header-left i[b-hnbqvncsbb],
.group-header-center i[b-hnbqvncsbb],
.group-header-right i[b-hnbqvncsbb] {
    color: var(--primary-color, #ca3c19);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .group-header-left i:hover[b-hnbqvncsbb],
    .group-header-center i:hover[b-hnbqvncsbb],
    .group-header-right i:hover[b-hnbqvncsbb] {
        color: #ff6b35;
        transform: scale(1.2);
    }

/* Responsive adjustments */
@media (max-width: 1400px) {
    .group-header-left[b-hnbqvncsbb] {
        min-width: 120px;
        gap: 6px;
    }

        .group-header-left .checkbox-space[b-hnbqvncsbb] {
            width: 35px; /* Slightly smaller on medium screens */
        }

    .group-schedule-id[b-hnbqvncsbb] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .group-header-right[b-hnbqvncsbb] {
        min-width: 125px;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    [b-hnbqvncsbb] .custom-group-header {
        flex-wrap: nowrap;
        padding: 8px 4px;
        gap: 4px;
    }

    .group-header-left[b-hnbqvncsbb] {
        min-width: auto;
        padding-left: 4px; /* Maintain checkbox alignment */
        flex-shrink: 0;
    }

        .group-header-left .checkbox-space[b-hnbqvncsbb] {
            width: 30px; /* Smaller on tablets */
        }

    .group-header-center[b-hnbqvncsbb] {
        flex: 1;
        padding: 0 4px;
        flex-wrap: nowrap;
        gap: 2px;
        overflow: hidden;
    }

    .group-header-right[b-hnbqvncsbb] {
        min-width: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    [b-hnbqvncsbb] .custom-group-header {
        flex-wrap: nowrap;
        padding: 6px 2px;
        gap: 2px;
    }

    .group-header-left[b-hnbqvncsbb] {
        padding-left: 2px; /* Tighter spacing on mobile */
        flex-shrink: 0;
        gap: 4px;
    }

        .group-header-left .checkbox-space[b-hnbqvncsbb] {
            width: 25px; /* Smallest on mobile */
        }

    .group-schedule-id[b-hnbqvncsbb] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-schedule-type[b-hnbqvncsbb] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-header-center[b-hnbqvncsbb] {
        flex: 1;
        padding: 0 2px;
        overflow: hidden;
        min-width: 0;
    }

    .group-header-right[b-hnbqvncsbb] {
        flex-shrink: 0;
        gap: 4px;
        padding-right: 2px;
    }

    .group-stat[b-hnbqvncsbb] {
        font-size: 9px;
        padding: 3px 5px;
        color: black;
    }

    .group-info.date-highlight[b-hnbqvncsbb] {
        font-size: 8px;
        padding: 2px 4px;
    }

    /* Responsive cho group info button */
    .group-info-button[b-hnbqvncsbb] {
        padding: 4px 8px;
        font-size: 9px;
        gap: 2px;
        overflow: hidden;
        max-width: 100%;
        border: 2px solid white;
        border-radius: 50px;
        /* Giữ hiệu ứng inner trên mobile với viền trắng mềm mại */
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .group-info-text[b-hnbqvncsbb] {
        font-size: 9px;
    }

    .group-info-button .group-divider[b-hnbqvncsbb] {
        font-size: 8px;
    }

    .group-info-button .info-icon[b-hnbqvncsbb] {
        font-size: 8px;
    }

    /* Responsive cho single line layout - giữ trên 1 dòng */
    .group-info-single-line[b-hnbqvncsbb] {
        padding: 4px 8px;
        font-size: 9px;
        flex-direction: row; /* Giữ nguyên hướng ngang */
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex-wrap: nowrap; /* Không cho wrap */
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .group-info-single-line .group-info-text[b-hnbqvncsbb] {
            font-size: 9px;
            color: #000000 !important; /* Màu đen tuyền */
            text-shadow: none;
            max-width: 80px; /* Giảm width trên mobile */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .group-info-single-line .group-divider[b-hnbqvncsbb] {
            font-size: 8px;
            color: #000000 !important; /* Màu đen tuyền */
            text-shadow: none;
            margin: 0 1px;
            flex-shrink: 0;
        }

    /* Responsive cho cụm thông tin thứ hai */
    .group-info-secondary[b-hnbqvncsbb] {
        margin-left: 2px;
        /* Giống responsive của group chính */
        border: 2px solid white;
        border-radius: 50px;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

        .group-info-secondary .group-info-text[b-hnbqvncsbb] {
            font-size: 9px;
        }

        .group-info-secondary .group-divider[b-hnbqvncsbb] {
            font-size: 8px;
        }
}

/* RadZen DataGrid Row Hover Effect - Class-based approach */
.trips-grid-row[b-hnbqvncsbb] {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.hoverable-row[b-hnbqvncsbb] {
    transition: background-color 0.2s ease;
    cursor: pointer;
    background-color: #f8f9fa !important;
}

    /* Hover effect cho data rows */
    .trips-grid-row:hover[b-hnbqvncsbb],
    .hoverable-row:hover[b-hnbqvncsbb] {
        background-color: #f8f9fa !important;
    }

    /* Selected row styling */
    .trips-grid-row.selected[b-hnbqvncsbb],
    .hoverable-row.selected[b-hnbqvncsbb] {
        /*background-color: rgba(233, 236, 239, 0.8) !important;*/
    }

        .hoverable-row.selected:hover[b-hnbqvncsbb] {
            background-color: rgba(0, 123, 255, 0.25) !important;
        }

    /* Ensure cells inherit background */
    .hoverable-row:hover td[b-hnbqvncsbb] {
        background-color: transparent !important;
    }

/* RadZen DataGrid Hover - Class-based approach tốt hơn */
[b-hnbqvncsbb] .rz-datatable-data tr.trips-grid-row:hover,
[b-hnbqvncsbb] .rz-datatable-data tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
}

    /* Đảm bảo cells trong dòng hover không bị override */
    [b-hnbqvncsbb] .rz-datatable-data tr.trips-grid-row:hover td,
    [b-hnbqvncsbb] .rz-datatable-data tr.hoverable-row:hover td {
        background-color: inherit !important;
    }

/* Selected rows */
[b-hnbqvncsbb] .rz-datatable-data tr.trips-grid-row.selected,
[b-hnbqvncsbb] .rz-datatable-data tr.hoverable-row.selected {
    /*background-color: rgba(233, 236, 239, 0.8) !important;*/
}

/* Group row hover effect - giữ nguyên, không hover group headers */
[b-hnbqvncsbb] .rz-datatable-data tr.rz-group-row:hover {
    background-color: initial !important;
}

/* Row hover effects - Multiple approaches to ensure compatibility */
[b-hnbqvncsbb] .trips-data-grid .trips-grid-row:hover,
[b-hnbqvncsbb] .trips-data-grid tr.trips-grid-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

    [b-hnbqvncsbb] .trips-data-grid .trips-grid-row:hover td,
    [b-hnbqvncsbb] .trips-data-grid tr.trips-grid-row:hover td {
        background-color: #f8f9fa !important;
    }

/* Selection styles */
[b-hnbqvncsbb] .trips-data-grid .trips-grid-row.selected,
[b-hnbqvncsbb] .trips-data-grid tr.trips-grid-row.selected,
[b-hnbqvncsbb] .trips-data-grid .rz-state-highlight {
    /*background-color: #ffb596 !important;*/
}

    [b-hnbqvncsbb] .trips-data-grid .trips-grid-row.selected td,
    [b-hnbqvncsbb] .trips-data-grid tr.trips-grid-row.selected td,
    [b-hnbqvncsbb] .trips-data-grid .rz-state-highlight td {
        /*background-color: #ffb596 !important;*/
    }

/* Radzen specific selectors */
[b-hnbqvncsbb] .trips-data-grid tbody tr:hover {
    background-color: #f8f9fa !important;
}

    [b-hnbqvncsbb] .trips-data-grid tbody tr:hover td {
        background-color: #f8f9fa !important;
    }

/* Fallback selectors for maximum compatibility */
[b-hnbqvncsbb] .rz-datatable-data tr:hover,
[b-hnbqvncsbb] .rz-datatable tbody tr:hover,
[b-hnbqvncsbb] tr.trips-grid-row:hover,
[b-hnbqvncsbb] tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
}

    [b-hnbqvncsbb] .rz-datatable-data tr:hover td,
    [b-hnbqvncsbb] .rz-datatable tbody tr:hover td,
    [b-hnbqvncsbb] tr.trips-grid-row:hover td,
    [b-hnbqvncsbb] tr.hoverable-row:hover td {
        background-color: #f8f9fa !important;
    }

[b-hnbqvncsbb] .rz-datatable-data tr.rz-state-highlight,
[b-hnbqvncsbb] .rz-datatable-data tr.rz-state-highlight td {
    background-color: #ffb596 !important;
    color: var(--primary-text) !important;
}

/* Căn giữa cột Tình trạng */
[b-hnbqvncsbb] .col-status,
[b-hnbqvncsbb] .col-status .status-badge {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
/* /Components/Pages/V2/Transport/Manage/ManageKCS.razor.rz.scp.css */
/* KCS Management Page Styles — Redesigned to match ManageBarger UI/UX */
.e-pager[b-n4o3kdpvn7] {
    border:none !important;
}
/* Page Content Wrapper */
.page-content[b-n4o3kdpvn7] {
    padding-top: 100px;
}

/* Page Header */
.page-header[b-n4o3kdpvn7] {
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-header h5[b-n4o3kdpvn7] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.page-header h5 i[b-n4o3kdpvn7] {
    color: #1a73e8;
    margin-right: 8px;
}

/* Empty State */
.empty-state[b-n4o3kdpvn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: #999;
}

.empty-state i[b-n4o3kdpvn7] {
    font-size: 48px;
    margin-bottom: 12px;
    color: #ccc;
}

.empty-state p[b-n4o3kdpvn7] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #666;
}

.empty-state span[b-n4o3kdpvn7] {
    font-size: 13px;
    color: #999;
}

/* ============ Filters ============ */
.filters-container[b-n4o3kdpvn7] {
    position: fixed;
    top: 50px;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
}

.sidebar-collapsed .filters-container[b-n4o3kdpvn7] {
    left: var(--sidebar-collapsed-width);
}

.filters-section[b-n4o3kdpvn7] {
    background: white;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-light);
}

.filters-grid[b-n4o3kdpvn7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    gap: 4px;
}

.filter-group[b-n4o3kdpvn7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-end;
}

.filter-group label[b-n4o3kdpvn7] {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.filter-group-btn[b-n4o3kdpvn7] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

/* ============ Cards Container ============ */
.cards-container[b-n4o3kdpvn7] {
    height: calc(100vh - 165px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

.schedule-group[b-n4o3kdpvn7] {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* ============ Trip Cards Grid ============ */
.trip-cards-grid[b-n4o3kdpvn7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 8px;
    padding: 8px;
    background: #f8f9fa;
}

.trip-card[b-n4o3kdpvn7] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .trip-card:hover[b-n4o3kdpvn7] {
        border-color: var(--primary-color, #ca3c19);
        box-shadow: 0 2px 8px rgba(202, 60, 25, 0.15);
        transform: translateY(-1px);
    }

.trip-card-cancelled[b-n4o3kdpvn7] {
    background: #fff5f5 !important;
    opacity: 0.7;
}

    .trip-card-cancelled .trip-card-code[b-n4o3kdpvn7],
    .trip-card-cancelled .trip-card-captain[b-n4o3kdpvn7],
    .trip-card-cancelled .trip-card-barge[b-n4o3kdpvn7] {
        text-decoration: line-through;
    }

/* Card Row 1: Code, Captain, Barge, Action */
.trip-card-row1[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trip-card-code[b-n4o3kdpvn7] {
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-color, #ca3c19);
    min-width: 80px;
}

.trip-card-captain[b-n4o3kdpvn7] {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

    .trip-card-captain i[b-n4o3kdpvn7],
    .trip-card-barge i[b-n4o3kdpvn7] {
        color: #999;
        font-size: 10px;
        margin-right: 3px;
    }

.trip-card-barge[b-n4o3kdpvn7] {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.trip-card-row1 .btn-action-menu[b-n4o3kdpvn7] {
    margin-left: auto;
    flex-shrink: 0;
}

/* Card Row 2: Quantities */
.trip-card-row2[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px dashed #eee;
}

.trip-card-qty[b-n4o3kdpvn7] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.qty-label[b-n4o3kdpvn7] {
    color: #888;
    font-weight: 600;
    font-size: 11px;
}

/* Card Row 3: Status, Fumigation, KCS */
.trip-card-row3[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trip-card-kcs[b-n4o3kdpvn7] {
    font-size: 11px;
    color: #555;
    margin-left: auto;
}

    .trip-card-kcs i[b-n4o3kdpvn7] {
        color: #2e7d32;
        font-size: 10px;
        margin-right: 2px;
    }

/* Card Row 4: Warehouse */
.trip-card-row4[b-n4o3kdpvn7] {
    border-top: 1px dashed #eee;
    padding-top: 4px;
}

.trip-card-warehouse[b-n4o3kdpvn7] {
    font-size: 11px;
    color: #666;
}

    .trip-card-warehouse i[b-n4o3kdpvn7] {
        color: #999;
        font-size: 10px;
        margin-right: 3px;
    }

/* ============ Grid Wrapper (fixed layout like ManageBarger) ============ */
.manage-trips-grid-wrapper[b-n4o3kdpvn7] {
    position: fixed;
    top: 100px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 61px;
    overflow-x: auto;
    overflow-y: auto;
    background: #f8f9fa;
    transition: left 0.3s ease;
}

/* Custom Scrollbar Styles */
.cards-container[b-n4o3kdpvn7]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.cards-container[b-n4o3kdpvn7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.cards-container[b-n4o3kdpvn7]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-light, #ca3c19), var(--primary-hover, #d96b47));
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

    .cards-container[b-n4o3kdpvn7]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
    }

.cards-container[b-n4o3kdpvn7] {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-light, #ca3c19) #f1f1f1;
}

.manage-trips-grid-wrapper[b-n4o3kdpvn7]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.manage-trips-grid-wrapper[b-n4o3kdpvn7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.manage-trips-grid-wrapper[b-n4o3kdpvn7]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-light, #ca3c19), var(--primary-hover, #d96b47));
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

    .manage-trips-grid-wrapper[b-n4o3kdpvn7]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, var(--primary-hover, #d96b47), var(--primary-color, #ca3c19));
    }

.manage-trips-grid-wrapper[b-n4o3kdpvn7]::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Firefox Scrollbar */
.manage-trips-grid-wrapper[b-n4o3kdpvn7] {
    scrollbar-width: auto;
    scrollbar-color: var(--primary-light, #ca3c19) #f1f1f1;
}

.sidebar-collapsed .manage-trips-grid-wrapper[b-n4o3kdpvn7] {
    left: var(--sidebar-collapsed-width);
}

@media (max-width: 1650px) {
    .cards-container[b-n4o3kdpvn7] {
        height: calc(100vh - 165px) !important;
    }
}

/* ============ Loading Skeleton ============ */
.loading-skeleton[b-n4o3kdpvn7] {
    padding: 16px;
}

.skeleton-schedule-card[b-n4o3kdpvn7] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.skeleton-schedule-header[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.skeleton-table[b-n4o3kdpvn7] {
    padding: 12px 16px;
}

.skeleton-table-row[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.skeleton-item[b-n4o3kdpvn7] {
    background: #e9ecef;
    border-radius: 4px;
}

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

@keyframes skeleton-pulse-b-n4o3kdpvn7 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============ Custom Group Header (ManageBarger pattern) ============ */
.custom-group-header[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    width: 100%;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    box-shadow: 0 1px 4px rgba(202, 60, 25, 0.15);
}

.rz-group-row > td[b-n4o3kdpvn7] {
    cursor: pointer;
    padding: 0px;
    padding-top: 0px;
}

.group-header-left[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding-left: 9px;
}

.group-schedule-id[b-n4o3kdpvn7] {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #fff 0%, #ffe8e1 100%);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-color, #ca3c19);
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.2);
    text-transform: uppercase;
    min-width: 40px;
    text-align: center;
}

.group-schedule-type[b-n4o3kdpvn7] {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ca3c19 0%, #ff6b35 100%);
    padding: 3px 6px;
    border-radius: 10px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
}

.group-divider[b-n4o3kdpvn7] {
    color: var(--primary-lighter, #f5c4b0);
    font-weight: 700;
    font-size: 9px;
}

.group-header-center[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

.group-info[b-n4o3kdpvn7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.group-info-button[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    position: relative;
}

.group-info-text[b-n4o3kdpvn7] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

.group-info-single-line .group-info-text[b-n4o3kdpvn7] {
    font-size: 11px;
    color: #000000 !important;
    font-weight: 500;
}

.group-header-right[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 250px;
    justify-content: flex-end;
}

.group-stat[b-n4o3kdpvn7] {
    font-size: 12px;
    font-weight: 600;
    color: black;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: default;
}

/* Icon styling in group header */
.group-header-left i[b-n4o3kdpvn7],
.group-header-center i[b-n4o3kdpvn7],
.group-header-right i[b-n4o3kdpvn7] {
    color: var(--primary-color, #ca3c19);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* ============ Status Pending ============ */

/* ============ Status Pills ============ */
.status-pill[b-n4o3kdpvn7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-notcheckin[b-n4o3kdpvn7] { background: #fff3cd; color: #856404; }
.status-checked[b-n4o3kdpvn7] { background: #d1ecf1; color: #0c5460; }
.status-arrivedpickup[b-n4o3kdpvn7] { background: #ffeeba; color: #856404; }
.status-pickuped[b-n4o3kdpvn7] { background: #ffe4c4; color: #e67e22; }
.status-arriveddelivery[b-n4o3kdpvn7] { background: #b8daff; color: #004085; }
.status-delivered[b-n4o3kdpvn7] { background: #d4edda; color: #155724; }
.status-changeddeliverycompany[b-n4o3kdpvn7] { background: #fff3cd; color: #856404; }
.status-cancel[b-n4o3kdpvn7] { background: #f8d7da; color: #721c24; }
.status-pending[b-n4o3kdpvn7] { background: #f5f5f5; color: #666; }
.status-waitingreturntowarehouse[b-n4o3kdpvn7] { background: #d1ecf1; color: #0c5460; }
.status-returnedtowarehouse[b-n4o3kdpvn7] { background: #d4edda; color: #155724; }
.status-emptydropoff[b-n4o3kdpvn7] { background: #efebe9; color: #4e342e; }

/* ============ KCS Timeline Status Pills ============ */
.status-kcs-pending[b-n4o3kdpvn7]    { background: #f5f5f5; color: #666; }
.status-kcs-picking[b-n4o3kdpvn7]    { background: #fff3cd; color: #856404; }
.status-kcs-pickuped[b-n4o3kdpvn7]   { background: #ffe4c4; color: #e67e22; }
.status-kcs-delivering[b-n4o3kdpvn7] { background: #b8daff; color: #004085; }
.status-kcs-delivered[b-n4o3kdpvn7]  { background: #d4edda; color: #155724; }

/* ============ Fumigation Badges ============ */
.badge-yes[b-n4o3kdpvn7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-no[b-n4o3kdpvn7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
}

/* ============ Action Column Button ============ */
.btn-action-menu[b-n4o3kdpvn7] {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s;
}

.btn-action-menu:hover[b-n4o3kdpvn7] {
    background: #f0f0f0;
    border-color: #ddd;
    color: #333;
}

.btn-action-menu:focus-visible[b-n4o3kdpvn7] {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
}

/* (Row cancelled handled by trip-card-cancelled) */

/* ============ Pagination (fixed bottom like ManageBarger) ============ */
.pager-container[b-n4o3kdpvn7] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 99;
    transition: left 0.3s ease;
    gap: 20px;
}

.sidebar-collapsed .pager-container[b-n4o3kdpvn7] {
    left: var(--sidebar-collapsed-width);
}

.pager-left[b-n4o3kdpvn7] {
    flex: 0 0 auto;
}

.pager-summary[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.summary-item[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
}

    .summary-item i[b-n4o3kdpvn7] {
        color: var(--primary-color, #ca3c19);
        font-size: 14px;
    }

.summary-label[b-n4o3kdpvn7] {
    color: #6c757d;
    font-weight: 600;
}

.summary-value[b-n4o3kdpvn7] {
    color: #212529;
    font-weight: 700;
    font-size: 12px;
}

/* Pager component styles */
.mainpager[b-n4o3kdpvn7] {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    position: static;
}

.e-parentmsgbar[b-n4o3kdpvn7] {
    display: none;
}

.mainpager .e-pagercontainer[b-n4o3kdpvn7] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainpager .e-numericitem[b-n4o3kdpvn7],
.mainpager .e-nextpage[b-n4o3kdpvn7],
.mainpager .e-prevpage[b-n4o3kdpvn7],
.mainpager .e-firstpage[b-n4o3kdpvn7],
.mainpager .e-lastpage[b-n4o3kdpvn7] {
    border-radius: 4px;
    margin: 0 2px;
}

/* ============ Mobile Action Sheet ============ */
.mobile-action-sheet .e-dlg-content[b-n4o3kdpvn7] {
    padding: 0 !important;
}

.action-sheet-list[b-n4o3kdpvn7] {
    display: flex;
    flex-direction: column;
}

.action-sheet-item[b-n4o3kdpvn7] {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: background 0.15s;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

.action-sheet-item:hover[b-n4o3kdpvn7] {
    background: #f5f5f5;
}

.action-sheet-item:focus-visible[b-n4o3kdpvn7] {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
}

.action-sheet-item:active[b-n4o3kdpvn7] {
    background: #e8e8e8;
    transform: scale(0.98);
}

.action-sheet-item i[b-n4o3kdpvn7] {
    width: 24px;
    margin-right: 12px;
    color: #666;
}

/* ============ KCS Dialog Content ============ */
.kcs-dialog-content[b-n4o3kdpvn7] {
    padding: 8px 0;
}

.toggle-group[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-group label[b-n4o3kdpvn7] {
    font-weight: 600;
    color: #333;
    min-width: 100px;
}

.toggle-switch[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label[b-n4o3kdpvn7] {
    font-size: 14px;
    color: #555;
}

.form-group[b-n4o3kdpvn7] {
    margin-bottom: 12px;
}

.form-group label[b-n4o3kdpvn7] {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.form-group textarea[b-n4o3kdpvn7] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    resize: vertical;
}

/* ============ KCS Status Section ============ */
.kcs-status-section[b-n4o3kdpvn7] {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
}

.kcs-status-section h6[b-n4o3kdpvn7] {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #ca3c19;
}

.kcs-status-section h6 i[b-n4o3kdpvn7] {
    margin-right: 6px;
}

.status-check-row[b-n4o3kdpvn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.status-check-row input[type="checkbox"][b-n4o3kdpvn7] {
    width: 18px;
    height: 18px;
    accent-color: #ca3c19;
}

.status-check-row input[type="checkbox"]:disabled[b-n4o3kdpvn7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-check-row label[b-n4o3kdpvn7] {
    font-size: 13px;
    color: #333;
    cursor: pointer;
    min-width: 140px;
}

.text-muted[b-n4o3kdpvn7] {
    color: #999 !important;
    cursor: not-allowed;
}

.timestamp[b-n4o3kdpvn7] {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin-left: auto;
}

/* Editable KCS datetime picker (Radzen renders its own DOM -> use ::deep) */
.status-check-row[b-n4o3kdpvn7]  .kcs-time-picker {
    margin-left: auto;
    width: 180px;
}

/* ============ Mobile Responsive ============ */
@media (max-width: 768px) {
    /* Override fixed positioning for mobile */
    .filters-container[b-n4o3kdpvn7] {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        background: white;
        padding: 4px 8px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        transition: none !important;
    }

    .manage-trips-grid-wrapper[b-n4o3kdpvn7] {
        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;
        overscroll-behavior: contain;
    }

    .page-content[b-n4o3kdpvn7] {
        padding-top: 0 !important;
        min-height: auto !important;
    }

    .sidebar-collapsed .filters-container[b-n4o3kdpvn7],
    .filters-container[b-n4o3kdpvn7] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .sidebar-collapsed .manage-trips-grid-wrapper[b-n4o3kdpvn7],
    .manage-trips-grid-wrapper[b-n4o3kdpvn7] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .pager-container[b-n4o3kdpvn7] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-direction: column;
        gap: 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-collapsed .pager-container[b-n4o3kdpvn7],
    .pager-container[b-n4o3kdpvn7] {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    .pager-summary[b-n4o3kdpvn7] {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .summary-item[b-n4o3kdpvn7] {
        flex: 1;
        justify-content: center;
        font-size: 11px;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 2px;
    }

    .summary-item i[b-n4o3kdpvn7] {
        display: none;
    }

    .summary-label[b-n4o3kdpvn7] {
        font-size: 10px;
    }

    .summary-value[b-n4o3kdpvn7] {
        font-size: 13px;
        color: var(--primary-color, #ca3c19);
    }

    .cards-container[b-n4o3kdpvn7] {
        height: auto;
        padding: 4px;
        overscroll-behavior: contain;
    }

    .trip-cards-grid[b-n4o3kdpvn7] {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 4px;
    }

    .trip-card[b-n4o3kdpvn7] {
        padding: 8px 10px;
        gap: 3px;
    }

    .trip-card-row1[b-n4o3kdpvn7] {
        flex-wrap: nowrap;
        gap: 4px;
        line-height: 1.2;
    }

    .trip-card-code[b-n4o3kdpvn7] {
        font-size: 12px;
        min-width: 60px;
    }

    .trip-card-captain[b-n4o3kdpvn7] {
        font-size: 11px;
    }

    .btn-action-menu[b-n4o3kdpvn7] {
        min-width: 36px;
        min-height: 36px;
        padding: 2px 4px;
        font-size: 14px;
    }

    .trip-card-row2[b-n4o3kdpvn7] {
        padding: 2px 0;
        gap: 8px;
        border-top: none;
    }

    .trip-card-row3[b-n4o3kdpvn7] {
        gap: 4px;
    }

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

    .filter-group-btn[b-n4o3kdpvn7] {
        grid-column: 1 / -1;
        justify-content: stretch;
        gap: 4px;
    }

        .filter-group-btn .filter-group[b-n4o3kdpvn7] {
            flex: 1;
        }

        .filter-group-btn :deep .etrans-btn-wrapper[b-n4o3kdpvn7] {
            width: 100%;
        }

        .filter-group-btn :deep .etrans-btn[b-n4o3kdpvn7] {
            width: 100%;
        }

    /* Mobile filter toggle mechanism */
    .filters-section[b-n4o3kdpvn7] {
        padding: 2px 4px;
        box-shadow: none;
        border-bottom: none;
    }

    .mobile-filter-header[b-n4o3kdpvn7] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
        cursor: pointer;
        font-weight: 600;
        color: #333;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-filter-title[b-n4o3kdpvn7] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-filter-toggle[b-n4o3kdpvn7] {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .mobile-filter-toggle:hover[b-n4o3kdpvn7] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-n4o3kdpvn7] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-n4o3kdpvn7] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-n4o3kdpvn7] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

        .mobile-filters-content.expanded[b-n4o3kdpvn7] {
            max-height: 500px;
            padding: 4px 0;
        }

    .filters-grid.mobile-compact-filters[b-n4o3kdpvn7] {
        grid-template-columns: 1fr !important;
        gap: 2px;
    }

    .mobile-compact-filters .filter-group[b-n4o3kdpvn7],
    .filters-grid.mobile-compact-filters > .filter-group[b-n4o3kdpvn7] {
        margin-bottom: 2px;
    }

    /* Group header mobile */
    .custom-group-header[b-n4o3kdpvn7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px;
    }

    .group-header-center[b-n4o3kdpvn7] {
        flex: 1;
        padding: 0 2px;
        overflow: visible;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .group-info-text[b-n4o3kdpvn7] {
        font-size: 11px;
    }

    .group-info-single-line .group-info-text[b-n4o3kdpvn7] {
        font-size: 11px;
        color: #000000 !important;
        max-width: none;
        min-width: 0;
        flex-shrink: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-info-button[b-n4o3kdpvn7] {
        flex-wrap: wrap;
        white-space: normal;
    }

    /* Pager buttons touch targets */
    .mainpager .e-numericitem[b-n4o3kdpvn7],
    .mainpager .e-nextpage[b-n4o3kdpvn7],
    .mainpager .e-prevpage[b-n4o3kdpvn7],
    .mainpager .e-firstpage[b-n4o3kdpvn7],
    .mainpager .e-lastpage[b-n4o3kdpvn7] {
        min-width: 36px;
        min-height: 36px;
    }

    /* Action sheet bottom-anchored */
    .mobile-action-sheet .e-dialog[b-n4o3kdpvn7] {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh;
        width: 100% !important;
        animation: slideUp-b-n4o3kdpvn7 0.25s ease-out;
    }

    /* KCS status row wrap + timestamp */
    .timestamp[b-n4o3kdpvn7] {
        width: 100%;
        margin-left: 30px;
        font-size: 11px;
    }

    /* Badges readability */
    .status-pill[b-n4o3kdpvn7] {
        font-size: 12px;
        padding: 3px 10px;
    }

    .badge-yes[b-n4o3kdpvn7], .badge-no[b-n4o3kdpvn7] {
        font-size: 12px;
        padding: 3px 10px;
    }

    /* Filter labels */
    .filter-group label[b-n4o3kdpvn7] {
        font-size: 0.75rem;
    }

    .qty-label[b-n4o3kdpvn7] {
        font-size: 12px;
    }

    .trip-card-kcs[b-n4o3kdpvn7] {
        font-size: 12px;
    }

    /* Touch targets */
    .btn-action-menu[b-n4o3kdpvn7] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-filter-toggle[b-n4o3kdpvn7] {
        min-height: 32px;
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .action-sheet-item[b-n4o3kdpvn7] {
        min-height: 48px;
        font-size: 16px;
    }

    .status-check-row[b-n4o3kdpvn7] {
        min-height: 44px;
        padding: 8px 0;
        flex-wrap: wrap;
    }

    .status-check-row input[type="checkbox"][b-n4o3kdpvn7] {
        width: 22px;
        height: 22px;
    }

    .status-check-row label[b-n4o3kdpvn7] {
        padding: 4px 0;
        font-size: 14px;
        min-width: 100px;
        flex: 1;
    }

    /* Group header mobile layout */
    .group-header-left[b-n4o3kdpvn7] {
        flex-wrap: wrap;
        width: 100%;
        min-width: auto;
    }

    .group-header-right[b-n4o3kdpvn7] {
        min-width: auto;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid rgba(202, 60, 25, 0.1);
    }

    .group-stat[b-n4o3kdpvn7] {
        font-size: 11px;
        background: rgba(202, 60, 25, 0.08);
        padding: 2px 8px;
        border-radius: 4px;
    }

    /* Card row1 mobile wrapping */
    .trip-card-captain[b-n4o3kdpvn7] {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .trip-card-barge[b-n4o3kdpvn7] {
        flex: 1 1 auto;
        order: 0;
        font-size: 11px;
    }

    .trip-card-row1 .btn-action-menu[b-n4o3kdpvn7] {
        order: 2;
    }

    /* Dialog responsive widths */
    .kcs-dialog .e-dialog[b-n4o3kdpvn7] {
        max-width: 95vw !important;
        width: 95vw !important;
    }

    .kcs-dialog .e-dlg-content[b-n4o3kdpvn7] {
        padding: 12px !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    .trip-card-row4[b-n4o3kdpvn7] {
        border-top: none;
        padding-top: 0;
    }

    .trip-card-warehouse[b-n4o3kdpvn7] {
        font-size: 10px;
        color: #888;
    }

    .kcs-dialog .e-footer-content .e-btn[b-n4o3kdpvn7] {
        min-height: 44px;
        font-size: 14px;
    }

    /* Filter input heights */
    .filter-group :deep .rz-textbox[b-n4o3kdpvn7],
    .filter-group :deep input[b-n4o3kdpvn7],
    .filter-group :deep .rz-datepicker-container[b-n4o3kdpvn7] {
        min-height: 44px;
        font-size: 16px;
    }

    /* Safe area insets */
    .mobile-action-sheet .e-dlg-content[b-n4o3kdpvn7] {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* iOS smooth scrolling */
    .cards-container[b-n4o3kdpvn7],
    .manage-trips-grid-wrapper[b-n4o3kdpvn7] {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .filters-grid[b-n4o3kdpvn7] {
        grid-template-columns: 1fr;
    }

    .page-header h5[b-n4o3kdpvn7] {
        font-size: 14px;
    }

    .group-schedule-type[b-n4o3kdpvn7] {
        font-size: 10px;
        padding: 2px 4px;
    }

    /* Trip code min-width on narrow screens */
    .trip-card-code[b-n4o3kdpvn7] {
        min-width: 60px;
        font-size: 12px;
    }

    .trip-card-captain[b-n4o3kdpvn7],
    .trip-card-barge[b-n4o3kdpvn7] {
        font-size: 11px;
    }

    .trip-card-qty[b-n4o3kdpvn7] {
        font-size: 11px;
    }

    .qty-label[b-n4o3kdpvn7] {
        font-size: 10px;
    }

    .group-schedule-id[b-n4o3kdpvn7] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .group-stat[b-n4o3kdpvn7] {
        font-size: 10px;
    }

    .status-pill[b-n4o3kdpvn7],
    .badge-yes[b-n4o3kdpvn7],
    .badge-no[b-n4o3kdpvn7] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .timestamp[b-n4o3kdpvn7] {
        margin-left: 20px;
    }
}

/* ============ Ultra-narrow (360px) ============ */
@media (max-width: 360px) {
    .trip-card-code[b-n4o3kdpvn7] {
        min-width: 50px;
        font-size: 11px;
    }

    .trip-card[b-n4o3kdpvn7] {
        padding: 8px;
    }

    .trip-card-row1[b-n4o3kdpvn7] {
        gap: 6px;
    }

    .trip-card-barge[b-n4o3kdpvn7] {
        flex: 1 1 100%;
        order: 3;
    }

    .status-check-row label[b-n4o3kdpvn7] {
        min-width: 80px;
        font-size: 12px;
    }

    .timestamp[b-n4o3kdpvn7] {
        margin-left: 10px;
        font-size: 10px;
    }

    .group-header-left[b-n4o3kdpvn7] {
        gap: 4px;
    }
}

/* ============ Touch Device Detection ============ */
@media (hover: none) and (pointer: coarse) {
    .trip-card:hover[b-n4o3kdpvn7] {
        border-color: #e9ecef;
        box-shadow: none;
        transform: none;
    }

    .trip-card:active[b-n4o3kdpvn7] {
        border-color: var(--primary-color, #ca3c19);
        background: #fef9f8;
    }

    .mobile-filter-toggle:hover[b-n4o3kdpvn7] {
        transform: none;
    }

    .btn-action-menu:hover[b-n4o3kdpvn7] {
        background: none;
        border-color: transparent;
        color: #666;
    }

    .btn-action-menu:active[b-n4o3kdpvn7] {
        background: #f0f0f0;
        border-color: #ddd;
    }

}

/* Action sheet slide-up animation */
@keyframes slideUp-b-n4o3kdpvn7 {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Action sheet drag handle */
.action-sheet-handle[b-n4o3kdpvn7] {
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 8px auto 4px;
}

/* Dialog header class (replaces inline styles) */
.dialog-header-title[b-n4o3kdpvn7] {
    margin: 0;
    font-weight: 600;
}
/* /Components/Pages/V2/Transport/Manage/ManageTruckV2.razor.rz.scp.css */
.status-0[b-pc2l3nkqs9] {
    background: #bfbfbf;
    color: white;
}

.status-1[b-pc2l3nkqs9] {
    background: #fff3cd;
    color: #856404;
}

.status-2[b-pc2l3nkqs9] {
    background: #d4edda;
    color: #155724;
}

.status-badge[b-pc2l3nkqs9] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.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;
}

/* CR_Fields.xlsx — cụm nút gán nhanh (Áp tải / Lót bạt / Bù tải).
   .filters-grid là grid CỘT CỨNG 150px nên MỖI con là MỘT ô: để 3 nút rời nhau thì chúng bị dàn
   xa như 3 ô lọc, và nút cuối rớt xuống dòng mới đứng lẻ loi bên trái khi hết cột. Gộp vào MỘT ô
   span 2 cột → 3 nút dính liền thành một cụm, xuống dòng cả cụm. */
.bulk-field-actions[b-pc2l3nkqs9] {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* thẳng đáy với ô lọc — ô lọc có nhãn phía trên nên cao hơn */
    gap: 4px;
}
/* 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;
    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-light, #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-light, #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;
}

.manage-trips-grid-wrapper[b-pc2l3nkqs9] {
    position: fixed;
    top: 220px;
}

@media (max-width: 1650px) {
    .manage-trips-grid-wrapper[b-pc2l3nkqs9] {
        position: fixed;
        top: 220px;
    }

    .radzen-grouped-grid-container[b-pc2l3nkqs9] {
        height: calc(100vh - 285px) !important;
        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 1 cột: cụm nút chiếm trọn hàng, giãn cách như .filter-group. */
    .bulk-field-actions[b-pc2l3nkqs9] {
        grid-column: 1 / -1;
        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] {
    height: calc(100vh - 285px);
    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;
        }

    /* Override hover for group header rows - apply to entire row */
    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-group-header:hover > td {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-group-header:hover {
        background: linear-gradient(135deg, #fef3e2 0%, #fde8c8 100%) !important;
    }

    .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: 16px 0px 16px 0px;
    width: 100%;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
    background: rgb(225 64 24 / 33%) !important;
    /*border-bottom: 1px solid #d75f0a;*/
}

[b-pc2l3nkqs9] .rz-group-row > td {
    cursor: pointer;
    padding: 0px;
    padding-top: 0px;
    /*background: linear-gradient(90deg, #ff8f73 0%, var(--primary-active), #ff8c42 50%, #ff6b35 75%, var(--primary-color, #ca3c19) 100%);*/
}


.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: 11px;
    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-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: black;
    padding: 3px 6px;
    border-radius: 8px;
    cursor: default;
}

.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-arrivedpickup[b-pc2l3nkqs9] {
        background: #ffeeba;
        color: #856404;
    }

    .status-badge.status-pickuped[b-pc2l3nkqs9] {
        background: #ffe4c4;
        color: #e67e22;
    }

    .status-badge.status-arriveddelivery[b-pc2l3nkqs9] {
        background: #b8daff;
        color: #004085;
    }

    .status-badge.status-delivered[b-pc2l3nkqs9] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-chuyendiem[b-pc2l3nkqs9] {
        background: #e7dcf7;
        color: #5b21b6;
    }

    .status-badge.status-trahang[b-pc2l3nkqs9] {
        background: #fde2e7;
        color: #ad1457;
    }

    .status-badge.status-datrahang[b-pc2l3nkqs9] {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.status-khonggiao[b-pc2l3nkqs9] {
        background: #f8d7da;
        color: #721c24;
    }

    .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;
    }

/* Modal footer buttons must not be constrained by the icon-only .btn rule */
.mtv2-modal-footer .btn[b-pc2l3nkqs9] {
    max-width: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

@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 Header Checkbox Alignment */
[b-pc2l3nkqs9] .rz-group-row .select-all-checkbox,
[b-pc2l3nkqs9] .custom-group-header .select-all-checkbox,
.group-header-left .select-all-checkbox[b-pc2l3nkqs9] {
    margin-right: 12px; /* Tạo khoảng cách với element tiếp theo */
}


.group-filter-button[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.filters-grid-btn[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: row;
}

/* Advanced Filter Dialog Styles */
.advanced-filter-dialog[b-pc2l3nkqs9] {
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.advanced-filters-grid[b-pc2l3nkqs9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 10px;
}

.advanced-filter-dialog .filter-group[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.advanced-filter-dialog .filter-label[b-pc2l3nkqs9] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

/* Fix dropdown z-index in dialog */
.advanced-filter-dialog .rz-dropdown-panel[b-pc2l3nkqs9],
.advanced-filter-dialog .rz-popup[b-pc2l3nkqs9],
.rz-dropdown-panel[b-pc2l3nkqs9],
.rz-popup[b-pc2l3nkqs9] {
    z-index: 99999 !important;
}

.advanced-filter-dialog .filter-input[b-pc2l3nkqs9],
.advanced-filter-dialog .filter-select[b-pc2l3nkqs9] {
    width: 100%;
}

/* Advanced Filter Dialog Footer Buttons */
.advanced-filter-dialog-footer[b-pc2l3nkqs9] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 4px 0;
}

.btn-advanced-filter[b-pc2l3nkqs9] {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 70px;
}

    .btn-advanced-filter.btn-apply[b-pc2l3nkqs9] {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-pc2l3nkqs9] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-pc2l3nkqs9] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-pc2l3nkqs9] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-pc2l3nkqs9] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-pc2l3nkqs9] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-pc2l3nkqs9] {
    border: 1.5px solid var(--primary-color) !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-pc2l3nkqs9] {
        background-color: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-pc2l3nkqs9] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-pc2l3nkqs9] {
        color: inherit !important;
    }

@media (max-width: 768px) {
    .advanced-filters-grid[b-pc2l3nkqs9] {
        grid-template-columns: 1fr;
    }

    .advanced-filter-dialog-footer[b-pc2l3nkqs9] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-pc2l3nkqs9] {
        width: 100%;
    }
}


/* 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-dark, #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-dark, #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;
        }
}

/* Advanced Filters Panel - Positioned right below base filters and overlay section 2 */
.advanced-filters-panel[b-pc2l3nkqs9] {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 200px);
    max-width: 1000px;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000; 
    max-height: 0;
    overflow: hidden; 
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2px; 
}

    .advanced-filters-panel.expanded[b-pc2l3nkqs9] {
        max-height: 500px;
        opacity: 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        overflow: visible; 
        pointer-events: auto;
        margin-left: 5px;
    }

.advanced-filters-content[b-pc2l3nkqs9] {
    padding: 20px;
    position: relative;
    z-index: 2001; 
    background: white; 
    border-radius: 20px;
}

.advanced-filters-header[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

    .advanced-filters-header h6[b-pc2l3nkqs9] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .advanced-filters-header i[b-pc2l3nkqs9] {
        margin-right: 8px;
        color: var(--primary-color, #ff9800);
    }

.advanced-filters-grid[b-pc2l3nkqs9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.advanced-filters-panel .filter-group[b-pc2l3nkqs9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.advanced-filters-panel .filter-label[b-pc2l3nkqs9] {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.advanced-filters-actions[b-pc2l3nkqs9] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.btn-advanced-filter[b-pc2l3nkqs9] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 100px;
}

    .btn-advanced-filter.btn-apply[b-pc2l3nkqs9] {
        background-color: var(--primary-color, #ff9800);
        color: white;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
    }

        .btn-advanced-filter.btn-apply:hover[b-pc2l3nkqs9] {
            background-color: #f57c00;
            box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-apply:active[b-pc2l3nkqs9] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
        }

    .btn-advanced-filter.btn-close-filter[b-pc2l3nkqs9] {
        background-color: #f5f5f5;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .btn-advanced-filter.btn-close-filter:hover[b-pc2l3nkqs9] {
            background-color: #e0e0e0;
            color: #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .btn-advanced-filter.btn-close-filter:active[b-pc2l3nkqs9] {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

/* Button Filter Nâng Cao - Outline Style */
.btn-advanced-filter-outline[b-pc2l3nkqs9] {
    border: 2px solid var(--primary-color, #ff9800) !important;
    background-color: transparent !important;
    color: var(--primary-color, #ff9800) !important;
    transition: all 0.3s ease !important;
}

    .btn-advanced-filter-outline:hover[b-pc2l3nkqs9] {
        background-color: var(--primary-color, #ff9800) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
        transform: translateY(-1px);
    }

    .btn-advanced-filter-outline:active[b-pc2l3nkqs9] {
        transform: translateY(0);
    }

    .btn-advanced-filter-outline .etrans-button-icon[b-pc2l3nkqs9] {
        color: inherit !important;
    }

/* Ensure parent container has relative positioning */
.filters-section[b-pc2l3nkqs9] {
    position: relative;
}

/* Fix dropdown z-index to appear above panel */
[b-pc2l3nkqs9] .rz-dropdown-panel,
[b-pc2l3nkqs9] .rz-popup {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .advanced-filters-grid[b-pc2l3nkqs9] {
        grid-template-columns: 1fr;
    }

    .advanced-filters-actions[b-pc2l3nkqs9] {
        flex-direction: column;
    }

    .btn-advanced-filter[b-pc2l3nkqs9] {
        width: 100%;
    }

    .advanced-filters-panel.expanded[b-pc2l3nkqs9] {
        max-height: 800px;
    }
    
    /* Mobile: Advanced panel full width và đảm bảo z-index cao */
    .advanced-filters-panel[b-pc2l3nkqs9] {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2000 !important; /* Đảm bảo z-index cao trên mobile */
        overflow: visible !important;
    }
    
    .advanced-filters-content[b-pc2l3nkqs9] {
        z-index: 2001 !important;
    }
}

/* Group Border Styling - Tạo border cho từng group để dễ phân biệt */

/* Border cho group header */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row {
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.1) !important;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    position: relative;
    overflow: hidden;
}

    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row:first-child {
        margin-top: 0 !important;
    }

    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row > td {
        border-left: none !important;
        border-right: none !important;
    }

/* Border cho các dòng data trong group */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
}

/* Dòng cuối cùng của mỗi group */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row ~ tr:not(.rz-group-row) {
    border-left: 2px solid var(--primary-color, #ca3c19) !important;
    border-right: 2px solid var(--primary-color, #ca3c19) !important;
}

    /* Dòng cuối trong group sẽ có border-bottom đậm và bo góc */
    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row ~ tr:not(.rz-group-row):last-child,
    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data tr:not(.rz-group-row):has(+ .rz-group-row) {
        border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
        border-radius: 0 0 8px 8px !important;
    }

/* Xử lý trường hợp dòng cuối cùng của bảng */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-datatable-data tr:last-child:not(.rz-group-row) {
    border-bottom: 2px solid var(--primary-color, #ca3c19) !important;
    border-radius: 0 0 8px 8px !important;
}


/* Background cho group để tạo sự tương phản */
.radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row ~ tr:not(.rz-group-row) {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

    .radzen-grouped-grid-container[b-pc2l3nkqs9]  .rz-group-row ~ tr:not(.rz-group-row):nth-child(even) {
        background-color: rgba(248, 249, 250, 0.98) !important;
    }

/* Enhanced Group Header Styling - Đẹp và nổi bật hơn */



@keyframes header-glow-b-pc2l3nkqs9 {
    0% {
        opacity: 0.8;
        transform: scaleX(1);
    }

    100% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Cải thiện style cho custom group header */
[b-pc2l3nkqs9] .custom-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    width: 100%;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #fff8f5 0%, #fef3e2 50%, #fff0e6 100%) !important;
    box-shadow: 0 1px 4px rgba(202, 60, 25, 0.15);
}

    /* Hover effect cho group header */
    /*::deep .custom-group-header:hover {
        background: linear-gradient(135deg, #fef7f0 0%, #fbbd91c2 50%, #ffeaa7 100%) !important;
        box-shadow: 0 4px 16px rgba(202, 60, 25, 0.25);
        transform: translateY(-1px);
    }*/

/* Enhanced group header left section - Align với checkbox column */
.group-header-left[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding-left: 9px;
}

    /* Tạo space cho checkbox giống như column layout */
    .group-header-left .checkbox-space[b-pc2l3nkqs9] {
        width: 40px; /* Match checkbox column width */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    /* Style cho checkbox trong group header */
    .group-header-left .select-all-checkbox[b-pc2l3nkqs9] {
        margin: 0;
    }

/* Highlight Schedule ID với style đặc biệt - Bỏ hover */
.group-schedule-id[b-pc2l3nkqs9] {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color, #ca3c19);
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #fff 0%, #ffe8e1 100%);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-color, #ca3c19);
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.2);
    position: relative;
    text-transform: uppercase;
    min-width: 40px;
    text-align: center;
}

/* Highlight ngày với animation */
.group-info.date-highlight[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #3b82f6;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
    animation: date-pulse-b-pc2l3nkqs9 2s ease-in-out infinite;
    position: relative;
}

@keyframes date-pulse-b-pc2l3nkqs9 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
}

/* Enhanced group schedule type badge - Ngày xuất với màu giống hover của Lịch */
.group-schedule-type[b-pc2l3nkqs9] {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ca3c19 0%, #ff6b35 100%);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--primary-color, #ca3c19);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 4px rgba(202, 60, 25, 0.3);
}

/* Enhanced group header center */
.group-header-center[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    gap: 6px;
    flex: 1;
    font-size: 11px;
    color: #000000; /* Màu đen tuyền */
    overflow: hidden;
    padding: 0 8px;
}

/* Group Info Button - Button Inner Style (Lõm xuống) */
.group-info-button[b-pc2l3nkqs9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    color: #333;
    border: 2px solid white;
    border-radius: 50px;
    font-size: 11px;
    cursor: default;
    /* Inner shadow effect với viền trắng mềm mại */
    box-shadow: 
        inset 3px 3px 8px rgba(0, 0, 0, 0.08),
        inset -3px -3px 8px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    position: relative;
}

/* Text bên trong button */
.group-info-text[b-pc2l3nkqs9] {
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

/* Divider bên trong button */
.group-info-button .group-divider[b-pc2l3nkqs9] {
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Info icon bên trong button */
.group-info-button .info-icon[b-pc2l3nkqs9] {
    font-size: 10px;
    color: #6b7280;
    margin-left: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Group Info Button Secondary - Cụm thông tin bổ sung */
.group-info-secondary[b-pc2l3nkqs9] {
    margin-left: 8px;
    /* Hoàn toàn giống group chính */
    background: white;
    border: 2px solid white;
    box-shadow: 
        inset 3px 3px 8px rgba(0, 0, 0, 0.08),
        inset -3px -3px 8px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Căn giữa riêng cho group 2 */
.group-info-centered[b-pc2l3nkqs9] {
    margin-left: auto;
    margin-right: auto;
}

.group-info-secondary .group-info-text[b-pc2l3nkqs9] {
    /* Giống hoàn toàn group chính */
    color: #374151;
    font-weight: 500;
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Single Line Group Info - Gộp tất cả thông tin thành một dòng */
.group-info-single-line[b-pc2l3nkqs9] {
    /* Kế thừa từ group-info-button nhưng có thể wrap nếu cần */
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
    /* Tăng padding để có nhiều chỗ hơn */
    padding: 10px 20px;
    /* Font size 11 theo yêu cầu */
    font-size: 11px;
    /* Căn giữa hoàn toàn */
    margin: 0 auto;
    text-align: center;
}

.group-info-single-line .group-info-text[b-pc2l3nkqs9] {
    font-size: 11px;
    /* Màu đen tuyền */
    color: #000000 !important;
    font-weight: 500;
    /* Cho phép text wrap nếu quá dài */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* Giới hạn độ rộng mỗi text */
    /* Loại bỏ text-shadow để màu đen tuyền rõ ràng */
    text-shadow: none;
}

.group-info-single-line .group-divider[b-pc2l3nkqs9] {
    font-size: 10px;
    margin: 0 4px; /* Giảm margin để tiết kiệm không gian */
    /* Màu đen tuyền cho divider */
    color: #000000 !important;
    text-shadow: none;
}

.group-info-secondary .group-divider[b-pc2l3nkqs9] {
    /* Giống hoàn toàn group chính */
    color: #6b7280;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Enhanced group info items */
.group-info[b-pc2l3nkqs9] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .group-info:hover[b-pc2l3nkqs9] {
        background: rgba(255, 255, 255, 0.9);
        border-color: var(--primary-color, #ca3c19);
        color: var(--primary-color, #ca3c19);
        transform: scale(1);
    }

/* Enhanced dividers */
.group-divider[b-pc2l3nkqs9] {
    color: var(--primary-color, #ca3c19);
    font-weight: 700;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* Enhanced group header right section */
.group-header-right[b-pc2l3nkqs9] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    justify-content: flex-end;
    padding-right: 10px;
}



    
/* Special highlight for important info */
.group-info.highlight[b-pc2l3nkqs9] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffc107;
    font-weight: 600;
    animation: info-glow-b-pc2l3nkqs9 2s ease-in-out infinite alternate;
}

@keyframes info-glow-b-pc2l3nkqs9 {
    0% {
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    }

    100% {
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.5);
    }
}

/* Icon styling in group header */
.group-header-left i[b-pc2l3nkqs9],
.group-header-center i[b-pc2l3nkqs9],
.group-header-right i[b-pc2l3nkqs9] {
    color: var(--primary-color, #ca3c19);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .group-header-left i:hover[b-pc2l3nkqs9],
    .group-header-center i:hover[b-pc2l3nkqs9],
    .group-header-right i:hover[b-pc2l3nkqs9] {
        color: #ff6b35;
        transform: scale(1.2);
    }

/* Responsive adjustments */
@media (max-width: 1400px) {
    .group-header-left[b-pc2l3nkqs9] {
        min-width: 120px;
        gap: 6px;
    }

        .group-header-left .checkbox-space[b-pc2l3nkqs9] {
            width: 35px; /* Slightly smaller on medium screens */
        }

    .group-schedule-id[b-pc2l3nkqs9] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .group-header-right[b-pc2l3nkqs9] {
        min-width: 125px;
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    [b-pc2l3nkqs9] .custom-group-header {
        flex-wrap: nowrap;
        padding: 8px 4px;
        gap: 4px;
    }

    .group-header-left[b-pc2l3nkqs9] {
        min-width: auto;
        padding-left: 4px; /* Maintain checkbox alignment */
        flex-shrink: 0;
    }

        .group-header-left .checkbox-space[b-pc2l3nkqs9] {
            width: 30px; /* Smaller on tablets */
        }

    .group-header-center[b-pc2l3nkqs9] {
        flex: 1;
        padding: 0 4px;
        flex-wrap: nowrap;
        gap: 2px;
        overflow: hidden;
    }

    .group-header-right[b-pc2l3nkqs9] {
        min-width: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    [b-pc2l3nkqs9] .custom-group-header {
        flex-wrap: nowrap;
        padding: 6px 2px;
        gap: 2px;
    }

    .group-header-left[b-pc2l3nkqs9] {
        padding-left: 2px; /* Tighter spacing on mobile */
        flex-shrink: 0;
        gap: 4px;
    }

        .group-header-left .checkbox-space[b-pc2l3nkqs9] {
            width: 25px; /* Smallest on mobile */
        }

    .group-schedule-id[b-pc2l3nkqs9] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-schedule-type[b-pc2l3nkqs9] {
        font-size: 9px;
        padding: 2px 4px;
    }

    .group-header-center[b-pc2l3nkqs9] {
        flex: 1;
        padding: 0 2px;
        overflow: hidden;
        min-width: 0;
    }

    .group-header-right[b-pc2l3nkqs9] {
        flex-shrink: 0;
        gap: 4px;
        padding-right: 2px;
    }

    .group-stat[b-pc2l3nkqs9] {
        font-size: 9px;
        padding: 3px 5px;
        color: black;
    }

    .group-info.date-highlight[b-pc2l3nkqs9] {
        font-size: 8px;
        padding: 2px 4px;
    }

    /* Responsive cho group info button */
    .group-info-button[b-pc2l3nkqs9] {
        padding: 4px 8px;
        font-size: 9px;
        gap: 2px;
        overflow: hidden;
        max-width: 100%;
        border: 2px solid white;
        border-radius: 50px;
        /* Giữ hiệu ứng inner trên mobile với viền trắng mềm mại */
        box-shadow: 
            inset 2px 2px 5px rgba(0, 0, 0, 0.08),
            inset -2px -2px 5px rgba(255, 255, 255, 0.9),
            0 1px 3px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .group-info-text[b-pc2l3nkqs9] {
        font-size: 9px;
    }

    .group-info-button .group-divider[b-pc2l3nkqs9] {
        font-size: 8px;
    }

    .group-info-button .info-icon[b-pc2l3nkqs9] {
        font-size: 8px;
    }

    /* Responsive cho single line layout - giữ trên 1 dòng */
    .group-info-single-line[b-pc2l3nkqs9] {
        padding: 4px 8px;
        font-size: 9px;
        flex-direction: row; /* Giữ nguyên hướng ngang */
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex-wrap: nowrap; /* Không cho wrap */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-info-single-line .group-info-text[b-pc2l3nkqs9] {
        font-size: 9px;
        color: #000000 !important; /* Màu đen tuyền */
        text-shadow: none;
        max-width: 80px; /* Giảm width trên mobile */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-info-single-line .group-divider[b-pc2l3nkqs9] {
        font-size: 8px;
        color: #000000 !important; /* Màu đen tuyền */
        text-shadow: none;
        margin: 0 1px;
        flex-shrink: 0;
    }

    /* Responsive cho cụm thông tin thứ hai */
    .group-info-secondary[b-pc2l3nkqs9] {
        margin-left: 2px;
        /* Giống responsive của group chính */
        border: 2px solid white;
        border-radius: 50px;
        box-shadow: 
            inset 2px 2px 5px rgba(0, 0, 0, 0.08),
            inset -2px -2px 5px rgba(255, 255, 255, 0.9),
            0 1px 3px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .group-info-secondary .group-info-text[b-pc2l3nkqs9] {
        font-size: 9px;
    }

    .group-info-secondary .group-divider[b-pc2l3nkqs9] {
        font-size: 8px;
    }
}

/* RadZen DataGrid Row Hover Effect - Class-based approach */
.trips-grid-row[b-pc2l3nkqs9] {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.hoverable-row[b-pc2l3nkqs9] {
    transition: background-color 0.2s ease;
    cursor: pointer;
    background-color: #f8f9fa !important;
}

/* Hover effect cho data rows */
.trips-grid-row:hover[b-pc2l3nkqs9],
.hoverable-row:hover[b-pc2l3nkqs9] {
    background-color: #f8f9fa !important;
}

/* Selected row styling */
.trips-grid-row.selected[b-pc2l3nkqs9],
.hoverable-row.selected[b-pc2l3nkqs9] {
/*    background-color: rgba(233, 236, 239, 0.8) !important;*/
}

        .hoverable-row.selected:hover[b-pc2l3nkqs9] {
            background-color: rgba(0, 123, 255, 0.25) !important;
        }

    /* Ensure cells inherit background */
    .hoverable-row:hover td[b-pc2l3nkqs9] {
        background-color: transparent !important;
    }

/* RadZen DataGrid Hover - Class-based approach tốt hơn */
[b-pc2l3nkqs9] .rz-datatable-data tr.trips-grid-row:hover,
[b-pc2l3nkqs9] .rz-datatable-data tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
}

/* Đảm bảo cells trong dòng hover không bị override */
[b-pc2l3nkqs9] .rz-datatable-data tr.trips-grid-row:hover td,
[b-pc2l3nkqs9] .rz-datatable-data tr.hoverable-row:hover td {
    background-color: inherit !important;
}

/* Selected rows */
[b-pc2l3nkqs9] .rz-datatable-data tr.trips-grid-row.selected,
[b-pc2l3nkqs9] .rz-datatable-data tr.hoverable-row.selected {
   /* background-color: rgba(233, 236, 239, 0.8) !important;*/
}

/* Group row hover effect - giữ nguyên, không hover group headers */
[b-pc2l3nkqs9] .rz-datatable-data tr.rz-group-row:hover {
    background-color: initial !important;
}

/* Row hover effects - Multiple approaches to ensure compatibility */
[b-pc2l3nkqs9] .trips-data-grid .trips-grid-row:hover,
[b-pc2l3nkqs9] .trips-data-grid tr.trips-grid-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

[b-pc2l3nkqs9] .trips-data-grid .trips-grid-row:hover td,
[b-pc2l3nkqs9] .trips-data-grid tr.trips-grid-row:hover td {
    background-color: #f8f9fa !important;
}

/* Selection styles */
[b-pc2l3nkqs9] .trips-data-grid .trips-grid-row.selected,
[b-pc2l3nkqs9] .trips-data-grid tr.trips-grid-row.selected,
[b-pc2l3nkqs9] .trips-data-grid .rz-state-highlight {
    /*background-color: #ffb596 !important;*/
}

[b-pc2l3nkqs9] .trips-data-grid .trips-grid-row.selected td,
[b-pc2l3nkqs9] .trips-data-grid tr.trips-grid-row.selected td,
[b-pc2l3nkqs9] .trips-data-grid .rz-state-highlight td {
    /*background-color: #ffb596 !important;*/
}

/* Radzen specific selectors */
[b-pc2l3nkqs9] .trips-data-grid tbody tr:hover {
    background-color: #f8f9fa !important;
}

[b-pc2l3nkqs9] .trips-data-grid tbody tr:hover td {
    background-color: #f8f9fa !important;
}

/* Fallback selectors for maximum compatibility */
[b-pc2l3nkqs9] .rz-datatable-data tr:hover,
[b-pc2l3nkqs9] .rz-datatable tbody tr:hover,
[b-pc2l3nkqs9] tr.trips-grid-row:hover,
[b-pc2l3nkqs9] tr.hoverable-row:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease !important;
}

[b-pc2l3nkqs9] .rz-datatable-data tr:hover td,
[b-pc2l3nkqs9] .rz-datatable tbody tr:hover td,
[b-pc2l3nkqs9] tr.trips-grid-row:hover td,
[b-pc2l3nkqs9] tr.hoverable-row:hover td {
    background-color: #f8f9fa !important;
}

[b-pc2l3nkqs9] .rz-datatable-data tr.rz-state-highlight,
[b-pc2l3nkqs9] .rz-datatable-data tr.rz-state-highlight td {
    background-color: #ffb596 !important;
    color: var(--primary-text) !important;
}

/* Căn giữa cột Tình trạng */
[b-pc2l3nkqs9] .col-status,
[b-pc2l3nkqs9] .col-status .status-badge {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
/* /Components/Pages/V2/Transport/Manage/WeatherUpdate.razor.rz.scp.css */
/* Weather Update Page */
.page-content[b-la4re67pec] {
    padding: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.weather-page-header[b-la4re67pec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .weather-page-header h5[b-la4re67pec] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }

        .weather-page-header h5 i[b-la4re67pec] {
            color: #1a73e8;
            margin-right: 8px;
        }

/* Filter Bar */
.weather-filter-bar[b-la4re67pec] {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .weather-filter-bar .form-group[b-la4re67pec] {
        margin-bottom: 0;
    }

.weather-filter-actions[b-la4re67pec] {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .weather-filter-bar[b-la4re67pec] {
        grid-template-columns: 1fr;
    }
}

/* Content Card */
.weather-content[b-la4re67pec] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

/* Table */
.weather-table[b-la4re67pec] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .weather-table th[b-la4re67pec] {
        background: #f8f9fa;
        padding: 10px 12px;
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        color: #555;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .weather-table td[b-la4re67pec] {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
    }

    .weather-table tbody tr:hover[b-la4re67pec] {
        background: #f8f9fa;
    }

    .weather-table th:first-child[b-la4re67pec],
    .weather-table td:first-child[b-la4re67pec] {
        width: 50px;
        text-align: center;
    }

.nowrap[b-la4re67pec] {
    white-space: nowrap;
}

.weather-condition-cell[b-la4re67pec] {
    word-break: break-word;
}

.action-cell[b-la4re67pec] {
    white-space: nowrap;
    text-align: center;
}

/* Action Buttons */
.btn-weather-action[b-la4re67pec] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.btn-weather-edit[b-la4re67pec] {
    color: #1a73e8;
}

    .btn-weather-edit:hover[b-la4re67pec] {
        background: #e8f0fe;
        color: #1557b0;
    }

.btn-weather-delete[b-la4re67pec] {
    color: #dc3545;
}

    .btn-weather-delete:hover[b-la4re67pec] {
        background: #fff5f5;
        color: #c82333;
    }

.btn-weather-action:focus-visible[b-la4re67pec] {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Empty State */
.empty-state[b-la4re67pec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: #999;
}

    .empty-state i[b-la4re67pec] {
        font-size: 48px;
        margin-bottom: 12px;
        color: #ccc;
    }

    .empty-state p[b-la4re67pec] {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: #666;
    }

    .empty-state span[b-la4re67pec] {
        font-size: 13px;
        color: #999;
    }

/* Loading Skeleton */
.loading-skeleton[b-la4re67pec] {
    padding: 16px;
}

.skeleton-row[b-la4re67pec] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f8f9fa;
}

.skeleton-item[b-la4re67pec] {
    background: #e9ecef;
    border-radius: 4px;
}

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

@keyframes skeleton-pulse-b-la4re67pec {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Dialog */
.dialog-content[b-la4re67pec] {
    padding: 8px 0;
    /* KHÔNG dùng overflow:hidden ở đây để không cắt dropdown */
}

.form-group[b-la4re67pec] {
    margin-bottom: 12px;
}

    .form-group label[b-la4re67pec] {
        display: block;
        font-weight: 600;
        font-size: 13px;
        color: #333;
        margin-bottom: 4px;
    }

    .form-group textarea[b-la4re67pec] {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px;
        font-size: 13px;
        resize: vertical;
    }

.dialog-header-title[b-la4re67pec] {
    margin: 0;
    font-weight: 600;
}

/* Desktop/Mobile Visibility */
.mobile-only[b-la4re67pec] {
    display: none;
}

.desktop-only[b-la4re67pec] {
    display: table;
}

/* Mobile Cards */
.weather-cards[b-la4re67pec] {
    padding: 8px;
    flex-direction: column;
    gap: 8px;
}

.weather-card[b-la4re67pec] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
}

.weather-card-header[b-la4re67pec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.weather-card-date[b-la4re67pec] {
    font-weight: 700;
    font-size: 14px;
    color: #1a73e8;
}

    .weather-card-date i[b-la4re67pec] {
        margin-right: 6px;
        font-size: 13px;
    }

.weather-card-actions[b-la4re67pec] {
    display: flex;
    gap: 4px;
}

.weather-card-time[b-la4re67pec] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.weather-card-condition[b-la4re67pec] {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-word;
}

.weather-card-footer[b-la4re67pec] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #888;
}

    .weather-card-footer i[b-la4re67pec] {
        margin-right: 4px;
        font-size: 11px;
    }

/* ============================================================
   TIME PICKER — wrapper (chỉ là input container, không có dropdown)
   ============================================================ */
.time-picker-wrapper[b-la4re67pec] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 40px;
    /* KHÔNG dùng overflow:hidden */
}

    .time-picker-wrapper:hover[b-la4re67pec] {
        border-color: #a0aec0;
    }

    .time-picker-wrapper.focused[b-la4re67pec] {
        border-color: #1a73e8;
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
    }

.time-icon[b-la4re67pec] {
    padding: 0 10px;
    color: #1a73e8;
    font-size: 13px;
    flex-shrink: 0;
}

.time-picker-input[b-la4re67pec] {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 4px;
    font-size: 14px;
    background: transparent;
    color: #333;
    min-width: 0;
    letter-spacing: 0.5px;
}

    .time-picker-input[b-la4re67pec]::placeholder {
        color: #adb5bd;
        letter-spacing: 0;
    }

.chevron-icon[b-la4re67pec] {
    padding: 0 10px;
    color: #6c757d;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    flex-shrink: 0;
}

    .chevron-icon:hover[b-la4re67pec] {
        color: #1a73e8;
    }

    .chevron-icon.open[b-la4re67pec] {
        transform: rotate(180deg);
        color: #1a73e8;
    }

/* ============================================================
   TIME DROPDOWN — render ngoài dialog dùng position:fixed
   Tọa độ được tính từ JS getBoundingClientRect()
   ============================================================ */
.time-dropdown-fixed[b-la4re67pec] {
    position: fixed; /* thoát khỏi mọi overflow của dialog */
    z-index: 99999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    /* animation nhẹ */
    animation: dropdown-in-b-la4re67pec 0.12s ease;
    /* Đảm bảo không bị browser layout đẩy lên trên */
    transform-origin: top left;
}

@keyframes dropdown-in-b-la4re67pec {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.time-dropdown-fixed[b-la4re67pec]::-webkit-scrollbar {
    width: 4px;
}

.time-dropdown-fixed[b-la4re67pec]::-webkit-scrollbar-track {
    background: transparent;
}

.time-dropdown-fixed[b-la4re67pec]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

/* Backdrop để click ra ngoài đóng dropdown */
.time-dropdown-backdrop[b-la4re67pec] {
    position: fixed;
    inset: 0;
    z-index: 99998; /* ngay dưới dropdown */
    background: transparent;
}

/* ============================================================
   TIME OPTION items (dùng chung cho cả fixed dropdown)
   ============================================================ */
.time-option[b-la4re67pec] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13.5px;
    cursor: pointer;
    color: #374151;
    transition: background 0.12s;
}

    .time-option:hover[b-la4re67pec] {
        background: #eff6ff;
        color: #1a73e8;
    }

    .time-option.selected[b-la4re67pec] {
        background: #dbeafe;
        color: #1a73e8;
        font-weight: 600;
    }

        .time-option.selected .option-icon[b-la4re67pec] {
            color: #1a73e8;
        }

.option-icon[b-la4re67pec] {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
}

.time-option-empty[b-la4re67pec] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    font-size: 13px;
    color: #9ca3af;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 768px) {
    .page-content[b-la4re67pec] {
        padding: 8px;
    }

    .weather-page-header[b-la4re67pec] {
        padding: 10px 12px;
        border-radius: 6px;
        margin-bottom: 8px;
    }

        .weather-page-header h5[b-la4re67pec] {
            font-size: 14px;
        }

    .desktop-only[b-la4re67pec] {
        display: none;
    }

    .mobile-only[b-la4re67pec] {
        display: flex;
    }

    .btn-weather-action[b-la4re67pec] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    /* Dialog inputs iOS zoom prevention + touch targets */
    .weather-dialog .form-group textarea[b-la4re67pec],
    .weather-dialog .form-group :deep .rz-datepicker > .rz-inputtext[b-la4re67pec],
    .weather-dialog .form-group :deep input[b-la4re67pec] {
        font-size: 16px !important;
        min-height: 44px;
    }

    .weather-dialog .e-dialog[b-la4re67pec] {
        max-width: 95vw !important;
        width: 95vw !important;
    }

    .weather-dialog .e-dlg-content[b-la4re67pec] {
        padding: 12px !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    .weather-dialog .e-footer-content .e-btn[b-la4re67pec] {
        min-height: 44px;
        font-size: 14px;
    }

    /* Dropdown cũng responsive theo viewport trên mobile */
    .time-dropdown-fixed[b-la4re67pec] {
        max-height: 160px;
    }
}

/* Touch Device */
@media (hover: none) and (pointer: coarse) {
    .weather-table tbody tr:hover[b-la4re67pec] {
        background: transparent;
    }

    .btn-weather-action:hover[b-la4re67pec] {
        background: none;
    }

    .btn-weather-edit:active[b-la4re67pec] {
        background: #e8f0fe;
    }

    .btn-weather-delete:active[b-la4re67pec] {
        background: #fff5f5;
    }
}
/* /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);
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TransferHistoryModal.razor.rz.scp.css */
.transfer-medium-modal[b-ehsj9ph5fz] {
        max-width: 900px;
        width: 92vw;
        max-height: 92vh;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .transfer-modal-overlay[b-ehsj9ph5fz] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        padding: 20px;
        box-sizing: border-box;
    }

    .transfer-modal-header[b-ehsj9ph5fz] {
        padding: 16px 20px;
        background: #0d6efd;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }

    .transfer-modal-title[b-ehsj9ph5fz] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .transfer-modal-close[b-ehsj9ph5fz] {
        background: none;
        border: none;
        font-size: 24px;
        color: #fff;
        opacity: 0.8;
    }

        .transfer-modal-close:hover[b-ehsj9ph5fz] {
            opacity: 1;
        }

    .transfer-modal-body[b-ehsj9ph5fz] {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: white;
    }

    .transfer-modal-footer[b-ehsj9ph5fz] {
        padding: 12px 20px;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        text-align: right;
        flex-shrink: 0;
    }

    /* Bảng rõ ràng, chữ đen đậm */
    .transfer-history-grid .rz-cell-data[b-ehsj9ph5fz],
    .transfer-history-grid .rz-header-content[b-ehsj9ph5fz] {
        text-align: center !important;
        justify-content: center !important;
        font-weight: 600 !important;
        color: #212529 !important;
    }

    .transfer-history-grid .rz-cell-data[b-ehsj9ph5fz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px !important;
        line-height: 1.4;
    }

    .transfer-history-grid .badge[b-ehsj9ph5fz] {
        font-size: 12px;
        min-width: 80px;
    }

    .transfer-spinner[b-ehsj9ph5fz] {
        border: 4px solid #f0f0f0;
        border-top: 4px solid #0d6efd;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        animation: transfer-spin-b-ehsj9ph5fz 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes transfer-spin-b-ehsj9ph5fz {
        to

    {
        transform: rotate(360deg);
    }

    }
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TransferHistoryViewModal.razor.rz.scp.css */
/* ===== CSS cho Modal Lịch sử chuyển / trả chưa thực hiện ===== */

.modal-overlay[b-7xlk8vne9m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    box-sizing: border-box;
}

.optimized-modal[b-7xlk8vne9m] {
    max-width: 1800px;
    width: 95vw;
    height: 85vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: white;
}

.modal-header[b-7xlk8vne9m] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .modal-header h4[b-7xlk8vne9m] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .modal-header button[b-7xlk8vne9m] {
        background: none;
        border: none;
        font-size: 28px;
        color: white;
        opacity: 0.8;
        padding: 0 8px;
    }

        .modal-header button:hover[b-7xlk8vne9m] {
            opacity: 1;
        }

/* Body & Filter */
.fixed-height-body[b-7xlk8vne9m] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content-container[b-7xlk8vne9m] {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.filter-label[b-7xlk8vne9m] {
    font-weight: 500;
    color: var(--text-dark, #333);
    font-size: 0.75rem;
    margin-bottom: 4px;
}

/* Grid Wrapper - Quan trọng cho scroll */
.grid-wrapper[b-7xlk8vne9m] {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

/* ====================== CENTER CHO TOÀN BỘ BẢNG ====================== */
.centered-grid[b-7xlk8vne9m] {
    height: 100% !important;
    width: 100% !important;
}

    .centered-grid .rz-datatable-table[b-7xlk8vne9m] {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 1700px; /* Tăng nhẹ để dễ scroll ngang hơn */
    }

    .centered-grid th[b-7xlk8vne9m],
    .centered-grid td[b-7xlk8vne9m] {
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Căn giữa nội dung bên trong cell */
    .centered-grid .rz-cell-data[b-7xlk8vne9m],
    .centered-grid .rz-header-content[b-7xlk8vne9m] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0.5rem 0.6rem !important;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        /* Đảm bảo text bên trong cũng center */
        .centered-grid .rz-cell-data > *[b-7xlk8vne9m],
        .centered-grid .rz-header-content > *[b-7xlk8vne9m] {
            text-align: center !important;
        }

        /* Các cột đặc biệt vẫn giữ font-weight đậm */
        .centered-grid .rz-cell-data .fw-bold[b-7xlk8vne9m],
        .centered-grid .rz-cell-data strong[b-7xlk8vne9m] {
            font-weight: 600;
        }

    /* Badge căn giữa */
    .centered-grid .badge[b-7xlk8vne9m] {
        margin: 0 auto;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Cột có nội dung đặc biệt (có arrow, multiple line) vẫn center tốt */
    .centered-grid .rz-cell-data div[b-7xlk8vne9m],
    .centered-grid .rz-cell-data span[b-7xlk8vne9m] {
        width: 100%;
        text-align: center;
    }

    /* Button trong cột Thao tác */
    .centered-grid .rz-cell-data .btn[b-7xlk8vne9m],
    .centered-grid .rz-cell-data button[b-7xlk8vne9m] {
        margin: 0 auto;
    }

/* Scrollbar đẹp hơn một chút */
.grid-wrapper[b-7xlk8vne9m]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-wrapper[b-7xlk8vne9m]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .grid-wrapper[b-7xlk8vne9m]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Footer */
.modal-footer[b-7xlk8vne9m] {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
    text-align: right;
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TransferScheduleModal.razor.rz.scp.css */
.transfer-small-modal[b-bl6sf5sy3k] {
    max-width: 400px;
    width: 90vw;
    max-height: 80vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.transfer-modal-overlay[b-bl6sf5sy3k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    box-sizing: border-box;
}

.transfer-modal-content[b-bl6sf5sy3k] {
    background: white;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.transfer-modal-header[b-bl6sf5sy3k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 16px 20px 20px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.transfer-modal-title[b-bl6sf5sy3k] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.transfer-modal-body[b-bl6sf5sy3k] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 16px 20px;
    font-size: 14px;
}

.transfer-info-section[b-bl6sf5sy3k] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #e9ecef;
}

.transfer-info-row[b-bl6sf5sy3k] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.transfer-info-item[b-bl6sf5sy3k] {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    flex: 1;
}

    .transfer-info-item strong[b-bl6sf5sy3k] {
        color: #333;
        font-weight: 600;
        margin-bottom: 2px;
        display: block;
    }

    .transfer-info-item span[b-bl6sf5sy3k] {
        color: #495057;
        font-weight: 500;
    }

.transfer-modal-footer[b-bl6sf5sy3k] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #fafbfc;
}

.transfer-modal-close[b-bl6sf5sy3k] {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .transfer-modal-close:hover[b-bl6sf5sy3k] {
        color: #000;
        background: #f0f0f0;
        border-radius: 50%;
    }

.form-label[b-bl6sf5sy3k] {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    font-size: 13px;
    color: #333;
}

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

.transfer-loading-overlay[b-bl6sf5sy3k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.transfer-spinner[b-bl6sf5sy3k] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: transfer-spin-b-bl6sf5sy3k 2s linear infinite;
}

@keyframes transfer-spin-b-bl6sf5sy3k {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TripCargoPlanningBulkUpdateModal.razor.rz.scp.css */
.bulk-update-modal[b-s22ld2l66g] {
    background: var(--light-color, #fff);
    border-radius: var(--border-radius-lg, 12px);
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--modal-shadow, 0 35px 60px -12px rgba(0, 0, 0, 0.35));
    animation: bulkUpdateSlideIn-b-s22ld2l66g 0.25s ease;
    font-family: var(--font-family);
}

.bulk-update-header[b-s22ld2l66g] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--primary-text, #fff);
    flex-shrink: 0;
}

.bulk-update-header-icon[b-s22ld2l66g] {
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius, 8px);
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.bulk-update-header-text[b-s22ld2l66g] {
    flex: 1;
    min-width: 0;
}

    .bulk-update-header-text h5[b-s22ld2l66g] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .bulk-update-header-text span[b-s22ld2l66g] {
        font-size: var(--font-size-sm-base, 0.75rem);
        opacity: 0.9;
    }

.bulk-update-close-btn[b-s22ld2l66g] {
    background: none;
    border: none;
    color: var(--primary-text, #fff);
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

    .bulk-update-close-btn:hover[b-s22ld2l66g] {
        background-color: rgba(255, 255, 255, 0.15);
    }

.bulk-update-body[b-s22ld2l66g] {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bulk-update-field[b-s22ld2l66g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: var(--border-width, 1px) solid var(--border-light, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: var(--bg-light, #f8f9fa);
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

    .bulk-update-field:hover[b-s22ld2l66g] {
        border-color: var(--border-muted, #cbd5e1);
    }

    .bulk-update-field.is-disabled[b-s22ld2l66g] {
        opacity: 0.6;
    }

.bulk-update-field-icon[b-s22ld2l66g] {
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

    /* Same semantic colors ETransButton already uses for Warning/Info/Success variants elsewhere on this page */
    .bulk-update-field-icon.rate[b-s22ld2l66g] {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .bulk-update-field-icon.shipplan[b-s22ld2l66g] {
        background: linear-gradient(135deg, #17a2b8, #117a8b);
    }

    .bulk-update-field-icon.warehouse[b-s22ld2l66g] {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

.bulk-update-field-content[b-s22ld2l66g] {
    flex: 1;
    min-width: 0;
}

.bulk-update-field-label[b-s22ld2l66g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: var(--font-size-base, 0.875rem);
    color: var(--text-dark, #2d3748);
}

.bulk-update-footer[b-s22ld2l66g] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: var(--border-width, 1px) solid var(--border-light, #e2e8f0);
    background: var(--bg-light, #f8f9fa);
    flex-shrink: 0;
}

@keyframes bulkUpdateSlideIn-b-s22ld2l66g {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.98);
    }

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

@media (max-width: 576px) {
    .bulk-update-field[b-s22ld2l66g] {
        flex-direction: column;
    }

    .bulk-update-footer[b-s22ld2l66g] {
        flex-direction: column-reverse;
    }

        .bulk-update-footer > *[b-s22ld2l66g] {
            width: 100%;
        }
}
/* /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;
    }
}
/* /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;
    }

    .mobile-filters-content[b-0vholnexwm] {
        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;
    }
}

/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningDateComponent/TripCargoPlanningVehicleReceiveListModal.razor.rz.scp.css */
/* Status Pills - Styled like buttons */
.status-pill[b-3vk3pgdw2w] {
    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-3vk3pgdw2w] {
    opacity: 1;
    cursor: default;
}

.status-pill:hover[b-3vk3pgdw2w] {
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}

/* Status Button Styles for TripCargoPlanningWeeklyModal */
.status-waiting-orange[b-3vk3pgdw2w] {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

    .status-waiting-orange:hover[b-3vk3pgdw2w] {
        background-color: #ffedd5;
        box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
    }

.status-booked-green[b-3vk3pgdw2w] {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}

    .status-booked-green:hover[b-3vk3pgdw2w] {
        background-color: #dcfce7;
        box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    }

.status-delivering-blue[b-3vk3pgdw2w] {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

    .status-delivering-blue:hover[b-3vk3pgdw2w] {
        background-color: #dbeafe;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

.status-completed-green[b-3vk3pgdw2w] {
    background-color: #064e3b;
    color: #ffffff;
    border: 1px solid #047857;
    font-weight: 600;
}

    .status-completed-green:hover[b-3vk3pgdw2w] {
        background-color: #065f46;
        box-shadow: 0 2px 4px rgba(6, 78, 59, 0.3);
    }

.status-cancelled-red[b-3vk3pgdw2w] {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 600;
}

    .status-cancelled-red:hover[b-3vk3pgdw2w] {
        background-color: #fee2e2;
        box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
    }

.status-unknown-gray[b-3vk3pgdw2w] {
    background-color: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

    .status-unknown-gray:hover[b-3vk3pgdw2w] {
        background-color: #f3f4f6;
        box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
    }


/* Base modal styles */
.modal-overlay[b-3vk3pgdw2w] {
    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-3vk3pgdw2w] {
    background: #fff;
    border-radius: 8px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-3vk3pgdw2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h3[b-3vk3pgdw2w] {
    margin: 0;
    font-size: 1.4rem;
}

.month-selector[b-3vk3pgdw2w], .week-selector[b-3vk3pgdw2w], .ship-selector[b-3vk3pgdw2w] {
    display: flex;
    gap: 8px;
}

.modal-close[b-3vk3pgdw2w] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
}

.modal-body[b-3vk3pgdw2w] {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.sticky-sidebar[b-3vk3pgdw2w] {
    position: sticky;
    top: 15px;
    height: fit-content;
    z-index: 1;
}

.shipment-summary-card[b-3vk3pgdw2w] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 15px;
}

.shipment-summary-card .card-header[b-3vk3pgdw2w] {
    background-color: #e9ecef;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
}

.shipment-summary-card .card-body p[b-3vk3pgdw2w] {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.grid-section[b-3vk3pgdw2w] {
    margin-bottom: 15px;
}

.grid-header[b-3vk3pgdw2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.grid-container[b-3vk3pgdw2w] {
    min-width: 0;
}

.transport-grid-full :deep .rz-column-title[b-3vk3pgdw2w],
.transport-grid-full :deep .transport-cell-value[b-3vk3pgdw2w] {
    text-align: center !important;
    white-space: nowrap;
    font-size: 0.85rem;
}

.item-quantity-container[b-3vk3pgdw2w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-quantity-row[b-3vk3pgdw2w] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-quantity-row span[b-3vk3pgdw2w] {
    width: 150px;
    text-align: left;
}

.modal-footer[b-3vk3pgdw2w] {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.loading-overlay[b-3vk3pgdw2w] {
    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-3vk3pgdw2w] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-3vk3pgdw2w 1s linear infinite;
}

.spinner-small[b-3vk3pgdw2w] {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-3vk3pgdw2w 1s linear infinite;
}

@keyframes spin-b-3vk3pgdw2w {
    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-3vk3pgdw2w] {
        padding: 8px;
    }
    
    .weekly-planning-modal[b-3vk3pgdw2w] {
        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-3vk3pgdw2w] {
        padding: 8px 12px !important;
        flex-direction: column;
        gap: 8px;
        align-items: stretch !important;
    }
    
    .modal-header h3[b-3vk3pgdw2w] {
        font-size: 1rem !important;
        text-align: center;
        margin: 0;
    }
    
    .modal-close[b-3vk3pgdw2w] {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 1.2rem;
        z-index: 10;
    }
    
    /* Month/Week selector mobile optimization */
    .month-selector[b-3vk3pgdw2w],
    .week-selector[b-3vk3pgdw2w],
    .ship-selector[b-3vk3pgdw2w] {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .month-selector .rz-dropdown[b-3vk3pgdw2w],
    .week-selector .btn[b-3vk3pgdw2w],
    .ship-selector .btn[b-3vk3pgdw2w] {
        width: 100% !important;
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
        text-align: center;
    }
    
    /* Week buttons mobile layout */
    .week-selector[b-3vk3pgdw2w] {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
        gap: 4px !important;
    }
    
    .week-selector .btn[b-3vk3pgdw2w] {
        font-size: 0.75rem !important;
        padding: 4px 6px !important;
        white-space: nowrap;
    }
    
    /* Modal Body Mobile */
    .modal-body[b-3vk3pgdw2w] {
        padding: 8px !important;
        overflow-y: auto;
        flex: 1;
    }
    
    .modal-body .container-fluid[b-3vk3pgdw2w] {
        padding: 0 !important;
    }
    
    /* Mobile Layout - Stack elements vertically */
    .modal-body .row[b-3vk3pgdw2w] {
        margin: 0 !important;
        flex-direction: column !important;
    }
    
    .modal-body .col-3[b-3vk3pgdw2w],
    .modal-body .col-9[b-3vk3pgdw2w] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 12px;
    }
    
    /* Sticky sidebar mobile transformation */
    .sticky-sidebar[b-3vk3pgdw2w] {
        position: static !important;
        margin-bottom: 12px;
        order: 1;
    }
    
    /* Shipment summary card mobile */
    .shipment-summary-card[b-3vk3pgdw2w] {
        margin-bottom: 8px !important;
        font-size: 0.8rem;
    }
    
    .shipment-summary-card .card-header[b-3vk3pgdw2w] {
        padding: 6px 8px !important;
        font-size: 0.9rem !important;
        text-align: center;
    }
    
    .shipment-summary-card .card-body[b-3vk3pgdw2w] {
        padding: 8px !important;
    }
    
    .shipment-summary-card .card-body p[b-3vk3pgdw2w] {
        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-3vk3pgdw2w] {
        gap: 4px !important;
    }
    
    .item-quantity-row[b-3vk3pgdw2w] {
        flex-direction: column !important;
        gap: 2px !important;
        align-items: stretch !important;
    }
    
    .item-quantity-row span[b-3vk3pgdw2w] {
        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-3vk3pgdw2w] {
        margin-bottom: 8px !important;
        order: 2;
    }
    
    .grid-header[b-3vk3pgdw2w] {
        flex-direction: column !important;
        gap: 6px;
        margin-bottom: 6px !important;
    }
    
    .grid-header h5[b-3vk3pgdw2w] {
        font-size: 0.9rem !important;
        text-align: center;
        margin: 0;
    }
    
    /* Grid actions mobile */
    .grid-header .d-flex[b-3vk3pgdw2w] {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .grid-header .btn[b-3vk3pgdw2w] {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }
    
    /* Transport grid mobile optimization */
    .transport-grid-full[b-3vk3pgdw2w] {
        font-size: 0.7rem !important;
        overflow-x: auto;
    }
    
    .transport-grid-full .rz-data-grid[b-3vk3pgdw2w] {
        min-width: 600px;
    }
    
    .transport-grid-full .rz-grid-table th[b-3vk3pgdw2w],
    .transport-grid-full .rz-grid-table td[b-3vk3pgdw2w] {
        padding: 4px 2px !important;
        font-size: 0.65rem !important;
        white-space: nowrap;
    }
    
    .transport-grid-full .rz-column-title[b-3vk3pgdw2w] {
        font-size: 0.7rem !important;
    }
    
    /* Modal Footer Mobile */
    .modal-footer[b-3vk3pgdw2w] {
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 6px;
        border-top: 2px solid #dee2e6;
    }
    
    .modal-footer .d-flex[b-3vk3pgdw2w] {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }
    
    .modal-footer .btn[b-3vk3pgdw2w] {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        min-width: 80px;
    }
    
    /* Form controls mobile */
    .rz-dropdown[b-3vk3pgdw2w],
    .rz-textbox[b-3vk3pgdw2w],
    .rz-numeric[b-3vk3pgdw2w] {
        font-size: 0.8rem !important;
        height: 32px !important;
    }
    
    /* Loading overlay mobile */
    .loading-overlay[b-3vk3pgdw2w] {
        z-index: 10000 !important;
    }
    
    .spinner[b-3vk3pgdw2w] {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Responsive utilities */
    .mobile-hide[b-3vk3pgdw2w] {
        display: none !important;
    }
    
    .mobile-show[b-3vk3pgdw2w] {
        display: block !important;
    }
    
    /* Compact spacing for mobile */
    .mb-2[b-3vk3pgdw2w] {
        margin-bottom: 6px !important;
    }
    
    .mb-3[b-3vk3pgdw2w] {
        margin-bottom: 8px !important;
    }
    
    .p-2[b-3vk3pgdw2w] {
        padding: 6px !important;
    }
    
    .p-3[b-3vk3pgdw2w] {
        padding: 8px !important;
    }
}

/* Desktop styles - preserve original layout */
@media (min-width: 769px) {
    .mobile-hide[b-3vk3pgdw2w] {
        display: initial !important;
    }
    
    .mobile-show[b-3vk3pgdw2w] {
        display: none !important;
    }
}
/* /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;
}

.shipment-summary-card .card-body .d-flex.align-items-center.mb-2[b-qmgl6329az] {
    font-size: 0.85rem;
}

.shipment-summary-card .card-body .d-flex.align-items-center.mb-2 > strong[b-qmgl6329az] {
    flex: 0 0 90px;
    white-space: nowrap;
}

.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;
    }

    .shipment-summary-card .card-body .d-flex.align-items-center.mb-2[b-qmgl6329az] {
        font-size: 0.75rem !important;
    }

    .shipment-summary-card .card-body .d-flex.align-items-center.mb-2 > strong[b-qmgl6329az] {
        flex: 0 0 78px;
    }

    /* 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;
    }
}
/* /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;
    }
}
/* /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;
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningMonthsFactory.razor.rz.scp.css */
#popup-myDropDownDataGrid[b-nluj6r0vq2] {
    width: 540px !important;
}

#popup-myDropDownDataGridItems[b-nluj6r0vq2] {
    width: 450px !important;
}

.kh-page[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    --rz-input-height: 31.5px;
    --brand: #EA6224;
    --brand-bg: #FDF0E9;
    --red: #D6453A;
    --red-bg: #FDF0EF;
    --amber: #A9761B;
    --amber-bg: #FBF4E4;
    --green: #2E7D53;
    --green-bg: #EDF6F1;
    --ink: #20262E;
    --ink-2: #5B6472;
    --ink-3: #98A1AE;
    --line: #E8EBF0;
    --line-soft: #F1F3F7;
    --bg: #F7F8FA;
    --card: #FFFFFF;
    --ship: #43597A;
    --wh: #B9C6D9;
    --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11.7px;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ===== CONTROL DECK ===== */
.kh-page .kh-deck[b-nluj6r0vq2] {
    flex: none;
    background: var(--card);
    padding: 9px 14.6px 6.8px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.kh-page .filters-grid[b-nluj6r0vq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6.8px 9px;
    margin-bottom: 6.8px;
}

.kh-page .filter-group[b-nluj6r0vq2] {
    flex: 1 1 135px;
    max-width: 213.8px;
    min-width: 117px;
}

.kh-page .kh-seg-group[b-nluj6r0vq2] {
    flex: none;
    max-width: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kh-page .kh-seg-group .kh-seg[b-nluj6r0vq2] {
    flex: 1 1 auto;
    height: auto;
    min-height: var(--rz-input-height, 31.5px);
}

.kh-page .kh-seg-group .kh-seg button[b-nluj6r0vq2] {
    height: 100%;
}

.kh-page .filter-label[b-nluj6r0vq2] {
    font-size: 10.1px;
    font-weight: 500;
    color: var(--ink-3);
    margin-bottom: 2.2px;
}

.kh-seg[b-nluj6r0vq2] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6.8px;
    overflow: hidden;
    background: #fff;
    height: var(--rz-input-height, 31.5px);
}

.kh-seg button[b-nluj6r0vq2] {
    border: 0;
    background: transparent;
    padding: 0 12.4px;
    font-weight: 600;
    font-size: 11.2px;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.kh-seg button.on[b-nluj6r0vq2] {
    background: var(--brand-bg);
    color: var(--brand);
}

.kh-unit[b-nluj6r0vq2] {
    height: 31.5px;
}

.kh-unit button[b-nluj6r0vq2] {
    padding: 0 12.4px;
    height: 100%;
}

.kh-page[b-nluj6r0vq2]  .rz-dropdown,
.kh-page[b-nluj6r0vq2]  .rz-textbox,
.kh-page[b-nluj6r0vq2]  .rz-numeric,
.kh-page[b-nluj6r0vq2]  .rz-datepicker .rz-inputtext,
.kh-page[b-nluj6r0vq2]  .rz-multiselect,
.kh-page[b-nluj6r0vq2]  .rz-dropdown-datagrid,
.kh-page[b-nluj6r0vq2]  .rz-lookup,
.kh-page .filter-input[b-nluj6r0vq2],
.kh-page .filter-select[b-nluj6r0vq2] {
    border: 1px solid var(--line) !important;
    border-radius: 6.8px !important;
    background: #fff !important;
    color: var(--ink-2) !important;
    font-size: 11.2px !important;
    box-shadow: none !important;
    min-height: var(--rz-input-height, 31.5px);
    height: var(--rz-input-height, 31.5px);
}

.kh-page[b-nluj6r0vq2]  .rz-dropdown:hover,
.kh-page[b-nluj6r0vq2]  .rz-numeric:hover,
.kh-page[b-nluj6r0vq2]  .rz-datepicker .rz-inputtext:hover {
    border-color: #D3D8E0 !important;
}

.kh-page[b-nluj6r0vq2]  .rz-dropdown.rz-state-focused,
.kh-page[b-nluj6r0vq2]  .rz-numeric.rz-state-focused,
.kh-page[b-nluj6r0vq2]  .rz-datepicker .rz-inputtext:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3.4px var(--brand-bg) !important;
}

.kh-page .kh-actions[b-nluj6r0vq2] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2.2px;
    flex-wrap: wrap;
}

.kh-page .kh-push[b-nluj6r0vq2] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6.8px;
}

.kh-btn-search[b-nluj6r0vq2],
.kh-btn-ghost[b-nluj6r0vq2] {
    border-radius: 6.8px;
    padding: 0 15.8px;
    height: 31.5px;
    min-width: 94.5px;
    font-size: 11.8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background .15s ease;
}

.kh-btn-search[b-nluj6r0vq2] {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
}

.kh-btn-search:hover[b-nluj6r0vq2] {
    background: #DE531B;
}

.kh-btn-ghost[b-nluj6r0vq2] {
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line);
    font-weight: 500;
}

.kh-btn-ghost:hover[b-nluj6r0vq2] {
    background: var(--bg);
}

.kh-page .filter-group:has(.custom-switch-container)[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
}

.custom-switch-container[b-nluj6r0vq2] {
    width: 100%;
    flex: 1 1 auto;
    min-height: var(--rz-input-height, 31.5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== STATUS STRIP ===== */
.kh-strip[b-nluj6r0vq2] {
    display: flex;
    align-items: center;
    gap: 6.8px;
    flex-wrap: wrap;
}

.kh-counter[b-nluj6r0vq2] {
    display: inline-flex;
    align-items: baseline;
    gap: 5.4px;
    padding: 5.4px 10.8px;
    border-radius: 899.1px;
    font-weight: 600;
    font-size: 10.8px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    user-select: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.kh-counter .n[b-nluj6r0vq2] {
    font-family: var(--mono);
    font-weight: 600;
}

.kh-counter.red .n[b-nluj6r0vq2] {
    color: var(--red);
}

.kh-counter.amber .n[b-nluj6r0vq2] {
    color: var(--amber);
}

.kh-counter.red.on[b-nluj6r0vq2] {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-bg);
}

.kh-counter.amber.on[b-nluj6r0vq2] {
    border-color: var(--amber);
    color: var(--amber);
    background: var(--amber-bg);
}

.kh-hint[b-nluj6r0vq2] {
    font-size: 10.3px;
    color: var(--ink-3);
    margin-left: 3.6px;
}

/* ===== CUSTOM SWITCH ===== */
.custom-switch[b-nluj6r0vq2] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 21px;
    cursor: pointer;
}

.custom-switch input[b-nluj6r0vq2] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-nluj6r0vq2] {
    position: absolute;
    inset: 0;
    background-color: #CBD2DC;
    border-radius: 899.1px;
    transition: all 0.2s ease;
}

.slider[b-nluj6r0vq2]:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 3.4px;
    top: 3.4px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.custom-switch input:checked + .slider[b-nluj6r0vq2] {
    background-color: var(--brand);
}

.custom-switch input:checked + .slider[b-nluj6r0vq2]:before {
    transform: translateX(17px);
}

.custom-switch input:focus + .slider[b-nluj6r0vq2] {
    box-shadow: 0 0 0 2.7px var(--brand-bg);
}

/* ===== GRID ===== */
.kh-page .kh-grid-wrap[b-nluj6r0vq2] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 9px 13.5px 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 11.2px;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.kh-page .kh-grid-wrap[b-nluj6r0vq2]  .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 9px;
    background: var(--card);
    font-family: inherit;
}

.kh-page .kh-grid-wrap[b-nluj6r0vq2]  .rz-data-grid-data,
.kh-page .kh-grid-wrap[b-nluj6r0vq2]  .rz-datatable-data {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.kh-page[b-nluj6r0vq2]  .rz-datatable-header,
.kh-page[b-nluj6r0vq2]  .rz-data-grid-header {
    flex: none;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 7.2px 10.8px;
}

.kh-page[b-nluj6r0vq2]  .rz-column-picker,
.kh-page[b-nluj6r0vq2]  .rz-data-grid-header .rz-dropdown {
    border: 1px solid var(--line) !important;
    border-radius: 6.3px !important;
    font-size: 10.8px !important;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FAFBFC;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink);
    padding: 9.9px 10.8px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    white-space: nowrap;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th:last-child {
    border-right: 0;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th .rz-column-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 9.9px;
    font-weight: 600;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th .rz-column-title-content {
    margin-right: 1.8px;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th:hover {
    background: #FAFBFC;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th.rz-state-drag-over,
.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th[draggable="true"]:active {
    background: var(--brand-bg);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th .rz-sortable-column-icon {
    color: var(--brand);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th .rz-column-resizer {
    width: 8px;
    border-right: 2px solid transparent;
    cursor: col-resize;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th:hover .rz-column-resizer {
    border-right-color: #C9D0DA;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table thead th .rz-column-resizer:hover {
    border-right-color: var(--brand);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tbody td {
    padding: 10.8px 10.8px;
    border-bottom: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 11.2px;
    color: var(--ink);
    background: var(--card);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tbody tr:last-child td {
    border-bottom: 0;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tbody tr:hover td {
    background: #FAFBFC;
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tbody tr.row-warning-danger > td:first-child {
    box-shadow: inset 2.7px 0 0 var(--red);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tbody tr.row-warning-caution > td:first-child {
    box-shadow: inset 2.7px 0 0 var(--amber);
}

.kh-page[b-nluj6r0vq2]  .rz-grid-table tfoot td,
.kh-page[b-nluj6r0vq2]  .rz-grid-table .rz-datatable-tfoot td {
    position: sticky;
    bottom: 0;
    background: #FAFBFC;
    border-top: 1px solid var(--line);
    font-weight: 600;
    padding: 9px 10.8px;
    font-size: 10.3px;
    color: var(--ink-2);
}

.kh-page[b-nluj6r0vq2]  .rz-frozen-cell {
    background: var(--card) !important;
}

.kh-page[b-nluj6r0vq2]  .rz-paginator,
.kh-page[b-nluj6r0vq2]  .rz-pager {
    flex: none;
    background: var(--card);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 10.8px;
    padding: 7.2px 14.4px;
    border-radius: 0 0 9px 9px;
}

.kh-page[b-nluj6r0vq2]  .rz-paginator .rz-paginator-page,
.kh-page[b-nluj6r0vq2]  .rz-pager .rz-pager-page {
    min-width: 24.3px;
    height: 24.3px;
    border-radius: 5.4px;
    font-weight: 500;
    color: var(--ink-2);
    border: 0;
    background: transparent;
}

.kh-page[b-nluj6r0vq2]  .rz-paginator .rz-paginator-page.rz-state-active,
.kh-page[b-nluj6r0vq2]  .rz-pager .rz-pager-page.rz-state-active {
    background: var(--brand-bg);
    color: var(--brand);
    font-weight: 600;
}

/* ===== CELLS ===== */
.kh-pn[b-nluj6r0vq2] {
    font-size: 9.9px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: .05em;
}

.kh-doc .so[b-nluj6r0vq2] {
    font-weight: 600;
    font-size: 11.7px;
    color: var(--brand);
    cursor: pointer;
    font-family: var(--mono);
}

.kh-doc .so:hover[b-nluj6r0vq2] {
    text-decoration: underline;
}

.kh-doc .sb[b-nluj6r0vq2] {
    font-size: 9.9px;
    color: var(--ink-3);
    margin-top: 1.8px;
    font-family: var(--mono);
}

.kh-cust .name[b-nluj6r0vq2] {
    font-weight: 500;
}

.kh-cust .sub[b-nluj6r0vq2] {
    font-size: 9.9px;
    color: var(--ink-3);
    margin-top: 1.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 171px;
}

.kh-muted[b-nluj6r0vq2] {
    color: var(--ink-2);
    font-size: 10.8px;
    white-space: nowrap;
}

.kh-dest .region[b-nluj6r0vq2] {
    font-size: 9.9px;
    color: var(--ink-3);
    margin-top: 1.8px;
}

.kh-mono[b-nluj6r0vq2],
.kh-mono-cell[b-nluj6r0vq2] {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.8px;
}

.kh-mono-cell[b-nluj6r0vq2] {
    text-align: right;
    white-space: nowrap;
}

.kh-mono.zero[b-nluj6r0vq2],
.kh-mono-cell.zero[b-nluj6r0vq2] {
    color: var(--ink-3);
}

.kh-mono-cell.neg[b-nluj6r0vq2] {
    color: var(--red);
    font-weight: 600;
}

.kh-foot[b-nluj6r0vq2] {
    display: block;
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kh-foot-sm[b-nluj6r0vq2] {
    font-size: 9.5px;
    text-align: left;
}

/* allocation bar */
.kh-alloc[b-nluj6r0vq2] {
    min-width: 189px;
    position: relative;
}

.kh-alloc-row[b-nluj6r0vq2] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.kh-bar[b-nluj6r0vq2] {
    position: relative;
    flex: 1;
    height: 7.2px;
    border-radius: 899.1px;
    background: var(--line-soft);
    overflow: visible;
}

.kh-fill[b-nluj6r0vq2] {
    position: absolute;
    inset: 0;
    border-radius: 899.1px;
    overflow: hidden;
    display: flex;
}

.kh-seg-ship[b-nluj6r0vq2] {
    background: var(--ship);
    height: 100%;
}

.kh-seg-wh[b-nluj6r0vq2] {
    background: var(--wh);
    height: 100%;
}

.kh-seg-over[b-nluj6r0vq2] {
    background: var(--red);
    height: 100%;
}

.kh-done[b-nluj6r0vq2] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1.8px;
    background: var(--ink);
    opacity: .55;
    border-radius: 1px;
}

.kh-pct[b-nluj6r0vq2] {
    font-family: var(--mono);
    font-size: 10.3px;
    font-weight: 600;
    width: 37.8px;
    text-align: right;
    color: var(--ink-2);
}

.kh-pct.ok[b-nluj6r0vq2] {
    color: var(--green);
}

.kh-pct.bad[b-nluj6r0vq2] {
    color: var(--red);
}

.kh-pct.none[b-nluj6r0vq2] {
    color: var(--ink-3);
}

.kh-split[b-nluj6r0vq2] {
    font-size: 9.5px;
    color: var(--ink-3);
    margin-top: 4.5px;
    white-space: nowrap;
    font-family: var(--mono);
}

.kh-split.empty[b-nluj6r0vq2] {
    font-family: inherit;
}

.kh-tip[b-nluj6r0vq2] {
    display: none !important;
}

.kh-tip b[b-nluj6r0vq2] {
    font-family: var(--mono);
    font-weight: 600;
}

.kh-tip .tip-red[b-nluj6r0vq2] {
    color: #FF9B96;
}

.kh-tip .dot[b-nluj6r0vq2] {
    display: inline-block;
    width: 7.2px;
    height: 7.2px;
    border-radius: 1.8px;
    margin-right: 5.4px;
}

.kh-tip .dot-ship[b-nluj6r0vq2] {
    background: var(--ship);
}

.kh-tip .dot-wh[b-nluj6r0vq2] {
    background: var(--wh);
}

/* thực hiện */
.kh-exec[b-nluj6r0vq2] {
    font-size: 10.3px;
    line-height: 1.8;
    white-space: nowrap;
    color: var(--ink-2);
}

.kh-exec .src[b-nluj6r0vq2] {
    color: var(--ink-3);
    font-size: 9px;
    display: inline-block;
    width: 50px;
    letter-spacing: .03em;
}

.kh-exec .diff[b-nluj6r0vq2] {
    font-size: 9px;
    font-weight: 600;
    color: var(--red);
    margin-left: 5.4px;
}

/* status & warnings */
.kh-chip[b-nluj6r0vq2] {
    display: inline-block;
    font-size: 9.9px;
    font-weight: 600;
    padding: 2.7px 9px;
    border-radius: 899.1px;
    white-space: nowrap;
}

.kh-chip.full[b-nluj6r0vq2] {
    background: var(--green-bg);
    color: var(--green);
}

.kh-chip.part[b-nluj6r0vq2] {
    background: #EFF2F6;
    color: var(--ink-2);
}

.kh-chip.none[b-nluj6r0vq2] {
    color: var(--ink-3);
    border: 1px dashed var(--line);
    background: #fff;
}

.kh-chip.over[b-nluj6r0vq2] {
    background: var(--red-bg);
    color: var(--red);
}

.kh-warns[b-nluj6r0vq2] {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
    align-items: stretch;
}

.kh-warn[b-nluj6r0vq2] {
    position: relative;
    min-width: 0;
    padding: 5.6px 9px 5.6px 7.9px;
    border-radius: 6.8px;
    border-left: 3.4px solid;
    font-size: 10.7px;
    line-height: 1.4;
}

.kh-warn-row[b-nluj6r0vq2] {
    display: flex;
    align-items: flex-start;
    gap: 6.8px;
}

.kh-warn-row i[b-nluj6r0vq2] {
    font-size: 11.2px;
    margin-top: 2.2px;
    flex: none;
}

.kh-warn-body[b-nluj6r0vq2] {
    min-width: 0;
}

.kh-warn-title[b-nluj6r0vq2] {
    font-weight: 700;
    font-size: 10.7px;
    letter-spacing: .02em;
    margin-bottom: 1px;
}

.kh-warn-text[b-nluj6r0vq2] {
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kh-warn-full[b-nluj6r0vq2] {
    display: none !important;
}



.kh-warn.red[b-nluj6r0vq2] {
    background: var(--red-bg);
    border-left-color: var(--red);
}

.kh-warn.red .kh-warn-row i[b-nluj6r0vq2],
.kh-warn.red .kh-warn-title[b-nluj6r0vq2] {
    color: var(--red);
}

.kh-warn.amber[b-nluj6r0vq2] {
    background: var(--amber-bg);
    border-left-color: var(--amber);
}

.kh-warn.amber .kh-warn-row i[b-nluj6r0vq2],
.kh-warn.amber .kh-warn-title[b-nluj6r0vq2] {
    color: var(--amber);
}

.kh-status[b-nluj6r0vq2] {
    display: inline-flex;
    align-items: center;
    gap: 5.4px;
    font-size: 10.3px;
    color: var(--ink-2);
    white-space: nowrap;
}

.kh-status-dot[b-nluj6r0vq2] {
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: var(--ink-3);
    flex: none;
}

.kh-status-dot.status-completed[b-nluj6r0vq2],
.kh-status-dot.status-executed[b-nluj6r0vq2],
.kh-status-dot.status-active[b-nluj6r0vq2] {
    background: var(--green);
}

.kh-status-dot.status-inprogress[b-nluj6r0vq2] {
    background: var(--amber);
}

.kh-status-dot.status-canceled[b-nluj6r0vq2],
.kh-status-dot.status-rejected[b-nluj6r0vq2] {
    background: var(--red);
}

.kh-status-dot.status-draft[b-nluj6r0vq2] {
    background: #E0B84B;
}

@media (prefers-reduced-motion: reduce) {
.kh-page[b-nluj6r0vq2]  * {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 691.2px) {
.kh-page .kh-grid-wrap[b-nluj6r0vq2] {
        margin: 7.2px 0;
        border-radius: 0;
    }

.kh-page .filter-group[b-nluj6r0vq2] {
        max-width: none;
    }

.kh-page .kh-push[b-nluj6r0vq2] {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

.kh-hint[b-nluj6r0vq2] {
        display: none;
    }
}

/* ===== MOBILE FILTER TOGGLE (legacy) ===== */

/* 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;
    }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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;
    }
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningMonthsComponent/TripCargoPlanningServiceModal.razor.rz.scp.css */
.rz-multiselect-panel[b-nypcqpuy5z] {
    min-width: 350px !important;
}

.no-pager-dropdown .rz-pager[b-nypcqpuy5z] {
    display: none !important;
}

.modal-body[b-nypcqpuy5z] {
    max-height: 70vh;
    overflow: hidden;
}

.sticky-sidebar[b-nypcqpuy5z] {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.sticky-sidebar[b-nypcqpuy5z]::-webkit-scrollbar,
.col-md-9[b-nypcqpuy5z]::-webkit-scrollbar {
    width: 6px;
}

.sticky-sidebar[b-nypcqpuy5z]::-webkit-scrollbar-track,
.col-md-9[b-nypcqpuy5z]::-webkit-scrollbar-track {
    background: var(--etlt-canvas, #EEF3EF);
    border-radius: 10px;
}

.sticky-sidebar[b-nypcqpuy5z]::-webkit-scrollbar-thumb,
.col-md-9[b-nypcqpuy5z]::-webkit-scrollbar-thumb {
    background: var(--etlt-faint, #98AC9F);
    border-radius: 10px;
}

.sticky-sidebar[b-nypcqpuy5z]::-webkit-scrollbar-thumb:hover,
.col-md-9[b-nypcqpuy5z]::-webkit-scrollbar-thumb:hover {
    background: var(--etlt-muted, #6C8477);
}

.col-md-9[b-nypcqpuy5z] {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.info-card[b-nypcqpuy5z] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    box-shadow: none;
    margin-bottom: 12px;
}

.info-card .card-header[b-nypcqpuy5z] {
    background: #F5F9F6;
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    padding: 8px 12px;
}

.info-card .card-header h5[b-nypcqpuy5z] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--etlt-ink2, #2A4436);
}

.info-card .card-body[b-nypcqpuy5z] {
    padding: 10px 12px;
}

.info-grid[b-nypcqpuy5z] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.info-item[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px dotted var(--etlt-line, #D8E3DB);
    flex-wrap: wrap;
    gap: 4px;
}

.info-item:last-child[b-nypcqpuy5z] {
    border-bottom: none;
}

.info-item p[b-nypcqpuy5z] {
    margin: 0;
}

.info-label[b-nypcqpuy5z] {
    font-weight: 600;
    color: var(--etlt-muted, #6C8477);
    font-size: 11px;
    min-width: 100px;
}

.info-value[b-nypcqpuy5z] {
    color: var(--etlt-ink, #10241B);
    font-size: 12.5px;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.info-value.highlight[b-nypcqpuy5z] {
    font-weight: 700;
    color: var(--etlt-work, #23996A);
}

.grid-section[b-nypcqpuy5z] {
    margin-bottom: 18px;
}

.grid-header[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.grid-header h4[b-nypcqpuy5z] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--etlt-ink2, #2A4436);
    padding-left: 9px;
    border-left: 3px solid var(--etlt-accent, #CA3C19);
}

.grid-container[b-nypcqpuy5z] {
    overflow-x: auto;
    max-width: 100%;
    max-height: 100%;
}

.col-md-9 > .etlt-topnav[b-nypcqpuy5z] {
    margin-bottom: 10px;
    padding: 3px;
}

.col-md-9 > .etlt-topnav .etlt-navtab[b-nypcqpuy5z] {
    font-size: 11px;
    padding: 5px 10px;
}

.col-md-9 > .etlt-topnav .etlt-navtab i[b-nypcqpuy5z] {
    font-size: 10px;
}

.col-md-9 > .etlt-topnav .etlt-navtab.active[b-nypcqpuy5z] {
    box-shadow: 0 1px 3px rgba(202, 60, 25, 0.25);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn {
    border-radius: var(--etlt-r, 6px);
    box-shadow: none !important;
    font-weight: 600;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-sm {
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-xs {
    font-size: 10px !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn i {
    font-size: 0.8em !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn:hover:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn:active:not(:disabled) {
    transform: none !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-primary {
    background: rgba(202, 60, 25, 0.1);
    color: var(--etlt-accent, #CA3C19);
    border-color: rgba(202, 60, 25, 0.25);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-primary:hover:not(:disabled) {
    background: rgba(202, 60, 25, 0.18);
    border-color: rgba(202, 60, 25, 0.4);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-secondary {
    background: #fff;
    color: var(--etlt-ink2, #2A4436);
    border-color: var(--etlt-line, #D8E3DB);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-secondary:hover:not(:disabled) {
    background: #F5F9F6;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-success {
    background: rgba(35, 153, 106, 0.12);
    color: var(--etlt-work, #23996A);
    border-color: rgba(35, 153, 106, 0.3);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-success:hover:not(:disabled) {
    background: rgba(35, 153, 106, 0.2);
    border-color: rgba(35, 153, 106, 0.45);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-warning {
    background: rgba(192, 122, 12, 0.12);
    color: var(--etlt-deduct, #C07A0C);
    border-color: rgba(192, 122, 12, 0.3);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-warning:hover:not(:disabled) {
    background: rgba(192, 122, 12, 0.2);
    border-color: rgba(192, 122, 12, 0.45);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-danger {
    background: rgba(175, 42, 32, 0.1);
    color: var(--etlt-danger, #AF2A20);
    border-color: rgba(175, 42, 32, 0.28);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-danger:hover:not(:disabled) {
    background: rgba(175, 42, 32, 0.18);
    border-color: rgba(175, 42, 32, 0.42);
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-icon-only-primary {
    background-color: rgba(202, 60, 25, 0.1) !important;
    border-color: rgba(202, 60, 25, 0.25) !important;
    color: var(--etlt-accent, #CA3C19) !important;
}

.modal-container[b-nypcqpuy5z]  .etrans-btn-icon-only-primary:hover {
    background-color: rgba(202, 60, 25, 0.18) !important;
    border-color: rgba(202, 60, 25, 0.4) !important;
    color: var(--etlt-accent, #CA3C19) !important;
}

.transport-grid-full[b-nypcqpuy5z] {
    width: 100%;
    box-sizing: border-box;
}

.transport-grid-full[b-nypcqpuy5z]  .rz-column-title {
    text-align: center !important;
}

.transport-grid-full[b-nypcqpuy5z]  .rz-grid-table th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--etlt-muted, #6C8477);
    background: #F5F9F6;
    padding: 7px 8px;
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
}

.transport-grid-full[b-nypcqpuy5z]  .rz-grid-table td {
    font-size: 12.5px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--etlt-line2, #E8F0EA);
    vertical-align: middle;
}

.transport-grid-full[b-nypcqpuy5z]  .rz-data-row:hover td {
    background: #F8FBF9;
}

.item-quantity-container[b-nypcqpuy5z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-quantity-row[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ship-forms-container[b-nypcqpuy5z] {
    margin-top: 8px;
}

.ship-detail-card[b-nypcqpuy5z] {
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    box-shadow: none;
    transition: border-color .15s ease;
}

.ship-detail-card:hover[b-nypcqpuy5z] {
    border-color: var(--etlt-faint, #98AC9F);
    box-shadow: none;
}

.ship-detail-card .card-body[b-nypcqpuy5z] {
    padding: 12px 14px;
}

.ship-detail-card .row.g-3[b-nypcqpuy5z] {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 8px;
}

.ship-detail-card .form-label[b-nypcqpuy5z] {
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--etlt-muted, #6C8477);
    font-size: 10.5px;
    margin-bottom: 3px;
}

.ship-detail-card .form-control.bg-light.text-muted[b-nypcqpuy5z] {
    background-color: #F5F9F6 !important;
    color: var(--etlt-ink2, #2A4436) !important;
    border: 1px solid var(--etlt-line, #D8E3DB);
    padding: 6px 10px;
    border-radius: var(--etlt-r, 6px);
    min-height: 32px;
    font-size: 12.5px;
}

.ship-detail-card .highlight[b-nypcqpuy5z] {
    background-color: #F5F9F6 !important;
    border: 1px solid var(--etlt-line, #D8E3DB) !important;
    color: var(--etlt-deduct, #C07A0C) !important;
    font-weight: 700;
}

.ship-detail-card .form-control.bg-light.text-muted.text-danger[b-nypcqpuy5z] {
    color: var(--etlt-danger, #AF2A20) !important;
    border-color: var(--etlt-danger-soft, #FAE8E6);
}

.ship-plan-icon[b-nypcqpuy5z] {
    font-size: 15px;
    transition: color .15s ease;
}

.ship-plan-icon:hover[b-nypcqpuy5z] {
    color: var(--etlt-accent, #CA3C19) !important;
    transform: none;
}

.ship-plan-link[b-nypcqpuy5z] {
    color: var(--etlt-accent, #CA3C19) !important;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
}

/* ---- Ship card: compact summary strip ---- */
.ship-card-head[b-nypcqpuy5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
}

.ship-card-head-info[b-nypcqpuy5z] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.ship-card-head-actions[b-nypcqpuy5z] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Nút xóa dòng tàu: icon rõ hơn để dễ bấm */
.ship-card-head-actions[b-nypcqpuy5z]  .etrans-btn i {
    font-size: 14px;
}

.ship-card-title[b-nypcqpuy5z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--etlt-ink2, #2A4436);
}

.ship-card-title i[b-nypcqpuy5z] {
    color: var(--etlt-accent, #CA3C19);
}

.ship-chip[b-nypcqpuy5z] {
    display: inline-flex;
    align-items: center;
    background: #F5F9F6;
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--etlt-ink2, #2A4436);
    white-space: nowrap;
}

.ship-chip.is-total[b-nypcqpuy5z] {
    color: var(--etlt-deduct, #C07A0C);
    font-weight: 700;
}

.ship-chip.is-danger[b-nypcqpuy5z] {
    color: var(--etlt-danger, #AF2A20);
    border-color: var(--etlt-danger-soft, #FAE8E6);
    background: #FDF4F3;
}

.ship-card-grid[b-nypcqpuy5z] {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 8px;
}

.ship-card-grid .form-label[b-nypcqpuy5z] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mobile-info-toggle[b-nypcqpuy5z] {
    background: #F5F9F6;
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    padding: 10px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color .15s ease;
    box-shadow: none;
}

.mobile-info-toggle:hover[b-nypcqpuy5z] {
    background: var(--etlt-line2, #E8F0EA);
    box-shadow: none;
}

.info-toggle-header[b-nypcqpuy5z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--etlt-ink2, #2A4436);
}

.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.3s ease, opacity 0.2s ease;
    margin-bottom: 12px;
}

.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;
}

/* ---- Loading overlay / spinner ---- */
.loading-overlay[b-nypcqpuy5z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner[b-nypcqpuy5z] {
    border: 3px solid var(--etlt-line, #D8E3DB);
    border-top: 3px solid var(--etlt-accent, #CA3C19);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin-b-nypcqpuy5z 0.8s linear infinite;
}

.spinner-small[b-nypcqpuy5z] {
    border: 2px solid var(--etlt-line, #D8E3DB);
    border-top: 2px solid var(--etlt-accent, #CA3C19);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin-b-nypcqpuy5z 0.8s linear infinite;
}

@keyframes spin-b-nypcqpuy5z {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ---- Mobile Responsive Design ---- */
@media (max-width: 768px) {
    .modal-container[b-nypcqpuy5z] {
        width: 95vw;
        height: 95vh;
        margin: 2.5vh auto;
        border-radius: 12px;
    }

    .modal-header[b-nypcqpuy5z] {
        padding: 14px;
    }

    .modal-title[b-nypcqpuy5z] {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .modal-body[b-nypcqpuy5z] {
        padding: 12px;
        max-height: calc(95vh - 120px);
    }

    .container-fluid[b-nypcqpuy5z] {
        padding: 0;
    }

    .row[b-nypcqpuy5z] {
        margin: 0;
    }

    .col-12[b-nypcqpuy5z] {
        padding: 4px;
    }

    .info-card .card-body[b-nypcqpuy5z] {
        padding: 10px;
    }

    .info-item[b-nypcqpuy5z] {
        flex-direction: column;
        align-items: flex-start;
        padding: 5px 0;
    }

    .info-label[b-nypcqpuy5z] {
        margin-bottom: 3px;
        min-width: auto;
    }

    .info-value[b-nypcqpuy5z] {
        text-align: left;
        width: 100%;
    }

    .grid-header[b-nypcqpuy5z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

    .grid-header h4[b-nypcqpuy5z] {
        font-size: 10.5px;
    }

    .grid-container[b-nypcqpuy5z] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .transport-grid-full[b-nypcqpuy5z]  .rz-grid-table th,
    .transport-grid-full[b-nypcqpuy5z]  .rz-grid-table td {
        padding: 6px 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    .ship-forms-container[b-nypcqpuy5z] {
        margin-top: 12px;
    }

    .ship-detail-card[b-nypcqpuy5z] {
        margin-bottom: 12px;
    }

    .ship-detail-card .row[b-nypcqpuy5z] {
        margin: 0;
    }

    .ship-detail-card .col-12[b-nypcqpuy5z] {
        margin-bottom: 10px;
        padding: 0;
    }

    .ship-detail-card .col-12:last-child[b-nypcqpuy5z] {
        margin-bottom: 0;
    }

    .ship-detail-card .form-control[b-nypcqpuy5z] {
        font-size: 0.85rem;
        padding: 7px 10px;
    }

    .modal-footer[b-nypcqpuy5z] {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .text-end[b-nypcqpuy5z] {
        text-align: center !important;
    }

    .rz-dropdown[b-nypcqpuy5z],
    .rz-numeric[b-nypcqpuy5z],
    .rz-textbox[b-nypcqpuy5z] {
        font-size: 0.875rem !important;
        height: auto !important;
        min-height: 34px !important;
    }

    .rz-dropdown-panel[b-nypcqpuy5z] {
        max-height: 200px !important;
        font-size: 0.8rem !important;
    }
}

/* ---- Tablet ---- */
@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 ---- */
@media (min-width: 1025px) {
    .info-panel-container[b-nypcqpuy5z],
    .mobile-info-toggle[b-nypcqpuy5z] {
        display: none !important;
    }
}

/* ---- Warning banners ---- */
.modal-warnings[b-nypcqpuy5z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.modal-warn[b-nypcqpuy5z] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--etlt-r, 6px);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: 11px;
    line-height: 1.4;
}

.modal-warn i[b-nypcqpuy5z] {
    font-size: 11px;
    margin-top: 1px;
    flex: none;
}

.modal-warn-title[b-nypcqpuy5z] {
    display: inline;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-right: 6px;
}

.modal-warn-title[b-nypcqpuy5z]::after {
    content: '·';
    margin-left: 6px;
    color: var(--etlt-faint, #98AC9F);
}

.modal-warn-text[b-nypcqpuy5z] {
    display: inline;
    color: var(--etlt-ink2, #2A4436);
    word-break: break-word;
}

.modal-warn.is-danger[b-nypcqpuy5z] {
    background: #FDF4F3;
    border-color: var(--etlt-danger-soft, #FAE8E6);
    border-left-color: var(--etlt-danger, #AF2A20);
}

.modal-warn.is-danger i[b-nypcqpuy5z],
.modal-warn.is-danger .modal-warn-title[b-nypcqpuy5z] {
    color: var(--etlt-danger, #AF2A20);
}

.modal-warn.is-caution[b-nypcqpuy5z] {
    background: #FDF8EC;
    border-color: #F3E6C4;
    border-left-color: var(--etlt-deduct, #C07A0C);
}

.modal-warn.is-caution i[b-nypcqpuy5z],
.modal-warn.is-caution .modal-warn-title[b-nypcqpuy5z] {
    color: var(--etlt-deduct, #C07A0C);
}

/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/Laytime/LaytimeContainer.razor.rz.scp.css */
/* Filter wrapper */
.filter-wrapper[b-lkjf6a7qr1] {
    display: flex;
    flex-direction: column;
}

.filters-section[b-lkjf6a7qr1] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

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

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

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

.filter-input[b-lkjf6a7qr1], .filter-select[b-lkjf6a7qr1] {
    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-lkjf6a7qr1], .filter-select:focus[b-lkjf6a7qr1] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-lkjf6a7qr1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-lkjf6a7qr1] {
        display: none !important;
    }

    .mobile-filters-content[b-lkjf6a7qr1] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .filters-section[b-lkjf6a7qr1] {
        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-lkjf6a7qr1] {
        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-lkjf6a7qr1] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-lkjf6a7qr1] {
        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-lkjf6a7qr1] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-lkjf6a7qr1] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-lkjf6a7qr1] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-lkjf6a7qr1] {
        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-lkjf6a7qr1] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-lkjf6a7qr1] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-lkjf6a7qr1] {
        margin-bottom: 6px;
    }

    .filter-label[b-lkjf6a7qr1] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-lkjf6a7qr1], .filter-select[b-lkjf6a7qr1] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    .filter-actions[b-lkjf6a7qr1] {
        justify-content: center;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/TripCargoPlanningShipAllocationPreviewModal.razor.rz.scp.css */
/* ── Modal shell ─────────────────────────────────────────── */
.modal-overlay[b-2zowhepjej] {
    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: 1060;
    animation: fadeIn-b-2zowhepjej 0.25s ease;
}

/* Dialog ôm sát bảng: rộng theo nội dung, chỉ tràn thì mới cuộn */
.modal-container[b-2zowhepjej] {
    background: #fff;
    border-radius: 12px;
    width: auto;
    min-width: min(920px, 96vw);
    max-width: 96vw;
    height: auto;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-2zowhepjej 0.25s ease;
    display: flex;
    flex-direction: column;
}

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

.modal-title[b-2zowhepjej] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.modal-close-btn[b-2zowhepjej] {
    background: none;
    border: none;
    font-size: 24px;
    color: #fff;
    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-2zowhepjej] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-2zowhepjej] {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: auto;
    background: #f7faf4;
    display: flex;
    flex-direction: column;
}

/* Trạng thái đang tải / không có dữ liệu — tự căn giữa cả ngang lẫn dọc,
   không phụ thuộc vào việc modal-body có phải flex container hay không */
.preview-state[b-2zowhepjej] {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    text-align: center;
    color: #6c757d;
}

    .preview-state p[b-2zowhepjej],
    .preview-state i[b-2zowhepjej] {
        margin: 0;
    }

.modal-footer[b-2zowhepjej] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

@keyframes fadeIn-b-2zowhepjej {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-2zowhepjej {
    from { transform: translateY(-16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── Cards wrapper ───────────────────────────────────────── */
.vessel-cards-wrapper[b-2zowhepjej] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto; /* giữ chiều cao thật của card, để modal-body cuộn thay vì bóp nội dung */
}

    .vessel-cards-wrapper .vessel-card[b-2zowhepjej] {
        margin-bottom: 0 !important;
    }

.vessel-card[b-2zowhepjej] {
    border: 1px solid #62977a;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(40,70,40,.07);
}

.vessel-card-header[b-2zowhepjej] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #c6dba2 !important;
    color: #2b3e2d;
}

.vessel-card-header-total[b-2zowhepjej] {
    padding-left: 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.1px;
}

.badge-card-noidia[b-2zowhepjej],
.badge-card-nhapkhau[b-2zowhepjej] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background-color: rgba(43,62,45,0.1);
    color: #2b3e2d;
    border: 1px solid rgba(43,62,45,0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Info panel ──────────────────────────────────────────── */
.vessel-info-panel[b-2zowhepjej] {
    border-right: 1px solid #cfddcb;
    padding: 14px 16px;
    background: #f5fbf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vessel-info-table[b-2zowhepjej] {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .vessel-info-table td[b-2zowhepjej] {
        padding: 3px 0;
        vertical-align: top;
        line-height: 1.4;
        border: none;
    }

        .vessel-info-table td:first-child[b-2zowhepjej] {
            font-weight: 600;
            color: #8ba187;
            font-size: 11.5px;
            padding-left: 20px;
            width: 50%;
            text-align: left;
            white-space: nowrap;
        }

        .vessel-info-table td:last-child[b-2zowhepjej] {
            color: #2b3e2d;
            font-size: 12px;
            font-weight: 500;
            width: 50%;
            text-align: left;
        }

.badge-phapnhan[b-2zowhepjej] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    background-color: #eef5e9;
    color: #4c6249;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    border: 1px solid #d5e2cf;
}

/* ── Alloc table ─────────────────────────────────────────── */
.vessel-table[b-2zowhepjej] {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

    .vessel-table th[b-2zowhepjej],
    .vessel-table td[b-2zowhepjej] {
        border: 1px solid #c9d3de;
        padding: 6px 10px;
        vertical-align: middle;
    }

    .vessel-table .wrap-text[b-2zowhepjej] {
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
    }

.vessel-alloc-panel[b-2zowhepjej] {
    display: flex;
    flex-direction: column;
}

    .vessel-alloc-panel .vessel-table[b-2zowhepjej] {
        min-width: 560px;
        table-layout: fixed;
    }

    .vessel-alloc-panel .vessel-table thead th[b-2zowhepjej] {
        background-color: #e5f0de;
        color: #4c6249;
        font-weight: 600;
        border-color: #cfddcb;
        padding: 8px 10px;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }

    .vessel-alloc-panel .row-branch-header td[b-2zowhepjej] {
        background: #e8f0e4;
        color: #4c6249;
        font-weight: 600;
        font-size: 12px;
        padding: 5px 10px 5px 14px;
        border-left: 3px solid #8ba187;
        border-top: 1px solid #cfddcb;
        border-bottom: 1px solid #cfddcb;
    }

.row-detail td[b-2zowhepjej] {
    background-color: #fff;
    border-bottom: 1px solid #e9f0e5;
    color: #2b3e2d;
}

.row-detail:hover td[b-2zowhepjej] {
    background-color: #f0f5fb;
}

.row-detail:nth-child(even) td[b-2zowhepjej] {
    background: #f4faef;
}

.num-cell[b-2zowhepjej] {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    text-align: right;
    color: #2b3e2d;
    font-weight: 500;
}

    .num-cell.fw-bold[b-2zowhepjej] {
        font-weight: 600 !important;
    }

.num-dash[b-2zowhepjej] {
    color: #e0e6dd !important;
}

.dest-link[b-2zowhepjej] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
}

.dest-vk[b-2zowhepjej],
.dest-nm[b-2zowhepjej] {
    color: #1a1a1a;
    font-weight: 500;
}

.badge-dvvc[b-2zowhepjej] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    color: #578d58;
    font-size: 12px;
    font-weight: 600;
}

.vessel-table .row-subtotal-kv td[b-2zowhepjej] {
    background-color: #dff0d8;
    color: #2b3e2d;
    font-size: 12px;
    font-weight: 600 !important;
    border-top: 1px solid #8ba187;
    border-bottom: 1px solid #8ba187;
}

.row-subtotal-branch td[b-2zowhepjej] {
    background-color: #e8f5e4;
    color: #4c6249;
    font-size: 12px;
    font-weight: 600 !important;
    border-top: 1px solid #cfddcb;
}

.vessel-subtotal-wrap[b-2zowhepjej] {
    flex-shrink: 0;
}

    .vessel-subtotal-wrap .vessel-table[b-2zowhepjej] {
        min-width: 560px;
        table-layout: fixed;
    }

    .vessel-subtotal-wrap .row-subtotal-vessel td[b-2zowhepjej] {
        background: #c9e0c0;
        color: #2b3e2d;
        border: 1px solid #a8c8a0;
        border-top: 1px solid #7aaa72;
        font-weight: 600 !important;
        font-size: 12px;
        padding: 8px 10px;
    }

/* ── Column widths ───────────────────────────────────────── */
.col-vessel[b-2zowhepjej] {
    width: 24%;
    min-width: 200px;
    text-align: left;
}

.col-xetai[b-2zowhepjej],
.col-salan[b-2zowhepjej],
.col-tongpb[b-2zowhepjej] {
    width: 9%;
    min-width: 80px;
    text-align: right;
}

.col-tauchuot[b-2zowhepjej],
.col-luukho[b-2zowhepjej] {
    width: 10%;
    min-width: 88px;
    text-align: right;
}

.col-khuvuc[b-2zowhepjej] {
    width: 13%;
    min-width: 95px;
}

.col-dvvc[b-2zowhepjej] {
    width: 8%;
    min-width: 60px;
    text-align: center;
}

.col-note[b-2zowhepjej] {
    width: 16%;
    min-width: 140px;
    text-align: left;
}

.text-right[b-2zowhepjej] {
    text-align: right;
}

@media (max-width: 900px) {
    .vessel-card-inner[b-2zowhepjej] {
        flex-direction: column !important;
    }

    .vessel-info-panel[b-2zowhepjej] {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid #cfddcb;
    }
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/TripCargoPlanningShipDetailContainerModal.razor.rz.scp.css */
.filters-section[b-yer5cbkdh1] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

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

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

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

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

.filter-input[b-yer5cbkdh1], .filter-select[b-yer5cbkdh1] {
    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-yer5cbkdh1], .filter-select:focus[b-yer5cbkdh1] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-yer5cbkdh1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.status-circle[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    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-yer5cbkdh1],
.status-notstarted[b-yer5cbkdh1] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-yer5cbkdh1] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-yer5cbkdh1],
.status-canceled[b-yer5cbkdh1] {
    background: linear-gradient(145deg, #e55353, #dc3545);
}

.status-executed[b-yer5cbkdh1],
.status-completed[b-yer5cbkdh1] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-yer5cbkdh1] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-yer5cbkdh1] {
    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-yer5cbkdh1],
.transport-grid .rz-data-grid td .status-active[b-yer5cbkdh1],
.transport-grid .rz-data-grid td .status-canceled[b-yer5cbkdh1],
.transport-grid .rz-data-grid td .status-default[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    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-yer5cbkdh1] {
    text-align: center;
    vertical-align: middle;
}

.domestic-form-container[b-yer5cbkdh1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.fixed-header[b-yer5cbkdh1] {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.form-content[b-yer5cbkdh1] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.fixed-footer[b-yer5cbkdh1] {
    position: sticky;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    text-align: right;
}

.form-group[b-yer5cbkdh1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label[b-yer5cbkdh1] {
    font-weight: bold;
}

.form-input[b-yer5cbkdh1] {
    width: 100%;
}

.required[b-yer5cbkdh1] {
    color: red;
}

.domestic-form[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    border-bottom: 2px solid #007bff;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

    .form-header h4[b-yer5cbkdh1] {
        color: #007bff;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .form-header i[b-yer5cbkdh1] {
        margin-right: 8px;
    }

.form-grid[b-yer5cbkdh1] {
    display: grid;
    gap: 12px;
}

.form-group[b-yer5cbkdh1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-yer5cbkdh1] {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin-bottom: 4px;
}

.required[b-yer5cbkdh1] {
    color: #dc3545;
    font-weight: bold;
}

.form-input[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        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-yer5cbkdh1],
.rz-numeric.form-input[b-yer5cbkdh1],
.rz-dropdown.form-input[b-yer5cbkdh1],
.rz-datepicker.form-input[b-yer5cbkdh1] {
    width: 100% !important;
    height: 36px !important;
}

.rz-dropdown-panel[b-yer5cbkdh1] {
    z-index: 10000 !important;
}

/* Make dropdowns more attractive */
.rz-dropdown.form-input .rz-dropdown-label[b-yer5cbkdh1] {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-grid[b-yer5cbkdh1] {
        grid-template-columns: 1fr;
    }

    .domestic-form[b-yer5cbkdh1] {
        padding: 12px;
    }

    .form-header h4[b-yer5cbkdh1] {
        font-size: 14px;
    }
}

/* Grid styling improvements */
.transport-grid[b-yer5cbkdh1] {
    font-size: 13px;
}

    .transport-grid .rz-datatable-data td[b-yer5cbkdh1] {
        padding: 8px 6px !important;
        vertical-align: middle;
    }

.quantity-highlight[b-yer5cbkdh1] {
    font-weight: bold;
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.transport-value[b-yer5cbkdh1] {
    text-align: right;
    font-weight: 500;
}

/* Remaining quantity styling */
.remaining-quantity[b-yer5cbkdh1] {
    background-color: #f0f8ff !important;
    color: #0066cc !important;
    font-weight: bold !important;
    border: 1px solid #b3d9ff !important;
}

.detail-value.remaining-quantity[b-yer5cbkdh1] {
    background-color: #f0f8ff;
    color: #0066cc;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #b3d9ff;
}

/* Disabled field styling */
.disabled-field[b-yer5cbkdh1] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
}

.buttons-grid[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    display: inline-flex;
}


.etrans-btn[b-yer5cbkdh1] {
    max-width: 150px;
}
.etrans-container[b-yer5cbkdh1] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}
.header[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-yer5cbkdh1], .filter-select[b-yer5cbkdh1] {
    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-yer5cbkdh1], .filter-select:focus[b-yer5cbkdh1] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.etrans-btn[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

.table-container[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}
@media (max-width: 1500px) {
    .table-container[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        padding: 12px;
    }

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

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

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

    .table-header[b-yer5cbkdh1] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .rz-grid-table[b-yer5cbkdh1] {
        font-size: 12px;
        margin:6px;
    }

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

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-yer5cbkdh1] {
    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-yer5cbkdh1 0.3s ease;
    
}

.modal-container[b-yer5cbkdh1] {
    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-yer5cbkdh1 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color:white;
}

.modal-close-btn[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

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

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

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

.info-item[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

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

        .transport-grid-full .rz-grid-table th[b-yer5cbkdh1] {
            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-yer5cbkdh1] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        max-width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    background: rgba(255, 255, 255, 0.8);
}

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

/* Tooltip enhancements */
.rz-tooltip[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    user-select: none;
}

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-yer5cbkdh1 {
    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-yer5cbkdh1] {
    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-yer5cbkdh1] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

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

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

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

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

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

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

/* Header styles */
.header[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-yer5cbkdh1], .filter-select[b-yer5cbkdh1] {
    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-yer5cbkdh1], .filter-select:focus[b-yer5cbkdh1] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.driver-badge-1[b-yer5cbkdh1] {
    color: #33b266;
    font-weight: 700; 
    letter-spacing: 0.5px; 
    text-transform: uppercase;
}

.driver-badge-2[b-yer5cbkdh1] {
    color: #5983ff;
    font-weight: 700;
    letter-spacing: 0.5px; 
    text-transform: uppercase;
}

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

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

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

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

/* Modal styles */
.modal-overlay[b-yer5cbkdh1] {
    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-yer5cbkdh1 0.3s ease;
}

.modal-container[b-yer5cbkdh1] {
    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-yer5cbkdh1 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        background-color: rgba(255, 255, 255, 0.1);
    }

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

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

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

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

/* Transport header actions */
.transport-header-actions[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-row-item[b-yer5cbkdh1] {
    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-yer5cbkdh1] {
        border-bottom: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-yer5cbkdh1] {
    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-yer5cbkdh1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-yer5cbkdh1 {
    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-yer5cbkdh1] {
        width: 98%;
    }

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

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

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

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

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

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

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

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

    .rz-grid-table[b-yer5cbkdh1] {
        font-size: 12px;
        margin: 6px;
    }

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

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

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

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

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

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

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

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

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

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

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

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-yer5cbkdh1] {
    background-color: #f0f8ff;
}

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

/* Custom status indicators */
.status-indicator[b-yer5cbkdh1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

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

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

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

    .status-indicator.cancelled[b-yer5cbkdh1] {
        background-color: #dc3545;
    }
.rz-pager .rz-dropdown[b-yer5cbkdh1] {
    font-size: var(--font-size-sm-base);
    max-height: 35px;
}
.rz-textbox.form-input[b-yer5cbkdh1], .rz-numeric.form-input[b-yer5cbkdh1], .rz-dropdown.form-input[b-yer5cbkdh1], .rz-datepicker.form-input[b-yer5cbkdh1]{
    height:45px !important;
}

/* Filter wrapper */
.filter-wrapper[b-yer5cbkdh1] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-yer5cbkdh1] {
        display: none !important;
    }
    
    .mobile-filters-content[b-yer5cbkdh1] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-yer5cbkdh1] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        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-yer5cbkdh1] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-yer5cbkdh1] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-yer5cbkdh1] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        max-height: 1000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-yer5cbkdh1] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-yer5cbkdh1] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-yer5cbkdh1] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-yer5cbkdh1], .filter-select[b-yer5cbkdh1] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-yer5cbkdh1] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-yer5cbkdh1],
    .rz-grid-table td[b-yer5cbkdh1] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-yer5cbkdh1] {
        position: static !important;
    }

    /* Mobile Modal Optimization */
    .modal-container[b-yer5cbkdh1] {
        width: 95vw !important;
        height: 95vh !important;
        margin: 0;
        border-radius: 8px;
    }
    
    .modal-header[b-yer5cbkdh1] {
        padding: 6px 8px;
        flex-shrink: 0;
    }
    
    .modal-title[b-yer5cbkdh1] {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }
    
    .modal-close-btn[b-yer5cbkdh1] {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .modal-body[b-yer5cbkdh1] {
        padding: 0;
        overflow: hidden;
        flex: 1;
    }
    
    /* Mobile Detail Layout - Stack vertically */
    .detail-layout[b-yer5cbkdh1] {
        flex-direction: column !important;
        height: 100%;
        overflow: hidden;
    }
    
    /* Mobile Left Panel - Transform to collapsible info panel */
    .left-panel[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        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-yer5cbkdh1] {
        background: #e9ecef;
    }
    
    .mobile-info-toggle i[b-yer5cbkdh1] {
        font-size: 0.8rem;
        transition: transform 0.2s ease;
    }
    
    .mobile-info-toggle.collapsed i[b-yer5cbkdh1] {
        transform: rotate(180deg);
    }
    
    /* Mobile info content - collapsible */
    .mobile-info-content[b-yer5cbkdh1] {
        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-yer5cbkdh1] {
        max-height: 400px;
    }
    
    /* Mobile form container adjustments */
    .domestic-form-container[b-yer5cbkdh1] {
        height: auto !important;
        max-height: 350px;
        display: flex;
        flex-direction: column;
    }
    
    .form-header.fixed-header[b-yer5cbkdh1] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        flex-shrink: 0;
    }
    
    .form-header.fixed-header h4[b-yer5cbkdh1] {
        font-size: 0.85rem;
        margin: 0;
        color: var(--text-dark);
    }
    
    .form-content[b-yer5cbkdh1] {
        flex: 1;
        overflow-y: auto;
        padding: 8px 12px;
    }
    
    .form-group[b-yer5cbkdh1] {
        margin-bottom: 8px !important;
    }
    
    .form-label[b-yer5cbkdh1] {
        font-size: 0.75rem !important;
        margin-bottom: 3px;
    }
    
    .form-input[b-yer5cbkdh1] {
        font-size: 0.8rem !important;
        height: 32px !important;
        padding: 4px 8px !important;
    }
    
    /* Mobile Right Panel - Main content area */
    .right-panel[b-yer5cbkdh1] {
        flex: 1;
        order: 2;
        padding: 8px;
        overflow: auto;
    }
    
    /* Mobile transport header */
    .transport-header-actions[b-yer5cbkdh1] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }
    
    .transport-header-actions h4[b-yer5cbkdh1] {
        font-size: 0.9rem;
        text-align: center;
    }
    
    /* Mobile transport grid */
    .transport-grid[b-yer5cbkdh1] {
        font-size: 0.75rem !important;
    }
    
    .transport-grid .rz-grid-table th[b-yer5cbkdh1],
    .transport-grid .rz-grid-table td[b-yer5cbkdh1] {
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
    }
    
    /* Mobile detail table adjustments */
    .detail-table[b-yer5cbkdh1] {
        margin-bottom: 8px;
    }
    
    .detail-row-item[b-yer5cbkdh1] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .detail-label[b-yer5cbkdh1],
    .detail-value[b-yer5cbkdh1] {
        font-size: 0.75rem !important;
    }
    
    .detail-value.important[b-yer5cbkdh1] {
        font-size: 0.8rem !important;
    }
}

/* Desktop styles - ensure mobile-only elements are hidden on desktop */
@media (min-width: 769px) {
    .mobile-info-toggle[b-yer5cbkdh1] {
        display: none !important;
    }
    
    .mobile-info-content[b-yer5cbkdh1] {
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
}

/* Modal footer responsive styles */
.modal-footer[b-yer5cbkdh1] {
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .modal-footer[b-yer5cbkdh1] {
        padding: 8px;
    }
    
    /* Mobile footer adjustments */
    .modal-footer .px-2[b-yer5cbkdh1] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

/* =======================================================================
   REDESIGN — align with the etlt-* design language (see
   TripCargoPlanningShipDetailModal.razor.css for the full rationale).
   ======================================================================= */
.modal-overlay[b-yer5cbkdh1] {
    background-color: rgba(16, 36, 27, 0.55);
}

.modal-container[b-yer5cbkdh1] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0,0,0,.25));
}

.modal-header[b-yer5cbkdh1] {
    position: relative;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    color: var(--etlt-ink, #10241B);
}

    .modal-header[b-yer5cbkdh1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--etlt-accent, #CA3C19), var(--etlt-harbor, #0F7350));
        border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    }

.modal-title[b-yer5cbkdh1] {
    color: var(--etlt-ink, #10241B);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .modal-title i[b-yer5cbkdh1] {
        font-size: 11px;
        color: #fff;
        background: var(--etlt-accent, #CA3C19);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.modal-close-btn[b-yer5cbkdh1] {
    color: var(--etlt-muted, #6C8477);
}

    .modal-close-btn:hover[b-yer5cbkdh1] {
        background-color: var(--etlt-danger-soft, #FAE8E6);
        color: var(--etlt-danger, #AF2A20);
    }

.modal-body[b-yer5cbkdh1] {
    background: var(--etlt-canvas, #EEF3EF);
}

.modal-footer[b-yer5cbkdh1] {
    background: var(--etlt-surface, #fff);
    border-top: 1px solid var(--etlt-line, #D8E3DB);
}

/* Buttons — flatten ETransButton chrome, scoped to this modal only */
.modal-container[b-yer5cbkdh1]  .etrans-btn {
    box-shadow: none !important;
    letter-spacing: 0;
    font-weight: 500;
}

    .modal-container[b-yer5cbkdh1]  .etrans-btn:hover:not(:disabled),
    .modal-container[b-yer5cbkdh1]  .etrans-btn:active:not(:disabled) {
        transform: none !important;
        box-shadow: none !important;
    }

.modal-container[b-yer5cbkdh1]  .etrans-btn-primary {
    background: var(--etlt-accent-soft, #FBE7E0);
    color: var(--etlt-accent, #CA3C19);
}

    .modal-container[b-yer5cbkdh1]  .etrans-btn-primary:hover:not(:disabled) {
        background: var(--etlt-accent, #CA3C19);
        color: #fff;
    }

.modal-container[b-yer5cbkdh1]  .etrans-btn-secondary {
    background: #ECF2EE;
    color: var(--etlt-ink2, #2A4436);
    border-color: transparent;
}

    .modal-container[b-yer5cbkdh1]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-line2, #E8F0EA);
        color: var(--etlt-ink2, #2A4436);
        border-color: var(--etlt-line, #D8E3DB);
    }

.cont-toolbar[b-yer5cbkdh1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cont-toolbar[b-yer5cbkdh1]  .etrans-btn-wrapper {
    display: inline-flex;
}

.cont-toolbar[b-yer5cbkdh1]  .etrans-btn {
    height: 32px;
    min-width: 128px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--etlt-r, 6px);
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cont-toolbar[b-yer5cbkdh1]  .etrans-btn-primary {
    border-color: transparent;
}

.cont-toolbar[b-yer5cbkdh1]  .etrans-btn-secondary {
    background: #fff;
    color: var(--etlt-ink2, #2A4436);
    border: 1px solid #B9C9BE;
}

    .cont-toolbar[b-yer5cbkdh1]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-accent-soft, #FBE7E0);
        color: var(--etlt-accent, #CA3C19);
        border-color: var(--etlt-accent, #CA3C19);
    }

.cont-toolbar[b-yer5cbkdh1]  .etrans-btn-success {
    background: var(--etlt-work, #23996A);
    color: #fff;
    border: 1px solid transparent;
}

    .cont-toolbar[b-yer5cbkdh1]  .etrans-btn-success:hover:not(:disabled) {
        background: #1C7D57;
        color: #fff;
    }

.cont-toolbar-left[b-yer5cbkdh1],
.cont-toolbar-right[b-yer5cbkdh1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cont-row-actions[b-yer5cbkdh1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

    .cont-row-actions[b-yer5cbkdh1]  .etrans-btn-wrapper {
        display: inline-flex;
    }

    .cont-row-actions[b-yer5cbkdh1]  .etrans-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .cont-row-actions[b-yer5cbkdh1]  .cont-btn-delete {
        color: #dc3545;
    }

        .cont-row-actions[b-yer5cbkdh1]  .cont-btn-delete:hover:not(:disabled) {
            background: rgba(220, 53, 69, 0.1);
        }

.modal-container[b-yer5cbkdh1]  .rz-data-grid {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.cont-summary[b-yer5cbkdh1] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #495057;
}

    .cont-summary b[b-yer5cbkdh1] {
        color: var(--primary-color, #ca3c19);
    }

/* etlt redesign — appended last to win the cascade */
.modal-overlay[b-yer5cbkdh1] {
    background-color: rgba(16, 36, 27, 0.55);
}

.modal-container.cont-modal[b-yer5cbkdh1] {
    width: 760px;
    max-width: 95vw;
    height: auto;
    max-height: 88vh;
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.cont-modal .modal-header[b-yer5cbkdh1] {
    position: relative;
    padding: 12px 18px;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    color: var(--etlt-ink, #10241B);
}

    .cont-modal .modal-header[b-yer5cbkdh1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--etlt-accent, #CA3C19), var(--etlt-harbor, #0F7350));
    }

.cont-modal .modal-title[b-yer5cbkdh1] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--etlt-ink, #10241B);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

    .cont-modal .modal-title i[b-yer5cbkdh1] {
        font-size: 11px;
        color: #fff;
        background: var(--etlt-accent, #CA3C19);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.cont-modal .modal-close-btn[b-yer5cbkdh1] {
    font-size: 20px;
    width: 28px;
    height: 28px;
    color: var(--etlt-muted, #6C8477);
}

    .cont-modal .modal-close-btn:hover[b-yer5cbkdh1] {
        background-color: var(--etlt-danger-soft, #FAE8E6);
        color: var(--etlt-danger, #AF2A20);
    }

.cont-modal .cont-body[b-yer5cbkdh1] {
    padding: 14px 18px;
    background: var(--etlt-canvas, #EEF3EF);
    overflow-y: auto;
}

.cont-modal .cont-footer[b-yer5cbkdh1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--etlt-line, #D8E3DB);
    background: var(--etlt-surface, #fff);
}

.cont-modal[b-yer5cbkdh1]  .cont-grid {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    overflow: hidden;
}

    .cont-modal[b-yer5cbkdh1]  .cont-grid .rz-grid-table thead th {
        background: #F5F9F6;
        color: var(--etlt-ink2, #2A4436);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .cont-modal[b-yer5cbkdh1]  .cont-grid .rz-grid-table td {
        font-size: 12.5px;
    }

.cont-modal .cont-summary[b-yer5cbkdh1] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    padding: 6px 12px;
    margin-top: 8px;
}

.cont-modal[b-yer5cbkdh1]  .etrans-btn-primary {
    background: var(--etlt-accent, #CA3C19);
    color: #fff;
}

    .cont-modal[b-yer5cbkdh1]  .etrans-btn-primary:hover:not(:disabled) {
        background: var(--etlt-accent-hover, #D96B47);
        color: #fff;
    }

.cont-modal[b-yer5cbkdh1]  .etrans-btn-secondary {
    background: #fff;
    color: var(--etlt-ink2, #2A4436);
    border: 1px solid var(--etlt-line, #D8E3DB);
}

    .cont-modal[b-yer5cbkdh1]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-accent-soft, #FBE7E0);
        color: var(--etlt-accent, #CA3C19);
        border-color: var(--etlt-accent, #CA3C19);
    }
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/TripCargoPlanningShipDetailExtraInfoModal.razor.rz.scp.css */
.modal-overlay[b-vpr3irayu1] {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 36, 27, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-vpr3irayu1 0.2s ease;
}

.modal-container[b-vpr3irayu1] {
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    animation: slideIn-b-vpr3irayu1 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-vpr3irayu1] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    flex-shrink: 0;
}

    .modal-header[b-vpr3irayu1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--etlt-accent, #CA3C19), var(--etlt-harbor, #0F7350));
    }

.modal-title[b-vpr3irayu1] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--etlt-ink, #10241B);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

    .modal-title i[b-vpr3irayu1] {
        font-size: 11px;
        color: #fff;
        background: var(--etlt-accent, #CA3C19);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.modal-close-btn[b-vpr3irayu1] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--etlt-muted, #6C8477);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
}

    .modal-close-btn:hover[b-vpr3irayu1] {
        background-color: var(--etlt-danger-soft, #FAE8E6);
        color: var(--etlt-danger, #AF2A20);
    }

.modal-body[b-vpr3irayu1] {
    padding: 14px 18px;
    background: var(--etlt-canvas, #EEF3EF);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exi-card[b-vpr3irayu1] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    overflow: hidden;
}

.exi-card-head[b-vpr3irayu1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--etlt-ink2, #2A4436);
}

    .exi-card-head i[b-vpr3irayu1] {
        color: var(--etlt-accent, #CA3C19);
        font-size: 12px;
    }

.exi-grid[b-vpr3irayu1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 12px;
}

.exi-grid-3[b-vpr3irayu1] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-group[b-vpr3irayu1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-group > label[b-vpr3irayu1] {
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--etlt-muted, #6C8477);
        margin: 0;
    }

[b-vpr3irayu1] .form-input,
[b-vpr3irayu1] .rz-textbox.form-input,
[b-vpr3irayu1] .rz-datepicker.form-input {
    width: 100% !important;
    height: 34px !important;
    font-size: 13px !important;
    border: 1px solid var(--etlt-line, #D8E3DB) !important;
    border-radius: var(--etlt-r, 6px) !important;
    box-shadow: none !important;
}

    [b-vpr3irayu1] .form-input:focus,
    [b-vpr3irayu1] .form-input:focus-within {
        border-color: var(--etlt-accent, #CA3C19) !important;
        box-shadow: 0 0 0 2px var(--etlt-accent-soft, #FBE7E0) !important;
    }

.modal-footer[b-vpr3irayu1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--etlt-line, #D8E3DB);
    background: var(--etlt-surface, #fff);
    flex-shrink: 0;
}

[b-vpr3irayu1] .etrans-btn {
    box-shadow: none !important;
    letter-spacing: 0;
    font-weight: 500;
}

    [b-vpr3irayu1] .etrans-btn:hover:not(:disabled),
    [b-vpr3irayu1] .etrans-btn:active:not(:disabled) {
        transform: none !important;
        box-shadow: none !important;
    }

[b-vpr3irayu1] .etrans-btn-primary {
    background: var(--etlt-accent, #CA3C19);
}

    [b-vpr3irayu1] .etrans-btn-primary:hover:not(:disabled) {
        background: var(--etlt-accent-hover, #D96B47);
    }

[b-vpr3irayu1] .etrans-btn-secondary {
    background: #fff;
    color: var(--etlt-ink2, #2A4436);
    border: 1px solid var(--etlt-line, #D8E3DB);
}

    [b-vpr3irayu1] .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-accent-soft, #FBE7E0);
        color: var(--etlt-accent, #CA3C19);
        border-color: var(--etlt-accent, #CA3C19);
    }

@media (max-width: 576px) {
    .exi-grid[b-vpr3irayu1], .exi-grid-3[b-vpr3irayu1] {
        grid-template-columns: 1fr;
    }
}

@keyframes fadeIn-b-vpr3irayu1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-vpr3irayu1 {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/TripCargoPlanningShipDetailModal.razor.rz.scp.css */
.history-btn[b-9trtkngd7s] {
    padding: 4px 10px;
    border-radius: .25rem;
    background-color: rgba(108,117,125,0.7);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out;
}

    .history-btn:hover[b-9trtkngd7s] {
        background-color: rgba(108,117,125,0.95);
    }

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

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

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

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

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

.filter-input[b-9trtkngd7s], .filter-select[b-9trtkngd7s] {
    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-9trtkngd7s], .filter-select:focus[b-9trtkngd7s] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-9trtkngd7s] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.status-circle[b-9trtkngd7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: black;
    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-9trtkngd7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    color: #2a2a2a;
    opacity: 0.8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1;
}

.status-default[b-9trtkngd7s],
.status-notstarted[b-9trtkngd7s] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-9trtkngd7s] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-9trtkngd7s],
.status-canceled[b-9trtkngd7s] {
    background: #ffa0a9;
}

.status-executed[b-9trtkngd7s],
.status-completed[b-9trtkngd7s] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-9trtkngd7s] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-9trtkngd7s] {
    background: #a8ffc1;
}

/* Đả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-9trtkngd7s],
.transport-grid .rz-data-grid td .status-active[b-9trtkngd7s],
.transport-grid .rz-data-grid td .status-canceled[b-9trtkngd7s],
.transport-grid .rz-data-grid td .status-default[b-9trtkngd7s] {
    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-9trtkngd7s] {
    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-9trtkngd7s] {
    text-align: center;
    vertical-align: middle;
}

.domestic-form-container[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.fixed-header[b-9trtkngd7s] {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.form-content[b-9trtkngd7s] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.fixed-footer[b-9trtkngd7s] {
    position: sticky;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    text-align: right;
}

.form-group[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label[b-9trtkngd7s] {
    font-weight: bold;
}

.form-input[b-9trtkngd7s] {
    width: 100%;
}

.required[b-9trtkngd7s] {
    color: red;
}

.domestic-form[b-9trtkngd7s] {
    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-9trtkngd7s] {
    border-bottom: 2px solid #007bff;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

    .form-header h4[b-9trtkngd7s] {
        color: #007bff;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .form-header i[b-9trtkngd7s] {
        margin-right: 8px;
    }

.form-grid[b-9trtkngd7s] {
    display: grid;
    gap: 12px;
}

.form-group[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-9trtkngd7s] {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin-bottom: 4px;
}

.required[b-9trtkngd7s] {
    color: #dc3545;
    font-weight: bold;
}

.form-input[b-9trtkngd7s] {
    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-9trtkngd7s] {
        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-9trtkngd7s],
.rz-numeric.form-input[b-9trtkngd7s],
.rz-dropdown.form-input[b-9trtkngd7s],
.rz-datepicker.form-input[b-9trtkngd7s] {
    width: 100% !important;
    height: 36px !important;
}

.rz-dropdown-panel[b-9trtkngd7s] {
    z-index: 10000 !important;
}

/* Make dropdowns more attractive */
.rz-dropdown.form-input .rz-dropdown-label[b-9trtkngd7s] {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-grid[b-9trtkngd7s] {
        grid-template-columns: 1fr;
    }

    .domestic-form[b-9trtkngd7s] {
        padding: 12px;
    }

    .form-header h4[b-9trtkngd7s] {
        font-size: 14px;
    }
}

/* Grid styling improvements */
.transport-grid[b-9trtkngd7s] {
    font-size: 13px;
}

    .transport-grid .rz-datatable-data td[b-9trtkngd7s] {
        padding: 8px 6px !important;
        vertical-align: middle;
    }

.quantity-highlight[b-9trtkngd7s] {
    font-weight: bold;
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.transport-value[b-9trtkngd7s] {
    text-align: right;
    font-weight: 500;
}

/* Remaining quantity styling */
.remaining-quantity[b-9trtkngd7s] {
    background-color: #f0f8ff !important;
    color: #0066cc !important;
    font-weight: bold !important;
    border: 1px solid #b3d9ff !important;
}

.detail-value.remaining-quantity[b-9trtkngd7s] {
    background-color: #f0f8ff;
    color: #0066cc;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #b3d9ff;
}

/* Disabled field styling */
.disabled-field[b-9trtkngd7s] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
}

.buttons-grid[b-9trtkngd7s] {
    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-9trtkngd7s] {
    display: inline-flex;
}


.etrans-btn[b-9trtkngd7s] {
    max-width: 150px;
}

.etrans-container[b-9trtkngd7s] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-9trtkngd7s] {
    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-9trtkngd7s] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-9trtkngd7s], .filter-select[b-9trtkngd7s] {
    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-9trtkngd7s], .filter-select:focus[b-9trtkngd7s] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.etrans-btn[b-9trtkngd7s] {
    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-9trtkngd7s] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

.table-container[b-9trtkngd7s] {
    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-9trtkngd7s] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@media (max-width: 1500px) {
    .table-container[b-9trtkngd7s] {
        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-9trtkngd7s] {
        padding: 12px;
    }

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

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

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

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

    .rz-grid-table[b-9trtkngd7s] {
        font-size: 12px;
        margin: 6px;
    }

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

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

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-9trtkngd7s] {
    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-9trtkngd7s 0.3s ease;
}

.modal-container[b-9trtkngd7s] {
    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-9trtkngd7s 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-9trtkngd7s] {
    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-9trtkngd7s] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.modal-close-btn[b-9trtkngd7s] {
    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-9trtkngd7s] {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

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

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

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

.info-item[b-9trtkngd7s] {
    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-9trtkngd7s] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

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

        .transport-grid-full .rz-grid-table th[b-9trtkngd7s] {
            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-9trtkngd7s] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-9trtkngd7s] {
    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-9trtkngd7s] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-9trtkngd7s] {
    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-9trtkngd7s] {
        max-width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-9trtkngd7s] {
    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-9trtkngd7s] {
    background: rgba(255, 255, 255, 0.8);
}

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

/* Tooltip enhancements */
.rz-tooltip[b-9trtkngd7s] {
    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-9trtkngd7s] {
    user-select: none;
}

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-9trtkngd7s {
    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-9trtkngd7s] {
    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-9trtkngd7s] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

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

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

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

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

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

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

/* Header styles */
.header[b-9trtkngd7s] {
    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-9trtkngd7s] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-9trtkngd7s], .filter-select[b-9trtkngd7s] {
    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-9trtkngd7s], .filter-select:focus[b-9trtkngd7s] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-9trtkngd7s] {
    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-9trtkngd7s] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.driver-badge-1[b-9trtkngd7s] {
    color: #33b266;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.driver-badge-2[b-9trtkngd7s] {
    color: #5983ff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

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

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

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

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

/* Modal styles */
.modal-overlay[b-9trtkngd7s] {
    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-9trtkngd7s 0.3s ease;
}

.modal-container[b-9trtkngd7s] {
    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-9trtkngd7s 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-9trtkngd7s] {
    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-9trtkngd7s] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-9trtkngd7s] {
    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-9trtkngd7s] {
        background-color: rgba(255, 255, 255, 0.1);
    }

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

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

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

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

/* Transport header actions */
.transport-header-actions[b-9trtkngd7s] {
    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-9trtkngd7s] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-row-item[b-9trtkngd7s] {
    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-9trtkngd7s] {
        border-bottom: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-9trtkngd7s] {
    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-9trtkngd7s {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-9trtkngd7s {
    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-9trtkngd7s] {
        width: 98%;
    }

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

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

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

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

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

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

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

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

    .rz-grid-table[b-9trtkngd7s] {
        font-size: 12px;
        margin: 6px;
    }

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

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

    .modal-container[b-9trtkngd7s] {
        width: 100%;
        margin: 10px;
    }

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

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

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

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

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

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

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

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

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-9trtkngd7s] {
    background-color: #f0f8ff;
}

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

/* Custom status indicators */
.status-indicator[b-9trtkngd7s] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

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

    .status-indicator.pending[b-9trtkngd7s] {
        background-color: #ffc107;
    }

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

    .status-indicator.cancelled[b-9trtkngd7s] {
        background-color: #dc3545;
    }

.rz-pager .rz-dropdown[b-9trtkngd7s] {
    font-size: var(--font-size-sm-base);
    max-height: 35px;
}

.rz-textbox.form-input[b-9trtkngd7s], .rz-numeric.form-input[b-9trtkngd7s], .rz-dropdown.form-input[b-9trtkngd7s], .rz-datepicker.form-input[b-9trtkngd7s] {
    height: 45px !important;
}

/* Filter wrapper */
.filter-wrapper[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-9trtkngd7s] {
        display: none !important;
    }

    .mobile-filters-content[b-9trtkngd7s] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-9trtkngd7s] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-9trtkngd7s] {
        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-9trtkngd7s] {
        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-9trtkngd7s] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-9trtkngd7s] {
        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-9trtkngd7s] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-9trtkngd7s] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-9trtkngd7s] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-9trtkngd7s] {
        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-9trtkngd7s] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-9trtkngd7s] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-9trtkngd7s] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .filter-label[b-9trtkngd7s] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-9trtkngd7s], .filter-select[b-9trtkngd7s] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    /* Mobile filter actions */
    .filter-actions[b-9trtkngd7s] {
        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-9trtkngd7s] {
        padding: 0;
        margin: 0;
    }

    .rz-data-grid[b-9trtkngd7s] {
        margin: 0 !important;
        font-size: 0.8rem;
    }

    .rz-grid-table th[b-9trtkngd7s],
    .rz-grid-table td[b-9trtkngd7s] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .rz-grid-table th[b-9trtkngd7s] {
        position: static !important;
    }

    /* Mobile Modal Optimization */
    .modal-container[b-9trtkngd7s] {
        width: 95vw !important;
        height: 95vh !important;
        margin: 0;
        border-radius: 8px;
    }

    .modal-header[b-9trtkngd7s] {
        padding: 6px 8px;
        flex-shrink: 0;
    }

    .modal-title[b-9trtkngd7s] {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }

    .modal-close-btn[b-9trtkngd7s] {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

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

    /* Mobile Detail Layout - Stack vertically */
    .detail-layout[b-9trtkngd7s] {
        flex-direction: column !important;
        height: 100%;
        overflow: hidden;
    }

    /* Mobile Left Panel - Transform to collapsible info panel */
    .left-panel[b-9trtkngd7s] {
        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-9trtkngd7s] {
        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-9trtkngd7s] {
            background: #e9ecef;
        }

        .mobile-info-toggle i[b-9trtkngd7s] {
            font-size: 0.8rem;
            transition: transform 0.2s ease;
        }

        .mobile-info-toggle.collapsed i[b-9trtkngd7s] {
            transform: rotate(180deg);
        }

    /* Mobile info content - collapsible */
    .mobile-info-content[b-9trtkngd7s] {
        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-9trtkngd7s] {
            max-height: 400px;
        }

    /* Mobile form container adjustments */
    .domestic-form-container[b-9trtkngd7s] {
        height: auto !important;
        max-height: 350px;
        display: flex;
        flex-direction: column;
    }

    .form-header.fixed-header[b-9trtkngd7s] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        flex-shrink: 0;
    }

        .form-header.fixed-header h4[b-9trtkngd7s] {
            font-size: 0.85rem;
            margin: 0;
            color: var(--text-dark);
        }

    .form-content[b-9trtkngd7s] {
        flex: 1;
        overflow-y: auto;
        padding: 8px 12px;
    }

    .form-group[b-9trtkngd7s] {
        margin-bottom: 8px !important;
    }

    .form-label[b-9trtkngd7s] {
        font-size: 0.75rem !important;
        margin-bottom: 3px;
    }

    .form-input[b-9trtkngd7s] {
        font-size: 0.8rem !important;
        height: 32px !important;
        padding: 4px 8px !important;
    }

    /* Mobile Right Panel - Main content area */
    .right-panel[b-9trtkngd7s] {
        flex: 1;
        order: 2;
        padding: 8px;
        overflow: auto;
    }

    /* Mobile transport header */
    .transport-header-actions[b-9trtkngd7s] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

        .transport-header-actions h4[b-9trtkngd7s] {
            font-size: 0.9rem;
            text-align: center;
        }

    /* Mobile transport grid */
    .transport-grid[b-9trtkngd7s] {
        font-size: 0.75rem !important;
    }

        .transport-grid .rz-grid-table th[b-9trtkngd7s],
        .transport-grid .rz-grid-table td[b-9trtkngd7s] {
            padding: 4px 2px !important;
            font-size: 0.7rem !important;
        }

    /* Mobile detail table adjustments */
    .detail-table[b-9trtkngd7s] {
        margin-bottom: 8px;
    }

    .detail-row-item[b-9trtkngd7s] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .detail-label[b-9trtkngd7s],
    .detail-value[b-9trtkngd7s] {
        font-size: 0.75rem !important;
    }

        .detail-value.important[b-9trtkngd7s] {
            font-size: 0.8rem !important;
        }
}

.detail-layout.compact-layout[b-9trtkngd7s] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.panels-container[b-9trtkngd7s] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 16px;
    overflow: hidden;
}

.left-panel[b-9trtkngd7s], .right-panel[b-9trtkngd7s] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.right-panel[b-9trtkngd7s] {
    gap: 16px;
}

.grid-box[b-9trtkngd7s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .grid-box .section-header[b-9trtkngd7s] {
        flex-shrink: 0;
    }

    .grid-box .rz-data-grid[b-9trtkngd7s] {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .panels-container[b-9trtkngd7s] {
        flex-direction: column;
        gap: 20px;
        overflow-y: auto;
    }

    .left-panel[b-9trtkngd7s], .right-panel[b-9trtkngd7s] {
        flex: none;
        width: 100%;
        height: auto;
    }

    .right-panel[b-9trtkngd7s] {
        gap: 20px;
    }

    .grid-box[b-9trtkngd7s] {
        height: auto;
        min-height: 300px; /* tránh grid quá nhỏ */
    }
}

/* Giữ nguyên các style cũ của anh cho group header, button, grid... */
.custom-group-header-transship[b-9trtkngd7s] {
    background: #6faed1;
    padding: 6px 10px; /* nhỏ hơn nữa */
    margin: 4px 0; /* margin rất gọn */
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(2, 136, 209, 0.2); /* bóng siêu nhẹ */
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-weight: 600;
    font-size: 0.85rem; /* chữ nhỏ hơn đáng kể */
    gap: 8px;
}

    .custom-group-header-transship .group-header-left[b-9trtkngd7s] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .custom-group-header-transship .group-title[b-9trtkngd7s] {
        font-size: 0.95rem; /* title cũng nhỏ lại */
        font-weight: 700;
    }

    .custom-group-header-transship .group-header-right[b-9trtkngd7s] {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .custom-group-header-transship .group-stat-badge[b-9trtkngd7s] {
        padding: 3px 8px; /* badge siêu nhỏ */
        border-radius: 12px;
        font-size: 0.75rem; /* chữ badge rất nhỏ */
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .custom-group-header-transship .badge-total[b-9trtkngd7s] {
        background: #ffc107;
        color: #000;
        font-weight: 600;
    }

    .custom-group-header-transship:hover[b-9trtkngd7s] {
        box-shadow: 0 2px 8px rgba(2, 136, 209, 0.3);
        transform: translateY(-1px);
        transition: all 0.15s ease;
    }

.rz-data-grid .rz-datatable-group-header[b-9trtkngd7s] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

    .rz-data-grid .rz-datatable-group-header td[b-9trtkngd7s] {
        padding: 0 !important;
        border: none !important;
    }

@media (max-width: 768px) {
    .custom-group-header-transship[b-9trtkngd7s] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 12px;
    }

        .custom-group-header-transship .group-header-right[b-9trtkngd7s] {
            width: 100%;
            justify-content: flex-start;
            gap: 10px;
        }

        .custom-group-header-transship .group-stat-badge[b-9trtkngd7s] {
            font-size: 0.8rem;
            padding: 5px 10px;
        }
}

.section-header[b-9trtkngd7s] {
    margin: 0 0 12px 0;
    padding: 0;
}

.section-title[b-9trtkngd7s] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.super-compact-grid .rz-data-grid-header th[b-9trtkngd7s] {
    background-color: #e9ecef !important;
    color: #333 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
    text-align: center !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .super-compact-grid .rz-data-grid-header th:hover[b-9trtkngd7s] {
        background-color: #dee2e6 !important;
    }

.super-compact-grid .rz-data-grid-cell[b-9trtkngd7s] {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.8rem !important;
}

.super-compact-grid .rz-data-grid-data tr:nth-child(even)[b-9trtkngd7s] {
    background-color: #f8f9fa;
}

.super-compact-grid .rz-data-grid-data tr:hover[b-9trtkngd7s] {
    background-color: #e9ecef;
}

.scrollable-left-panel[b-9trtkngd7s] {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 12px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) var(--bg-light);
}

/* =======================================================================
   REDESIGN — align with the etlt-* design language used by
   TripCargoPlanningShips.razor ("Kế hoạch phân tàu") and the Laytime tab
   (wwwroot/laytime-theme.css). Appended last on purpose so these rules
   win the cascade over the legacy duplicate blocks above without having
   to touch/remove them.
   ======================================================================= */

.modal-overlay[b-9trtkngd7s] {
    background-color: rgba(16, 36, 27, 0.55);
}

.modal-container[b-9trtkngd7s] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0,0,0,.25));
}

.modal-header[b-9trtkngd7s] {
    position: relative;
    padding: 12px 18px;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    color: var(--etlt-ink, #10241B);
}

    .modal-header[b-9trtkngd7s]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--etlt-accent, #CA3C19), var(--etlt-harbor, #0F7350));
        border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    }

.modal-title[b-9trtkngd7s] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--etlt-ink, #10241B);
    display: flex;
    align-items: center;
    gap: 9px;
}

    .modal-title i[b-9trtkngd7s] {
        font-size: 11px;
        color: #fff;
        background: var(--etlt-accent, #CA3C19);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.modal-close-btn[b-9trtkngd7s] {
    color: var(--etlt-muted, #6C8477);
}

    .modal-close-btn:hover[b-9trtkngd7s] {
        background-color: var(--etlt-danger-soft, #FAE8E6);
        color: var(--etlt-danger, #AF2A20);
    }

.modal-body[b-9trtkngd7s] {
    background: var(--etlt-canvas, #EEF3EF);
}

/* Left panel — view-mode heading (new element, mirrors the edit-mode form-header) */
.etsd-panel-heading[b-9trtkngd7s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--etlt-ink2, #2A4436);
}

    .etsd-panel-heading i[b-9trtkngd7s] {
        color: var(--etlt-accent, #CA3C19);
        font-size: 12px;
    }

/* Edit-mode form header/inputs */
.form-header[b-9trtkngd7s] {
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px) var(--etlt-r, 6px) 0 0;
}

    .form-header h4[b-9trtkngd7s] {
        color: var(--etlt-ink2, #2A4436);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .form-header i[b-9trtkngd7s] {
        color: var(--etlt-accent, #CA3C19);
    }

.domestic-form-container[b-9trtkngd7s] {
    background: transparent;
}

.form-group > label[b-9trtkngd7s] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--etlt-muted, #6C8477);
    margin-bottom: -4px;
}

.form-input[b-9trtkngd7s],
.rz-textbox.form-input[b-9trtkngd7s],
.rz-numeric.form-input[b-9trtkngd7s],
.rz-dropdown.form-input[b-9trtkngd7s],
.rz-datepicker.form-input[b-9trtkngd7s] {
    border-color: var(--etlt-line, #D8E3DB) !important;
    border-radius: var(--etlt-r, 6px) !important;
}

    .form-input:focus[b-9trtkngd7s] {
        border-color: var(--etlt-accent, #CA3C19) !important;
        box-shadow: 0 0 0 2px var(--etlt-accent-soft, #FBE7E0) !important;
    }

.required[b-9trtkngd7s] {
    color: var(--etlt-danger, #AF2A20);
}

/* Read-only ship info list */
.detail-table.compact[b-9trtkngd7s] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
}

.detail-row-item[b-9trtkngd7s] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--etlt-line2, #E8F0EA);
    font-size: 12.5px;
}

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

    .detail-row-item:first-child[b-9trtkngd7s],
    .detail-row-item:nth-child(even):not(:first-child)[b-9trtkngd7s] {
        background: #F5F9F6;
    }

        .detail-row-item:first-child .detail-value[b-9trtkngd7s] {
            color: inherit;
        }

.detail-label[b-9trtkngd7s] {
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--etlt-muted, #6C8477);
}

.detail-row-item > span:not(.detail-label)[b-9trtkngd7s] {
    font-weight: 500;
    color: var(--etlt-ink, #10241B);
    text-align: right;
}

.remaining-quantity[b-9trtkngd7s] {
    background: var(--etlt-work-soft, #E1F2E9) !important;
    color: var(--etlt-work, #23996A) !important;
    border-color: #BFE3D2 !important;
    font-family: 'Consolas', 'IBM Plex Mono', ui-monospace, monospace;
}

/* Right panel — grid cards */
.grid-box[b-9trtkngd7s] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px);
    box-shadow: none;
}

.section-header[b-9trtkngd7s] {
    margin: -12px -16px 12px;
    padding: 10px 16px;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line2, #E8F0EA);
}

.section-title[b-9trtkngd7s] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--etlt-ink2, #2A4436);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title i[b-9trtkngd7s] {
        color: var(--etlt-accent, #CA3C19);
        font-size: 12px;
    }

.btn-red-tiny[b-9trtkngd7s] {
    border-color: var(--etlt-line, #D8E3DB) !important;
    color: var(--etlt-ink2, #2A4436) !important;
    background: #fff !important;
}

    .btn-red-tiny:hover:not(:disabled)[b-9trtkngd7s] {
        background: var(--etlt-accent-soft, #FBE7E0) !important;
        border-color: var(--etlt-accent, #CA3C19) !important;
        color: var(--etlt-accent, #CA3C19) !important;
    }

/* Grid skin */
.super-compact-grid .rz-data-grid-header th[b-9trtkngd7s] {
    background-color: #F5F9F6 !important;
    color: var(--etlt-muted, #6C8477) !important;
    border-bottom: 1px solid var(--etlt-line, #D8E3DB) !important;
    font-size: 10.5px !important;
}

    .super-compact-grid .rz-data-grid-header th:hover[b-9trtkngd7s] {
        background-color: #EAF2ED !important;
    }

.super-compact-grid .rz-data-grid-data tr:nth-child(even)[b-9trtkngd7s] {
    background-color: #FAFCFB;
}

.super-compact-grid .rz-data-grid-data tr:hover[b-9trtkngd7s] {
    background-color: #F0F7F2;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-9trtkngd7s],
.transport-grid-full .rz-grid-table tbody tr.rz-state-edit td[b-9trtkngd7s] {
    background-color: var(--etlt-deduct-soft, #FAEDD6) !important;
}

/* Status pills — soft pastel fill + saturated text, matching .etlt-pill */
.status-circle-record[b-9trtkngd7s] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: none;
    border: 1px solid transparent;
}

.status-default[b-9trtkngd7s],
.status-notstarted[b-9trtkngd7s] {
    background: #ECF2EE;
    color: var(--etlt-muted, #6C8477);
}

.status-inprogress[b-9trtkngd7s] {
    background: linear-gradient(to right, #ECF2EE 50%, var(--etlt-work-soft, #E1F2E9) 50%) !important;
    color: var(--etlt-ink2, #2A4436);
}

.status-rejected[b-9trtkngd7s],
.status-canceled[b-9trtkngd7s] {
    background: var(--etlt-danger-soft, #FAE8E6);
    color: var(--etlt-danger, #AF2A20);
}

.status-executed[b-9trtkngd7s],
.status-completed[b-9trtkngd7s],
.status-active[b-9trtkngd7s] {
    background: var(--etlt-work-soft, #E1F2E9);
    color: var(--etlt-work, #23996A);
}

.status-draft[b-9trtkngd7s] {
    background: var(--etlt-deduct-soft, #FAEDD6);
    color: var(--etlt-deduct, #C07A0C);
}

/* Sang mạn — group header */
.custom-group-header-transship[b-9trtkngd7s] {
    background: var(--etlt-harbor, #0F7350);
    box-shadow: none;
}

    .custom-group-header-transship .badge-total[b-9trtkngd7s] {
        background: var(--etlt-deduct, #C07A0C);
        color: #fff;
    }

    .custom-group-header-transship:hover[b-9trtkngd7s] {
        box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.1));
    }

/* Footer */
.modal-footer[b-9trtkngd7s] {
    background: var(--etlt-surface, #fff);
    border-top: 1px solid var(--etlt-line, #D8E3DB);
}

.etsd-meta-pill[b-9trtkngd7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 80px;
    box-sizing: border-box;
    background: #F5F9F6 !important;
    color: var(--etlt-ink2, #2A4436) !important;
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--etlt-r, 6px) !important;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    padding: 0 10px !important;
    white-space: nowrap;
}

    .etsd-meta-pill.cursor-pointer[b-9trtkngd7s] {
        gap: 5px;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

        .etsd-meta-pill.cursor-pointer:hover[b-9trtkngd7s] {
            background: var(--etlt-accent-soft, #FBE7E0) !important;
            color: var(--etlt-accent, #CA3C19) !important;
            border-color: var(--etlt-accent, #CA3C19);
        }

/* Buttons — flatten ETransButton's bold gradient/shadow chrome to the flat,
   muted etlt look, scoped to this modal only (::deep reaches into the
   ETransButton component's own scoped markup). */
.modal-container[b-9trtkngd7s]  .etrans-btn {
    box-shadow: none !important;
    letter-spacing: 0;
    font-weight: 500;
}

    .modal-container[b-9trtkngd7s]  .etrans-btn:hover:not(:disabled),
    .modal-container[b-9trtkngd7s]  .etrans-btn:active:not(:disabled) {
        transform: none !important;
        box-shadow: none !important;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-primary {
    background: var(--etlt-accent, #CA3C19);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-primary:hover:not(:disabled) {
        background: var(--etlt-accent-hover, #D96B47);
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-warning {
    background: var(--etlt-deduct, #C07A0C);
    color: #fff;
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-warning:hover:not(:disabled) {
        background: #A8690A;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-danger {
    background: var(--etlt-danger, #AF2A20);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-danger:hover:not(:disabled) {
        background: #8F2119;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-success {
    background: var(--etlt-work, #23996A);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-success:hover:not(:disabled) {
        background: #1C7D57;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-secondary {
    background: #fff;
    color: var(--etlt-ink2, #2A4436);
    border: 1px solid var(--etlt-line, #D8E3DB);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-accent-soft, #FBE7E0);
        color: var(--etlt-accent, #CA3C19);
        border-color: var(--etlt-accent, #CA3C19);
    }

.modal-container[b-9trtkngd7s]  .etrans-btn:focus {
    box-shadow: 0 0 0 3px var(--etlt-accent-soft, #FBE7E0) !important;
}

/* =======================================================================
   COLOR HARMONY PASS — no new elements, just a calmer, better-balanced
   palette: fewer solid/saturated fills, more soft tints, one accent used
   sparingly. Supersedes the earlier "wow" pass (KPI strip, glow shadows,
   animated header, icon badges) which read as busy rather than refined.
   ======================================================================= */

/* Buttons — soft tint at rest (calm), saturate only on hover (clear
   feedback without being loud all the time). Same treatment for every
   variant now (Thêm/Lưu included) so no single button shouts louder
   than Sửa/Xóa. */
.modal-container[b-9trtkngd7s]  .etrans-btn-primary {
    background: var(--etlt-accent-soft, #FBE7E0);
    color: var(--etlt-accent, #CA3C19);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-primary:hover:not(:disabled) {
        background: var(--etlt-accent, #CA3C19);
        color: #fff;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-secondary {
    background: #ECF2EE;
    color: var(--etlt-ink2, #2A4436);
    border-color: transparent;
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-line2, #E8F0EA);
        color: var(--etlt-ink2, #2A4436);
        border-color: var(--etlt-line, #D8E3DB);
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-warning {
    background: var(--etlt-deduct-soft, #FAEDD6);
    color: var(--etlt-deduct, #C07A0C);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-warning:hover:not(:disabled) {
        background: var(--etlt-deduct, #C07A0C);
        color: #fff;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-danger {
    background: var(--etlt-danger-soft, #FAE8E6);
    color: var(--etlt-danger, #AF2A20);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-danger:hover:not(:disabled) {
        background: var(--etlt-danger, #AF2A20);
        color: #fff;
    }

.modal-container[b-9trtkngd7s]  .etrans-btn-success {
    background: var(--etlt-work-soft, #E1F2E9);
    color: var(--etlt-work, #23996A);
}

    .modal-container[b-9trtkngd7s]  .etrans-btn-success:hover:not(:disabled) {
        background: var(--etlt-work, #23996A);
        color: #fff;
    }

/* Group header ("Sang mạn") — soft harbor tint instead of a solid block,
   so it reads as a label, not a loud banner. */
.custom-group-header-transship[b-9trtkngd7s] {
    background: var(--etlt-harbor-soft, #E2F1E8);
    color: var(--etlt-harbor-deep, #0A5A3E);
}

    .custom-group-header-transship .group-stat-badge[b-9trtkngd7s] {
        background: rgba(15, 115, 80, 0.1);
        color: var(--etlt-harbor-deep, #0A5A3E);
    }

    .custom-group-header-transship .badge-total[b-9trtkngd7s] {
        background: var(--etlt-deduct-soft, #FAEDD6);
        color: var(--etlt-deduct, #C07A0C);
    }

/* Remaining-quantity — legible but not shouting */
.remaining-quantity[b-9trtkngd7s] {
    font-weight: 600 !important;
}
/* Toolbar tab phân bổ — hai nút tiện ích cần nền rõ hơn Secondary mặc định
   (#ECF2EE quá nhạt nên chìm vào thanh tab). */
.modal-container[b-9trtkngd7s]  .etsd-btn-preview {
    background: var(--etlt-harbor-soft, #E2F1E8);
    color: var(--etlt-harbor-deep, #0A5A3E);
    border-color: #BFE0CB;
}

    .modal-container[b-9trtkngd7s]  .etsd-btn-preview:hover:not(:disabled) {
        background: var(--etlt-harbor-deep, #0A5A3E);
        color: #fff;
        border-color: var(--etlt-harbor-deep, #0A5A3E);
    }

.modal-container[b-9trtkngd7s]  .etsd-btn-toggle {
    background: #E4E9F0;
    color: #33445C;
    border-color: #CBD5E1;
}

    .modal-container[b-9trtkngd7s]  .etsd-btn-toggle:hover:not(:disabled) {
        background: #33445C;
        color: #fff;
        border-color: #33445C;
    }

.modal-container[b-9trtkngd7s]  .etsd-btn-toggle-on {
    background: #33445C;
    color: #fff;
    border-color: #33445C;
}

.fcl-actions[b-9trtkngd7s] {
    display: flex;
    gap: 6px;
    margin: 6px 0 4px;
}

    .fcl-actions[b-9trtkngd7s]  .etrans-btn-wrapper {
        flex: 1;
        display: flex;
    }

    .fcl-actions[b-9trtkngd7s]  .etrans-btn {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }

.po-qty-list[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 6px;
    padding: 6px 8px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background: #f8fafc;
}

.po-qty-row[b-9trtkngd7s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.po-qty-label[b-9trtkngd7s] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-qty-row[b-9trtkngd7s]  .po-qty-input {
    width: 110px;
    flex: 0 0 110px;
}

.po-alloc-cell[b-9trtkngd7s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-height: 20px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
}

.po-alloc-cell-edit[b-9trtkngd7s] {
    border: 1px dashed #b7c4d4;
    border-radius: 4px;
    padding: 2px 4px;
    background: #fbfdff;
}

.po-alloc-cell-edit:hover[b-9trtkngd7s] {
    border-color: #2b6cb0;
    background: #ebf4ff;
}

.po-alloc-line[b-9trtkngd7s] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.po-split-dialog[b-9trtkngd7s] {
    max-width: 620px;
    width: 95vw;
    height: auto;
    max-height: 80vh;
    border-radius: 10px;
    overflow: hidden;
}

.po-split-subtitle[b-9trtkngd7s] {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    margin-left: 6px;
}

.po-split-title[b-9trtkngd7s] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.po-split-body[b-9trtkngd7s] {
    flex: 0 1 auto;
    padding: 14px 16px;
    background: #f7f9fc;
    overflow: auto;
}

.po-split-table-wrap[b-9trtkngd7s] {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
}

.po-split-table[b-9trtkngd7s] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.po-split-table th[b-9trtkngd7s] {
    background: #eef2f7;
    color: #4a5568;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid #e3e8ef;
    text-align: left;
}

.po-split-table td[b-9trtkngd7s] {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}

.po-split-table tbody tr:last-child td[b-9trtkngd7s] {
    border-bottom: none;
}

.po-split-table tbody tr:hover td[b-9trtkngd7s] {
    background: #fafcff;
}

.po-split-muted[b-9trtkngd7s] {
    color: #7a869a;
}

.po-split-empty[b-9trtkngd7s] {
    text-align: center;
    color: #9aa5b5;
    padding: 22px 10px !important;
}

.po-split-empty i[b-9trtkngd7s] {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
}

.po-split-table[b-9trtkngd7s]  .po-split-input {
    width: 100%;
}

.po-split-table[b-9trtkngd7s]  .po-split-input-num input {
    text-align: right;
}

.po-split-remove[b-9trtkngd7s] {
    border: none;
    background: transparent;
    color: #a0aec0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.po-split-remove:hover[b-9trtkngd7s] {
    background: #fde8e8;
    color: #c62828;
}

.po-split-add[b-9trtkngd7s] {
    margin-top: 10px;
    border: 1px dashed #b7c4d4;
    background: #fff;
    color: #2b6cb0;
    border-radius: 8px;
    padding: 7px 12px;
    width: 100%;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.po-split-add:hover:not(:disabled)[b-9trtkngd7s] {
    background: #ebf4ff;
    border-color: #2b6cb0;
}

.po-split-add:disabled[b-9trtkngd7s] {
    opacity: 0.5;
    cursor: default;
}

.po-split-footer[b-9trtkngd7s] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
}

.po-split-ok[b-9trtkngd7s] {
    color: #1a7f37;
}

.po-split-bad[b-9trtkngd7s] {
    color: #c62828;
}
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShipComponent/TripCargoPlanningShipTransportHistoryModal.razor.rz.scp.css */
.filters-section[b-aklm7dlth5] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

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

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

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

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

.filter-input[b-aklm7dlth5], .filter-select[b-aklm7dlth5] {
    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-aklm7dlth5], .filter-select:focus[b-aklm7dlth5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-aklm7dlth5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.status-circle[b-aklm7dlth5] {
    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-aklm7dlth5] {
    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-aklm7dlth5],
.status-notstarted[b-aklm7dlth5] {
    background: linear-gradient(145deg, #adb5bd, #868e96);
}

.status-inprogress[b-aklm7dlth5] {
    background: linear-gradient(to right, #adb5bd 50%, #28a745 50%) !important;
}

.status-rejected[b-aklm7dlth5],
.status-canceled[b-aklm7dlth5] {
    background: linear-gradient(145deg, #e55353, #dc3545);
}

.status-executed[b-aklm7dlth5],
.status-completed[b-aklm7dlth5] {
    background: linear-gradient(145deg, #34d058, #28a745);
}

.status-draft[b-aklm7dlth5] {
    background: linear-gradient(145deg, #FFD966, #FFC107);
}

.status-active[b-aklm7dlth5] {
    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-aklm7dlth5],
.transport-grid .rz-data-grid td .status-active[b-aklm7dlth5],
.transport-grid .rz-data-grid td .status-canceled[b-aklm7dlth5],
.transport-grid .rz-data-grid td .status-default[b-aklm7dlth5] {
    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-aklm7dlth5] {
    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-aklm7dlth5] {
    text-align: center;
    vertical-align: middle;
}

.domestic-form-container[b-aklm7dlth5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.fixed-header[b-aklm7dlth5] {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.form-content[b-aklm7dlth5] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.fixed-footer[b-aklm7dlth5] {
    position: sticky;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    text-align: right;
}

.form-group[b-aklm7dlth5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label[b-aklm7dlth5] {
    font-weight: bold;
}

.form-input[b-aklm7dlth5] {
    width: 100%;
}

.required[b-aklm7dlth5] {
    color: red;
}

.domestic-form[b-aklm7dlth5] {
    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-aklm7dlth5] {
    border-bottom: 2px solid #007bff;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

    .form-header h4[b-aklm7dlth5] {
        color: #007bff;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .form-header i[b-aklm7dlth5] {
        margin-right: 8px;
    }

.form-grid[b-aklm7dlth5] {
    display: grid;
    gap: 12px;
}

.form-group[b-aklm7dlth5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-aklm7dlth5] {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin-bottom: 4px;
}

.required[b-aklm7dlth5] {
    color: #dc3545;
    font-weight: bold;
}

.form-input[b-aklm7dlth5] {
    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-aklm7dlth5] {
        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-aklm7dlth5],
.rz-numeric.form-input[b-aklm7dlth5],
.rz-dropdown.form-input[b-aklm7dlth5],
.rz-datepicker.form-input[b-aklm7dlth5] {
    width: 100% !important;
    height: 36px !important;
}

.rz-dropdown-panel[b-aklm7dlth5] {
    z-index: 10000 !important;
}

/* Make dropdowns more attractive */
.rz-dropdown.form-input .rz-dropdown-label[b-aklm7dlth5] {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .form-grid[b-aklm7dlth5] {
        grid-template-columns: 1fr;
    }

    .domestic-form[b-aklm7dlth5] {
        padding: 12px;
    }

    .form-header h4[b-aklm7dlth5] {
        font-size: 14px;
    }
}

/* Grid styling improvements */
.transport-grid[b-aklm7dlth5] {
    font-size: 13px;
}

    .transport-grid .rz-datatable-data td[b-aklm7dlth5] {
        padding: 8px 6px !important;
        vertical-align: middle;
    }

.quantity-highlight[b-aklm7dlth5] {
    font-weight: bold;
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.transport-value[b-aklm7dlth5] {
    text-align: right;
    font-weight: 500;
}

/* Remaining quantity styling */
.remaining-quantity[b-aklm7dlth5] {
    background-color: #f0f8ff !important;
    color: #0066cc !important;
    font-weight: bold !important;
    border: 1px solid #b3d9ff !important;
}

.detail-value.remaining-quantity[b-aklm7dlth5] {
    background-color: #f0f8ff;
    color: #0066cc;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #b3d9ff;
}

/* Disabled field styling */
.disabled-field[b-aklm7dlth5] {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
}

.buttons-grid[b-aklm7dlth5] {
    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-aklm7dlth5] {
    display: inline-flex;
}


.etrans-btn[b-aklm7dlth5] {
    max-width: 150px;
}

.etrans-container[b-aklm7dlth5] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-aklm7dlth5] {
    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-aklm7dlth5] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-aklm7dlth5], .filter-select[b-aklm7dlth5] {
    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-aklm7dlth5], .filter-select:focus[b-aklm7dlth5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.etrans-btn[b-aklm7dlth5] {
    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-aklm7dlth5] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

.table-container[b-aklm7dlth5] {
    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-aklm7dlth5] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@media (max-width: 1500px) {
    .table-container[b-aklm7dlth5] {
        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-aklm7dlth5] {
        padding: 12px;
    }

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

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

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

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

    .rz-grid-table[b-aklm7dlth5] {
        font-size: 12px;
        margin: 6px;
    }

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

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

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-aklm7dlth5] {
    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-aklm7dlth5 0.3s ease;
}

.modal-container[b-aklm7dlth5] {
    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-aklm7dlth5 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-aklm7dlth5] {
    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-aklm7dlth5] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.modal-close-btn[b-aklm7dlth5] {
    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-aklm7dlth5] {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

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

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

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

.info-item[b-aklm7dlth5] {
    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-aklm7dlth5] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

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

        .transport-grid-full .rz-grid-table th[b-aklm7dlth5] {
            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-aklm7dlth5] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-aklm7dlth5] {
    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-aklm7dlth5] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-aklm7dlth5] {
    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-aklm7dlth5] {
        max-width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-aklm7dlth5] {
    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-aklm7dlth5] {
    background: rgba(255, 255, 255, 0.8);
}

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

/* Tooltip enhancements */
.rz-tooltip[b-aklm7dlth5] {
    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-aklm7dlth5] {
    user-select: none;
}

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-aklm7dlth5 {
    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-aklm7dlth5] {
    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-aklm7dlth5] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

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

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

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

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

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

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

/* Header styles */
.header[b-aklm7dlth5] {
    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-aklm7dlth5] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-aklm7dlth5], .filter-select[b-aklm7dlth5] {
    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-aklm7dlth5], .filter-select:focus[b-aklm7dlth5] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-aklm7dlth5] {
    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-aklm7dlth5] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.driver-badge-1[b-aklm7dlth5] {
    color: #33b266;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.driver-badge-2[b-aklm7dlth5] {
    color: #5983ff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

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

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

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

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

/* Modal styles */
.modal-overlay[b-aklm7dlth5] {
    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-aklm7dlth5 0.3s ease;
}

.modal-container[b-aklm7dlth5] {
    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-aklm7dlth5 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-aklm7dlth5] {
    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-aklm7dlth5] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-aklm7dlth5] {
    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-aklm7dlth5] {
        background-color: rgba(255, 255, 255, 0.1);
    }

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

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

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

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

/* Transport header actions */
.transport-header-actions[b-aklm7dlth5] {
    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-aklm7dlth5] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-row-item[b-aklm7dlth5] {
    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-aklm7dlth5] {
        border-bottom: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-aklm7dlth5] {
    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-aklm7dlth5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-aklm7dlth5 {
    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-aklm7dlth5] {
        width: 98%;
    }

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

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

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

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

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

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

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

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

    .rz-grid-table[b-aklm7dlth5] {
        font-size: 12px;
        margin: 6px;
    }

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

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

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

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

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

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

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

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

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

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

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

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-aklm7dlth5] {
    background-color: #f0f8ff;
}

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

/* Custom status indicators */
.status-indicator[b-aklm7dlth5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

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

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

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

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

.rz-pager .rz-dropdown[b-aklm7dlth5] {
    font-size: var(--font-size-sm-base);
    max-height: 35px;
}

.rz-textbox.form-input[b-aklm7dlth5], .rz-numeric.form-input[b-aklm7dlth5], .rz-dropdown.form-input[b-aklm7dlth5], .rz-datepicker.form-input[b-aklm7dlth5] {
    height: 45px !important;
}

/* Filter wrapper */
.filter-wrapper[b-aklm7dlth5] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-aklm7dlth5] {
        display: none !important;
    }

    .mobile-filters-content[b-aklm7dlth5] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-aklm7dlth5] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-aklm7dlth5] {
        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-aklm7dlth5] {
        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-aklm7dlth5] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-aklm7dlth5] {
        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-aklm7dlth5] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-aklm7dlth5] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-aklm7dlth5] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-aklm7dlth5] {
        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-aklm7dlth5] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-aklm7dlth5] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-aklm7dlth5] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .filter-label[b-aklm7dlth5] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-aklm7dlth5], .filter-select[b-aklm7dlth5] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    /* Mobile filter actions */
    .filter-actions[b-aklm7dlth5] {
        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-aklm7dlth5] {
        padding: 0;
        margin: 0;
    }

    .rz-data-grid[b-aklm7dlth5] {
        margin: 0 !important;
        font-size: 0.8rem;
    }

    .rz-grid-table th[b-aklm7dlth5],
    .rz-grid-table td[b-aklm7dlth5] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .rz-grid-table th[b-aklm7dlth5] {
        position: static !important;
    }

    /* Mobile Modal Optimization */
    .modal-container[b-aklm7dlth5] {
        width: 95vw !important;
        height: 95vh !important;
        margin: 0;
        border-radius: 8px;
    }

    .modal-header[b-aklm7dlth5] {
        padding: 6px 8px;
        flex-shrink: 0;
    }

    .modal-title[b-aklm7dlth5] {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }

    .modal-close-btn[b-aklm7dlth5] {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

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

    /* Mobile Detail Layout - Stack vertically */
    .detail-layout[b-aklm7dlth5] {
        flex-direction: column !important;
        height: 100%;
        overflow: hidden;
    }

    /* Mobile Left Panel - Transform to collapsible info panel */
    .left-panel[b-aklm7dlth5] {
        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-aklm7dlth5] {
        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-aklm7dlth5] {
            background: #e9ecef;
        }

        .mobile-info-toggle i[b-aklm7dlth5] {
            font-size: 0.8rem;
            transition: transform 0.2s ease;
        }

        .mobile-info-toggle.collapsed i[b-aklm7dlth5] {
            transform: rotate(180deg);
        }

    /* Mobile info content - collapsible */
    .mobile-info-content[b-aklm7dlth5] {
        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-aklm7dlth5] {
            max-height: 400px;
        }

    /* Mobile form container adjustments */
    .domestic-form-container[b-aklm7dlth5] {
        height: auto !important;
        max-height: 350px;
        display: flex;
        flex-direction: column;
    }

    .form-header.fixed-header[b-aklm7dlth5] {
        padding: 8px 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        flex-shrink: 0;
    }

        .form-header.fixed-header h4[b-aklm7dlth5] {
            font-size: 0.85rem;
            margin: 0;
            color: var(--text-dark);
        }

    .form-content[b-aklm7dlth5] {
        flex: 1;
        overflow-y: auto;
        padding: 8px 12px;
    }

    .form-group[b-aklm7dlth5] {
        margin-bottom: 8px !important;
    }

    .form-label[b-aklm7dlth5] {
        font-size: 0.75rem !important;
        margin-bottom: 3px;
    }

    .form-input[b-aklm7dlth5] {
        font-size: 0.8rem !important;
        height: 32px !important;
        padding: 4px 8px !important;
    }

    /* Mobile Right Panel - Main content area */
    .right-panel[b-aklm7dlth5] {
        flex: 1;
        order: 2;
        padding: 8px;
        overflow: auto;
    }

    /* Mobile transport header */
    .transport-header-actions[b-aklm7dlth5] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

        .transport-header-actions h4[b-aklm7dlth5] {
            font-size: 0.9rem;
            text-align: center;
        }

    /* Mobile transport grid */
    .transport-grid[b-aklm7dlth5] {
        font-size: 0.75rem !important;
    }

        .transport-grid .rz-grid-table th[b-aklm7dlth5],
        .transport-grid .rz-grid-table td[b-aklm7dlth5] {
            padding: 4px 2px !important;
            font-size: 0.7rem !important;
        }

    /* Mobile detail table adjustments */
    .detail-table[b-aklm7dlth5] {
        margin-bottom: 8px;
    }

    .detail-row-item[b-aklm7dlth5] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .detail-label[b-aklm7dlth5],
    .detail-value[b-aklm7dlth5] {
        font-size: 0.75rem !important;
    }

        .detail-value.important[b-aklm7dlth5] {
            font-size: 0.8rem !important;
        }
}

/* Desktop styles - ensure mobile-only elements are hidden on desktop */
@media (min-width: 769px) {
    .mobile-info-toggle[b-aklm7dlth5] {
        display: none !important;
    }

    .mobile-info-content[b-aklm7dlth5] {
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
}

/* Modal footer responsive styles */
.modal-footer[b-aklm7dlth5] {
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .modal-footer[b-aklm7dlth5] {
        padding: 8px;
    }

        /* Mobile footer adjustments */
        .modal-footer .px-2[b-aklm7dlth5] {
            padding-left: 6px !important;
            padding-right: 6px !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }
}

/* =======================================================================
   REDESIGN — align with the etlt-* design language (see
   TripCargoPlanningShipDetailModal.razor.css for the full rationale).
   ======================================================================= */
.modal-overlay[b-aklm7dlth5] {
    background-color: rgba(16, 36, 27, 0.55);
}

.modal-container[b-aklm7dlth5] {
    background: var(--etlt-surface, #fff);
    border: 1px solid var(--etlt-line, #D8E3DB);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0,0,0,.25));
}

.modal-header[b-aklm7dlth5] {
    position: relative;
    background: var(--etlt-surface, #fff);
    border-bottom: 1px solid var(--etlt-line, #D8E3DB);
    color: var(--etlt-ink, #10241B);
}

    .modal-header[b-aklm7dlth5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--etlt-accent, #CA3C19), var(--etlt-harbor, #0F7350));
        border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    }

.modal-title[b-aklm7dlth5] {
    color: var(--etlt-ink, #10241B);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .modal-title i[b-aklm7dlth5] {
        font-size: 11px;
        color: #fff;
        background: var(--etlt-accent, #CA3C19);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.modal-close-btn[b-aklm7dlth5] {
    color: var(--etlt-muted, #6C8477);
}

    .modal-close-btn:hover[b-aklm7dlth5] {
        background-color: var(--etlt-danger-soft, #FAE8E6);
        color: var(--etlt-danger, #AF2A20);
    }

.modal-body[b-aklm7dlth5] {
    background: var(--etlt-canvas, #EEF3EF);
}

.modal-footer[b-aklm7dlth5] {
    background: var(--etlt-surface, #fff);
    border-top: 1px solid var(--etlt-line, #D8E3DB);
}

.status-circle-record[b-aklm7dlth5] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: none;
    border: 1px solid transparent;
}

.status-default[b-aklm7dlth5],
.status-notstarted[b-aklm7dlth5] {
    background: #ECF2EE;
    color: var(--etlt-muted, #6C8477);
}

.status-inprogress[b-aklm7dlth5] {
    background: linear-gradient(to right, #ECF2EE 50%, var(--etlt-work-soft, #E1F2E9) 50%) !important;
    color: var(--etlt-ink2, #2A4436);
}

.status-rejected[b-aklm7dlth5],
.status-canceled[b-aklm7dlth5] {
    background: var(--etlt-danger-soft, #FAE8E6);
    color: var(--etlt-danger, #AF2A20);
}

.status-executed[b-aklm7dlth5],
.status-completed[b-aklm7dlth5],
.status-active[b-aklm7dlth5] {
    background: var(--etlt-work-soft, #E1F2E9);
    color: var(--etlt-work, #23996A);
}

.status-draft[b-aklm7dlth5] {
    background: var(--etlt-deduct-soft, #FAEDD6);
    color: var(--etlt-deduct, #C07A0C);
}

/* Buttons — flatten ETransButton chrome, scoped to this modal only */
.modal-container[b-aklm7dlth5]  .etrans-btn {
    box-shadow: none !important;
    letter-spacing: 0;
    font-weight: 500;
}

    .modal-container[b-aklm7dlth5]  .etrans-btn:hover:not(:disabled),
    .modal-container[b-aklm7dlth5]  .etrans-btn:active:not(:disabled) {
        transform: none !important;
        box-shadow: none !important;
    }

.modal-container[b-aklm7dlth5]  .etrans-btn-secondary {
    background: #ECF2EE;
    color: var(--etlt-ink2, #2A4436);
    border-color: transparent;
}

    .modal-container[b-aklm7dlth5]  .etrans-btn-secondary:hover:not(:disabled) {
        background: var(--etlt-line2, #E8F0EA);
        color: var(--etlt-ink2, #2A4436);
        border-color: var(--etlt-line, #D8E3DB);
    }
/* /Components/Pages/V2/TripCargoPlanning/TripCargoPlanningShips.razor.rz.scp.css */
/* 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;
        }
}
/* Box riêng cho từng grid */
.grid-box[b-muy1wfvxyu] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Button siêu nhỏ gọn */
.btn-red-tiny[b-muy1wfvxyu] {
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 0.2rem;
    min-width: 50px;
    line-height: 1.1;
    white-space: nowrap;
    height: 24px;
}

    .btn-red-tiny:hover:not(:disabled)[b-muy1wfvxyu] {
        background: rgba(220, 53, 69, 0.15) !important;
        color: #c82333 !important;
        border-color: #c82333 !important;
    }

    .btn-red-tiny:disabled[b-muy1wfvxyu] {
        opacity: 0.5 !important;
        cursor: not-allowed;
    }

/* Tiêu đề section */
.section-header[b-muy1wfvxyu] {
    margin: 0 0 12px 0;
    padding: 0;
}

.section-title[b-muy1wfvxyu] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

/* Header grid cam nhạt */
.super-compact-grid .rz-data-grid-header th[b-muy1wfvxyu] {
    background-color: #fff3e0 !important;
    color: #e65100 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #ffb74d !important;
    text-align: center !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.82rem !important;
}

    .super-compact-grid .rz-data-grid-header th:hover[b-muy1wfvxyu] {
        background-color: #ffe0b2 !important;
    }

.super-compact-grid .rz-data-grid-cell[b-muy1wfvxyu] {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.8rem !important;
}

/* Modal header */
.modal-header[b-muy1wfvxyu] {
    padding: 1rem 1.25rem;
}
.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;
    }
}

.etrans-container[b-muy1wfvxyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.filters-section[b-muy1wfvxyu] {
    flex-shrink: 0;
}

.custom-table-style .rz-column-title[b-muy1wfvxyu] {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Column drag-to-resize handle */
.etlt-tbl th[data-col-key][b-muy1wfvxyu] {
    position: relative;
}

.etlt-col-resizer[b-muy1wfvxyu] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 2;
}

    .etlt-col-resizer:hover[b-muy1wfvxyu],
    .etlt-col-resizer:active[b-muy1wfvxyu] {
        background: rgba(202, 60, 25, 0.35);
    }

/* Column show/hide picker */
.etlt-colpick-overlay[b-muy1wfvxyu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.etlt-colpick-panel[b-muy1wfvxyu] {
    background: #fff;
    border-radius: 8px;
    width: 320px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.etlt-colpick-head[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light, #e9ecef);
    font-weight: 600;
    font-size: 0.9rem;
}

.etlt-colpick-close[b-muy1wfvxyu] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-light, #6c757d);
}

.etlt-colpick-body[b-muy1wfvxyu] {
    padding: 8px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.etlt-colpick-item[b-muy1wfvxyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 4px 0;
    cursor: pointer;
}

.etlt-colpick-footer[b-muy1wfvxyu] {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light, #e9ecef);
}
/* /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;
}
/* /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;
    }
}
/* /Components/Pages/V2/TripPlanWeeklyReport/TripPlanWeeklyReport.razor.rz.scp.css */
.tooltip-customer[b-enq02yf33u] {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .tooltip-customer .tooltip-content[b-enq02yf33u] {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f2f2f2;
        color: #333;
        text-align: left;
        border: 2px solid #555;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        user-select: text;
        -webkit-user-select: text;
        pointer-events: auto;
        transition: opacity 0.2s ease;
    }

    .tooltip-customer:hover .tooltip-content[b-enq02yf33u] {
        visibility: visible;
        opacity: 1;
    }

    /* Mũi tên */
    .tooltip-customer .tooltip-content[b-enq02yf33u]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.table-container .weekly-report-table[b-enq02yf33u] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 12px;
}

.weekly-report-table th[b-enq02yf33u], .weekly-report-table td[b-enq02yf33u] {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
}

.weekly-report-table th[b-enq02yf33u] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.total-row[b-enq02yf33u], .item-total-row[b-enq02yf33u] {
    background-color: #e6f3ff;
    font-weight: bold;
}

.vehicle-row[b-enq02yf33u] {
    background-color: #f0f8ff;
    font-style: italic;
}

.loading[b-enq02yf33u], .no-data[b-enq02yf33u] {
    text-align: center;
    padding: 20px;
}

.table-container[b-enq02yf33u] {
    height: calc(100vh - 220px) !important;
    overflow-y: auto;
}
.dsid-tooltip-container[b-enq02yf33u] {
    position: relative;
    display: inline-block;
    cursor: help;
}

.dsid-tooltip[b-enq02yf33u] {
    visibility: hidden;
    background-color: #f2f2f2;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .dsid-tooltip[b-enq02yf33u]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.dsid-tooltip-container:hover .dsid-tooltip[b-enq02yf33u] {
    visibility: visible;
    opacity: 1;
}

.dsid-list[b-enq02yf33u] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dsid-list li[b-enq02yf33u] {
        padding: 3px 0;
    }


.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;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}
.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);
    }

    /* 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;
    }
    
    .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: 5000px;
        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;
    }
}
.custom-switch-container[b-enq02yf33u] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-enq02yf33u] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

    .custom-switch input[b-enq02yf33u] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-enq02yf33u] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

    .slider[b-enq02yf33u]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.custom-switch input:checked + .slider[b-enq02yf33u] {
    background-color: #10b981;
    border-color: #10b981;
}

    .custom-switch input:checked + .slider[b-enq02yf33u]:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }

.custom-switch:hover .slider[b-enq02yf33u] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-switch input:focus + .slider[b-enq02yf33u] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.custom-switch input:checked:hover + .slider[b-enq02yf33u] {
    background-color: #059669;
}
/* /Components/Pages/V2/TripPlanWeeklyReport/TripPlanWeeklyReportCE.razor.rz.scp.css */
.ce-vehicle-tabs[b-zx4mxctyhc] {
    display: flex;
    gap: 4px;
    margin: 10px 0;
    border-bottom: 2px solid #dee2e6;
    background: white;
    padding: 0 6px;
}

.ce-vehicle-tab[b-zx4mxctyhc] {
    padding: 10px 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

    .ce-vehicle-tab:hover[b-zx4mxctyhc] {
        color: var(--primary-color, #ca3c19);
    }

    .ce-vehicle-tab.active[b-zx4mxctyhc] {
        color: var(--primary-color, #ca3c19);
        border-bottom-color: var(--primary-color, #ca3c19);
        font-weight: 700;
    }

@media (max-width: 768px) {
    .ce-vehicle-tabs[b-zx4mxctyhc] {
        overflow-x: auto;
    }

    .ce-vehicle-tab[b-zx4mxctyhc] {
        padding: 8px 14px;
        white-space: nowrap;
        font-size: 0.8rem;
    }
}

.tooltip-customer[b-zx4mxctyhc] {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .tooltip-customer .tooltip-content[b-zx4mxctyhc] {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f2f2f2;
        color: #333;
        text-align: left;
        border: 2px solid #555;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        user-select: text;
        -webkit-user-select: text;
        pointer-events: auto;
        transition: opacity 0.2s ease;
    }

    .tooltip-customer:hover .tooltip-content[b-zx4mxctyhc] {
        visibility: visible;
        opacity: 1;
    }

    /* Mũi tên */
    .tooltip-customer .tooltip-content[b-zx4mxctyhc]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.table-container .weekly-report-table[b-zx4mxctyhc] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 12px;
}

.weekly-report-table th[b-zx4mxctyhc], .weekly-report-table td[b-zx4mxctyhc] {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
}

.weekly-report-table th[b-zx4mxctyhc] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.total-row[b-zx4mxctyhc], .item-total-row[b-zx4mxctyhc] {
    background-color: #e6f3ff;
    font-weight: bold;
}

.vehicle-row[b-zx4mxctyhc] {
    background-color: #f0f8ff;
    font-style: italic;
}

.loading[b-zx4mxctyhc], .no-data[b-zx4mxctyhc] {
    text-align: center;
    padding: 20px;
}

.table-container[b-zx4mxctyhc] {
    height: calc(100vh - 220px) !important;
    overflow-y: auto;
}
.dsid-tooltip-container[b-zx4mxctyhc] {
    position: relative;
    display: inline-block;
    cursor: help;
}

.dsid-tooltip[b-zx4mxctyhc] {
    visibility: hidden;
    background-color: #f2f2f2;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .dsid-tooltip[b-zx4mxctyhc]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.dsid-tooltip-container:hover .dsid-tooltip[b-zx4mxctyhc] {
    visibility: visible;
    opacity: 1;
}

.dsid-list[b-zx4mxctyhc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dsid-list li[b-zx4mxctyhc] {
        padding: 3px 0;
    }


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

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

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

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

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

.filter-input[b-zx4mxctyhc], .filter-select[b-zx4mxctyhc] {
    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-zx4mxctyhc], .filter-select:focus[b-zx4mxctyhc] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-zx4mxctyhc] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}
.etrans-container[b-zx4mxctyhc] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-zx4mxctyhc], .filter-select[b-zx4mxctyhc] {
    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-zx4mxctyhc], .filter-select:focus[b-zx4mxctyhc] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

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

.btn[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

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

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

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

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

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

.table-container[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-zx4mxctyhc] {
    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-zx4mxctyhc 0.3s ease;
    padding: 20px;
}

.modal-container[b-zx4mxctyhc] {
    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-zx4mxctyhc 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

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

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

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

.info-item[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

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

        .transport-grid-full .rz-grid-table th[b-zx4mxctyhc] {
            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-zx4mxctyhc] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        max-width: 95%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    background: rgba(255, 255, 255, 0.8);
}

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

/* Tooltip enhancements */
.rz-tooltip[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    user-select: none;
}

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

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

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

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

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

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-zx4mxctyhc {
    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-zx4mxctyhc] {
    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-zx4mxctyhc] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

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

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

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

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

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

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

/* Header styles */
.header[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

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

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

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

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

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

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

.filter-input[b-zx4mxctyhc], .filter-select[b-zx4mxctyhc] {
    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-zx4mxctyhc], .filter-select:focus[b-zx4mxctyhc] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal styles */
.modal-overlay[b-zx4mxctyhc] {
    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-zx4mxctyhc 0.3s ease;
}

.modal-container[b-zx4mxctyhc] {
    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-zx4mxctyhc 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        background-color: rgba(255, 255, 255, 0.1);
    }

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

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

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

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

/* Transport header actions */
.transport-header-actions[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

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

.detail-row-item[b-zx4mxctyhc] {
    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-zx4mxctyhc] {
        border-bottom: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal footer */
.modal-footer[b-zx4mxctyhc] {
    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-zx4mxctyhc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-zx4mxctyhc {
    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-zx4mxctyhc] {
        width: 98%;
    }

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

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

    .right-panel[b-zx4mxctyhc] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-zx4mxctyhc] {
        padding: 12px;
    }

    .filters-grid[b-zx4mxctyhc] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-zx4mxctyhc] {
        justify-content: stretch;
    }

    .btn[b-zx4mxctyhc] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-zx4mxctyhc] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-zx4mxctyhc] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-zx4mxctyhc], .rz-grid-table td[b-zx4mxctyhc] {
            padding: 8px;
        }

    .data-table th[b-zx4mxctyhc],
    .data-table td[b-zx4mxctyhc] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-zx4mxctyhc] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-zx4mxctyhc] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-zx4mxctyhc],
        .transport-grid .rz-grid-table td[b-zx4mxctyhc] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-zx4mxctyhc] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-zx4mxctyhc] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-zx4mxctyhc] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-zx4mxctyhc] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-zx4mxctyhc], .rz-textbox[b-zx4mxctyhc], .rz-numeric[b-zx4mxctyhc], .rz-textarea[b-zx4mxctyhc] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-zx4mxctyhc] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-zx4mxctyhc] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-zx4mxctyhc] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-zx4mxctyhc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-zx4mxctyhc] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-zx4mxctyhc] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-zx4mxctyhc] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-zx4mxctyhc] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-zx4mxctyhc] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-zx4mxctyhc] {
        display: none !important;
    }
    
    .mobile-filters-content[b-zx4mxctyhc] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-zx4mxctyhc] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-zx4mxctyhc] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-zx4mxctyhc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }
    
    .mobile-filter-title[b-zx4mxctyhc] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-zx4mxctyhc] {
        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-zx4mxctyhc] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-zx4mxctyhc] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-zx4mxctyhc] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-zx4mxctyhc] {
        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-zx4mxctyhc] {
        max-height: 5000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-zx4mxctyhc] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-zx4mxctyhc] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-zx4mxctyhc] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-zx4mxctyhc], .filter-select[b-zx4mxctyhc] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-zx4mxctyhc] {
        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-zx4mxctyhc] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-zx4mxctyhc] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-zx4mxctyhc],
    .rz-grid-table td[b-zx4mxctyhc] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-zx4mxctyhc] {
        position: static !important;
    }
}
.custom-switch-container[b-zx4mxctyhc] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-zx4mxctyhc] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

    .custom-switch input[b-zx4mxctyhc] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-zx4mxctyhc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

    .slider[b-zx4mxctyhc]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.custom-switch input:checked + .slider[b-zx4mxctyhc] {
    background-color: #10b981;
    border-color: #10b981;
}

    .custom-switch input:checked + .slider[b-zx4mxctyhc]:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }

.custom-switch:hover .slider[b-zx4mxctyhc] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-switch input:focus + .slider[b-zx4mxctyhc] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.custom-switch input:checked:hover + .slider[b-zx4mxctyhc] {
    background-color: #059669;
}
/* /Components/Pages/V2/TripPlanWeeklyReport/TripPlanWeeklyReportCont.razor.rz.scp.css */
.vwc-report[b-hykjd36fj1] {
    padding: 12px;
}

.dsid-tooltip-container[b-hykjd36fj1] {
    position: relative;
    display: inline-block;
    cursor: help;
}

/* .dsid-tooltip is never shown in place anymore — it only serves as the source markup that
   the JS in TripPlanWeeklyReportCont.razor clones into a body-level, position:fixed tooltip
   on hover. Sticky <thead> th (position:sticky) always wins stacking order against normal
   in-table content in this browser regardless of z-index, so an in-place absolute tooltip
   can never reliably paint above it; escaping the table's DOM subtree via a fixed body-level
   clone is the only fix that works. Keep display:none (not visibility) so it never renders
   or receives hover, and never competes for stacking at all. */
.dsid-tooltip[b-hykjd36fj1] {
    display: none;
    background-color: #f2f2f2;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    white-space: nowrap;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dsid-list[b-hykjd36fj1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dsid-list li[b-hykjd36fj1] {
        padding: 3px 0;
        color: #12172a;
        font-size: 11px;
    }

.filters-section[b-hykjd36fj1] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 6px;
    margin-bottom: 12px;
}

.mobile-filter-header[b-hykjd36fj1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filters-grid[b-hykjd36fj1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    align-items: end;
}

.filter-group[b-hykjd36fj1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group-toggle[b-hykjd36fj1] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.filter-label[b-hykjd36fj1] {
    font-weight: 500;
    color: #1f2937;
    font-size: 0.7rem;
}

.filter-select[b-hykjd36fj1], .filter-input[b-hykjd36fj1] {
    width: 100%;
}

.filter-actions[b-hykjd36fj1] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

.stat-tiles[b-hykjd36fj1] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.stat-tile[b-hykjd36fj1] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 160px;
}

.stat-tile-warn .stat-value[b-hykjd36fj1] {
    color: #c2410c;
}

.stat-label[b-hykjd36fj1] {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stat-value[b-hykjd36fj1] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
}

.vwc-subtitle[b-hykjd36fj1] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.table-scroll[b-hykjd36fj1] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.vwc-table[b-hykjd36fj1] {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1900px;
    width: 100%;
    font-size: 11.5px;
}

.vwc-table th[b-hykjd36fj1], .vwc-table td[b-hykjd36fj1] {
    padding: 8px 8px;
    vertical-align: top;
    white-space: nowrap;
}

.vwc-table thead th[b-hykjd36fj1] {
    background: #f8f9fb;
    color: #7a8399;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    border-bottom: 1px solid #e3e6ec;
    position: sticky;
    top: 0;
    z-index: 2;
}

.vwc-table tbody tr[b-hykjd36fj1] {
    border-bottom: 1px solid #eef0f3;
}

.vwc-table tbody tr:hover[b-hykjd36fj1] {
    background: #fafbfc;
}

.vwc-table tfoot tr[b-hykjd36fj1] {
    background: #f8f9fb;
    border-top: 2px solid #e3e6ec;
}

.vwc-table tfoot td[b-hykjd36fj1] {
    padding: 10px 8px;
    font-weight: 700;
    color: #12172a;
}

.foot-strong[b-hykjd36fj1] {
    color: #12172a;
}

.foot-dabotri[b-hykjd36fj1] {
    color: #3a4256;
}

.foot-bal[b-hykjd36fj1] {
    color: #dc6a1f;
}

.foot-day[b-hykjd36fj1] {
    color: #1d4ed8;
}

.sticky-col[b-hykjd36fj1] {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

thead .sticky-col[b-hykjd36fj1] {
    z-index: 3;
}

tfoot .sticky-col[b-hykjd36fj1] {
    background: #f8f9fb;
}

.sticky-col-2[b-hykjd36fj1] {
    position: sticky;
    left: 56px;
    background: #fff;
    z-index: 1;
    box-shadow: 2px 0 3px -2px rgba(16, 24, 40, .12);
}

thead .sticky-col-2[b-hykjd36fj1] {
    z-index: 3;
}

tfoot .sticky-col-2[b-hykjd36fj1] {
    background: #f8f9fb;
}

.vwc-table thead th.sticky-col[b-hykjd36fj1] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    background: #f8f9fb;
}

.vwc-table thead th.sticky-col-2[b-hykjd36fj1] {
    position: sticky;
    top: 0;
    left: 56px;
    z-index: 4;
    background: #f8f9fb;
}

.col-stt[b-hykjd36fj1] {
    text-align: center;
    width: 56px;
    min-width: 56px;
}

.stt-badge[b-hykjd36fj1] {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
}

.col-mbl[b-hykjd36fj1], .col-muted[b-hykjd36fj1] {
    color: #6a7285;
    min-width: 90px;
}

.vwc-table td.col-strong[b-hykjd36fj1] {
    color: #12172a;
    font-weight: 600;
    min-width: 140px;
    white-space: normal;
}

.col-commodity[b-hykjd36fj1] {
    color: #3a4256;
    min-width: 110px;
}

.col-qty[b-hykjd36fj1] {
    color: #12172a;
    font-weight: 600;
}

.vwc-table td.col-doi[b-hykjd36fj1] {
    color: #3a4256;
    font-weight: 500;
    min-width: 140px;
    white-space: normal;
}

.col-dabotri[b-hykjd36fj1] {
    color: #8a92a6;
}

.vwc-table td.col-note[b-hykjd36fj1] {
    color: #6a7285;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
    min-width: 180px;
    max-width: 260px;
}

.vwc-table td.col-day[b-hykjd36fj1], .vwc-table th.col-day[b-hykjd36fj1] {
    white-space: normal;
    text-align: center;
    vertical-align: middle;
    min-width: 110px;
}

.day-date[b-hykjd36fj1] {
    font-weight: 500;
    text-transform: none;
    font-size: 9px;
    color: #a7adbd;
}

.day-entry[b-hykjd36fj1] {
    background: #f0f7ff;
    border: 1px solid #d7e8ff;
    border-radius: 7px;
    padding: 4px 6px;
    margin-bottom: 3px;
    text-align: center;
}

.day-qty[b-hykjd36fj1] {
    font-weight: 700;
    font-size: 11px;
    color: #1d4ed8;
}

.day-dest[b-hykjd36fj1] {
    display: block;
    font-size: 9px;
    color: #5878b0;
    margin-top: 1px;
    overflow-wrap: break-word;
}

.day-empty[b-hykjd36fj1] {
    color: #c7cbd4;
    font-size: 12px;
}

.text-right[b-hykjd36fj1] {
    text-align: right;
}

.text-center[b-hykjd36fj1] {
    text-align: center;
}

.pill[b-hykjd36fj1] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pill-blue[b-hykjd36fj1] {
    background: #eaf3ff;
    color: #1d6fd8;
}

.pill-orange[b-hykjd36fj1] {
    background: #fef3e6;
    color: #c17a1f;
}

.bal-warn[b-hykjd36fj1] {
    color: #dc6a1f;
    font-weight: 700;
}

.bal-ok[b-hykjd36fj1] {
    color: #22a06b;
    font-weight: 700;
}

.custom-switch-container[b-hykjd36fj1] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-hykjd36fj1] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

    .custom-switch input[b-hykjd36fj1] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-hykjd36fj1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

    .slider[b-hykjd36fj1]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.custom-switch input:checked + .slider[b-hykjd36fj1] {
    background-color: #10b981;
    border-color: #10b981;
}

    .custom-switch input:checked + .slider[b-hykjd36fj1]:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }

.custom-switch:hover .slider[b-hykjd36fj1] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-switch input:focus + .slider[b-hykjd36fj1] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.custom-switch input:checked:hover + .slider[b-hykjd36fj1] {
    background-color: #059669;
}

.loading-overlay[b-hykjd36fj1] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.spinner[b-hykjd36fj1] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: vwc-spin-b-hykjd36fj1 0.8s linear infinite;
}

@keyframes vwc-spin-b-hykjd36fj1 {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .mobile-filters-content[b-hykjd36fj1] {
        display: none;
    }

    .mobile-filters-content.expanded[b-hykjd36fj1] {
        display: block;
        margin-top: 10px;
    }
}

.vwc-note-cell[b-hykjd36fj1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background-color 0.15s ease;
}

.vwc-note-cell:hover[b-hykjd36fj1] {
    background-color: #f0f4ff;
}

.vwc-note-text[b-hykjd36fj1] {
    flex: 1;
    word-break: break-word;
}

.vwc-note-modal-backdrop[b-hykjd36fj1] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.vwc-note-modal[b-hykjd36fj1] {
    background: #fff;
    width: min(500px, 92vw);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.vwc-note-modal-header[b-hykjd36fj1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f3;
    font-weight: 600;
}

.vwc-note-modal-close[b-hykjd36fj1] {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #7a8399;
}

.vwc-note-modal-body[b-hykjd36fj1] {
    padding: 16px 18px;
    overflow-y: auto;
}

.vwc-note-modal-footer[b-hykjd36fj1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #eef0f3;
}
/* /Components/Pages/V2/TripPlanWeeklyReport/WeeklyAllocationCategoryBlock.razor.rz.scp.css */
.tooltip-customer[b-r40rx6uc48] {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .tooltip-customer .tooltip-content[b-r40rx6uc48] {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f2f2f2;
        color: #333;
        text-align: left;
        border: 2px solid #555;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        user-select: text;
        -webkit-user-select: text;
        pointer-events: auto;
        transition: opacity 0.2s ease;
    }

    .tooltip-customer:hover .tooltip-content[b-r40rx6uc48] {
        visibility: visible;
        opacity: 1;
    }

    /* Mũi tên */
    .tooltip-customer .tooltip-content[b-r40rx6uc48]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.table-container .weekly-report-table[b-r40rx6uc48] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 12px;
}

.weekly-report-table th[b-r40rx6uc48], .weekly-report-table td[b-r40rx6uc48] {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
}

.weekly-report-table th[b-r40rx6uc48] {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.total-row[b-r40rx6uc48], .item-total-row[b-r40rx6uc48] {
    background-color: #e6f3ff;
    font-weight: bold;
}

.vehicle-row[b-r40rx6uc48] {
    background-color: #f0f8ff;
    font-style: italic;
}

.loading[b-r40rx6uc48], .no-data[b-r40rx6uc48] {
    text-align: center;
    padding: 20px;
}

.table-container[b-r40rx6uc48] {
    height: calc(100vh - 220px) !important;
    overflow-y: auto;
}
.dsid-tooltip-container[b-r40rx6uc48] {
    position: relative;
    display: inline-block;
    cursor: help;
}

.dsid-tooltip[b-r40rx6uc48] {
    visibility: hidden;
    background-color: #f2f2f2;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .dsid-tooltip[b-r40rx6uc48]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

.dsid-tooltip-container:hover .dsid-tooltip[b-r40rx6uc48] {
    visibility: visible;
    opacity: 1;
}

.dsid-list[b-r40rx6uc48] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dsid-list li[b-r40rx6uc48] {
        padding: 3px 0;
    }


.filters-section[b-r40rx6uc48] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-r40rx6uc48] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-r40rx6uc48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-r40rx6uc48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-r40rx6uc48] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-r40rx6uc48], .filter-select[b-r40rx6uc48] {
    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-r40rx6uc48], .filter-select:focus[b-r40rx6uc48] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-r40rx6uc48] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}
.etrans-container[b-r40rx6uc48] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-r40rx6uc48] {
    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-r40rx6uc48] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-r40rx6uc48] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-r40rx6uc48] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-r40rx6uc48] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-r40rx6uc48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-r40rx6uc48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-r40rx6uc48] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-r40rx6uc48], .filter-select[b-r40rx6uc48] {
    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-r40rx6uc48], .filter-select:focus[b-r40rx6uc48] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-r40rx6uc48] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-r40rx6uc48] {
    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-r40rx6uc48] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-r40rx6uc48] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-r40rx6uc48] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-r40rx6uc48] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-r40rx6uc48] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-r40rx6uc48] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-r40rx6uc48] {
    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-r40rx6uc48] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-r40rx6uc48], .rz-grid-table td[b-r40rx6uc48] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-r40rx6uc48] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-r40rx6uc48] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-r40rx6uc48] {
    background-color: #e9ecef;
}

.status-badge[b-r40rx6uc48] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-r40rx6uc48] {
    background-color: #28a745;
}

.status-pending[b-r40rx6uc48] {
    background-color: #ffc107;
}

.status-completed[b-r40rx6uc48] {
    background-color: #17a2b8;
}

.status-default[b-r40rx6uc48] {
    background-color: #6c757d;
}

.quantity-cell[b-r40rx6uc48], .date-cell[b-r40rx6uc48] {
    text-align: right;
}

@keyframes fadeIn-b-r40rx6uc48 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-r40rx6uc48] {
        padding: 12px;
    }

    .filters-grid[b-r40rx6uc48] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-r40rx6uc48] {
        justify-content: stretch;
    }

    .btn[b-r40rx6uc48] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-r40rx6uc48] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-r40rx6uc48] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-r40rx6uc48], .rz-grid-table td[b-r40rx6uc48] {
            padding: 8px;
        }

    .data-table th[b-r40rx6uc48],
    .data-table td[b-r40rx6uc48] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-r40rx6uc48] {
    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-r40rx6uc48 0.3s ease;
    padding: 20px;
}

.modal-container[b-r40rx6uc48] {
    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-r40rx6uc48 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-r40rx6uc48] {
    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-r40rx6uc48] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-r40rx6uc48] {
    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-r40rx6uc48] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-r40rx6uc48] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-r40rx6uc48] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-r40rx6uc48] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-r40rx6uc48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-r40rx6uc48] {
    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-r40rx6uc48] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-r40rx6uc48] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-r40rx6uc48] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-r40rx6uc48] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-r40rx6uc48] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-r40rx6uc48] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-r40rx6uc48] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-r40rx6uc48] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-r40rx6uc48] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-r40rx6uc48] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-r40rx6uc48] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-r40rx6uc48] {
            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-r40rx6uc48] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-r40rx6uc48] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-r40rx6uc48] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-r40rx6uc48] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-r40rx6uc48] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-r40rx6uc48] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-r40rx6uc48] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-r40rx6uc48] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-r40rx6uc48] {
    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-r40rx6uc48] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-r40rx6uc48] {
    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-r40rx6uc48] {
        max-width: 95%;
    }

    .info-grid[b-r40rx6uc48] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-r40rx6uc48] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-r40rx6uc48] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-r40rx6uc48] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-r40rx6uc48] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-r40rx6uc48] {
        padding: 10px;
    }

    .modal-container[b-r40rx6uc48] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-r40rx6uc48] {
        padding: 16px 20px;
    }

    .modal-title[b-r40rx6uc48] {
        font-size: 1rem;
    }

    .info-bar[b-r40rx6uc48] {
        padding: 12px 16px;
    }

    .info-grid[b-r40rx6uc48] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-r40rx6uc48] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-r40rx6uc48] {
        padding: 12px 16px;
    }

    .grid-header[b-r40rx6uc48] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-r40rx6uc48] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-r40rx6uc48],
    .transport-grid-full .rz-grid-table td[b-r40rx6uc48] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-r40rx6uc48] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-r40rx6uc48] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-r40rx6uc48] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-r40rx6uc48] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-r40rx6uc48] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-r40rx6uc48], .rz-textbox[b-r40rx6uc48], .rz-numeric[b-r40rx6uc48], .rz-textarea[b-r40rx6uc48] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-r40rx6uc48] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-r40rx6uc48] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-r40rx6uc48] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-r40rx6uc48] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-r40rx6uc48] {
    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-r40rx6uc48] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-r40rx6uc48],
.rz-numeric.rz-state-invalid[b-r40rx6uc48],
.rz-dropdown.rz-state-invalid[b-r40rx6uc48] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-r40rx6uc48] {
    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-r40rx6uc48] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-r40rx6uc48]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-r40rx6uc48]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-r40rx6uc48]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-r40rx6uc48]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-r40rx6uc48 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-r40rx6uc48 {
    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-r40rx6uc48] {
    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-r40rx6uc48] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-r40rx6uc48] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-r40rx6uc48] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-r40rx6uc48] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-r40rx6uc48],
    .modal-footer[b-r40rx6uc48] {
        display: none;
    }

    .action-buttons[b-r40rx6uc48] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-r40rx6uc48] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-r40rx6uc48] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-r40rx6uc48] {
    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-r40rx6uc48] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-r40rx6uc48] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-r40rx6uc48] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-r40rx6uc48] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-r40rx6uc48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-r40rx6uc48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-r40rx6uc48] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-r40rx6uc48], .filter-select[b-r40rx6uc48] {
    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-r40rx6uc48], .filter-select:focus[b-r40rx6uc48] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-r40rx6uc48] {
    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-r40rx6uc48] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-r40rx6uc48] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-r40rx6uc48] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-r40rx6uc48] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-r40rx6uc48] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-r40rx6uc48] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-r40rx6uc48] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-r40rx6uc48] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px)!important;
}

.rz-grid-table th[b-r40rx6uc48], .rz-grid-table td[b-r40rx6uc48] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-r40rx6uc48] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-r40rx6uc48] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-r40rx6uc48] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-r40rx6uc48] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-r40rx6uc48] {
    background-color: #28a745;
}

.status-pending[b-r40rx6uc48] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-r40rx6uc48] {
    background-color: #17a2b8;
}

.status-cancelled[b-r40rx6uc48] {
    background-color: #dc3545;
}

.status-default[b-r40rx6uc48] {
    background-color: #6c757d;
}

.quantity-cell[b-r40rx6uc48], .date-cell[b-r40rx6uc48] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-r40rx6uc48] {
    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-r40rx6uc48 0.3s ease;
}

.modal-container[b-r40rx6uc48] {
    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-r40rx6uc48 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-r40rx6uc48] {
    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-r40rx6uc48] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-r40rx6uc48] {
    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-r40rx6uc48] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-r40rx6uc48] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-r40rx6uc48] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-r40rx6uc48] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-r40rx6uc48] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-r40rx6uc48] {
    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-r40rx6uc48] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-r40rx6uc48] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-r40rx6uc48] {
    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-r40rx6uc48] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-r40rx6uc48] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-r40rx6uc48] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-r40rx6uc48] {
        background: #f8f9fa;
    }

.highlight-row[b-r40rx6uc48] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-r40rx6uc48] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-r40rx6uc48] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-r40rx6uc48] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-r40rx6uc48] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-r40rx6uc48] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-r40rx6uc48] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-r40rx6uc48] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-r40rx6uc48] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-r40rx6uc48] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-r40rx6uc48] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-r40rx6uc48] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-r40rx6uc48] {
    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-r40rx6uc48 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-r40rx6uc48 {
    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-r40rx6uc48] {
        width: 98%;
    }

    .detail-layout[b-r40rx6uc48] {
        flex-direction: column;
    }

    .left-panel[b-r40rx6uc48] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-r40rx6uc48] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-r40rx6uc48] {
        padding: 12px;
    }

    .filters-grid[b-r40rx6uc48] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-r40rx6uc48] {
        justify-content: stretch;
    }

    .btn[b-r40rx6uc48] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-r40rx6uc48] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-r40rx6uc48] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-r40rx6uc48], .rz-grid-table td[b-r40rx6uc48] {
            padding: 8px;
        }

    .data-table th[b-r40rx6uc48],
    .data-table td[b-r40rx6uc48] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-r40rx6uc48] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-r40rx6uc48] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-r40rx6uc48],
        .transport-grid .rz-grid-table td[b-r40rx6uc48] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-r40rx6uc48] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-r40rx6uc48] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-r40rx6uc48] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-r40rx6uc48] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-r40rx6uc48], .rz-textbox[b-r40rx6uc48], .rz-numeric[b-r40rx6uc48], .rz-textarea[b-r40rx6uc48] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-r40rx6uc48] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-r40rx6uc48] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-r40rx6uc48] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-r40rx6uc48] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-r40rx6uc48] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-r40rx6uc48] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-r40rx6uc48] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-r40rx6uc48] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-r40rx6uc48] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-r40rx6uc48] {
        display: none !important;
    }
    
    .mobile-filters-content[b-r40rx6uc48] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-r40rx6uc48] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-r40rx6uc48] {
        background: white;
        padding: 8px 12px;
        margin: 0;
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-r40rx6uc48] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }
    
    .mobile-filter-title[b-r40rx6uc48] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-filter-toggle[b-r40rx6uc48] {
        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-r40rx6uc48] {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    
    .mobile-filter-toggle i[b-r40rx6uc48] {
        transition: transform 0.2s ease;
    }
    
    .mobile-filter-toggle.collapsed i[b-r40rx6uc48] {
        transform: rotate(180deg);
    }
    
    /* Collapsible filters content */
    .mobile-filters-content[b-r40rx6uc48] {
        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-r40rx6uc48] {
        max-height: 5000px;
        opacity: 1;
        padding: 8px 0;
    }

    .filters-grid[b-r40rx6uc48] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    
    .filter-group[b-r40rx6uc48] {
        margin-bottom: 6px;
    }
    
    /* Mobile filter compact layout */
    .filter-label[b-r40rx6uc48] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .filter-input[b-r40rx6uc48], .filter-select[b-r40rx6uc48] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }
    
    /* Mobile filter actions */
    .filter-actions[b-r40rx6uc48] {
        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-r40rx6uc48] {
        padding: 0;
        margin: 0;
    }
    
    .rz-data-grid[b-r40rx6uc48] {
        margin: 0 !important;
        font-size: 0.8rem;
    }
    
    .rz-grid-table th[b-r40rx6uc48],
    .rz-grid-table td[b-r40rx6uc48] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }
    
    .rz-grid-table th[b-r40rx6uc48] {
        position: static !important;
    }
}
.custom-switch-container[b-r40rx6uc48] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-r40rx6uc48] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

    .custom-switch input[b-r40rx6uc48] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-r40rx6uc48] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

    .slider[b-r40rx6uc48]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.custom-switch input:checked + .slider[b-r40rx6uc48] {
    background-color: #10b981;
    border-color: #10b981;
}

    .custom-switch input:checked + .slider[b-r40rx6uc48]:before {
        transform: translateX(26px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }

.custom-switch:hover .slider[b-r40rx6uc48] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-switch input:focus + .slider[b-r40rx6uc48] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.custom-switch input:checked:hover + .slider[b-r40rx6uc48] {
    background-color: #059669;
}
/* /Components/Pages/V2/VesselAllocationMonthReport/DomesticPurchaseMonthReport.razor.rz.scp.css */
/* ============================================= */
/*   DOMESTIC PURCHASE MONTH REPORT - FULL CSS   */
/* ============================================= */

.vessel-allocation-report[b-8rkv1m45w5] {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==================== FILTER SECTION ==================== */
.filters-section[b-8rkv1m45w5] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.25rem;
}

.filter-wrapper[b-8rkv1m45w5] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-8rkv1m45w5] {
        display: none !important;
    }

    .mobile-filters-content[b-8rkv1m45w5] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

.filters-grid[b-8rkv1m45w5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-group[b-8rkv1m45w5] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-8rkv1m45w5] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #495057;
    margin-bottom: 5px;
}

.filter-label-center[b-8rkv1m45w5] {
    display: flex;
    justify-content: center;
}

.filter-actions[b-8rkv1m45w5] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ==================== HISTORY BANNER ==================== */
.dpm-history-banner[b-8rkv1m45w5] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 8px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dpm-history-icon[b-8rkv1m45w5] {
    color: #856404;
}

.dpm-history-text[b-8rkv1m45w5] {
    color: #856404;
    font-weight: 600;
}

/* ==================== TABLE CONTAINER ==================== */
.table-container[b-8rkv1m45w5] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .filters-section[b-8rkv1m45w5] {
        padding: 8px 12px;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-8rkv1m45w5] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }

    .mobile-filter-title[b-8rkv1m45w5] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-8rkv1m45w5] {
        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-8rkv1m45w5] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-8rkv1m45w5] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-8rkv1m45w5] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-8rkv1m45w5] {
        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-8rkv1m45w5] {
            max-height: 5000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-8rkv1m45w5] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-8rkv1m45w5] {
        justify-content: center;
        flex-wrap: nowrap;
    }
}

/* ── Custom toggle switch (history mode) ─────────────────────────────────── */
.custom-switch-container[b-8rkv1m45w5] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-8rkv1m45w5] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

.custom-switch input[b-8rkv1m45w5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-8rkv1m45w5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.slider[b-8rkv1m45w5]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-switch input:checked + .slider[b-8rkv1m45w5] {
    background-color: #10b981;
    border-color: #10b981;
}

.custom-switch input:checked + .slider[b-8rkv1m45w5]:before {
    transform: translateX(26px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.custom-switch:hover .slider[b-8rkv1m45w5] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.custom-switch input:focus + .slider[b-8rkv1m45w5] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.custom-switch input:checked:hover + .slider[b-8rkv1m45w5] {
    background-color: #059669;
}

/* ── REPORT WRAPPER ── */
.dpm-report[b-8rkv1m45w5] {
    --p900: #0C2218;
    --p800: #164230;
    --p700: #1F5C46;
    --p600: #28785C;
    --p500: #359470;
    --p200: #A8D4BC;
    --p100: #CBE6D7;
    --p50: #E5F3EB;
    --p25: #F3FAF6;
    --gold: #C8992A;
    --gold-bg: #FBF6E0;
    --remain-text: #B85A08;
    --remain-bg: #FFF3E8;
    --remain-border: #F5D4A8;
    --ink: #132218;
    --ink2: #344D6A;
    --ink3: #7090B0;
    --line: #D8E8DE;
    --line-light: #ECF3FA;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 12px;
    color: var(--ink);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(9,22,36,.04), 0 16px 48px -20px rgba(9,22,36,.22);
    border: 1px solid var(--line);
    overflow: visible;
}

/* ── BODY ── */
.dpm-body[b-8rkv1m45w5] {
    padding: 20px 24px 28px;
    background: #fff;
}

/* ── SECTION TITLE ── */
.dpm-section-title[b-8rkv1m45w5] {
    text-align: center;
    padding: 16px 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

    .dpm-section-title h2[b-8rkv1m45w5] {
        font-size: 18px;
        font-weight: 800;
        color: var(--p900);
        text-transform: uppercase;
        letter-spacing: .8px;
        line-height: 1.2;
        margin: 0;
    }

.dpm-meta-line[b-8rkv1m45w5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--ink3);
    margin-top: 6px;
}

    .dpm-meta-line b[b-8rkv1m45w5] {
        font-weight: 600;
        color: var(--p600);
    }

.dpm-sep[b-8rkv1m45w5] {
    margin: 0 8px;
    color: var(--p200);
}

/* ── TABLE WRAPPER — scroll container chính cho bảng ── */
.dpm-tbl-wrap[b-8rkv1m45w5] {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
    max-height: 70vh;
}

/* ── TABLE ── */
.dpm-table[b-8rkv1m45w5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    min-width: 1100px;
}

/* ── HEADER: xanh nhạt (#D1FAE5 / #065F46) theo mẫu ── */
.dpm-table thead th[b-8rkv1m45w5] {
    background: #D1FAE5;
    color: #065F46;
    padding: 10px 10px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    border-right: 1px solid #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 2;
}

.dpm-table thead th:last-child[b-8rkv1m45w5] {
    border-right: none;
}

/* Đường kẻ phân cách dòng header rowspan & dòng 2 tuần với data */
.dpm-table thead th[rowspan][b-8rkv1m45w5],
.dpm-table thead tr:last-child th[b-8rkv1m45w5] {
    border-bottom: 1px solid #E5E7EB;
}

/* Nhóm "Tuần" colspan ở dòng 1 → border trắng (dòng 2 ngay dưới) */
.dpm-table thead tr:first-child th.th-week[b-8rkv1m45w5] {
    border-bottom: 1px solid #FFFFFF;
}

/* Dòng 2 (tuần labels) ghim ngay dưới dòng 1, z-index thấp hơn */
.dpm-table thead tr:nth-child(2) th[b-8rkv1m45w5] {
    top: 33px;
    z-index: 1;
}

.dpm-table thead th.th-week[b-8rkv1m45w5] {
    background: #D1FAE5;
    color: #065F46;
    min-width: 76px;
}

/* ── DATA CELLS ── */
.dpm-table tbody td[b-8rkv1m45w5] {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-light);
    border-right: 1px solid var(--line-light);
    white-space: nowrap;
    vertical-align: middle;
    color: var(--ink);
    font-size: 11px;
}

    .dpm-table tbody td:last-child[b-8rkv1m45w5] {
        border-right: none;
    }

.row-data:hover td[b-8rkv1m45w5] {
    background: #F3FAF6;
}

.row-data td:first-child[b-8rkv1m45w5] {
    font-weight: 600;
    color: var(--p700);
}

.td-num[b-8rkv1m45w5] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink2);
}

.td-center[b-8rkv1m45w5] {
    text-align: center;
}

.td-note[b-8rkv1m45w5] {
    white-space: normal;
    word-break: break-word;
    min-width: 120px;
}

/* ── SUBTOTAL ── */
.row-subtotal td[b-8rkv1m45w5] {
    background: #F0F5F2;
    font-weight: 700;
    color: var(--p700);
    border-top: 1px solid var(--p100);
    border-bottom: 2px solid var(--p100);
    font-size: 10.5px;
    letter-spacing: .2px;
    padding: 8px 10px;
}

    .row-subtotal td:first-child[b-8rkv1m45w5] {
        border-left: 3px solid var(--p600);
        padding-left: 12px;
    }

/* ── REMAIN ── */
.row-remain td[b-8rkv1m45w5] {
    background: var(--remain-bg);
    font-weight: 600;
    color: var(--remain-text);
    border-top: 1px solid var(--remain-border);
    border-bottom: 1px solid var(--remain-border);
    font-size: 10.5px;
    padding: 8px 10px;
}

    .row-remain td:first-child[b-8rkv1m45w5] {
        border-left: 3px solid var(--gold);
        padding-left: 12px;
    }

/* ── GRAND TOTAL — nền xanh nhạt, chữ đậm tối ── */
.row-grand-total td[b-8rkv1m45w5] {
    background: #E8F0EC;
    color: #1E3027;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2px;
    border-top: 1px solid var(--p100);
    border-bottom: 1px solid var(--p100);
    border-right-color: var(--line-light);
    padding: 10px 10px;
}

    .row-grand-total td:first-child[b-8rkv1m45w5] {
        border-left: 3px solid var(--p600);
    }

/* ── GRAND REMAIN — nền xanh nhạt, chữ đậm tối ── */
.row-grand-remain td[b-8rkv1m45w5] {
    background: #E8F0EC;
    color: #1E3027;
    font-weight: 700;
    font-size: 11px;
    border-bottom: 1px solid var(--p100);
    border-right-color: var(--line-light);
    padding: 10px 10px;
}

    .row-grand-remain td:first-child[b-8rkv1m45w5] {
        border-left: 3px solid var(--gold);
    }

/* ── DOCNUM TOOLTIP ── */
.dsid-tooltip-header[b-8rkv1m45w5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}


.dsid-tooltip-container[b-8rkv1m45w5] {
    position: relative;
    display: inline-block;
    cursor: help;
}

.dsid-tooltip[b-8rkv1m45w5] {
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    color: #333;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0;
    margin-top: 4px;
    white-space: nowrap;
    transition: opacity 0.2s;
    border: 1px solid #aaa;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    pointer-events: auto;
}

    .dsid-tooltip[b-8rkv1m45w5]::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 12px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #aaa transparent;
    }

.dsid-tooltip-container:hover .dsid-tooltip[b-8rkv1m45w5] {
    visibility: visible;
    opacity: 1;
}

.dsid-list[b-8rkv1m45w5] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

    .dsid-list li[b-8rkv1m45w5] {
        padding: 3px 0;
        font-size: 11px;
        border-bottom: 1px solid #f0f0f0;
        font-variant-numeric: tabular-nums;
    }

        .dsid-list li:last-child[b-8rkv1m45w5] {
            border-bottom: none;
        }

/* /Components/Pages/V2/VesselAllocationMonthReport/ExportWarehouseMonthReport.razor.rz.scp.css */
/* ExportWarehouseMonthReport.razor.css */

/* ===== CONTAINER ===== */
.table-container[b-tg024alf04] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 80vh;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    margin-bottom: 1.5rem;
}

.table-wrapper[b-tg024alf04] {
    min-width: fit-content;
}

/* ===== TABLE (FINAL - CHỈ GIỮ PHẦN NÀY) ===== */
.export-table[b-tg024alf04] {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    background: #fff;
}

    /* HEADER */
    .export-table thead tr:first-child th[b-tg024alf04] {
        background-color: #2f4050;
        color: #fff;
        font-weight: 600;
        text-align: center;
        border: 1px solid #2c3e50;
    }

    .export-table thead tr:nth-child(2) th[b-tg024alf04] {
        background-color: #465666;
        color: #fff;
        font-weight: 500;
        border: 1px solid #2c3e50;
    }

    /* CELL */
    .export-table th[b-tg024alf04],
    .export-table td[b-tg024alf04] {
        border: 1px solid #dee2e6;
        padding: 6px 8px;
        vertical-align: middle;
    }

/* GROUP */
.group-nhamay[b-tg024alf04],
.group-cang[b-tg024alf04] {
    background-color: #e9f4ff;
    font-weight: 600;
}

    .group-nhamay td[b-tg024alf04],
    .group-cang td[b-tg024alf04] {
        background-color: #e9f4ff;
    }

/* VALUE */
.value-highlight[b-tg024alf04] {
    color: #d35400;
    font-weight: 600;
    background-color: #fff5ef;
}

/* TOTAL COLUMN */
.total-col[b-tg024alf04] {
    font-weight: 600;
}

/* GRAND TOTAL */
.grand-total[b-tg024alf04] {
    background-color: #f0f0f0;
    color: #4a4a4a;
    font-weight: 700;
}

    .grand-total td[b-tg024alf04] {
        background-color: #f0f0f0;
        color: #4a4a4a;
    }

/* ALIGN */
.text-right[b-tg024alf04] {
    text-align: right;
}

.text-center[b-tg024alf04] {
    text-align: center;
}

/* EMPTY */
.empty[b-tg024alf04] {
    color: #adb5bd;
}

/* HOVER */
.export-table tbody tr:hover[b-tg024alf04] {
    background-color: #f8f9fa;
}

/* TITLE */
.export-warehouse-report .border-bottom[b-tg024alf04] {
    border-bottom: 2px solid #dee2e6 !important;
}

/* DOCNUM TOOLTIP */
.docnum-tooltip-container[b-tg024alf04] {
    position: relative;
    display: inline-block;
    cursor: help;
}

    /* Nâng stacking context của ô đang hover lên trên header sticky (z-index 100-103) */
    .docnum-tooltip-container:hover[b-tg024alf04] {
        z-index: 9999;
    }

.docnum-tooltip[b-tg024alf04] {
    visibility: hidden;
    background-color: #f2f2f2;
    color: #333;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    font-weight: normal;
}

.docnum-tooltip[b-tg024alf04]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.docnum-tooltip-container:hover .docnum-tooltip[b-tg024alf04] {
    visibility: visible;
    opacity: 1;
}

.docnum-list[b-tg024alf04] {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 18px;
    row-gap: 2px;
    max-height: 220px;
    overflow-y: auto;
}

.docnum-list li[b-tg024alf04] {
    display: contents;
}

.docnum-list li .docnum-label[b-tg024alf04] {
    text-align: left;
}

.docnum-list li .docnum-qty[b-tg024alf04] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ===== FILTERS (GIỮ NGUYÊN) ===== */
.filters-section[b-tg024alf04] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.filter-wrapper[b-tg024alf04] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-tg024alf04] {
        display: none !important;
    }

    .mobile-filters-content[b-tg024alf04] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* GRID */
.filters-grid[b-tg024alf04] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 16px;
    margin-bottom: 16px;
}

.filter-group[b-tg024alf04] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-tg024alf04] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #495057;
}

.filter-select[b-tg024alf04],
.filter-input[b-tg024alf04],
.filter-group :global(.rz-dropdown)[b-tg024alf04],
.filter-group :global(.rz-textbox)[b-tg024alf04],
.filter-group :global(.rz-numeric)[b-tg024alf04],
.filter-group :global(.rz-datepicker)[b-tg024alf04] {
    height: 34px;
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

/* ACTIONS */
.filter-actions[b-tg024alf04] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .filters-section[b-tg024alf04] {
        padding: 8px 12px;
        margin: 0 -0.75rem 1rem -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-tg024alf04] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }

    .mobile-filter-title[b-tg024alf04] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-tg024alf04] {
        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-tg024alf04] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-tg024alf04] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-tg024alf04] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-tg024alf04] {
        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-tg024alf04] {
            max-height: 5000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-tg024alf04] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-tg024alf04] {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .table-container[b-tg024alf04] {
        max-height: 50vh;
    }

    .export-table th[b-tg024alf04],
    .export-table td[b-tg024alf04] {
        font-size: 0.75rem;
        padding: 3px 4px;
    }
}

.group-vehicle-header td[b-tg024alf04] {
    background-color: #e8f4fd;
    font-weight: 600;
    color: #1a3a5c;
    font-style: italic;
}

.group-vehicle-all td[b-tg024alf04] {
    background-color: #d0e8f7;
}

.item-subtotal-row td[b-tg024alf04] {
    background-color: #5B7C99;
    color: #FFFFFF;
    font-weight: bold;
}

.area-subtotal-row td[b-tg024alf04] {
    background-color: #A2B8CC;
    color: #2f4050;
    font-weight: bold;
}

.vehicle-row td[b-tg024alf04] {
    background-color: #FFF8E1;
    color: #555;
}

.vehicle-row.so-xe td[b-tg024alf04] {
    background-color: #f7f2e2;
    color: #555;
    font-style: italic;
    font-size: 0.92em;
}

.summary-cards[b-tg024alf04] {
    display: flex;
    gap: 10px;
    padding: 0 20px 14px;
    flex-wrap: wrap;
}

.summary-card[b-tg024alf04] {
    flex: 1;
    min-width: 140px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
}

.summary-card-label[b-tg024alf04] {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-card-value[b-tg024alf04] {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.summary-card-sub[b-tg024alf04] {
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card tồn cuối kỳ — nổi bật cam đỏ */
.summary-card-highlight[b-tg024alf04] {
    border: 2px solid #EA580C;
}

    .summary-card-highlight .summary-card-value[b-tg024alf04] {
        color: #EA580C;
    }

/* Giá trị dash */
.summary-card-value.dash[b-tg024alf04] {
    color: #D1D5DB;
    font-size: 28px;
    line-height: 1;
}

.export-table-container[b-tg024alf04] {
    max-height: 65vh;
    overflow: auto;
    position: relative;
    border: 1px solid #dee2e6;
}

.export-table[b-tg024alf04] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    /* Sticky cho toàn bộ thead */
    .export-table thead[b-tg024alf04] {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #1a3a5c;
    }

    .export-table th[b-tg024alf04] {
        background: #1a3a5c;
        color: white;
        position: sticky;
        top: 0;
        z-index: 101;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    /* Hàng thứ 2 (các tuần) */
    .export-table thead tr:nth-child(2) th[b-tg024alf04] {
        z-index: 102;
    }

    /* Cột đầu tiên (KHÁCH HÀNG) sticky ngang */
    .export-table th:first-child[b-tg024alf04] {
        position: sticky;
        left: 0;
        z-index: 103;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }

    /* Hover effect */
    .export-table th:hover[b-tg024alf04] {
        background: #254b75;
    }

/* ── Custom toggle switch (history mode) ─────────────────────────────────── */
.custom-switch-container[b-tg024alf04] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-tg024alf04] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

.custom-switch input[b-tg024alf04] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-tg024alf04] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.slider[b-tg024alf04]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-switch input:checked + .slider[b-tg024alf04] {
    background-color: #10b981;
    border-color: #10b981;
}

.custom-switch input:checked + .slider[b-tg024alf04]:before {
    transform: translateX(26px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.custom-switch:hover .slider[b-tg024alf04] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.custom-switch input:focus + .slider[b-tg024alf04] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.custom-switch input:checked:hover + .slider[b-tg024alf04] {
    background-color: #059669;
}
/* /Components/Pages/V2/VesselAllocationMonthReport/InitialStockManager.razor.rz.scp.css */
/* ===== BASE ===== */
.ism-wrapper[b-461yypgb6b] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13.5px;
    color: #1e2937;
}

/* ===== OVERLAY ===== */
.ism-overlay[b-461yypgb6b] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    backdrop-filter: blur(2px);
}

/* Sub-dialog (Thêm/Sửa) nổi lên trên dialog chính */
.ism-overlay-top[b-461yypgb6b] {
    z-index: 1100;
}

/* ===== DIALOG SHELL (dialog chính to) ===== */
.ism-dialog-shell[b-461yypgb6b] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 32px 64px -12px rgba(0,0,0,0.35);
    width: min(1200px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ism-dialog-body[b-461yypgb6b] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 8px 20px;
    background: #f8fafc;
}

.ism-dialog-footer[b-461yypgb6b] {
    padding: 12px 20px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-radius: 0 0 14px 14px;
}

/* ===== HEADER ===== */
.ism-mhdr[b-461yypgb6b] {
    padding: 14px 20px;
    border-radius: 14px 14px 0 0;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ism-mclose[b-461yypgb6b] {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

    .ism-mclose:hover[b-461yypgb6b] {
        background: rgba(255,255,255,0.28);
    }

/* ===== TOOLBAR ===== */
.ism-toolbar[b-461yypgb6b] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ism-filter-row[b-461yypgb6b] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.ism-filter-item[b-461yypgb6b] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

    .ism-filter-item label[b-461yypgb6b] {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 2px;
    }

.ism-filter-actions[b-461yypgb6b] {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* ===== TABLE ===== */
.ism-table-wrapper[b-461yypgb6b] {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ism-table[b-461yypgb6b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .ism-table th[b-461yypgb6b] {
        background: #1e3a5f;
        color: #f1f5f9;
        padding: 12px 10px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        border-bottom: 2px solid #0f2239;
    }

    .ism-table td[b-461yypgb6b] {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

.ism-row:hover td[b-461yypgb6b] {
    background: #f0f9ff;
}

.ism-row-first td[b-461yypgb6b] {
    background: #f0fdf4;
}

.ism-row-last td[b-461yypgb6b] {
    border-bottom: 2px solid #fed7aa;
}

.ism-cell-group[b-461yypgb6b] {
    font-weight: 600;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
}

/* Column colors */
.ism-col-system[b-461yypgb6b] {
    background: #f0f9ff;
}

.ism-col-initial[b-461yypgb6b] {
    background: #f0fdf4;
    font-weight: 500;
}

.ism-col-qty[b-461yypgb6b] {
    background: #fff7ed;
    font-weight: 500;
}

.ism-val-highlight[b-461yypgb6b] {
    color: #166534;
    font-weight: 700;
}

.ism-note[b-461yypgb6b] {
    color: #64748b;
    font-size: 12.8px;
    max-width: 180px;
}

.ism-muted[b-461yypgb6b] {
    color: #94a3b8;
}

/* Alignment helpers */
.tc[b-461yypgb6b] {
    text-align: center !important;
}

.tr[b-461yypgb6b] {
    text-align: right !important;
}

/* ===== ICON BUTTONS ===== */
.ism-icon-btn[b-461yypgb6b] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ism-icon-edit[b-461yypgb6b] {
    background: #dbeafe;
    color: #1e40af;
}

    .ism-icon-edit:hover[b-461yypgb6b] {
        background: #bfdbfe;
        transform: scale(1.05);
    }

/* ===== EMPTY STATE ===== */
.ism-empty[b-461yypgb6b] {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    font-size: 15px;
}

/* ===== SUB-MODALS (Thêm / Sửa) ===== */
.ism-modal[b-461yypgb6b] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3);
    width: min(640px, 96vw);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.ism-modal-sm[b-461yypgb6b] {
    width: min(420px, 96vw);
}

.ism-mbody[b-461yypgb6b] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.ism-mftr[b-461yypgb6b] {
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

/* Form grid */
.ism-fgrid[b-461yypgb6b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ism-fg[b-461yypgb6b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ism-fg label[b-461yypgb6b] {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }

.ism-fg-full[b-461yypgb6b] {
    grid-column: 1 / -1;
}

.ism-full[b-461yypgb6b] {
    width: 100% !important;
}

.ism-req[b-461yypgb6b] {
    color: #ef4444;
}

/* Alert */
.ism-alert[b-461yypgb6b] {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ism-err[b-461yypgb6b] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ===== BUTTONS ===== */
.ism-btn[b-461yypgb6b] {
    padding: 8px 18px;
    border-radius: 7px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.ism-btn-primary[b-461yypgb6b] {
    background: #1e3a5f;
    color: #fff;
}

    .ism-btn-primary:hover[b-461yypgb6b] {
        background: #162d4a;
    }

.ism-btn-secondary[b-461yypgb6b] {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

    .ism-btn-secondary:hover[b-461yypgb6b] {
        background: #e2e8f0;
    }

/* ===== PAGINATION ===== */
.ism-pagination[b-461yypgb6b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 10px 10px;
}

.ism-page-info[b-461yypgb6b] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
}

.ism-page-controls[b-461yypgb6b] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ism-page-btn[b-461yypgb6b] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

    .ism-page-btn:hover:not(:disabled)[b-461yypgb6b] {
        background: #1e3a5f;
        color: #fff;
        border-color: #1e3a5f;
    }

    .ism-page-btn:disabled[b-461yypgb6b] {
        opacity: 0.35;
        cursor: not-allowed;
    }

.ism-page-active[b-461yypgb6b] {
    background: #1e3a5f !important;
    color: #fff !important;
    border-color: #1e3a5f !important;
    font-weight: 600;
}

.ism-page-size[b-461yypgb6b] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12.5px;
    color: #334155;
    background: #fff;
    cursor: pointer;
}

    .ism-page-size:focus[b-461yypgb6b] {
        outline: 2px solid #1e3a5f;
        outline-offset: 1px;
    }
/* /Components/Pages/V2/VesselAllocationMonthReport/VesselAllocationContReport.razor.rz.scp.css */
/* =================================================
   VESSEL ALLOCATION CONT REPORT – CSS
   Matches: BÁO CÁO KẾ HOẠCH HÀNG CONT mockup
   ================================================= */

/* ── Root font ── */
.vac-report[b-cjw9df1dea] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ==================== FILTER SECTION ==================== */

.vac-filters[b-cjw9df1dea] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #dee2e6;
    padding: 1rem 1.25rem;
}

.filter-wrapper[b-cjw9df1dea] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-cjw9df1dea] {
        display: none !important;
    }

    .mobile-filters-content[b-cjw9df1dea] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

.vac-filters-grid[b-cjw9df1dea] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vac-filter-group[b-cjw9df1dea] {
    display: flex;
    flex-direction: column;
}

.vac-filter-label[b-cjw9df1dea] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #495057;
    margin-bottom: 5px;
}

.vac-filter-input[b-cjw9df1dea] {
    width: 100%;
}

.filter-actions[b-cjw9df1dea] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ==================== REPORT HEADER ==================== */

.vac-report-header[b-cjw9df1dea] {
    background: #fff;
    text-align: center;
    padding: 14px 16px 10px;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.vac-report-title[b-cjw9df1dea] {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.vac-report-subtitle[b-cjw9df1dea] {
    font-size: 12.5px;
    color: #495057;
}

    .vac-report-subtitle strong[b-cjw9df1dea] {
        font-style: normal;
        font-weight: 700;
        color: #212529;
    }

/* ==================== TABLE WRAPPER ==================== */

.vac-table-wrap[b-cjw9df1dea] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vac-table-scroll[b-cjw9df1dea] {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* ==================== TABLE ==================== */

.vac-table[b-cjw9df1dea] {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    font-size: 12.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    margin-bottom: 0;
}

    /* Header */
    .vac-table thead th[b-cjw9df1dea] {
        background-color: #1b3a5c;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        padding: 7px 8px;
        text-align: center;
        border: 1px solid #fff;
        border-bottom: 2px solid #fff;
        white-space: nowrap;
        vertical-align: middle;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Body cells */
    .vac-table tbody td[b-cjw9df1dea] {
        padding: 5px 8px;
        border: 1px solid #dee2e6;
        vertical-align: middle;
        font-size: 12.5px;
        white-space: normal;
        word-break: break-word;
    }

/* ── Alignment helpers ── */
.tc-c[b-cjw9df1dea] {
    text-align: center !important;
}

.tc-l[b-cjw9df1dea] {
    text-align: left !important;
}

.tc-r[b-cjw9df1dea] {
    text-align: right !important;
}

/* ── Origin badges ── */
.vac-badge[b-cjw9df1dea] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: #edeff2;
    color: #1b3a5c;
}

/* ── Warehouse badge ── */
.vac-kho-badge[b-cjw9df1dea] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: #E1F5EE;
    color: #0F6E56;
}

/* ── NM name ── */
.vac-nm-name[b-cjw9df1dea] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: #E3F2FD;
    color: #1565C0;
}

/* ── Dash placeholder ── */
.vac-dash[b-cjw9df1dea] {
    color: #6c757d;
}

/* ── Số còn lại ── */
.vac-red[b-cjw9df1dea] {
    color: #dc2626;
    font-weight: 700;
}

.vac-green[b-cjw9df1dea] {
    color: #16a34a;
    font-weight: 700;
}

/* ── Subtotal row (per vessel) ── */
.vac-subtotal-row td[b-cjw9df1dea] {
    background: #c6cdd4;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    border-top: 1.5px solid #6cef94;
}

.vac-subtotal-label[b-cjw9df1dea] {
    padding-left: 10px !important;
}

/* ── Grand total row ── */
.vac-grand-total td[b-cjw9df1dea] {
    background: #1b3a5c;
    font-weight: 700;
    font-size: 12.5px;
    color: #fff;
    border-top: 2px solid #ffc107;
}

.vac-grand-label[b-cjw9df1dea] {
    padding-left: 8px !important;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1400px) {
    .vac-table thead th[b-cjw9df1dea],
    .vac-table tbody td[b-cjw9df1dea],
    .vac-subtotal-row td[b-cjw9df1dea],
    .vac-grand-total td[b-cjw9df1dea] {
        font-size: 11px;
        padding: 5px 6px;
    }
}

@media (max-width: 768px) {
    .vac-filters[b-cjw9df1dea] {
        padding: 8px 12px;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-cjw9df1dea] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }

    .mobile-filter-title[b-cjw9df1dea] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-cjw9df1dea] {
        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-cjw9df1dea] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-cjw9df1dea] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-cjw9df1dea] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-cjw9df1dea] {
        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-cjw9df1dea] {
            max-height: 5000px;
            opacity: 1;
            padding: 8px 0;
        }

    .vac-filters-grid[b-cjw9df1dea] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-cjw9df1dea] {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .vac-table[b-cjw9df1dea] {
        min-width: 900px;
    }

        .vac-table thead th[b-cjw9df1dea],
        .vac-table tbody td[b-cjw9df1dea] {
            font-size: 10.5px;
            padding: 4px 5px;
        }
}

/* ── Custom toggle switch (history mode) ─────────────────────────────────── */
.custom-switch-container[b-cjw9df1dea] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-cjw9df1dea] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

.custom-switch input[b-cjw9df1dea] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-cjw9df1dea] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.slider[b-cjw9df1dea]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-switch input:checked + .slider[b-cjw9df1dea] {
    background-color: #10b981;
    border-color: #10b981;
}

.custom-switch input:checked + .slider[b-cjw9df1dea]:before {
    transform: translateX(26px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.custom-switch:hover .slider[b-cjw9df1dea] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.custom-switch input:focus + .slider[b-cjw9df1dea] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.custom-switch input:checked:hover + .slider[b-cjw9df1dea] {
    background-color: #059669;
}
/* /Components/Pages/V2/VesselAllocationMonthReport/VesselAllocationReport.razor.rz.scp.css */
/* VesselAllocationReport.razor.css */

/* ── Wrapper ────────────────────────────────────────────── */
.vessel-allocation-report[b-kbdraamtfc] {
    background: #fff;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ── Container ─────────────────────────────────────────── */
.table-container[b-kbdraamtfc] {
    border: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
    background: white;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Report Header ──────────────────────────────────────── */
.report-header[b-kbdraamtfc] {
    padding: 16px 24px 14px;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.report-title[b-kbdraamtfc] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2b3e2d;
    margin: 0 0 6px;
}

.report-subtitle[b-kbdraamtfc] {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 500;
    color: #4c6249;
    background: #eef5e9;
    border: 1px solid #d5e2cf;
    border-radius: 7px;
    padding: 6px 16px;
}

    .report-subtitle strong[b-kbdraamtfc] {
        color: #2b3e2d;
        font-weight: 700;
    }

/* ── Table ──────────────────────────────────────────────── */
.vessel-table[b-kbdraamtfc] {
    width: 100%;
    min-width: 1100px;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
}

    .vessel-table th[b-kbdraamtfc],
    .vessel-table td[b-kbdraamtfc] {
        border: 1px solid #c9d3de;
        padding: 6px 10px;
        vertical-align: middle;
    }

    .vessel-table .wrap-text[b-kbdraamtfc] {
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
    }

    .vessel-table thead th[b-kbdraamtfc] {
        background-color: #4c6249;
        color: #fff;
        font-weight: 600;
        text-align: center;
        font-size: 12.5px;
        white-space: nowrap;
        border-color: #62977a;
        position: sticky;
        top: 0;
        z-index: 10;
    }

/* ── Branch header row ──────────────────────────────────── */
.row-branch-header td[b-kbdraamtfc] {
    background: #e8f0e4;
    color: #4c6249;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px 5px 14px;
    border-left: 3px solid #8ba187;
    border-top: 1px solid #cfddcb;
    border-bottom: 1px solid #cfddcb;
}

/* ── Detail rows ────────────────────────────────────────── */
.row-detail td[b-kbdraamtfc] {
    background-color: #fff;
    border-bottom: 1px solid #e9f0e5;
    color: #2b3e2d;
}

.row-detail:hover td[b-kbdraamtfc] {
    background-color: #f0f5fb;
}

.row-detail:nth-child(even) td[b-kbdraamtfc] {
    background: #f4faef;
}

.num-cell[b-kbdraamtfc] {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    text-align: right;
    color: #2b3e2d;
    font-weight: 500;
}

.num-cell.fw-bold[b-kbdraamtfc] {
    font-weight: 600 !important;
}

.num-dash[b-kbdraamtfc] {
    color: #e0e6dd !important;
}

/* ── Destination link ───────────────────────────────────── */
.dest-link[b-kbdraamtfc] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
}

.dest-vk[b-kbdraamtfc],
.dest-nm[b-kbdraamtfc] {
    color: #1a1a1a;
    font-weight: 500;
}

/* ── DVVC badge ──────────────────────────────────────────── */
.badge-dvvc[b-kbdraamtfc] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    color: #578d58;
    font-size: 12px;
    font-weight: 600;
}

/* ── Pháp nhân badge ─────────────────────────────────────── */
.badge-phapnhan[b-kbdraamtfc] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    background-color: #eef5e9;
    color: #4c6249;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    border: 1px solid #d5e2cf;
}

/* ── KV subtotal row ────────────────────────────────────── */
.vessel-table .row-subtotal-kv td[b-kbdraamtfc] {
    background-color: #dff0d8;
    color: #2b3e2d;
    font-size: 12px;
    font-weight: 600 !important;
    border-top: 1px solid #8ba187;
    border-bottom: 1px solid #8ba187;
}

/* ── Branch subtotal row ────────────────────────────────── */
.row-subtotal-branch td[b-kbdraamtfc] {
    background-color: #e8f5e4;
    color: #4c6249;
    font-size: 12px;
    font-weight: 600 !important;
    border-top: 1px solid #cfddcb;
}

/* ── Column widths ───────────────────────────────────────── */
.col-vessel[b-kbdraamtfc] {
    width: 20%;
    min-width: 200px;
    text-align: left;
}

.col-xetai[b-kbdraamtfc] {
    width: 7%;
    min-width: 75px;
    text-align: right;
}

.col-salan[b-kbdraamtfc] {
    width: 7%;
    min-width: 80px;
    text-align: right;
}

.col-tauchuot[b-kbdraamtfc] {
    width: 8%;
    min-width: 85px;
    text-align: right;
}

.col-luukho[b-kbdraamtfc] {
    width: 8%;
    min-width: 90px;
    text-align: right;
}

.col-tongpb[b-kbdraamtfc] {
    width: 7%;
    min-width: 80px;
    text-align: right;
}

.col-khuvuc[b-kbdraamtfc] {
    width: 12%;
    min-width: 95px;
}

.col-dvvc[b-kbdraamtfc] {
    width: 8%;
    min-width: 60px;
    text-align: center;
}

.col-note[b-kbdraamtfc] {
    width: 16%;
    min-width: 150px;
    text-align: left;
}

/* BS5 thiếu .text-right — fix để các cột số hiển thị đúng */
.text-right[b-kbdraamtfc] {
    text-align: right;
}

/* ── Filters section ─────────────────────────────────────── */
.filters-section[b-kbdraamtfc] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 1rem 1.25rem;
}

.filter-wrapper[b-kbdraamtfc] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-kbdraamtfc] {
        display: none !important;
    }

    .mobile-filters-content[b-kbdraamtfc] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

.filters-grid[b-kbdraamtfc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.filter-group[b-kbdraamtfc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-kbdraamtfc] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #495057;
}

.filter-select[b-kbdraamtfc] {
    height: 34px;
    font-size: 0.875rem;
}

.filter-actions[b-kbdraamtfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ── Custom toggle switch ────────────────────────────────── */
.custom-switch-container[b-kbdraamtfc] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-kbdraamtfc] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

.custom-switch input[b-kbdraamtfc] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-kbdraamtfc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.slider[b-kbdraamtfc]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-switch input:checked + .slider[b-kbdraamtfc] {
    background-color: #10b981;
    border-color: #10b981;
}

.custom-switch input:checked + .slider[b-kbdraamtfc]:before {
    transform: translateX(26px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.custom-switch:hover .slider[b-kbdraamtfc] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.custom-switch input:focus + .slider[b-kbdraamtfc] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.custom-switch input:checked:hover + .slider[b-kbdraamtfc] {
    background-color: #059669;
}

/* ── Vessel cards wrapper ────────────────────────────────── */
.vessel-cards-wrapper[b-kbdraamtfc] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Bootstrap mb-3 + gap sẽ double spacing — reset về 0 */
.vessel-cards-wrapper .vessel-card[b-kbdraamtfc] {
    margin-bottom: 0 !important;
}

/* ── Vessel card ─────────────────────────────────────────── */
.vessel-card[b-kbdraamtfc] {
    border: 1px solid #62977a;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(40,70,40,.07);
}

/* ── Card header (title bar) ─────────────────────────────── */
.vessel-card-header[b-kbdraamtfc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #c6dba2 !important;
    color: #2b3e2d;
}

.vessel-card-header-total[b-kbdraamtfc] {
    padding-left: 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.1px;
}

.badge-card-noidia[b-kbdraamtfc],
.badge-card-nhapkhau[b-kbdraamtfc] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background-color: rgba(43,62,45,0.1);
    color: #2b3e2d;
    border: 1px solid rgba(43,62,45,0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-card-loai[b-kbdraamtfc] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    background-color: rgba(255,255,255,0.13);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.26);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Info panel (left column) ────────────────────────────── */
.vessel-info-panel[b-kbdraamtfc] {
    border-right: 1px solid #cfddcb;
    padding: 14px 16px;
    background: #f5fbf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vessel-info-table[b-kbdraamtfc] {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .vessel-info-table td[b-kbdraamtfc] {
        padding: 3px 0;
        vertical-align: top;
        line-height: 1.4;
        border: none;
    }

        .vessel-info-table td:first-child[b-kbdraamtfc] {
            font-weight: 600;
            color: #8ba187;
            font-size: 11.5px;
            padding-left: 20px;
            width: 50%;
            text-align: left;
            white-space: nowrap;
        }

        .vessel-info-table td:last-child[b-kbdraamtfc] {
            color: #2b3e2d;
            font-size: 12px;
            font-weight: 500;
            width: 50%;
            text-align: left;
        }

/* ── Alloc panel (right column) ──────────────────────────── */
.vessel-alloc-panel[b-kbdraamtfc] {
    display: flex;
    flex-direction: column;
}

    .vessel-alloc-panel .vessel-table[b-kbdraamtfc] {
        min-width: 560px;
        table-layout: fixed;
    }

    .vessel-alloc-panel .vessel-table thead th[b-kbdraamtfc] {
        background-color: #e5f0de;
        color: #4c6249;
        font-weight: 600;
        border-color: #cfddcb;
        padding: 8px 10px;
        font-size: 12px;
    }

    .vessel-alloc-panel .row-branch-header td[b-kbdraamtfc] {
        background: #e8f0e4;
        color: #4c6249;
        font-weight: 600;
        font-size: 12px;
        padding: 5px 10px 5px 14px;
        border-left: 3px solid #8ba187;
        border-top: 1px solid #cfddcb;
        border-bottom: 1px solid #cfddcb;
    }

/* ── Subtotal wrap (pinned bottom of alloc panel) ────────── */
.vessel-subtotal-wrap[b-kbdraamtfc] {
    flex-shrink: 0;
}

    .vessel-subtotal-wrap .vessel-table[b-kbdraamtfc] {
        min-width: 560px;
        table-layout: fixed;
    }

    .vessel-subtotal-wrap .row-subtotal-vessel td[b-kbdraamtfc] {
        background: #c9e0c0;
        color: #2b3e2d;
        border: 1px solid #a8c8a0;
        border-top: 1px solid #7aaa72;
        font-weight: 600 !important;
        font-size: 12px;
        padding: 8px 10px;
    }

/* ── TenTauBL group box ──────────────────────────────────── */
.vessel-group-box[b-kbdraamtfc] {
    border: 1px solid #62977a;
    border-radius: 8px;
    padding: 10px 12px 8px;
    background: #eef5e9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vessel-group-label[b-kbdraamtfc] {
    display: inline-block;
    background: #c6dba2;
    color: #2b3e2d !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* ── Region box ──────────────────────────────────────────── */
.region-box[b-kbdraamtfc] {
    border: 1px solid #62977a;
    border-radius: 8px;
    padding: 12px 14px 10px;
    background: #f5fbf0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.region-group-header-card[b-kbdraamtfc] {
    background: linear-gradient(to right, #4c6249, #62977a);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

/* ── Region subtotal bar ─────────────────────────────────── */
.region-subtotal-bar[b-kbdraamtfc] {
    padding: 10px 16px;
    background: #eef5e9;
    color: #4c6249;
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    border-left: 4px solid #8ba187;
    margin-top: 8px;
    margin-bottom: 16px;
}

/* ── Grand total bar ─────────────────────────────────────── */
.vessel-grand-total[b-kbdraamtfc] {
    padding: 12px 20px;
    background: #c4dcb6;
    color: #2b3e2d;
    border-radius: 8px;
    border-left: 4px solid #4c6249;
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(30,58,95,0.16);
}

/* ── Summary rows inner layout ───────────────────────────── */
.summary-row-inner[b-kbdraamtfc] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
}

.summary-row-label[b-kbdraamtfc] {
    width: 260px;
    min-width: 200px;
    flex-shrink: 0;
}

.summary-row-alloc[b-kbdraamtfc] {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.vessel-table-summary[b-kbdraamtfc] {
    min-width: 560px;
    table-layout: fixed;
}

.region-subtotal-bar .vessel-table-summary td[b-kbdraamtfc] {
    background: transparent;
    border-color: rgba(139,161,135,.25);
    padding: 8px 10px;
    color: #4c6249;
}

.vessel-grand-total .vessel-table-summary td[b-kbdraamtfc] {
    background: transparent;
    border-color: rgba(43,62,45,.15);
    padding: 8px 10px;
    color: #2b3e2d;
}

/* Xóa border trái td đầu để "merge" thị giác với summary-row-label */
.region-subtotal-bar .vessel-table-summary td:first-child[b-kbdraamtfc],
.vessel-grand-total .vessel-table-summary td:first-child[b-kbdraamtfc] {
    border-left: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1400px) {
    .vessel-table th[b-kbdraamtfc],
    .vessel-table td[b-kbdraamtfc] {
        padding: 5px 8px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .filters-section[b-kbdraamtfc] {
        padding: 8px 12px;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-kbdraamtfc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }

    .mobile-filter-title[b-kbdraamtfc] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-kbdraamtfc] {
        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-kbdraamtfc] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-kbdraamtfc] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-kbdraamtfc] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-kbdraamtfc] {
        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-kbdraamtfc] {
            max-height: 5000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-kbdraamtfc] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-kbdraamtfc] {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .report-title[b-kbdraamtfc] {
        font-size: 1rem;
    }
}
/* /Components/Pages/V2/VesselAllocationMonthReport/WarehouseMonthAllocationReport.razor.rz.scp.css */
/* ================================================================
   VesselAllocationReport.razor.css
   Màu sắc khớp chính xác với ảnh mẫu
   ================================================================ */

/* ── CONTAINER TỔNG ─────────────────────────────────────────── */
.vessel-allocation-report[b-t4yj154plu] {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
}

/* ── TABLE CONTAINER ────────────────────────────────────────── */
.table-container[b-t4yj154plu] {
    overflow: visible;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    margin-bottom: 1.5rem;
}

/* ================================================================
   BÁO CÁO TABLE
   ================================================================ */

.rpt-table[b-t4yj154plu] {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

    .rpt-table th[b-t4yj154plu],
    .rpt-table td[b-t4yj154plu] {
        border: 1px solid #d1d5db;
        padding: 6px 10px;
        vertical-align: middle;
    }

/* ── TIÊU ĐỀ NHÓM (vàng đậm) ──────────────────────────────── */
.rpt-title-bg[b-t4yj154plu] {
    background-color: #FFF22F;
    color: #1a1a1a;
    text-align: center;
    padding: 9px 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    border: 1px solid #e6da00;
    letter-spacing: 0.02em;
}

/* ── HEADER CỘT (navy đậm, chữ trắng) ─────────────────────── */
.rpt-header-main[b-t4yj154plu] {
    background-color: #1A3A5C;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    padding: 8px 10px;
    font-size: 12.5px;
    border: 1px solid #0f2740;
}

/* ── TỒN ĐẦU KỲ (xanh mint nhạt, chữ xanh đậm) ─────────── */
.rpt-row-ton-dau[b-t4yj154plu] {
    background-color: #e7fff0;
}

    .rpt-row-ton-dau td[b-t4yj154plu] {
        background-color: #e7fff0;
        border: 1px solid #a7f3d0;
    }

.rpt-num-tondau[b-t4yj154plu] {
    text-align: right;
    font-weight: 600;
    color: #065F46;
}

/* Cột TỔNG của tồn đầu kỳ: xanh mint đậm hơn */
.rpt-row-ton-dau .rpt-col-total[b-t4yj154plu] {
    color: #065F46;
    font-weight: 700;
    text-align: right;
    background-color: #c5fcce;
}

/* ── SECTION NHẬP HÀNG (xanh dương nhạt) ──────────────────── */
.rpt-section-nhap[b-t4yj154plu] {
    background-color: #ebefff;
}

    .rpt-section-nhap td[b-t4yj154plu] {
        background-color: #ebefff;
        color: rgb(30 64 175 / var(--tw-text-opacity, 1));
        font-weight: 700;
        font-size: 12.5px;
        padding: 6px 10px;
        border: 1px solid #bfdbfe;
    }

/* ── SECTION XUẤT HÀNG (cam nhạt) ─────────────────────────── */
.rpt-section-xuat[b-t4yj154plu] {
    background-color: #fff7ef;
}

    .rpt-section-xuat td[b-t4yj154plu] {
        background-color: #fff7ef;
        color: #9A3412;
        font-weight: 700;
        font-size: 12.5px;
        padding: 6px 10px;
        border: 1px solid #fdba74;
    }

/* ── SUBHEADER: TẠI NHÀ MÁY / TẠI CẢNG (xám nhạt, in nghiêng) */
.rpt-subheader-xuat[b-t4yj154plu] {
    font-weight: 700;
    background-color: #F3F4F6;
}

    .rpt-subheader-xuat td[b-t4yj154plu] {
        background-color: #F3F4F6;
        color: #6B7280;
        font-style: italic;
        font-size: 12px;
        padding: 5px 10px;
        border: 1px solid #e5e7eb;
    }

/* ── DETAIL ROWS (trắng) ───────────────────────────────────── */
.rpt-row-detail[b-t4yj154plu] {
    background-color: #ffffff;
}

    .rpt-row-detail td[b-t4yj154plu] {
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
    }
.rpt-row-item-subtotal td[b-t4yj154plu] {
    background-color: #5B7C99;
    color: #FFFFFF;
    font-weight: bold;
    border: 1px solid #46617a;
}

.rpt-row-tong[b-t4yj154plu] {
    background-color: #FFF8E1;
}

    .rpt-row-tong td[b-t4yj154plu] {
        background-color: #FFF8E1;
        border: 1px solid #e5e7eb;
    }

.rpt-row-so-xe[b-t4yj154plu] {
    background-color: #f7f2e2;
}

    .rpt-row-so-xe td[b-t4yj154plu] {
        background-color: #f7f2e2;
        border: 1px solid #e5e7eb;
        font-style: italic
    }

/* Label thụt vào */
.rpt-label-indent[b-t4yj154plu] {
    padding-left: 1.75rem !important;
    color: #374151;
}

/* Label đậm (đầu dòng section tổng) */
.rpt-label-bold[b-t4yj154plu] {
    font-weight: 700;
    color: #065F46;
}

/* Số lượng nhập: màu xanh dương */
.rpt-num-blue[b-t4yj154plu] {
    text-align: right;
    font-weight: 600;
    color: #2563EB;
}

/* Số thông thường: đen */
.rpt-num-black[b-t4yj154plu] {
    text-align: right;
    color: #111827;
}

/* Dấu "---" cho ô trống */
.rpt-num-dash[b-t4yj154plu] {
    text-align: right;
    color: #9CA3AF;
    font-size: 12px;
}

/* Note mờ (Phân bổ theo PO, Theo ETA Tàu) */
.rpt-note-gray[b-t4yj154plu] {
    color: #9CA3AF;
    font-style: italic;
    font-size: 12px;
}

/* Tên đối tượng BOOK V/C: cam đậm */
.rpt-num-orange[b-t4yj154plu] {
    color: #EA580C;
    font-weight: 700;
    text-align: left;
}

/* ── BADGE PHƯƠNG TIỆN (xanh navy nhạt, bo góc) ─────────── */
.badge-pt[b-t4yj154plu] {
    display: inline-block;
    background-color: #EEF2F7;
    color: #1B3A5C;
    font-weight: 700;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #b0bed4;
    white-space: nowrap;
}

/* ── BADGE BOOK V/C (cam nhạt, bo góc) ─────────────────── */
.badge-vc[b-t4yj154plu] {
    display: inline-block;
    background-color: #FFF3E0;
    color: #BF360C;
    font-weight: 700;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #FFCCAA;
    white-space: nowrap;
}

/* Cell chứa badge: căn trái, padding nhỏ */
.badge-pn[b-t4yj154plu] {
    display: inline-block;
    background-color: #E8F5E9;
    color: #1B5E20;
    font-weight: 700;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #A5D6A7;
    white-space: nowrap;
}

.td-badge[b-t4yj154plu] {
    text-align: left;
    padding: 5px 8px !important;
    vertical-align: middle;
}

/* Cột TỔNG (highlight nhẹ) */
.rpt-col-total[b-t4yj154plu] {
    font-weight: 700;
    text-align: right;
    background-color: #F9FAFB;
}

/* ── TỔNG KẾ HOẠCH XUẤT (cam đậm, chữ trắng) ──────────────── */
.rpt-row-tong-xuat[b-t4yj154plu] {
    background-color: #EA580C;
}

    .rpt-row-tong-xuat td[b-t4yj154plu] {
        background-color: #EA580C;
        color: #ffffff;
        font-weight: 700;
        border: 1px solid #c2410c;
        text-align: right;
    }

        .rpt-row-tong-xuat td:first-child[b-t4yj154plu] {
            text-align: left;
        }

    .rpt-row-tong-xuat .rpt-col-total[b-t4yj154plu] {
        background-color: #C2410C !important;
        color: #ffffff;
    }

/* ── TỒN KHO LŨY KẾ (teal đậm, chữ trắng) ────────────────── */
.rpt-row-luy-ke[b-t4yj154plu] {
    background-color: #115E59;
}

    .rpt-row-luy-ke td[b-t4yj154plu] {
        background-color: #115E59;
        color: #ffffff;
        font-weight: 700;
        border: 1px solid #0d4a45;
        text-align: right;
    }

        .rpt-row-luy-ke td:first-child[b-t4yj154plu] {
            text-align: left;
        }

    .rpt-row-luy-ke .rpt-col-total[b-t4yj154plu] {
        background-color: #0D4A45 !important;
        color: #ffffff;
    }

/* DOCNUM TOOLTIP */
.docnum-tooltip-container[b-t4yj154plu] {
    position: relative;
    display: inline-block;
    cursor: help;
}

    /* Nâng stacking context của ô đang hover lên trên header sticky (z-index 100-103) */
    .docnum-tooltip-container:hover[b-t4yj154plu] {
        z-index: 9999;
    }

.docnum-tooltip[b-t4yj154plu] {
    visibility: hidden;
    background-color: #f2f2f2;
    color: #333;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    font-weight: normal;
}

.docnum-tooltip[b-t4yj154plu]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.docnum-tooltip-container:hover .docnum-tooltip[b-t4yj154plu] {
    visibility: visible;
    opacity: 1;
}

.docnum-list[b-t4yj154plu] {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 18px;
    row-gap: 2px;
}

.docnum-list li[b-t4yj154plu] {
    display: contents;
}

.docnum-list li .docnum-label[b-t4yj154plu] {
    text-align: left;
}

.docnum-list li .docnum-qty[b-t4yj154plu] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   PHẦN FILTERS
   ================================================================ */

.filters-section[b-t4yj154plu] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.filter-wrapper[b-t4yj154plu] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-t4yj154plu] {
        display: none !important;
    }

    .mobile-filters-content[b-t4yj154plu] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .filters-section[b-t4yj154plu] {
        padding: 1.75rem 2rem;
    }

    .filters-grid[b-t4yj154plu] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Grid filters */
.filters-grid[b-t4yj154plu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 16px;
    margin-bottom: 16px;
}

.filter-group[b-t4yj154plu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-t4yj154plu] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #495057;
}

.filter-select[b-t4yj154plu],
.filter-group :global(.rz-dropdown)[b-t4yj154plu],
.filter-group :global(.rz-textbox)[b-t4yj154plu],
.filter-group :global(.rz-numeric)[b-t4yj154plu],
.filter-group :global(.rz-datepicker)[b-t4yj154plu] {
    height: 34px;
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

/* Nút hành động */
.filter-actions[b-t4yj154plu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .filters-section[b-t4yj154plu] {
        padding: 16px;
        margin: 0 -0.75rem 1rem -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Mobile filter toggle mechanism */
    .mobile-filter-header[b-t4yj154plu] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
        margin-bottom: 8px;
        cursor: pointer;
        background: white;
    }

    .mobile-filter-title[b-t4yj154plu] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-t4yj154plu] {
        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-t4yj154plu] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-t4yj154plu] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-t4yj154plu] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-t4yj154plu] {
        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-t4yj154plu] {
            max-height: 5000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-t4yj154plu] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filter-actions[b-t4yj154plu] {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
    }
}

.summary-cards[b-t4yj154plu] {
    display: flex;
    gap: 10px;
    padding: 0 20px 14px;
    flex-wrap: wrap;
}

.summary-card[b-t4yj154plu] {
    flex: 1;
    min-width: 140px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
}

.summary-card-label[b-t4yj154plu] {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-card-value[b-t4yj154plu] {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.summary-card-sub[b-t4yj154plu] {
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card tồn cuối kỳ — nổi bật cam đỏ */
.summary-card-highlight[b-t4yj154plu] {
    border: 2px solid #EA580C;
}

    .summary-card-highlight .summary-card-value[b-t4yj154plu] {
        color: #EA580C;
    }

/* Giá trị dash */
.summary-card-value.dash[b-t4yj154plu] {
    color: #D1D5DB;
    font-size: 28px;
    line-height: 1;
}

.rpt-table-container[b-t4yj154plu] {
    overflow: visible;
    position: relative;
}

.rpt-table[b-t4yj154plu] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    /* Sticky Header */
    .rpt-table thead[b-t4yj154plu] {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #1a3a5c;
    }

    .rpt-table th.rpt-header-main[b-t4yj154plu] {
        position: sticky;
        top: 0;
        z-index: 101;
        background: #1a3a5c;
        color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Cột đầu tiên (DANH MỤC) sticky khi cuộn ngang */
    .rpt-table th:first-child[b-t4yj154plu] {
        position: sticky;
        left: 0;
        z-index: 102;
        background: #1a3a5c;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }

    .rpt-table th:hover[b-t4yj154plu] {
        background: #254b75;
    }

/* ── Custom toggle switch (history mode) ─────────────────────────────────── */
.custom-switch-container[b-t4yj154plu] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-switch[b-t4yj154plu] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    cursor: pointer;
}

.custom-switch input[b-t4yj154plu] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-t4yj154plu] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.slider[b-t4yj154plu]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.custom-switch input:checked + .slider[b-t4yj154plu] {
    background-color: #10b981;
    border-color: #10b981;
}

.custom-switch input:checked + .slider[b-t4yj154plu]:before {
    transform: translateX(26px);
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}

.custom-switch:hover .slider[b-t4yj154plu] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.custom-switch input:focus + .slider[b-t4yj154plu] {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.custom-switch input:checked:hover + .slider[b-t4yj154plu] {
    background-color: #059669;
}
/* /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;
    }
}
/* /Components/Pages/V2/Warehouse/WarehouseEditDialog.razor.rz.scp.css */
.wh-dialog-overlay[b-xsib5nj9z3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wh-dialog-box[b-xsib5nj9z3] {
    background: white;
    border-radius: 10px;
    width: 820px;
    max-width: 97vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

.wh-dialog-header[b-xsib5nj9z3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.wh-dialog-header h6[b-xsib5nj9z3] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.wh-dialog-close[b-xsib5nj9z3] {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.wh-dialog-body[b-xsib5nj9z3] {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.wh-dialog-footer[b-xsib5nj9z3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e5e7eb;
    background: white;
    flex-shrink: 0;
}

.wh-section-title[b-xsib5nj9z3] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wh-form-row[b-xsib5nj9z3] {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.wh-form-group[b-xsib5nj9z3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wh-form-group label[b-xsib5nj9z3] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.wh-full[b-xsib5nj9z3] {
    flex: 1 0 100%;
}

.wh-mini-grid[b-xsib5nj9z3] {
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.wh-mini-grid table[b-xsib5nj9z3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.wh-mini-grid th[b-xsib5nj9z3] {
    background: #f3f4f6;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.wh-mini-grid td[b-xsib5nj9z3] {
    padding: 4px 8px;
    border-bottom: 1px solid #f3f4f6;
}

.wh-mini-grid tr:last-child td[b-xsib5nj9z3] {
    border-bottom: none;
}

.wh-add-row-btn[b-xsib5nj9z3] {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wh-add-row-btn:hover[b-xsib5nj9z3] { background: #2563eb; }

.wh-remove-btn[b-xsib5nj9z3] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 13px;
}

.wh-remove-btn:hover[b-xsib5nj9z3] { color: #b91c1c; }
/* /Components/Pages/V2/Warehouse/WarehouseKHTNReport.razor.rz.scp.css */
.filters-section[b-nbl8wxcusr] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-nbl8wxcusr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-nbl8wxcusr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-nbl8wxcusr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-nbl8wxcusr] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-nbl8wxcusr], .filter-select[b-nbl8wxcusr] {
    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-nbl8wxcusr], .filter-select:focus[b-nbl8wxcusr] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-nbl8wxcusr] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.etrans-container[b-nbl8wxcusr] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

.header[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-nbl8wxcusr] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

.filters-section[b-nbl8wxcusr] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-nbl8wxcusr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-nbl8wxcusr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-nbl8wxcusr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-nbl8wxcusr] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-nbl8wxcusr], .filter-select[b-nbl8wxcusr] {
    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-nbl8wxcusr], .filter-select:focus[b-nbl8wxcusr] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

.filter-actions[b-nbl8wxcusr] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border-radius: 9px;
}

    .btn-primary:hover[b-nbl8wxcusr] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-nbl8wxcusr] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-nbl8wxcusr] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-nbl8wxcusr] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-nbl8wxcusr] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

.table-container[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-nbl8wxcusr], .rz-grid-table td[b-nbl8wxcusr] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-nbl8wxcusr] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-nbl8wxcusr] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-nbl8wxcusr] {
    background-color: #e9ecef;
}

.status-badge[b-nbl8wxcusr] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
}

.status-active[b-nbl8wxcusr] {
    background-color: #28a745;
}

.status-pending[b-nbl8wxcusr] {
    background-color: #ffc107;
}

.status-completed[b-nbl8wxcusr] {
    background-color: #17a2b8;
}

.status-default[b-nbl8wxcusr] {
    background-color: #6c757d;
}

.quantity-cell[b-nbl8wxcusr], .date-cell[b-nbl8wxcusr] {
    text-align: right;
}

@keyframes fadeIn-b-nbl8wxcusr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .container[b-nbl8wxcusr] {
        padding: 12px;
    }

    .filters-grid[b-nbl8wxcusr] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-nbl8wxcusr] {
        justify-content: stretch;
    }

    .btn[b-nbl8wxcusr] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-nbl8wxcusr] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-nbl8wxcusr] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-nbl8wxcusr], .rz-grid-table td[b-nbl8wxcusr] {
            padding: 8px;
        }

    .data-table th[b-nbl8wxcusr],
    .data-table td[b-nbl8wxcusr] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
}

/* Modal styles - Enhanced for better spacing */
.modal-overlay[b-nbl8wxcusr] {
    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-nbl8wxcusr 0.3s ease;
    padding: 20px;
}

.modal-container[b-nbl8wxcusr] {
    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-nbl8wxcusr 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        background-color: rgba(255, 255, 255, 0.2);
    }

.modal-body[b-nbl8wxcusr] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* New layout styles */
.modal-content-wrapper[b-nbl8wxcusr] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-bar[b-nbl8wxcusr] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 24px;
    border-bottom: 2px solid #dee2e6;
    flex-shrink: 0;
}

.info-grid[b-nbl8wxcusr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.info-item[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        background: #fff3cd;
        border-color: #ffc107;
        font-weight: 600;
    }

    .info-item label[b-nbl8wxcusr] {
        font-weight: 600;
        color: #495057;
        margin: 0;
        white-space: nowrap;
    }

    .info-item span[b-nbl8wxcusr] {
        color: #212529;
        font-weight: 500;
    }

.important-value[b-nbl8wxcusr] {
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.grid-section[b-nbl8wxcusr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow: hidden;
}

.grid-header[b-nbl8wxcusr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

    .grid-header h4[b-nbl8wxcusr] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.1rem;
        font-weight: 600;
    }

.grid-container[b-nbl8wxcusr] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
}

/* Enhanced transport grid styles */
.transport-grid-full[b-nbl8wxcusr] {
    height: 100%;
    font-size: 0.85rem;
}

    .transport-grid-full .rz-grid[b-nbl8wxcusr] {
        height: 100%;
        border: none;
    }

    .transport-grid-full .rz-grid-table[b-nbl8wxcusr] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid-full .rz-grid-table th[b-nbl8wxcusr] {
            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-nbl8wxcusr] {
            padding: 10px 8px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #f1f3f4;
        }

        .transport-grid-full .rz-grid-table tbody tr:hover[b-nbl8wxcusr] {
            background-color: #f8f9fa;
        }

        .transport-grid-full .rz-grid-table tbody tr.rz-state-edit[b-nbl8wxcusr] {
            background-color: #fff3cd;
        }

/* Cell value styles */
.transport-cell-value[b-nbl8wxcusr] {
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.total-quantity[b-nbl8wxcusr] {
    font-weight: 700;
    color: #28a745;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.9rem;
}

.note-text-cell[b-nbl8wxcusr] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Action buttons */
.action-buttons[b-nbl8wxcusr] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

    .action-buttons .rz-button[b-nbl8wxcusr] {
        min-width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Modal footer */
.modal-footer[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        padding: 8px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

/* Status badges enhanced */
.status-badge[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        max-width: 95%;
    }

    .info-grid[b-nbl8wxcusr] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1200px) {
    .modal-container[b-nbl8wxcusr] {
        width: 95%;
        height: 85vh;
    }

    .info-grid[b-nbl8wxcusr] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .info-item[b-nbl8wxcusr] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .grid-section[b-nbl8wxcusr] {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .modal-overlay[b-nbl8wxcusr] {
        padding: 10px;
    }

    .modal-container[b-nbl8wxcusr] {
        width: 100%;
        height: 95vh;
        border-radius: 8px;
    }

    .modal-header[b-nbl8wxcusr] {
        padding: 16px 20px;
    }

    .modal-title[b-nbl8wxcusr] {
        font-size: 1rem;
    }

    .info-bar[b-nbl8wxcusr] {
        padding: 12px 16px;
    }

    .info-grid[b-nbl8wxcusr] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item[b-nbl8wxcusr] {
        padding: 8px 10px;
        font-size: var(--font-size-sm-base);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-section[b-nbl8wxcusr] {
        padding: 12px 16px;
    }

    .grid-header[b-nbl8wxcusr] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .grid-header h4[b-nbl8wxcusr] {
            text-align: center;
            font-size: 1rem;
        }

    .transport-grid-full .rz-grid-table th[b-nbl8wxcusr],
    .transport-grid-full .rz-grid-table td[b-nbl8wxcusr] {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    .modal-footer[b-nbl8wxcusr] {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn[b-nbl8wxcusr] {
            width: 100%;
            justify-content: center;
        }
}

/* Radzen component overrides */
.rz-datatable-data td[b-nbl8wxcusr] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-nbl8wxcusr] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-button.rz-button-xs[b-nbl8wxcusr] {
    padding: 2px 6px;
    font-size: 0.7rem;
    min-height: 24px;
}

.rz-dropdown[b-nbl8wxcusr], .rz-textbox[b-nbl8wxcusr], .rz-numeric[b-nbl8wxcusr], .rz-textarea[b-nbl8wxcusr] {
    font-size: 0.8rem;
    border-radius: 4px;
}

    .rz-dropdown .rz-dropdown-panel[b-nbl8wxcusr] {
        font-size: 0.8rem;
    }

    .rz-numeric .rz-spinner[b-nbl8wxcusr] {
        display: none;
    }

/* Grid pagination styling */
.transport-grid-full .rz-paginator[b-nbl8wxcusr] {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

    .transport-grid-full .rz-paginator .rz-paginator-element[b-nbl8wxcusr] {
        font-size: 0.8rem;
    }

/* Empty state styling */
.transport-grid-full .rz-datatable-emptymessage[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    background: rgba(255, 255, 255, 0.8);
}

/* Form validation styles */
.rz-textbox.rz-state-invalid[b-nbl8wxcusr],
.rz-numeric.rz-state-invalid[b-nbl8wxcusr],
.rz-dropdown.rz-state-invalid[b-nbl8wxcusr] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

/* Tooltip enhancements */
.rz-tooltip[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    user-select: none;
}

/* Improved scrollbar styling */
.grid-container[b-nbl8wxcusr]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grid-container[b-nbl8wxcusr]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-container[b-nbl8wxcusr]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .grid-container[b-nbl8wxcusr]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* Enhanced animations */
@keyframes fadeIn-b-nbl8wxcusr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-nbl8wxcusr {
    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-nbl8wxcusr] {
    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-nbl8wxcusr] {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.rz-button:focus[b-nbl8wxcusr] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .modal-overlay[b-nbl8wxcusr] {
        position: static;
        background: none;
        padding: 0;
    }

    .modal-container[b-nbl8wxcusr] {
        box-shadow: none;
        width: 100%;
        height: auto;
        max-width: none;
    }

    .modal-header[b-nbl8wxcusr],
    .modal-footer[b-nbl8wxcusr] {
        display: none;
    }

    .action-buttons[b-nbl8wxcusr] {
        display: none;
    }

    .transport-grid-full .rz-grid-table[b-nbl8wxcusr] {
        font-size: 10px;
    }
}
/* Base container styles */
.etrans-container[b-nbl8wxcusr] {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}

/* Header styles */
.header[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .header p[b-nbl8wxcusr] {
        opacity: 0.9;
        font-size: 0.9rem;
    }

/* Filters section */
.filters-section[b-nbl8wxcusr] {
    background: white;
    padding: 6px 6px;
    border-radius: 6px;
}

.filters-title[b-nbl8wxcusr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filters-grid[b-nbl8wxcusr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.filter-group[b-nbl8wxcusr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-label[b-nbl8wxcusr] {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.7rem;
}

.filter-input[b-nbl8wxcusr], .filter-select[b-nbl8wxcusr] {
    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-nbl8wxcusr], .filter-select:focus[b-nbl8wxcusr] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px rgba(202, 60, 25, 0.2);
    }

/* Button styles */
.btn[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    background-color: var(--primary-color);
    color: var(--primary-text);
}

    .btn-primary:hover[b-nbl8wxcusr] {
        background-color: var(--primary-hover);
        transform: translateY(-1px);
    }

.btn-secondary[b-nbl8wxcusr] {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
}

    .btn-secondary:hover[b-nbl8wxcusr] {
        background-color: var(--secondary-hover);
    }

.btn-outline[b-nbl8wxcusr] {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

    .btn-outline:hover[b-nbl8wxcusr] {
        background-color: var(--primary-color);
        color: var(--primary-text);
    }

/* Table container */
.table-container[b-nbl8wxcusr] {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Radzen DataGrid styles */
.rz-data-grid[b-nbl8wxcusr] {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    font-size: 14px;
    margin: 6px;
    height: calc(100vh - 150px) !important;
}

.rz-grid-table th[b-nbl8wxcusr], .rz-grid-table td[b-nbl8wxcusr] {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.rz-grid-table th[b-nbl8wxcusr] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #333;
}

.rz-grid-table tr:nth-child(even)[b-nbl8wxcusr] {
    background-color: #f8f9fa;
}

.rz-grid-table tr:hover[b-nbl8wxcusr] {
    background-color: #e9ecef;
}

/* Status badges */
.status-badge[b-nbl8wxcusr] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--font-size-sm-base);
    color: #fff;
    font-weight: 500;
}

.status-active[b-nbl8wxcusr] {
    background-color: #28a745;
}

.status-pending[b-nbl8wxcusr] {
    background-color: #ffc107;
    color: #212529;
}

.status-completed[b-nbl8wxcusr] {
    background-color: #17a2b8;
}

.status-cancelled[b-nbl8wxcusr] {
    background-color: #dc3545;
}

.status-default[b-nbl8wxcusr] {
    background-color: #6c757d;
}

.quantity-cell[b-nbl8wxcusr], .date-cell[b-nbl8wxcusr] {
    text-align: right;
}

/* Modal styles */
.modal-overlay[b-nbl8wxcusr] {
    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-nbl8wxcusr 0.3s ease;
}

.modal-container[b-nbl8wxcusr] {
    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-nbl8wxcusr 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-nbl8wxcusr] {
    padding: 0;
    flex: 1;
    overflow: hidden;
}

.detail-layout[b-nbl8wxcusr] {
    display: flex;
    height: 100%;
    min-height: 500px;
}

.left-panel[b-nbl8wxcusr] {
    width: 300px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid var(--border-light);
    padding: 20px;
    overflow-y: auto;
}

.right-panel[b-nbl8wxcusr] {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

/* Transport header actions */
.transport-header-actions[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Detail table styles */
.detail-table[b-nbl8wxcusr] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.detail-row-item[b-nbl8wxcusr] {
    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-nbl8wxcusr] {
        border-bottom: none;
    }

    .detail-row-item:first-child[b-nbl8wxcusr] {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

        .detail-row-item:first-child .detail-value[b-nbl8wxcusr] {
            color: white;
        }

    .detail-row-item:nth-child(even):not(:first-child)[b-nbl8wxcusr] {
        background: #f8f9fa;
    }

.highlight-row[b-nbl8wxcusr] {
    background: #fff3cd !important;
    border-left: 3px solid #ffc107;
}

.detail-label[b-nbl8wxcusr] {
    font-weight: 500;
    color: var(--text-light);
}

.detail-value[b-nbl8wxcusr] {
    font-weight: 600;
    color: var(--text-dark);
}

    .detail-value.important[b-nbl8wxcusr] {
        color: var(--primary-color);
        font-size: 1.1rem;
    }

.note-section[b-nbl8wxcusr] {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.note-text[b-nbl8wxcusr] {
    color: #856404;
    font-size: var(--font-size-sm-base);
    line-height: 1.4;
}

/* Transport grid styles */
.transport-grid[b-nbl8wxcusr] {
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

    .transport-grid .rz-grid-table[b-nbl8wxcusr] {
        margin: 0;
        font-size: 0.85rem;
    }

        .transport-grid .rz-grid-table th[b-nbl8wxcusr] {
            background: #e9ecef;
            padding: 8px;
            text-align: center;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .transport-grid .rz-grid-table td[b-nbl8wxcusr] {
            padding: 8px;
            text-align: center;
        }

.transport-value[b-nbl8wxcusr] {
    font-weight: 500;
    color: #495057;
}

.quantity-highlight[b-nbl8wxcusr] {
    font-weight: 700;
    color: var(--primary-color);
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Modal footer */
.modal-footer[b-nbl8wxcusr] {
    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-nbl8wxcusr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-nbl8wxcusr {
    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-nbl8wxcusr] {
        width: 98%;
    }

    .detail-layout[b-nbl8wxcusr] {
        flex-direction: column;
    }

    .left-panel[b-nbl8wxcusr] {
        width: 100%;
        max-height: 300px;
    }

    .right-panel[b-nbl8wxcusr] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .container[b-nbl8wxcusr] {
        padding: 12px;
    }

    .filters-grid[b-nbl8wxcusr] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-nbl8wxcusr] {
        justify-content: stretch;
    }

    .btn[b-nbl8wxcusr] {
        flex: 1;
        justify-content: center;
    }

    .table-header[b-nbl8wxcusr] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rz-grid-table[b-nbl8wxcusr] {
        font-size: var(--font-size-sm-base);
        margin: 6px;
    }

        .rz-grid-table th[b-nbl8wxcusr], .rz-grid-table td[b-nbl8wxcusr] {
            padding: 8px;
        }

    .data-table th[b-nbl8wxcusr],
    .data-table td[b-nbl8wxcusr] {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .modal-container[b-nbl8wxcusr] {
        width: 95%;
        margin: 10px;
    }

    .transport-grid .rz-grid-table[b-nbl8wxcusr] {
        font-size: 0.7rem;
    }

        .transport-grid .rz-grid-table th[b-nbl8wxcusr],
        .transport-grid .rz-grid-table td[b-nbl8wxcusr] {
            padding: 6px 4px;
        }

    .transport-header-actions[b-nbl8wxcusr] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .transport-header-actions h4[b-nbl8wxcusr] {
            text-align: center;
        }
}

/* Radzen specific overrides */
.rz-datatable-data td[b-nbl8wxcusr] {
    vertical-align: middle;
}

.rz-button.rz-button-sm[b-nbl8wxcusr] {
    padding: 4px 8px;
    font-size: var(--font-size-sm-base);
}

.rz-dropdown[b-nbl8wxcusr], .rz-textbox[b-nbl8wxcusr], .rz-numeric[b-nbl8wxcusr], .rz-textarea[b-nbl8wxcusr] {
    font-size: 0.8rem;
}

    .rz-dropdown .rz-dropdown-panel[b-nbl8wxcusr] {
        font-size: 0.8rem;
    }

/* Transport table specific styles */
.transport-grid .rz-grid-table tbody tr:hover[b-nbl8wxcusr] {
    background-color: #f0f8ff;
}

.transport-grid .rz-grid-table tbody tr.rz-state-edit[b-nbl8wxcusr] {
    background-color: #fff3cd;
}

/* Custom status indicators */
.status-indicator[b-nbl8wxcusr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .status-indicator.active[b-nbl8wxcusr] {
        background-color: #28a745;
    }

    .status-indicator.pending[b-nbl8wxcusr] {
        background-color: #ffc107;
    }

    .status-indicator.completed[b-nbl8wxcusr] {
        background-color: #17a2b8;
    }

    .status-indicator.cancelled[b-nbl8wxcusr] {
        background-color: #dc3545;
    }

/* Filter wrapper */
.filter-wrapper[b-nbl8wxcusr] {
    display: flex;
    flex-direction: column;
}

/* Desktop - always show filters */
@media (min-width: 769px) {
    .mobile-filter-header[b-nbl8wxcusr] {
        display: none !important;
    }

    .mobile-filters-content[b-nbl8wxcusr] {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container[b-nbl8wxcusr] {
        padding: 12px;
    }

    /* Mobile filter section */
    .filters-section[b-nbl8wxcusr] {
        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-nbl8wxcusr] {
        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-nbl8wxcusr] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-filter-toggle[b-nbl8wxcusr] {
        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-nbl8wxcusr] {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .mobile-filter-toggle i[b-nbl8wxcusr] {
            transition: transform 0.2s ease;
        }

        .mobile-filter-toggle.collapsed i[b-nbl8wxcusr] {
            transform: rotate(180deg);
        }

    /* Collapsible filters content */
    .mobile-filters-content[b-nbl8wxcusr] {
        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-nbl8wxcusr] {
            max-height: 1000px;
            opacity: 1;
            padding: 8px 0;
        }

    .filters-grid[b-nbl8wxcusr] {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .filter-group[b-nbl8wxcusr] {
        margin-bottom: 6px;
    }

    /* Mobile filter compact layout */
    .filter-label[b-nbl8wxcusr] {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }

    .filter-input[b-nbl8wxcusr], .filter-select[b-nbl8wxcusr] {
        font-size: 0.85rem;
        height: 36px;
        padding: 6px 10px;
    }

    /* Mobile filter actions */
    .filter-actions[b-nbl8wxcusr] {
        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-nbl8wxcusr] {
        padding: 0;
        margin: 0;
    }

    .rz-data-grid[b-nbl8wxcusr] {
        margin: 0 !important;
        font-size: 0.8rem;
    }

    .rz-grid-table th[b-nbl8wxcusr],
    .rz-grid-table td[b-nbl8wxcusr] {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

    .rz-grid-table th[b-nbl8wxcusr] {
        position: static !important;
    }
}
/* /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;
    }
}
/* /Components/Pages/V2/Warehouse/WarehouseV2.razor.rz.scp.css */
.search-filter-panel[b-ctnswn273q] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
}

.filter-group[b-ctnswn273q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.filter-group label[b-ctnswn273q] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.table-container[b-ctnswn273q] {
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

/* ─── Dòng cha (cấp 1) được chọn — tự quản lý bằng RowClick/RowRender, không dùng SelectionMode của Radzen ─── */
.table-container[b-ctnswn273q]  .custom-table-style tr.wh-root-selected > td {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-text) !important;
}

.table-container[b-ctnswn273q]  .rz-data-grid {
    height: calc(100vh - 220px) !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-container[b-ctnswn273q]  .rz-button {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    margin-right: 2px;
}

.table-container[b-ctnswn273q]  .rz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.toolbar-group[b-ctnswn273q] {
    display: inline-flex;
    gap: 4px;
    margin-right: 4px;
}

.toolbar-separator[b-ctnswn273q] {
    width: 1px;
    background: #e5e7eb;
    margin: 0 6px;
    height: 28px;
    align-self: center;
    display: inline-block;
}

/* ─── Expanded row (Level 2) ─── */
.expanded-row-container[b-ctnswn273q] {
    padding: 12px 16px;
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    border-radius: 0 6px 6px 0;
    margin: 4px 2px;
}

.expanded-row-header[b-ctnswn273q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.expanded-row-header h6[b-ctnswn273q] {
    margin: 0;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-buttons[b-ctnswn273q] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.empty-details[b-ctnswn273q] {
    text-align: center;
    padding: 24px;
    color: #6c757d;
    font-style: italic;
}

/* ─── Level badges ─── */
.level-badge[b-ctnswn273q] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
    vertical-align: middle;
}

.level-2-badge[b-ctnswn273q] {
    background: #e2e8f0;
    color: #475569;
}

.level-3-badge[b-ctnswn273q] {
    background: #e2e8f0;
    color: #475569;
}

/* ─── Level 3 container ─── */
.level-3-container[b-ctnswn273q] {
    border-left: 3px solid #cbd5e1;
    background: #f9fafb;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin: 4px 0;
}

.level-3-header[b-ctnswn273q] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.level-3-title[b-ctnswn273q] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

/* ─── Level 4 container ─── */
.level-4-container[b-ctnswn273q] {
    border-left: 3px solid #e2e8f0;
    background: #f9fafb;
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    margin: 4px 0;
}

/* ─── Badges ─── */
.factory-code-badge[b-ctnswn273q] {
    font-size: 11px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 4px;
    font-weight: 600;
}

.type-badge[b-ctnswn273q] {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.type-ka[b-ctnswn273q] {
    background: #dbeafe;
    color: #1d4ed8;
}

.type-doitac[b-ctnswn273q] {
    background: #d1fae5;
    color: #065f46;
}

.type-cang[b-ctnswn273q] {
    background: #fef3c7;
    color: #92400e;
}

.type-sohuu[b-ctnswn273q] {
    background: #ede9fe;
    color: #5b21b6;
}

.type-khocang[b-ctnswn273q] {
    background: #fee2e2;
    color: #991b1b;
}

.type-depot[b-ctnswn273q] {
    background: #e0f2fe;
    color: #075985;
}

.type-khuvuc[b-ctnswn273q] {
    background: #e5e7eb;
    color: #374151;
}

.sap-code-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    margin-right: 2px;
    white-space: nowrap;
}

.region-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    margin-right: 2px;
    white-space: nowrap;
}

.wl-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    white-space: nowrap;
}

.scale-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
    white-space: nowrap;
}

.branch-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
    margin-right: 2px;
    white-space: nowrap;
}

.whs-badge[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    margin-right: 2px;
    white-space: nowrap;
}

/* ─── Dialog shared ─── */
.wh-dialog-overlay[b-ctnswn273q] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}

.wh-dialog-box[b-ctnswn273q] {
    background: white;
    border-radius: 10px;
    width: 820px;
    max-width: 97vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.wh-dialog-sm[b-ctnswn273q] {
    width: 600px;
}

.wh-dialog-header[b-ctnswn273q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    color: #1e293b;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wh-dialog-header h6[b-ctnswn273q] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.wh-dialog-parent-context[b-ctnswn273q] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
}

.wh-dialog-close[b-ctnswn273q] {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.wh-dialog-close:hover[b-ctnswn273q] {
    color: #374151;
}

.wh-dialog-body[b-ctnswn273q] {
    padding: 18px 20px;
}

.wh-dialog-footer[b-ctnswn273q] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e5e7eb;
    position: sticky;
    bottom: 0;
    background: white;
}

.wh-section-title[b-ctnswn273q] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wh-form-row[b-ctnswn273q] {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.wh-form-group[b-ctnswn273q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wh-form-group label[b-ctnswn273q] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.wh-full[b-ctnswn273q] {
    flex: 1 0 100%;
}

/* ─── Dòng con được chọn (selected detail row) ─── */
[b-ctnswn273q] .details-radzen-grid tr td {
    transition: background-color 0.15s;
}

[b-ctnswn273q] .details-radzen-grid tr.wh-detail-selected-l2 td {
    background-color: #fde68a !important; /* Cấp 2 — vàng hổ phách */
}

[b-ctnswn273q] .details-radzen-grid tr.wh-detail-selected-l3 td {
    background-color: #bfdbfe !important; /* Cấp 3 — xanh dương */
}

[b-ctnswn273q] .details-radzen-grid tr.wh-detail-selected-l4 td {
    background-color: #bbf7d0 !important; /* Cấp 4 — xanh lá */
}

/* ─── Mini-grid (Nhà máy / Kho SAP trong dialog) ─── */
.wh-mini-grid[b-ctnswn273q] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.wh-mini-grid table[b-ctnswn273q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.wh-mini-grid th[b-ctnswn273q] {
    background: #f9fafb;
    padding: 6px 8px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.wh-mini-grid td[b-ctnswn273q] {
    padding: 4px 6px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.wh-mini-grid tr:last-child td[b-ctnswn273q] {
    border-bottom: none;
}

.wh-add-row-btn[b-ctnswn273q] {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.wh-add-row-btn:hover[b-ctnswn273q] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.wh-remove-btn[b-ctnswn273q] {
    border: none;
    background: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.wh-remove-btn:hover[b-ctnswn273q] {
    background: #fee2e2;
}

@media (max-width: 768px) {
    .search-filter-panel[b-ctnswn273q] {
        flex-direction: column;
    }
    .filter-group[b-ctnswn273q] {
        width: 100%;
    }
    .expanded-row-header[b-ctnswn273q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .detail-buttons[b-ctnswn273q] {
        flex-direction: column;
        width: 100%;
    }
}

/* ── Move dialog ── */
.wh-move-overlay[b-ctnswn273q] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wh-move-box[b-ctnswn273q] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 420px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
}

.wh-move-header[b-ctnswn273q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.wh-move-close[b-ctnswn273q] {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}

.wh-move-close:hover[b-ctnswn273q] { color: #111; }

.wh-status-active[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.wh-status-inactive[b-ctnswn273q] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.wh-move-body[b-ctnswn273q] {
    padding: 18px;
}

.wh-move-footer[b-ctnswn273q] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
}
/* /Components/Pages/V2/Warehouse/ZoneV2.razor.rz.scp.css */
.search-filter-panel[b-ohmqc690v9] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
}

.filter-group[b-ohmqc690v9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.filter-group label[b-ohmqc690v9] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.filter-actions[b-ohmqc690v9] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.table-container[b-ohmqc690v9] {
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-container[b-ohmqc690v9]  .rz-data-grid {
    height: calc(100vh - 200px) !important;
    border-radius: 8px;
}

.table-container[b-ohmqc690v9]  .rz-button {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    margin-right: 2px;
}

.table-container[b-ohmqc690v9]  .rz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.zv2-toolbar-sep[b-ohmqc690v9] {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    margin: 0 6px;
    vertical-align: middle;
}

.zv2-code-badge[b-ohmqc690v9] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    letter-spacing: 0.3px;
}

.zv2-status-active[b-ohmqc690v9] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.zv2-region-badge[b-ohmqc690v9] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.zv2-status-inactive[b-ohmqc690v9] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}
/* /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;
    }
}
/* /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-outline-success[b-plc2v9a0wp] {
    background: transparent;
    color: #28a745;
    border: 1.5px solid #28a745;
}

    .etrans-btn-outline-success:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #28a745;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.25);
    }

.etrans-btn-outline-danger[b-plc2v9a0wp] {
    background: transparent;
    color: #dc3545;
    border: 1.5px solid #dc3545;
}

    .etrans-btn-outline-danger:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #dc3545;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
    }

.etrans-btn-outline-dark[b-plc2v9a0wp] {
    background: transparent;
    color: #343a40;
    border: 1.5px solid #343a40;
}

    .etrans-btn-outline-dark:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #343a40;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 58, 64, 0.25);
    }

.etrans-btn-outline-Info[b-plc2v9a0wp] {
    background: transparent;
    color: #17a2b8;
    border: 1.5px solid #17a2b8;
}

    .etrans-btn-outline-Info:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #17a2b8;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.25);
    }

.etrans-btn-outline-Warning[b-plc2v9a0wp] {
    background: transparent;
    color: #b38600;
    border: 1.5px solid #b38600;
}

    .etrans-btn-outline-Warning:hover:not(:disabled)[b-plc2v9a0wp] {
        background: #b38600;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(179, 134, 0, 0.25);
    }

.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;
    }
}
.etrans-btn-wrapper[b-plc2v9a0wp] {
    position: relative;
    display: inline-block;
}

.etrans-btn-badge[b-plc2v9a0wp] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border: 2px solid white;
    z-index: 10;
    animation: pulse-b-plc2v9a0wp 2s infinite;
}

@keyframes pulse-b-plc2v9a0wp {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Tùy chỉnh cho button nhỏ hơn (sm, xs) */
.etrans-btn-sm ~ .etrans-btn-badge[b-plc2v9a0wp],
.etrans-btn-xs ~ .etrans-btn-badge[b-plc2v9a0wp],
.etrans-btn-ms ~ .etrans-btn-badge[b-plc2v9a0wp] {
    top: -7px;
    right: -1px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
}
/* /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;
}
/* /Components/Shared/ETransUpload.razor.rz.scp.css */
/* Dropzone styled to match the project's existing upload look
   (.upload-area / .edit-upload-container): dashed light-gray zone on a
   #f8f9fa fill, brand accent on hover/focus, dense 12px typography. */
.etrans-upload[b-a3gs43dpo9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

    .etrans-upload:hover[b-a3gs43dpo9],
    .etrans-upload:focus-within[b-a3gs43dpo9] {
        border-color: var(--primary-color, #ca3c19);
        background: #fdf3f0;
    }

/* Native input drives the file dialog (label click opens it) but stays
   visually hidden — handlers still receive InputFileChangeEventArgs.
   ::deep is required because <InputFile> is a child component, so its
   rendered <input> does not inherit this component's scope attribute. */
.etrans-upload[b-a3gs43dpo9]  .etrans-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

.etrans-upload-icon[b-a3gs43dpo9] {
    font-size: 26px;
    line-height: 1;
    color: #adb5bd;
    transition: color 0.2s ease;
}

.etrans-upload:hover .etrans-upload-icon[b-a3gs43dpo9],
.etrans-upload:focus-within .etrans-upload-icon[b-a3gs43dpo9] {
    color: var(--primary-color, #ca3c19);
}

.etrans-upload-text[b-a3gs43dpo9] {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

.etrans-upload-accent[b-a3gs43dpo9] {
    color: var(--primary-color, #ca3c19);
    font-weight: 600;
}

.etrans-upload-hint[b-a3gs43dpo9] {
    font-size: 11px;
    color: #adb5bd;
}

/* Disabled */
.etrans-upload.is-disabled[b-a3gs43dpo9] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Uploading (spinner while the parent's OnChange runs) */
.etrans-upload.is-uploading[b-a3gs43dpo9] {
    cursor: wait;
    border-color: var(--primary-color, #ca3c19);
    background: #fdf3f0;
}

.etrans-upload.is-uploading .etrans-upload-icon[b-a3gs43dpo9] {
    color: var(--primary-color, #ca3c19);
}

/* Uploaded (success) */
.etrans-upload.is-uploaded[b-a3gs43dpo9] {
    border-color: #28a745;
    background: #f0fdf4;
}

.etrans-upload-icon-done[b-a3gs43dpo9] {
    color: #28a745 !important;
}

.etrans-upload-done-text[b-a3gs43dpo9] {
    color: #28a745;
    word-break: break-all;
}
/* /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;
}
/* /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;
    }
}
/* /Components/Widgets/CustomRadzenDropDownDataGrid.razor.rz.scp.css */