@import '_content/BlazorSortableList/BlazorSortableList.bundle.scp.css';

/* /Components/Dialogs/KoppelcodeDialog.razor.rz.scp.css */
/* =========================================================
   WINDOW
   ========================================================= */

[b-35uh4x77x2] .link-code-window .k-window-content {
    padding: 1.5rem 1.75rem;
    background: #f8fafc;
}

[b-35uh4x77x2] .k-window-content {
    padding: 1.5rem 1.75rem;
    background: #f8fafc;
}

[b-35uh4x77x2] .link-code-window .k-window-titlebar {
    border-bottom: 1px solid #e8edf3;
}

[b-35uh4x77x2] .link-code-window .k-window-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid #e8edf3;
    background: #ffffff;
}

/* =========================================================
   TITLE
   ========================================================= */

[b-35uh4x77x2] .lc-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: #172033;
}

    [b-35uh4x77x2] .lc-title .k-svg-icon {
        color: #2f6fed;
    }

/* =========================================================
   SUBTITLE
   ========================================================= */

.lc-subtitle[b-35uh4x77x2] {
    margin: 0 0 1.5rem;
    color: #667085;
    font-size: .95rem;
    line-height: 1.5;
}

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

.lc-grid[b-35uh4x77x2] {
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 700px) {
    .lc-grid[b-35uh4x77x2] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LEFT PANEL
   ========================================================= */

.lc-code-panel[b-35uh4x77x2] {
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 4px 12px rgba(16, 24, 40, .03);
}

.lc-heading[b-35uh4x77x2] {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #172033;
}

.lc-hint[b-35uh4x77x2] {
    margin: 0 0 1.25rem;
    color: #7a8495;
    font-size: .88rem;
    line-height: 1.4;
}

/* =========================================================
   CODE BOX
   ========================================================= */

.lc-code-box[b-35uh4x77x2] {
    overflow: hidden;
    background: linear-gradient( 135deg, #f8fbff 0%, #f1f6ff 100% );
    border: 1px solid #dce6f5;
    border-radius: 12px;
}

/* Code row */

.lc-code-row[b-35uh4x77x2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

/* Shield */

.lc-shield[b-35uh4x77x2] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #e3edfc;
    color: #2f6fed;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(47,111,237,.08);
}

/* Code */

.lc-code-text[b-35uh4x77x2] {
    flex: 1;
    color: #172033;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    font-size: 1.65rem;
    letter-spacing: .28em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Copy icon button */

[b-35uh4x77x2] .lc-code-row .k-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #4b5d78;
    flex-shrink: 0;
}

    [b-35uh4x77x2] .lc-code-row .k-button:hover {
        background: #e4edfc;
        color: #2f6fed;
    }

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

.lc-code-footer[b-35uh4x77x2] {
    padding: .9rem 1.25rem 1rem;
    background: rgba(255,255,255,.55);
    border-top: 1px solid #dce6f5;
}

.lc-timer[b-35uh4x77x2] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    color: #667085;
    font-size: .85rem;
}

    .lc-timer .k-svg-icon[b-35uh4x77x2] {
        color: #7a8495;
    }

    .lc-timer strong[b-35uh4x77x2] {
        color: #2f6fed;
        font-weight: 700;
    }

/* Progress bar */

[b-35uh4x77x2] .lc-progress.k-progressbar {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #dfe7f2;
}

[b-35uh4x77x2] .lc-progress .k-progressbar-value {
    border-radius: 999px;
}

/* =========================================================
   COPY BUTTON
   ========================================================= */

[b-35uh4x77x2] .lc-copy-btn {
    width: 100%;
    margin-top: 1rem;
    min-height: 40px;
    border-radius: 10px;
    font-weight: 600;
}

/* =========================================================
   RIGHT INSTRUCTIONS PANEL
   ========================================================= */

.lc-instructions-panel[b-35uh4x77x2] {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .02), 0 4px 12px rgba(16, 24, 40, .02);
}

.lc-instructions-title[b-35uh4x77x2] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #172033;
}

.lc-steps[b-35uh4x77x2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .lc-steps li[b-35uh4x77x2] {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .75rem 0;
        border-bottom: 1px solid #edf0f4;
        color: #536176;
        font-size: .9rem;
        line-height: 1.4;
    }

        .lc-steps li:first-child[b-35uh4x77x2] {
            padding-top: 0;
        }

        .lc-steps li:last-child[b-35uh4x77x2] {
            padding-bottom: 0;
            border-bottom: none;
        }

/* Step numbers */

.lc-step-num[b-35uh4x77x2] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef4ff;
    color: #2f6fed;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   INFO BOX
   ========================================================= */

.lc-info-box[b-35uh4x77x2] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    background: #fffbeb;
    border: 1px solid #fde7b0;
    border-radius: 12px;
    color: #5f4b17;
}

    .lc-info-box > .k-svg-icon[b-35uh4x77x2] {
        margin-top: .1rem;
        flex-shrink: 0;
        color: #d08a00;
    }

    .lc-info-box strong[b-35uh4x77x2] {
        display: block;
        margin-bottom: .25rem;
        color: #4b3b12;
        font-size: .9rem;
    }

    .lc-info-box p[b-35uh4x77x2] {
        margin: 0;
        color: #75613a;
        font-size: .85rem;
        line-height: 1.55;
    }

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

.lc-footer[b-35uh4x77x2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

[b-35uh4x77x2] .lc-footer .k-button {
    min-width: 100px;
    border-radius: 9px;
}

[b-35uh4x77x2] k-window-content {
    padding: 20px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

.topbar-right[b-plhadg2f94] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.top-row[b-plhadg2f94] {
    background-color: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    justify-content: space-between;
    height: 0%;
    min-height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

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

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

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

.top-row-left[b-plhadg2f94] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #686868;
}

.top-row-right[b-plhadg2f94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
}

    .top-row-right span[b-plhadg2f94] {
        padding-left: 30px;
    }


@media (max-width: 640.98px) {
    .top-row[b-plhadg2f94] {
        height: auto;
        min-height: 40px;
        flex: 0 0 auto;
        padding-top: 4px;
        padding-bottom: 4px;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    .top-row-left[b-plhadg2f94],
    .topbar-right[b-plhadg2f94] {
        width: 100%;
        min-width: 0;
    }

    .top-row-left[b-plhadg2f94] {
        order: 2;
        justify-content: flex-start;
        gap: 6px;
    }

    .topbar-right[b-plhadg2f94] {
        order: 1;
    }

    .topbar-report-actions[b-plhadg2f94] {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        align-items: center;
        gap: 6px !important;
    }

    .topbar-report-actions[b-plhadg2f94]  .k-dropdownlist {
        width: auto !important;
        min-width: 100px;
        flex: 1 1 160px;
    }

    .topbar-report-actions[b-plhadg2f94]  .k-button {
        flex: 0 0 auto;
    }

    .topbar-right[b-plhadg2f94] {
        justify-content: flex-end;
        gap: 6px;
    }

    .top-row-right span[b-plhadg2f94] {
        padding-left: 0;
    }

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

@media (max-width: 420px) {
    .topbar-report-actions[b-plhadg2f94] {
        gap: 4px !important;
    }

    .topbar-report-actions[b-plhadg2f94]  .k-dropdownlist {
        min-width: 80px;
    }

    .topbar-right[b-plhadg2f94] {
        gap: 4px;
    }
}

/* Compact mobile topbar with a toggleable reports tray. */
.mobile-reports-slot[b-plhadg2f94] {
    display: none !important;
}

@media (max-width: 640.98px) {
    .top-row-left[b-plhadg2f94] {
        display: contents;
    }

    .sidebar-menu-button[b-plhadg2f94] {
        order: 1;
        flex: 0 0 auto;
    }

    .mobile-reports-slot[b-plhadg2f94] {
        order: 2;
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    .mobile-reports-slot[b-plhadg2f94]  .mobile-reports-toggle {
        display: inline-flex !important;
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .mobile-reports-slot[b-plhadg2f94]  .mobile-reports-toggle svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    .mobile-reports-slot[b-plhadg2f94]  .mobile-reports-toggle.is-open {
        color: var(--color-primary-700);
        background: var(--color-selected-bg);
    }

    .topbar-right[b-plhadg2f94] {
        order: 3;
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 6px;
    }

    .topbar-report-actions[b-plhadg2f94] {
        order: 4;
        display: flex;
        width: 100%;
        min-width: 0;
        max-height: 0;
        flex: 0 0 100%;
        align-items: center;
        gap: 6px !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: max-height 0.25s ease, opacity 0.18s ease, transform 0.25s ease;
    }

    .topbar-report-actions.is-open[b-plhadg2f94] {
        max-height: 40px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

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

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

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

    .top-row[b-plhadg2f94] {
/*        padding-left: 2rem !important;
        padding-right: 1.5rem !important;*/
    }

    article[b-plhadg2f94] {
        padding-left: 1rem !important;
/*        padding-right: 1rem !important;*/
    }

    .content-login[b-plhadg2f94] {
        padding-left: 0!important;
    }
}

#blazor-error-ui[b-plhadg2f94] {
    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-plhadg2f94] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.profile-dd[b-plhadg2f94] {
    padding: 16px;
}

.rapportage-popup .k-animation-container[b-plhadg2f94],
.rapportage-popup[b-plhadg2f94] {
    z-index: 12000;
}

/*.rapportage-popup__content {*/
/*    width: 550px;*/
    /*background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}*/

.rapportage-popup__header[b-plhadg2f94] {
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.vestiging-value[b-plhadg2f94] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .vestiging-value[b-plhadg2f94]  .k-svg-icon {
        color: var(--color-primary-700);
        width: 14px;
        height: 14px;
    }

.vestiging-popup-header[b-plhadg2f94] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 10px;
    font-size: var(--fs-caption);
    color: var(--color-gray-400);
    font-weight: 450;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar-main[b-768amfrx0c] {
    position: sticky;
    width: 100%;
    height: 100vh;
    background: var(--nav-bg);
    /*    background: #07244A;*/
    /*        background: #004F74;*/
    transition: all 0.4s ease;
    border-right: 1px solid var(--color-gray-200);
}

    .sidebar-main.collapsed[b-768amfrx0c] {
        width: 100%;
    }

    .sidebar-main .sidebar-header[b-768amfrx0c] {
        display: flex;
        align-items: center;
        padding: 25px 10px 0px 12px;
        justify-content: space-between;
    }

.sidebar-header .header-logo img[b-768amfrx0c] {
    height: 30px;
    width: 30px;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

.sidebar-header .sidebar-toggler[b-768amfrx0c] {
    position: absolute;
    right: 10px;
    height: 37px;
    width: 40px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--white);
    /*    background: #305484;*/
    transition: 0.4s ease;
    /*    color: white;*/
    color: var(--color-gray-800);
}

    .sidebar-header .sidebar-toggler:hover[b-768amfrx0c] {
        background: var(--color-gray-200);
        /*        background: #3F5067;*/
        /*        color: white;*/
    }

.sidebar-main.collapsed .sidebar-toggler[b-768amfrx0c] {
    transform: translate(4px, 60px);
    margin-bottom: 15px;
}

.sidebar-header .sidebar-toggler span[b-768amfrx0c] {
    transition: 0.4s ease;
}

.sidebar-main.collapsed .sidebar-toggler span[b-768amfrx0c] {
    transform: rotate(180deg);
}

.sidebar-nav .nav-list[b-768amfrx0c] {
    list-style: none;
    display: flex;
    gap: 4px;
    padding: 0 2px;
    flex-direction: column;
    transform: translateY(15px);
    transition: 0.4s ease;
}

.sidebar-nav .primary-nav[b-768amfrx0c] {
    overflow-y: auto;
    height: calc(100vh - 204px);
    padding-bottom: 50px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

    .sidebar-nav .primary-nav:hover[b-768amfrx0c] {
        scrollbar-color: var(--nav-scrollbar-color, var(--color-gray-200)) transparent;
    }

.sidebar-main.collapsed .sidebar-nav .primary-nav[b-768amfrx0c] {
    overflow-y: unset;
    transform: translateY(65px);
}

.sidebar-main.collapsed .nav-link[b-768amfrx0c] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

    .sidebar-main.collapsed .nav-link:active[b-768amfrx0c] {
        padding: 10px;
        margin: 0;
    }

.sidebar-nav .secondary-nav[b-768amfrx0c] {
    position: absolute;
    bottom: 30px;
    width: 100%;
    background: var(--nav-background, var(--nav-bg));
    /*    background: #07244A;*/
}

.sidebar-nav .divider[b-768amfrx0c] {
    border-bottom: 1px solid var(--color-gray-200);
    /*    border-bottom: 1px solid #3F5067;*/
    margin: 8px 15px;
    height: 0;
    list-style: none;
}

.sidebar-main.collapsed .divider[b-768amfrx0c] {
    margin: 8px auto;
    width: 40px;
}

/* Dropdown Styling */

.sidebar-nav .nav-item[b-768amfrx0c] {
    position: relative;
}

.sidebar-nav .drop-container .drop-icon[b-768amfrx0c] {
    margin: 0 0px 0 auto;
    transition: transform 0.4s ease, opacity 0.3s 0.2s ease;
}

.sidebar-main.collapsed .drop-container .drop-icon[b-768amfrx0c] {
    transition: opacity 0.3s 0s ease;
}

.sidebar-nav .dropdown-container.open .dropdown-icon[b-768amfrx0c] {
    transform: rotate(180deg);
}

.sidebar-nav .drop-menu[b-768amfrx0c] {
    height: 0;
    overflow-y: hidden;
    list-style: none;
    padding-left: 15px;
    transition: height 0.4s ease;
}

.sidebar-main.collapsed .drop-menu[b-768amfrx0c] {
    position: absolute;
    left: 100%;
    top: -12px;
    opacity: 0;
    height: auto !important;
    pointer-events: none;
    overflow-y: unset;
    padding: 4px 10px 0px 24px;
    border-radius: 0 5px 5px 0;
    background: var(--nav-dropdown-background, var(--nav-bg));
    /*    background: white;
    background: #07244A;*/
    transition: 0s;
}

    .sidebar-main.collapsed .drop-menu:has(.drop-link)[b-768amfrx0c] {
        padding: 7px 10px 7px 10px;
    }

.sidebar-main.collapsed .nav-item:hover .drop-menu[b-768amfrx0c] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(12px);
    transition: 0.4s ease;
}

.drop-menu .nav-item .nav-link[b-768amfrx0c] {
    padding: 9px 15px;
}

.drop-menu .nav-item:hover .nav-link:hover:not(.drop-title)[b-768amfrx0c] {
    color: var(--nav-dropdown-hover-color, var(--nav-hover-color));
    background: var(--nav-dropdown-hover-background, var(--nav-hover-background));
    /*    background: #3F5067;
    color: white;*/
}

.sidebar-main.collapsed .drop-menu .nav-link[b-768amfrx0c] {
    padding: 5px 15px;
}

.drop-menu .nav-item .drop-title[b-768amfrx0c] {
    display: none;
    font-weight: 500;
    margin-left: -5px;
    color: var(--color-primary-700);
}

.drop-menu:has(.drop-link) .nav-item .drop-title[b-768amfrx0c] {
    font-weight: 500;
}

.sidebar-main.collapsed .drop-menu .nav-item .drop-title[b-768amfrx0c] {
    display: block;
}

/* REPSONSIVE */
@media (max-width: 768px) {
    .sidebar-main.collapsed .sidebar-header .sidebar-toggler[b-768amfrx0c] {
        transform: none;
    }

    .sidebar-main.collapsed .sidebar-nav .primary-nav[b-768amfrx0c] {
        transform: translateY(15px);
    }
}

.nav-link svg[b-768amfrx0c] {
    width: 18px;
    height: 18px;
    flex: 0 0 20px;
    /*    fill: white;*/
    fill: var(--color-gray-700);
    margin-left: 5px;
}

.sidebar-nav .nav-section-title[b-768amfrx0c] {
    padding: 14px 15px 6px;
    color: var(--color-gray-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

/* Hide section titles when the sidebar is collapsed */
.sidebar-main.collapsed .nav-section-title[b-768amfrx0c] {
    display: none;
}

.sidebar-main[b-768amfrx0c] {
    --nav-background: var(--nav-bg);
    --nav-border-color: var(--color-gray-200);
    --nav-text-color: var(--color-gray-700);
    --nav-title-color: var(--color-gray-900);
    --nav-section-title-color: #9a9fa9;
    --nav-divider-color: var(--color-gray-200);
    --nav-scrollbar-color: var(--color-gray-200);
    --nav-dropdown-background: var(--nav-background);
    --nav-dropdown-hover-color: var(--color-primary-700);
    --nav-dropdown-hover-background: var(--color-primary-50);
    --nav-dropdown-arrow-color: var(--color-gray-500);
    --nav-dropdown-arrow-active-color: var(--nav-active-color);
    --nav-card-background: var(--nav-card-surface);
    --nav-card-border-color: var(--color-gray-200);
    --nav-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    --nav-active-color: var(--color-primary-700);
    --nav-active-accent-color: var(--color-primary-700);
    --nav-hover-color: var(--color-primary-700);
    --nav-hover-background: var(--color-primary-50);
    --nav-hover-border-color: transparent;
    --nav-child-active-color: var(--color-primary-700);
    --nav-child-active-background: var(--color-primary-50);
    --nav-child-active-border-color: transparent;
    --nav-toggle-color: var(--color-gray-500);
    --nav-toggle-background: var(--white);
    --nav-toggle-border-color: var(--color-gray-200);
    --nav-toggle-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    --nav-toggle-hover-color: var(--color-primary-700);
    --nav-toggle-hover-background: var(--color-white);
    --nav-toggle-hover-border-color: #cfd5df;
    color: var(--nav-text-color);
    background: var(--nav-background);
    border-right-color: var(--nav-border-color);
}

    .sidebar-main .sidebar-header[b-768amfrx0c] {
        min-height: 58px;
        padding: 14px 12px 8px 13px;
    }

.sidebar-header .header-logo img[b-768amfrx0c] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.sidebar-header .header-logo[b-768amfrx0c] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--nav-title-color);
    text-decoration: none;
}

.sidebar-header .header-title[b-768amfrx0c] {
    display: block;
    max-width: 120px;
    opacity: 1;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(0);
    visibility: visible;
    transition: max-width 0.3s ease, opacity 0.2s ease 0.08s, transform 0.3s ease, visibility 0s linear;
}

.sidebar-main.collapsed .header-title[b-768amfrx0c] {
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: max-width 0.3s ease, opacity 0.15s ease, transform 0.25s ease, visibility 0s linear 0.3s;
}

.sidebar-header .sidebar-toggler[b-768amfrx0c] {
    right: 12px;
    width: 27px;
    height: 27px;
    color: var(--nav-toggle-color);
    background: var(--nav-toggle-background);
    border: 1px solid var(--nav-toggle-border-color);
    border-radius: 6px;
    box-shadow: var(--nav-toggle-shadow);
}

    .sidebar-header .sidebar-toggler:hover[b-768amfrx0c] {
        color: var(--nav-toggle-hover-color);
        background: var(--nav-toggle-hover-background);
        border-color: var(--nav-toggle-hover-border-color);
    }

.sidebar-main.collapsed .sidebar-header .sidebar-toggler[b-768amfrx0c] {
    right: auto;
    left: 50%;
    transform: translate(-50%, 60px);
}

.sidebar-header .sidebar-toggler span[b-768amfrx0c] {
    display: flex;
    width: 16px;
    height: 16px;
    margin: 0;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .sidebar-header .sidebar-toggler span[b-768amfrx0c]  .k-svg-icon {
        width: 15px;
        height: 15px;
    }

    .sidebar-header .sidebar-toggler span[b-768amfrx0c]  svg {
        display: block;
        width: 15px;
        height: 15px;
        margin: 0;
    }

.sidebar-nav .nav-list[b-768amfrx0c] {
    gap: 2px;
    padding-inline: 8px;
    transform: translateY(6px);
}

.sidebar-nav .primary-nav[b-768amfrx0c] {
    height: calc(100vh - 174px);
    padding-bottom: 32px;
}

.sidebar-nav .secondary-nav[b-768amfrx0c] {
    bottom: 12px;
    padding-block: 5px;
    background: var(--nav-background);
}

.sidebar-nav .nav-section-title[b-768amfrx0c] {
    padding: 15px 7px 6px;
    color: var(--nav-section-title-color);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.055em;
}

.sidebar-nav .divider[b-768amfrx0c] {
    margin: 9px 7px 2px;
    border-bottom-color: var(--nav-divider-color);
}

.nav-link svg[b-768amfrx0c] {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    margin-left: 0;
    fill: currentColor;
}

.sidebar-nav .drop-container .drop-icon[b-768amfrx0c] {
    display: flex;
    width: 14px;
    height: 14px;
    color: var(--nav-dropdown-arrow-color);
}

    .sidebar-nav .drop-container .drop-icon[b-768amfrx0c]  .k-svg-icon {
        width: 14px;
        height: 14px;
        color: inherit;
    }

.sidebar-nav .drop-container > .drop-toggle.is-parent-active .drop-icon[b-768amfrx0c] {
    color: var(--nav-dropdown-arrow-active-color);
}

.sidebar-nav .drop-menu[b-768amfrx0c] {
    padding-left: 18px;
}

.drop-menu .nav-item .nav-link[b-768amfrx0c] {
    padding: 6px 9px;
}

.sidebar-main.collapsed .sidebar-nav .primary-nav[b-768amfrx0c] {
    transform: translateY(50px);
}

/* Keep all collapsed icons on one fixed vertical axis. */
.sidebar-main.collapsed .sidebar-nav > .nav-list[b-768amfrx0c] {
    align-items: center;
    padding-inline: 5px;
}

    .sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item:not(.divider)[b-768amfrx0c] {
        width: 100%;
    }

    .sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link[b-768amfrx0c] {
        width: 36px;
        min-height: 34px;
        margin-inline: auto;
        padding: 0 !important;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
    }

        .sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link > svg[b-768amfrx0c] {
            flex: 0 0 16px;
            margin: 0;
        }

        .sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link > :where(.nav-label, .drop-icon)[b-768amfrx0c] {
            display: none;
        }

.sidebar-main.collapsed .sidebar-nav .divider[b-768amfrx0c] {
    width: 36px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .sidebar-main.collapsed .sidebar-header .sidebar-toggler[b-768amfrx0c] {
        right: 12px;
        left: auto;
        transform: none;
    }

    .sidebar-main.collapsed .sidebar-nav .primary-nav[b-768amfrx0c] {
        transform: translateY(6px);
    }
}

.nav-item-disabled[b-768amfrx0c] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
/* /Components/Map/MapLibreMap.razor.rz.scp.css */
.maplibre-wrapper[b-nushhwo2lc] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.map-container[b-nushhwo2lc] {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.map-style-switcher[b-nushhwo2lc] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
}

.map-style-toggle[b-nushhwo2lc] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

    .map-style-toggle:hover[b-nushhwo2lc] {
        background: #f7f9fb;
    }

.map-style-panel[b-nushhwo2lc] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-style-option[b-nushhwo2lc] {
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

    .map-style-option:hover[b-nushhwo2lc] {
        background: #f7f9fb;
    }

    .map-style-option.active[b-nushhwo2lc] {
        background: #eef4ff;
        color: #2563eb;
        font-weight: 600;
    }
/* /Components/Pages/Chat.razor.rz.scp.css */
/* ===================== Page shell: no page scrollbar ===================== */
/* The page is pinned to exactly the viewport height. The topbar takes its
   natural height and the splitter (::deep, since Telerik renders its own
   markup) fills everything that's left, so the chat box can never get
   pushed below the fold. */
.chat-page[b-2emfjuqito] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .chat-page[b-2emfjuqito]  .chat-splitter {
        flex: 1 1 auto;
        min-height: 0; /* required so the flex child can actually shrink instead of overflowing */
    }

    /* Telerik renders the splitter's own wrapper/pane elements outside this
   component's normal markup tree, so they need ::deep to be reachable. */
    .chat-page[b-2emfjuqito]  .k-splitter,
    .chat-page[b-2emfjuqito]  .k-pane {
        min-height: 0;
        overflow: hidden;
    }

.chat-topbar[b-2emfjuqito] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
    flex: 0 0 auto;
}

.chat-title-block[b-2emfjuqito] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.chat-title-icon[b-2emfjuqito] {
    color: #2563eb;
    font-size: 22px;
}

.chat-title[b-2emfjuqito] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.chat-subtitle[b-2emfjuqito] {
    font-size: 12px;
    color: #8a94a3;
}

.chat-sidebar[b-2emfjuqito] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


.sidebar-header[b-2emfjuqito] {
    padding: 15px;
    border-bottom: 1px solid var(--color-gray-200);
    flex: 0 0 auto;
}


.chat-list[b-2emfjuqito] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}


.chat-item[b-2emfjuqito] {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-200);
}


    .chat-item:hover[b-2emfjuqito] {
        background: var(--color-gray-200);
    }

    .chat-item.group[b-2emfjuqito] {
        background: #0d9bd72e;
    }

    .chat-item.group:hover[b-2emfjuqito] {
        background: #0d9bd740;
    }

    .chat-item.selected[b-2emfjuqito] {
        background: var(--color-gray-200);
    }


.chat-info[b-2emfjuqito] {
    flex: 1;
    overflow: hidden;
}


.chat-name[b-2emfjuqito] {
    font-weight: 600;
}


.chat-last-message[b-2emfjuqito] {
    color: #777;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.chat-meta[b-2emfjuqito] {
    text-align: right;
    font-size: .75rem;
    color: #777;
}


.unread[b-2emfjuqito] {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 50%;
    background: #1b74e4;
    color: white;
}



.conversation[b-2emfjuqito] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}



.conversation-header[b-2emfjuqito] {
    height: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}



.user-info[b-2emfjuqito] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Only shown on small screens, see the mobile breakpoint below */
.chat-back-button[b-2emfjuqito] {
    display: none;
}


.user-name[b-2emfjuqito] {
    font-weight: 600;
}


.user-status[b-2emfjuqito] {
    color: #777;
    font-size: .8rem;
}



.actions[b-2emfjuqito] {
    display: flex;
    gap: 5px;
}



.chat-container[b-2emfjuqito] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

    .chat-container[b-2emfjuqito]  .k-chat {
        height: 100%;
    }


.unread-message[b-2emfjuqito] {
    font-weight: bold;
    border-left: 4px solid #ff9800;
}

.unread-text[b-2emfjuqito] {
    font-weight: 700;
}

.k-message .unread-text[b-2emfjuqito] {
    font-weight: 700;
}

/* ===================== Responsive ===================== */

/* Tablets: keep the two-pane layout but let the sidebar take a bit less
   room so the conversation stays comfortably usable. */
@media (max-width: 992px) {
    .chat-page[b-2emfjuqito]  .chat-sidebar-pane {
        width: 280px !important;
    }
}

/* Phones: the Telerik Splitter's side-by-side layout no longer makes sense
   at this width, so it's turned into a single full-width view that swaps
   between the chat list and the open conversation, like a normal
   messaging app. SelectedChat != null toggles the "mobile-chat-open"
   class on .chat-page (see Chat.razor), which this drives. */
@media (max-width: 768px) {

    .chat-topbar[b-2emfjuqito] {
        padding: 10px 14px;
    }

    .chat-subtitle[b-2emfjuqito] {
        display: none; /* saves vertical space on small screens */
    }

    .chat-page[b-2emfjuqito]  .chat-splitter {
        flex-direction: column;
    }

    /* Hide Telerik's drag handle between panes - there's only ever one
       pane visible at a time on mobile, so nothing to resize. */
    .chat-page[b-2emfjuqito]  .k-splitbar {
        display: none !important;
    }

    .chat-page[b-2emfjuqito]  .k-pane {
        width: 100% !important;
        height: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Default state: show the chat list, hide the conversation pane. */
    .chat-page[b-2emfjuqito]  .chat-conversation-pane {
        display: none !important;
    }

    /* Once a chat is selected: show the conversation, hide the list. */
    .chat-page.mobile-chat-open[b-2emfjuqito]  .chat-sidebar-pane {
        display: none !important;
    }

    .chat-page.mobile-chat-open[b-2emfjuqito]  .chat-conversation-pane {
        display: flex !important;
    }

    .chat-back-button[b-2emfjuqito] {
        display: inline-flex;
    }

    .conversation-header[b-2emfjuqito] {
        padding: 10px 12px;
    }

    .user-name[b-2emfjuqito] {
        font-size: .95rem;
    }
}
/* /Components/Pages/LiveTracking.razor.rz.scp.css */
.lt-page[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.lt-topbar[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
}

.lt-title-block[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.lt-title-icon[b-80pti4jwyc] {
    color: #2563eb;
    font-size: 22px;
}

.lt-title[b-80pti4jwyc] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.lt-subtitle[b-80pti4jwyc] {
    font-size: 12px;
    color: #8a94a3;
}

.lt-filters[b-80pti4jwyc] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}

.lt-field[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lt-label[b-80pti4jwyc] {
    font-size: 12px;
    color: var(--color-secondary-700);
}

.lt-datetime[b-80pti4jwyc] {
    display: flex;
    gap: 6px;
}

.lt-load-btn[b-80pti4jwyc] {
    height: 34px;
}

/* ---------------- Main area ---------------- */
.lt-main[b-80pti4jwyc] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 12px;
}

/* ---------------- Sidebar ---------------- */
.lt-sidebar[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 400px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
}

.lt-search-row[b-80pti4jwyc] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.lt-search-box[b-80pti4jwyc] {
    flex: 1;
}

.lt-filter-btn[b-80pti4jwyc] {
    flex-shrink: 0;
}

.lt-filter-wrapper[b-80pti4jwyc] {
    position: relative;
    flex-shrink: 0;
}

.lt-filter-btn[b-80pti4jwyc] {
    flex-shrink: 0;
}

.lt-filter-panel[b-80pti4jwyc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 6;
}

.lt-filter-option[b-80pti4jwyc] {
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
}

    .lt-filter-option:hover[b-80pti4jwyc] {
        background: var(--white);
    }

    .lt-filter-option.active[b-80pti4jwyc] {
        background: var(--white);
        color: var(--color-secondary-700);
        font-weight: 600;
    }

.lt-vehicle-list[b-80pti4jwyc] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-sidebar-pane[b-80pti4jwyc] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.k-splitter-pane[b-80pti4jwyc] {
    min-height: 0;
}

.lt-vehicle-item[b-80pti4jwyc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .lt-vehicle-item:hover[b-80pti4jwyc] {
        background: var(--nav-bg);
    }

    .lt-vehicle-item.lt-selected[b-80pti4jwyc] {
        background: var(--nav-bg);
        border-color: #2563eb;
    }

.lt-status-line[b-80pti4jwyc] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #9ca3af;
    transition: background 0.15s ease;
}

.lt-status-active .lt-status-line[b-80pti4jwyc] {
    background: #22c55e;
}

.lt-status-dot[b-80pti4jwyc] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lt-status-stationary .lt-status-line[b-80pti4jwyc] {
    background: #f59e0b;
}

.lt-status-unknown .lt-status-line[b-80pti4jwyc] {
    background: #eb5757;
}

.lt-status-inactive .lt-status-line[b-80pti4jwyc] {
    background: #9ca3af;
}

.lt-truck-icon[b-80pti4jwyc] {
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
}

.lt-vehicle-info[b-80pti4jwyc] {
    flex: 1;
    min-width: 0;
}

.lt-vehicle-name[b-80pti4jwyc] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.lt-vehicle-type[b-80pti4jwyc] {
    font-size: 11px;
    color: #9ca3af;
}

.lt-vehicle-meta[b-80pti4jwyc] {
    min-width: 120px;
    text-align: right;
    padding-right: 4px;
}

.lt-last-position-label[b-80pti4jwyc] {
    font-size: 10px;
    color: #9ca3af;
}

.lt-last-position-time[b-80pti4jwyc] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.lt-center-button[b-80pti4jwyc] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .lt-center-button:hover[b-80pti4jwyc] {
        background: rgba(37, 99, 235, 0.10);
        color: #2563eb;
    }

    .lt-center-button .k-svg-icon[b-80pti4jwyc] {
        font-size: 18px;
    }

    .lt-center-button:hover .k-svg-icon[b-80pti4jwyc] {
        transform: translateX(2px);
    }

/* status color mapping, shared by dot + pin icon */
.status-green[b-80pti4jwyc] {
    background-color: #22c55e;
    color: #22c55e;
}

.status-red[b-80pti4jwyc] {
    background-color: #ef4444;
    color: #ef4444;
}

/* ---------------- Map area (existing component slots in here) ---------------- */
.lt-map-area[b-80pti4jwyc] {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.oo-status-chips-label[b-80pti4jwyc] {
    margin-right: 4px;
    color: var(--color-secondary-700);
    font-size: var(--fs-body-3);
    font-weight: 500;
    white-space: nowrap;
}

.oo-status-chips[b-80pti4jwyc] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0 0 14px;
}

.oo-status-chip[b-80pti4jwyc] {
    min-width: 54px;
    height: 26px;
    padding: 0 13px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
    cursor: pointer;
}

    .oo-status-chip:hover[b-80pti4jwyc] {
        color: var(--color-primary-700);
    }

    .oo-status-chip.is-selected[b-80pti4jwyc] {
        border-color: var(--color-selected-border);
        background: var(--color-selected-bg);
        color: var(--color-primary-700);
        font-weight: 500;
    }

    .oo-status-chip:focus-visible[b-80pti4jwyc] {
        outline: 2px solid var(--color-selected-border);
        outline-offset: 2px;
    }

/* =========================================
   DETAIL PANEL
   ========================================= */

.lt-detail-panel[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: 140px minmax(280px, 1fr) minmax(500px, 1.5fr);
    width: 100%;
    min-height: 180px;
    background: var(--white);
    border-radius: 0;
    padding: 16px 24px;
    gap: 0;
    box-sizing: border-box;
}


/* =========================================
   COLUMNS
   ========================================= */

.lt-detail-col[b-80pti4jwyc] {
    min-width: 0;
}

.lt-detail-summary[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 24px;
    border-right: 1px solid #e5e7eb;
}

    .lt-detail-summary:last-child[b-80pti4jwyc] {
        border-right: none;
    }


/* =========================================
   TRUCK IMAGE
   ========================================= */

.lt-truck-image[b-80pti4jwyc] {
    width: 100%;
    height: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    box-sizing: border-box;
    border-right: 1px solid #e5e7eb;
}


    /* Make sure the truck image does not become huge */

    .lt-truck-image img[b-80pti4jwyc] {
        max-width: 100px;
        max-height: 100px;
        width: auto;
        height: auto;
        object-fit: contain;
    }


/* =========================================
   VEHICLE INFORMATION
   ========================================= */

.lt-detail-title[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    color: #334155;
    margin-bottom: 5px;
}


.lt-detail-line[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}


    .lt-detail-line .k-svg-icon[b-80pti4jwyc] {
        flex-shrink: 0;
        color: #94a3b8;
    }


.lt-muted[b-80pti4jwyc] {
    color: #64748b;
}


/* =========================================
   SPEED / DIRECTION
   ========================================= */

.lt-detail-grid[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 32px;
    margin-top: 10px;
}


.lt-detail-value[b-80pti4jwyc] {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}


.lt-detail-label[b-80pti4jwyc] {
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
}


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

.lt-detail-footer[b-80pti4jwyc] {
    margin-top: 3px;
    font-size: 11px;
    color: #64748b;
}


/* =========================================
   CURRENT TASK
   ========================================= */

.lt-detail-col h4[b-80pti4jwyc] {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

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

.lt-task-summary[b-80pti4jwyc] {
    min-width: 0;
}

.lt-route-top[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    width: 100%;
    padding-bottom: 6px;
}


.lt-route-stop[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: #475569;
}


    .lt-route-stop span:last-child[b-80pti4jwyc] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================
   TASK DATE
   ========================================= */

.lt-task-date[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}


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

.lt-route-top[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    width: 100%;
}


.lt-route-stop[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: #475569;
    padding: 4px 0;
}


.lt-route-stop-right[b-80pti4jwyc] {
    justify-content: flex-end;
    white-space: nowrap;
    color: #64748b;
}


/* =========================================
   TASK DETAILS
   ========================================= */

.lt-route-details[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    margin-top: 4px;
    width: 100%;
}


.lt-route-address[b-80pti4jwyc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    padding-top: 5px;
}


    .lt-route-address > div[b-80pti4jwyc] {
        min-width: 0;
    }


/* =========================================
   TIMESTAMPS
   ========================================= */

.lt-route-timestamps[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 5px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}


    .lt-route-timestamps strong[b-80pti4jwyc] {
        color: #475569;
        font-weight: 600;
    }


/* =========================================
   STATUS DOTS
   ========================================= */

.lt-dot[b-80pti4jwyc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


.lt-dot-green[b-80pti4jwyc] {
    background: #22c55e;
}


.lt-dot-purple[b-80pti4jwyc] {
    background: #a855f7;
}


.lt-dot-gray[b-80pti4jwyc] {
    background: #94a3b8;
}


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

@media (max-width: 1100px) {

    .lt-detail-panel[b-80pti4jwyc] {
        grid-template-columns: 120px 1fr;
    }

        .lt-detail-panel > :last-child[b-80pti4jwyc] {
            grid-column: 1 / -1;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }

    .lt-detail-summary[b-80pti4jwyc] {
        border-right: none;
    }
}


@media (max-width: 700px) {

    .lt-detail-panel[b-80pti4jwyc] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .lt-truck-image[b-80pti4jwyc] {
        min-height: 100px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 12px;
    }

    .lt-detail-summary[b-80pti4jwyc] {
        padding: 16px 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .lt-route-top[b-80pti4jwyc],
    .lt-route-details[b-80pti4jwyc] {
        grid-template-columns: 1fr;
    }

    .lt-route-stop-right[b-80pti4jwyc] {
        justify-content: flex-start;
    }

    .lt-route-timestamps[b-80pti4jwyc] {
        white-space: normal;
    }
}

/* =========================================
   TIMESTAMPS
   ========================================= */

.lt-route-timestamps[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 6px;
    min-width: 300px;
}


.lt-timestamp-row[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: 8px 70px auto;
    align-items: center;
    column-gap: 8px;
    white-space: nowrap;
    font-size: 12px;
}


.lt-timestamp-label[b-80pti4jwyc] {
    font-weight: 600;
    color: #475569;
}


.lt-timestamp-value[b-80pti4jwyc] {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.lt-dot[b-80pti4jwyc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}


.lt-dot-green[b-80pti4jwyc] {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}


.lt-dot-purple[b-80pti4jwyc] {
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}


.lt-dot-gray[b-80pti4jwyc] {
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.lt-task-status[b-80pti4jwyc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}

/* =========================================
   ACTION DATE
   ========================================= */

.lt-action-date[b-80pti4jwyc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 5px 10px;
    border-left: 3px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 4px;
    min-width: 145px;
}

.lt-action-date-label[b-80pti4jwyc] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.lt-action-date-value[b-80pti4jwyc] {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================
   TASK DETAILS
   ========================================= */

.lt-route-details[b-80pti4jwyc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    width: 100%;
}

/* =========================================
   ADDRESS
   ========================================= */

.lt-route-address[b-80pti4jwyc] {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    padding-top: 6px;
}

.lt-address-content[b-80pti4jwyc] {
    min-width: 0;
}

.lt-address-name[b-80pti4jwyc] {
    font-weight: 600;
    color: #334155;
}

.lt-phone[b-80pti4jwyc] {
    margin-top: 3px;
    color: #64748b;
}

/* =========================================
   TASK TIMELINE
   ========================================= */

.lt-task-timeline[b-80pti4jwyc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 285px;
    padding-top: 6px;
    white-space: nowrap;
}

.lt-timeline-line[b-80pti4jwyc] {
    position: absolute;
    left: 4px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: #e2e8f0;
}

.lt-timeline-row[b-80pti4jwyc] {
    position: relative;
    display: grid;
    grid-template-columns: 10px 75px auto;
    align-items: center;
    column-gap: 8px;
    min-height: 20px;
    font-size: 12px;
}

.lt-timeline-marker[b-80pti4jwyc] {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 0 3px #ffffff;
    z-index: 1;
}

.lt-timeline-marker[b-80pti4jwyc] {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #8b5cf6;
    z-index: 1;
}

.lt-timestamp-label[b-80pti4jwyc] {
    font-weight: 600;
    color: #64748b;
}

.lt-timestamp-value[b-80pti4jwyc] {
    text-align: right;
    color: #475569;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.lt-no-task[b-80pti4jwyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.lt-no-task-indicator[b-80pti4jwyc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.10);
}

@media (max-width: 1100px) {

    .lt-route-details[b-80pti4jwyc] {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .lt-task-timeline[b-80pti4jwyc] {
        min-width: 0;
    }
}


@media (max-width: 700px) {

    .lt-route-top[b-80pti4jwyc] {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .lt-action-date[b-80pti4jwyc] {
        align-items: flex-start;
        width: fit-content;
    }

    .lt-task-timeline[b-80pti4jwyc] {
        white-space: normal;
    }

    .lt-timeline-row[b-80pti4jwyc] {
        grid-template-columns: 10px 75px minmax(0, 1fr);
    }

    .lt-timestamp-value[b-80pti4jwyc] {
        text-align: left;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-intro[b-wd38ab431t] {
    margin-bottom: 42px;
}

    .login-intro h1[b-wd38ab431t] {
        margin: 0 0 14px;
        color: var(--color-secondary-700);
        font-size: var(--fs-display-2);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .login-intro span[b-wd38ab431t] {
        color: var(--color-primary-700);
    }

    .login-intro p[b-wd38ab431t] {
        margin: 0;
        color: #5d6b8f;
        font-size: 17px;
        line-height: 1.35;
    }

.login-form-card[b-wd38ab431t]  .login-form {
    display: grid;
    gap: 24px;
}

.login-field[b-wd38ab431t] {
    display: grid;
    gap: 12px;
}

    .login-field label[b-wd38ab431t] {
        color: var(--color-secondary-700);
        font-size: var(--fs-body-2);
        font-weight: 600;
        line-height: 1;
    }

.login-input-wrap[b-wd38ab431t] {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d7dfed;
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-gray-800);
    padding: 0 18px 0 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .login-input-wrap:focus-within[b-wd38ab431t] {
        border-color: #2367e8;
        box-shadow: 0 0 0 4px rgba(35, 103, 232, 0.12);
    }

.login-input-icon[b-wd38ab431t] {
    width: 35px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-size: 27px;
}

.login-input-wrap[b-wd38ab431t]  .login-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--color-gray-800);
    font-size: var(--fs-body-1);
    font-weight: 500;
    line-height: 1;
    outline: none;
    padding: 0 10px;
}

    .login-input-wrap[b-wd38ab431t]  .login-input::placeholder {
        color: #9aa7bf;
        font-weight: 400;
        font-size: var(--fs-body-2);
    }

.login-options[b-wd38ab431t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: -4px;
    font-size: var(--fs-body-3);
}

.login-remember[b-wd38ab431t] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-secondary-700);
    cursor: pointer;
    font-size: var(--fs-body-3);
    font-weight: 600;
    line-height: 1;
}

.login-options a[b-wd38ab431t],
.login-create-account a[b-wd38ab431t] {
    color: var(--color-primary-700);
    font-weight: 600;
    text-decoration: none;
}

    .login-options a:hover[b-wd38ab431t],
    .login-create-account a:hover[b-wd38ab431t] {
        text-decoration: underline;
    }

.login-submit[b-wd38ab431t] {
    width: 100%;
    height: 58px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary-700);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    color: #ffffff;
    cursor: pointer;
    font-size: var(--fs-body-1);
    font-weight: 700;
    line-height: 1;
    margin-top: 6px;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

    .login-submit[b-wd38ab431t]  .k-svg-icon {
        position: absolute;
        right: 20px;
        width: 20px;
        height: 20px;
    }

    .login-submit:hover[b-wd38ab431t] {
        background: var(--color-primary-500);
    }

    .login-submit:active[b-wd38ab431t] {
        transform: translateY(1px);
    }

.login-form-card[b-wd38ab431t]  .login-validation,
.login-error[b-wd38ab431t] {
    margin: 0;
    border-radius: 10px;
    background: #fff1f1;
    color: #bd1f1f;
    font-size: var(--fs-body-3);
    line-height: 1.35;
    padding: 12px 14px;
}

    .login-form-card[b-wd38ab431t]  .login-validation:empty {
        display: none;
    }

    .login-form-card[b-wd38ab431t]  .login-validation li {
        margin-left: 16px;
    }

.login-create-account[b-wd38ab431t] {
    margin: 28px 0 0;
    color: #5d6b8f;
    font-size: var(--fs-body-3);
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 1140px) {
    .login-intro h1[b-wd38ab431t] {
        margin-top: 30px;
    }
}

@media (max-width: 600px) {
    .login-intro[b-wd38ab431t] {
        margin-bottom: 34px;
    }

        .login-intro h1[b-wd38ab431t] {
            font-size: 30px;
            margin-top: 20px;
        }

        .login-intro p[b-wd38ab431t] {
            font-size: 15px;
        }

    .login-options[b-wd38ab431t] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}
/* /Components/Pages/Overzichten.razor.rz.scp.css */
.reports-page[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.rp-topbar[b-n7yyklhdry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
}

.rp-title-block[b-n7yyklhdry] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.rp-title-icon[b-n7yyklhdry] {
    color: #2563eb;
    font-size: 22px;
}

.rp-title[b-n7yyklhdry] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.rp-subtitle[b-n7yyklhdry] {
    font-size: 12px;
    color: #8a94a3;
}


/* -------------------------------------------------
   Main
   ------------------------------------------------- */

.reports-main[b-n7yyklhdry] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 12px;
}


/* -------------------------------------------------
   Sidebar
   ------------------------------------------------- */

.reports-sidebar[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    width: 350px;
    min-width: 300px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
}


.reports-sidebar-header[b-n7yyklhdry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}


.reports-sidebar-title[b-n7yyklhdry] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary-700);
}


.reports-search[b-n7yyklhdry] {
    margin-bottom: 10px;
}


/* -------------------------------------------------
   Report list
   ------------------------------------------------- */

.reports-list[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 8px;
}


.report-item[b-n7yyklhdry] {
    width: 100%;
    padding: 0 !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 8px !important;
    background: var(--white) !important;
    text-align: left !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}


    .report-item:hover[b-n7yyklhdry] {
        background: var(--nav-bg) !important;
    }


.report-item-selected[b-n7yyklhdry] {
    background: var(--nav-bg) !important;
    border-color: #2563eb !important;
}


.report-item-content[b-n7yyklhdry] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 11px;
}


.report-icon[b-n7yyklhdry] {
    flex-shrink: 0;
    color: #ef4444;
    font-size: 19px;
}


.report-info[b-n7yyklhdry] {
    flex: 1;
    min-width: 0;
}


.report-name[b-n7yyklhdry] {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary-700);
    white-space: nowrap;
    text-overflow: ellipsis;
}


.report-description[b-n7yyklhdry] {
    margin-top: 2px;
    overflow: hidden;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.report-selected-icon[b-n7yyklhdry] {
    flex-shrink: 0;
    color: #2563eb;
    font-size: 16px;
}


/* -------------------------------------------------
   Empty states
   ------------------------------------------------- */

.reports-empty[b-n7yyklhdry],
.reports-no-selection[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #9ca3af;
}


.reports-empty[b-n7yyklhdry] {
    padding: 30px 10px;
}


.reports-empty-icon[b-n7yyklhdry] {
    margin-bottom: 8px;
    font-size: 24px;
}


.reports-no-selection-icon[b-n7yyklhdry] {
    margin-bottom: 12px;
    font-size: 42px;
    color: #cbd5e1;
}


.reports-no-selection-title[b-n7yyklhdry] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-secondary-700);
}


.reports-no-selection-text[b-n7yyklhdry] {
    margin-top: 5px;
    font-size: 12px;
    color: #9ca3af;
}


/* -------------------------------------------------
   PDF Viewer
   ------------------------------------------------- */

.reports-viewer[b-n7yyklhdry] {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--kendo-color-base);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
}


/* -------------------------------------------------
   Loading
   ------------------------------------------------- */

.reports-loading[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


.reports-loading-text[b-n7yyklhdry] {
    margin-top: 12px;
    font-size: 13px;
    color: #8a94a3;
}

.reports-parameter-tabs[b-n7yyklhdry] {
    height: 100%;
    border: 0;
}


.reports-parameter-content[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.reports-parameter-tabs .k-tabstrip-items[b-n7yyklhdry] {
    display: none !important;
}

.reports-parameter-tabs .k-tabstrip-content[b-n7yyklhdry] {
    border: 0;
    padding: 0;
    height: 100%;
}

.reports-parameter-tabs .k-content[b-n7yyklhdry] {
    border: 0;
    padding: 0;
    height: 100%;
}


/* -------------------------------------------------
   Report parameters
   ------------------------------------------------- */

.reports-parameters[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    width: 260px;
    min-width: 260px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
}


.reports-parameters-title[b-n7yyklhdry] {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
}


.reports-field[b-n7yyklhdry] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}


    .reports-field label[b-n7yyklhdry] {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-secondary-700);
    }


.reports-generate-button[b-n7yyklhdry] {
    width: 100%;
    margin-top: 6px;
}


.reports-parameter-info[b-n7yyklhdry] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 11px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    font-size: 11px;
    line-height: 1.5;
    color: #475569;
}


    .reports-parameter-info .k-icon[b-n7yyklhdry] {
        flex-shrink: 0;
        margin-top: 1px;
        color: #2563eb;
    }

[b-n7yyklhdry] .k-tabstrip-items-start {
    height: 0;
    width: 0;
}

/* /Components/Pages/Registration.razor.rz.scp.css */
.registration-intro[b-d9r1rfeco2] {
    margin-bottom: 42px;
}

    .registration-intro h1[b-d9r1rfeco2] {
        margin: 0 0 14px;
        color: var(--color-secondary-700);
        font-size: var(--fs-display-2);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .registration-intro span[b-d9r1rfeco2] {
        color: var(--color-primary-700);
    }

    .registration-intro p[b-d9r1rfeco2] {
        margin: 0;
        color: #5d6b8f;
        font-size: 17px;
        line-height: 1.35;
    }

.registration-form-card[b-d9r1rfeco2]  .registration-form {
    display: grid;
    gap: 24px;
}

.registration-field[b-d9r1rfeco2] {
    display: grid;
    gap: 12px;
}

    .registration-field label[b-d9r1rfeco2] {
        color: var(--color-secondary-700);
        font-size: var(--fs-body-2);
        font-weight: 600;
        line-height: 1;
    }

.registration-input-wrap[b-d9r1rfeco2] {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d7dfed;
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-gray-800);
    padding: 0 18px 0 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .registration-input-wrap:focus-within[b-d9r1rfeco2] {
        border-color: #2367e8;
        box-shadow: 0 0 0 4px rgba(35, 103, 232, 0.12);
    }

.registration-input-icon[b-d9r1rfeco2] {
    width: 35px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-size: 27px;
}

.registration-input-wrap[b-d9r1rfeco2]  .registration-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--color-gray-800);
    font-size: var(--fs-body-1);
    font-weight: 500;
    line-height: 1;
    outline: none;
    padding: 0 10px;
}

    .registration-input-wrap[b-d9r1rfeco2]  .registration-input::placeholder {
        color: #9aa7bf;
        font-weight: 400;
        font-size: var(--fs-body-2);
    }

.registration-options[b-d9r1rfeco2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: -4px;
    font-size: var(--fs-body-3);
}

.registration-remember[b-d9r1rfeco2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-secondary-700);
    cursor: pointer;
    font-size: var(--fs-body-3);
    font-weight: 600;
    line-height: 1;
}

.registration-options a[b-d9r1rfeco2],
.registration-create-account a[b-d9r1rfeco2] {
    color: var(--color-primary-700);
    font-weight: 600;
    text-decoration: none;
}

    .registration-options a:hover[b-d9r1rfeco2],
    .registration-create-account a:hover[b-d9r1rfeco2] {
        text-decoration: underline;
    }

.registration-submit[b-d9r1rfeco2] {
    width: 100%;
    height: 58px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary-700);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    color: #ffffff;
    cursor: pointer;
    font-size: var(--fs-body-1);
    font-weight: 700;
    line-height: 1;
    margin-top: 6px;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

    .registration-submit[b-d9r1rfeco2]  .k-svg-icon {
        position: absolute;
        right: 20px;
        width: 20px;
        height: 20px;
    }

    .registration-submit:hover[b-d9r1rfeco2] {
        background: var(--color-primary-500);
    }

    .registration-submit:active[b-d9r1rfeco2] {
        transform: translateY(1px);
    }

.registration-form-card[b-d9r1rfeco2]  .registration-validation,
.registration-error[b-d9r1rfeco2] {
    margin: 0;
    border-radius: 10px;
    background: #fff1f1;
    color: #bd1f1f;
    font-size: var(--fs-body-3);
    line-height: 1.35;
    padding: 12px 14px;
}

    .registration-form-card[b-d9r1rfeco2]  .registration-validation:empty {
        display: none;
    }

    .registration-form-card[b-d9r1rfeco2]  .registration-validation li {
        margin-left: 16px;
    }

.registration-create-account[b-d9r1rfeco2] {
    margin: 28px 0 0;
    color: #5d6b8f;
    font-size: var(--fs-body-3);
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 1140px) {
    .registration-intro h1[b-d9r1rfeco2] {
        margin-top: 30px;
    }
}

@media (max-width: 600px) {
    .registration-intro[b-d9r1rfeco2] {
        margin-bottom: 34px;
    }

        .registration-intro h1[b-d9r1rfeco2] {
            font-size: 30px;
            margin-top: 20px;
        }

        .registration-intro p[b-d9r1rfeco2] {
            font-size: 15px;
        }

    .registration-options[b-d9r1rfeco2] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}
/* /Components/Pages/Routes.razor.rz.scp.css */
.vr-page[b-bcp8me3rr7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.vr-topbar[b-bcp8me3rr7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
}

.vr-title-block[b-bcp8me3rr7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.vr-title-icon[b-bcp8me3rr7] {
    color: #2563eb;
    font-size: 22px;
}

.vr-title[b-bcp8me3rr7] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.vr-subtitle[b-bcp8me3rr7] {
    font-size: 12px;
    color: #8a94a3;
}

.vr-filters[b-bcp8me3rr7] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}

.vr-field[b-bcp8me3rr7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vr-label[b-bcp8me3rr7] {
    font-size: 12px;
    color: var(--color-secondary-700);
}

.vr-datetime[b-bcp8me3rr7] {
    display: flex;
    gap: 6px;
}

.vr-load-btn[b-bcp8me3rr7] {
    height: 34px;
}

/* ---------------- Main area ---------------- */
.vr-main[b-bcp8me3rr7] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 12px;
}

/* ---------------- Sidebar ---------------- */
.vr-sidebar[b-bcp8me3rr7] {
    display: flex;
    flex-direction: column;
    width: 350px;
    min-width: 300px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
}

.vr-search-row[b-bcp8me3rr7] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.vr-search-box[b-bcp8me3rr7] {
    flex: 1;
}

.vr-filter-btn[b-bcp8me3rr7] {
    flex-shrink: 0;
}

.vr-filter-wrapper[b-bcp8me3rr7] {
    position: relative;
    flex-shrink: 0;
}

.vr-filter-btn[b-bcp8me3rr7] {
    flex-shrink: 0;
}

.vr-filter-panel[b-bcp8me3rr7] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 6;
}

.vr-filter-option[b-bcp8me3rr7] {
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
}

    .vr-filter-option:hover[b-bcp8me3rr7] {
        background: var(--white);
    }

    .vr-filter-option.active[b-bcp8me3rr7] {
        background: var(--white);
        color: var(--color-secondary-700);
        font-weight: 600;
    }

.vr-vehicle-list[b-bcp8me3rr7] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-sidebar-pane[b-bcp8me3rr7] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.k-splitter-pane[b-bcp8me3rr7] {
    min-height: 0;
}

.vr-vehicle-item[b-bcp8me3rr7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .vr-vehicle-item:hover[b-bcp8me3rr7] {
        background: var(--nav-bg);
    }

    .vr-vehicle-item.vr-selected[b-bcp8me3rr7] {
        background: var(--nav-bg);
        border-color: #2563eb;
    }

.vr-status-dot[b-bcp8me3rr7] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vr-truck-icon[b-bcp8me3rr7] {
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
}

.vr-vehicle-info[b-bcp8me3rr7] {
    flex: 1;
    min-width: 0;
}

.vr-vehicle-name[b-bcp8me3rr7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.vr-vehicle-type[b-bcp8me3rr7] {
    font-size: 11px;
    color: #9ca3af;
}

.vr-vehicle-meta[b-bcp8me3rr7] {
    text-align: right;
}

.vr-last-position-label[b-bcp8me3rr7] {
    font-size: 10px;
    color: #9ca3af;
}

.vr-last-position-time[b-bcp8me3rr7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.vr-pin-icon[b-bcp8me3rr7] {
    font-size: 16px;
    flex-shrink: 0;
}

/* status color mapping, shared by dot + pin icon */
.status-green[b-bcp8me3rr7] {
    background-color: #22c55e;
    color: #22c55e;
}

.status-red[b-bcp8me3rr7] {
    background-color: #ef4444;
    color: #ef4444;
}

/* ---------------- Map area (existing component slots in here) ---------------- */
.vr-map-area[b-bcp8me3rr7] {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.route-loading-overlay[b-bcp8me3rr7] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 100;
    backdrop-filter: blur(2px);
}

.route-loading-content[b-bcp8me3rr7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
}
/* /Components/Pages/Stamgegevens/Activities.razor.rz.scp.css */
.stamgegevens-content[b-w7nbh9r4qi] {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stam-page-header[b-w7nbh9r4qi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 18px 18px;
    min-width: 0;
    border-bottom: 1px solid #edf0f3;
}

.stam-page-heading[b-w7nbh9r4qi] {
    min-width: 0;
}

.activities-grid-container[b-w7nbh9r4qi] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    /*
     * Important:
     * don't let the grid grow outside this area.
     */
    overflow: hidden;
}

    .activities-grid-container[b-w7nbh9r4qi]  .k-grid {
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
    }

.stam-title[b-w7nbh9r4qi] {
    padding: 8px 0 15px 0;
    margin: 0;
    flex: 0 0 auto;
}

.stam-topbar[b-w7nbh9r4qi] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    flex: 0 0 auto;
}

.stam-topbar__left[b-w7nbh9r4qi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stam-filter[b-w7nbh9r4qi] {
    display: grid;
    gap: 6px;
    max-width: 220px;
}

.stam-filter__label[b-w7nbh9r4qi] {
    font-size: var(--font-xs, 12px);
    color: var(--txt-600, #666);
}

.stam-topbar-actions[b-w7nbh9r4qi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-status[b-w7nbh9r4qi] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.activity-status--active[b-w7nbh9r4qi] {
    background: #e7f6ee;
    color: #28734a;
}

.activity-status--inactive[b-w7nbh9r4qi] {
    background: #fdecec;
    color: #b42318;
}

.activity-form[b-w7nbh9r4qi] {
    padding: 24px;
}

.activity-form-row[b-w7nbh9r4qi] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

    .activity-form-row label[b-w7nbh9r4qi] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.activity-dialog-actions[b-w7nbh9r4qi] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}

[b-w7nbh9r4qi] .k-checkbox {
    border-color: #07244a3d;
}
/* /Components/Pages/Stamgegevens/Drivers.razor.rz.scp.css */
.stamgegevens-content[b-krj6rd2wpc] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stam-page-header[b-krj6rd2wpc] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 18px 18px;
    border-bottom: 1px solid #edf0f3;
}

.stam-page-heading[b-krj6rd2wpc] {
    min-width: 0;
}

.drivers-grid-container[b-krj6rd2wpc] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
}

    .drivers-grid-container[b-krj6rd2wpc]  .k-grid {
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
    }

.stam-title[b-krj6rd2wpc] {
    padding: 8px 0 15px 0;
    margin: 0;
    flex: 0 0 auto;
}

.stam-topbar[b-krj6rd2wpc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    flex: 0 0 auto;
}

.stam-topbar__left[b-krj6rd2wpc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stam-filter[b-krj6rd2wpc] {
    display: grid;
    gap: 6px;
    max-width: 220px;
}

.stam-filter__label[b-krj6rd2wpc] {
    font-size: var(--font-xs, 12px);
    color: var(--txt-600, #666);
}

.stam-topbar-actions[b-krj6rd2wpc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-status[b-krj6rd2wpc] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.driver-status--active[b-krj6rd2wpc] {
    background: #e7f6ee;
    color: #28734a;
}

.driver-status--inactive[b-krj6rd2wpc] {
    background: #fdecec;
    color: #b42318;
}

.driver-form[b-krj6rd2wpc] {
    padding: 24px;
}

.driver-form-row[b-krj6rd2wpc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

    .driver-form-row label[b-krj6rd2wpc] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.driver-dialog-actions[b-krj6rd2wpc] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}
/* /Components/Pages/Stamgegevens/Licenses.razor.rz.scp.css */
.license-page[b-asu2ziyq5o] {
    padding: 15px;
    padding-top: 15px;
    min-width: 0;
}

.page-subtitle[b-asu2ziyq5o] {
    color: #6b7280;
    margin-bottom: 15px;
}

/* -------------------------------------------------------
   Cards
------------------------------------------------------- */

.license-page[b-asu2ziyq5o]  .k-card {
    width: auto;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    padding: 24px;
    margin-bottom: 15px;
    min-width: 0;
}

.top-card[b-asu2ziyq5o] {
    margin-bottom: 15px;
}

.card-title[b-asu2ziyq5o] {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
}

/* -------------------------------------------------------
   Top statistics
------------------------------------------------------- */

.stats[b-asu2ziyq5o] {
    display: grid;
    /*
       4 statistics + 4 dividers + information section
    */
    grid-template-columns: minmax(130px, 1fr) 1px minmax(130px, 1fr) 1px minmax(130px, 1fr) 1px minmax(180px, 1.2fr) 1px minmax(250px, 2fr);
    gap: 20px;
    align-items: stretch;
    min-width: 0;
}

.stat[b-asu2ziyq5o] {
    min-width: 0;
}

.license-divider[b-asu2ziyq5o] {
    width: 1px;
    background: #ececec;
}

.title[b-asu2ziyq5o] {
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 5px;
    align-items: center;
}

    .title .k-svg-icon[b-asu2ziyq5o] {
        font-size: 14px;
    }

.value[b-asu2ziyq5o] {
    color: #2563eb;
    font-size: 42px;
    font-weight: 700;
    margin-top: 6px;
}

.small[b-asu2ziyq5o] {
    color: #777;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.4;
}

.info[b-asu2ziyq5o] {
    display: flex;
    gap: 10px;
    min-width: 0;
    align-items: flex-start;
}

.info-title[b-asu2ziyq5o] {
    font-weight: 600;
    margin-bottom: 10px;
}

.info-icon[b-asu2ziyq5o] {
    color: #2563eb;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* -------------------------------------------------------
   Quarter
------------------------------------------------------- */

.quarter[b-asu2ziyq5o] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
    color: #666;
    font-size: 13px;
}

/* -------------------------------------------------------
   Bottom section
------------------------------------------------------- */

.bottom-grid[b-asu2ziyq5o] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 15px;
}

    .bottom-grid > .k-card[b-asu2ziyq5o] {
        min-width: 0;
    }

/* -------------------------------------------------------
   License form
------------------------------------------------------- */

.license-form-row[b-asu2ziyq5o] {
    margin-bottom: 24px;
}

    .license-form-row label[b-asu2ziyq5o] {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
    }

.current-number[b-asu2ziyq5o] {
    font-size: 22px;
    font-weight: 600;
}

.effective-date[b-asu2ziyq5o] {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.5;
}

.text-danger[b-asu2ziyq5o] {
    margin-top: 8px;
    color: #dc2626;
    line-height: 1.4;
    max-width: 100%;
}

.button-row[b-asu2ziyq5o] {
    display: flex;
    align-items: flex-start;
}

/* -------------------------------------------------------
   Summary
------------------------------------------------------- */

.summary-table[b-asu2ziyq5o] {
    width: 100%;
    border-collapse: collapse;
}

    .summary-table td[b-asu2ziyq5o] {
        padding: 6px 0;
    }

        .summary-table td:last-child[b-asu2ziyq5o] {
            text-align: right;
            font-weight: 600;
            white-space: nowrap;
        }

.space td[b-asu2ziyq5o] {
    height: 15px;
    border-top: 1px solid #ececec;
}

.summary-info[b-asu2ziyq5o] {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding: 14px;
    border-radius: 8px;
    background: #eef5ff;
    color: #2563eb;
    line-height: 1.4;
}

    .summary-info .k-svg-icon[b-asu2ziyq5o] {
        flex-shrink: 0;
    }

/* -------------------------------------------------------
   Primary button
------------------------------------------------------- */

.license-page[b-asu2ziyq5o]  .k-button-solid-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

    .license-page[b-asu2ziyq5o]  .k-button-solid-primary:hover {
        background-color: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
    }

/* -------------------------------------------------------
   Telerik NumericTextBox
------------------------------------------------------- */

.license-form-row[b-asu2ziyq5o]  .k-numerictextbox {
    max-width: 250px;
}


/* =======================================================
   TABLET
   ======================================================= */

@media (max-width: 1100px) {

    .license-page[b-asu2ziyq5o] {
        padding: 12px;
    }

        .license-page[b-asu2ziyq5o]  .k-card {
            padding: 20px;
        }

    /*
       Remove the vertical separators and turn the
       statistics into a 2-column layout.
    */
    .stats[b-asu2ziyq5o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .license-divider[b-asu2ziyq5o] {
        display: none;
    }

    .info[b-asu2ziyq5o] {
        grid-column: span 2;
        padding-top: 10px;
        border-top: 1px solid #ececec;
    }

    /*
       Bottom cards become one column a little earlier,
       preventing the summary from becoming too narrow.
    */
    .bottom-grid[b-asu2ziyq5o] {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   SMALL TABLET / LARGE PHONE
   ======================================================= */

@media (max-width: 700px) {

    .license-page[b-asu2ziyq5o] {
        padding: 10px;
    }

        .license-page[b-asu2ziyq5o]  .k-card {
            padding: 18px;
            border-radius: 10px !important;
        }

        .license-page h2[b-asu2ziyq5o] {
            font-size: 24px;
            margin-bottom: 6px;
        }

    .page-subtitle[b-asu2ziyq5o] {
        font-size: 14px;
        margin-bottom: 12px;
    }

    /*
       Statistics become a single column.
    */
    .stats[b-asu2ziyq5o] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .info[b-asu2ziyq5o] {
        grid-column: auto;
        padding-top: 20px;
    }

    .stat[b-asu2ziyq5o] {
        padding-bottom: 20px;
        border-bottom: 1px solid #ececec;
    }

        .stat:last-of-type[b-asu2ziyq5o] {
            border-bottom: none;
            padding-bottom: 0;
        }

    .value[b-asu2ziyq5o] {
        font-size: 36px;
    }

    .quarter[b-asu2ziyq5o] {
        margin-top: 15px;
        padding-top: 15px;
    }

    /*
       Make the numeric textbox use the available width.
    */
    .license-form-row[b-asu2ziyq5o]  .k-numerictextbox {
        width: 100% !important;
        max-width: none;
    }

    .text-danger[b-asu2ziyq5o] {
        font-size: 14px;
    }

    .effective-date[b-asu2ziyq5o] {
        font-size: 14px;
    }

    .button-row[b-asu2ziyq5o] {
        width: 100%;
    }

        .button-row[b-asu2ziyq5o]  .k-button {
            width: 100%;
        }

    .summary-info[b-asu2ziyq5o] {
        margin-top: 20px;
    }
}


/* =======================================================
   PHONE
   ======================================================= */

@media (max-width: 480px) {

    .license-page[b-asu2ziyq5o] {
        padding: 8px;
    }

        .license-page[b-asu2ziyq5o]  .k-card {
            padding: 15px;
        }

        .license-page h2[b-asu2ziyq5o] {
            font-size: 22px;
        }

    .card-title[b-asu2ziyq5o] {
        font-size: 15px;
    }

    .title[b-asu2ziyq5o] {
        font-size: 12px;
    }

    .value[b-asu2ziyq5o] {
        font-size: 32px;
    }

    .small[b-asu2ziyq5o] {
        font-size: 12px;
    }

    .info[b-asu2ziyq5o] {
        gap: 8px;
    }

    .info-title[b-asu2ziyq5o] {
        font-size: 14px;
    }

    /*
       Prevent the summary table from becoming cramped.
    */
    .summary-table td[b-asu2ziyq5o] {
        padding: 7px 0;
        font-size: 14px;
    }

        .summary-table td:last-child[b-asu2ziyq5o] {
            padding-left: 15px;
        }

    .summary-info[b-asu2ziyq5o] {
        font-size: 13px;
        padding: 12px;
    }
}
/* /Components/Pages/Stamgegevens/PortalUsers.razor.rz.scp.css */
.stamgegevens-content[b-ytzkub3w9l] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stam-page-header[b-ytzkub3w9l] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 18px 18px;
    border-bottom: 1px solid #edf0f3;
}

.stam-page-heading[b-ytzkub3w9l] {
    min-width: 0;
}

.portalUsers-grid-container[b-ytzkub3w9l] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.stam-title[b-ytzkub3w9l] {
    padding: 8px 0 15px 0;
    margin: 0;
    flex: 0 0 auto;
}

.stam-topbar[b-ytzkub3w9l] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    flex: 0 0 auto;
}

.stam-topbar__left[b-ytzkub3w9l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stam-filter[b-ytzkub3w9l] {
    display: grid;
    gap: 6px;
    max-width: 220px;
}

.stam-filter__label[b-ytzkub3w9l] {
    font-size: var(--font-xs, 12px);
    color: var(--txt-600, #666);
}

.stam-topbar-actions[b-ytzkub3w9l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portalUser-status[b-ytzkub3w9l] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.portalUser-status--active[b-ytzkub3w9l] {
    background: #e7f6ee;
    color: #28734a;
}

.portalUser-status--inactive[b-ytzkub3w9l] {
    background: #fdecec;
    color: #b42318;
}

.portalUser-form[b-ytzkub3w9l] {
    padding: 24px;
}

.portalUser-form-row[b-ytzkub3w9l] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

    .portalUser-form-row label[b-ytzkub3w9l] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.portalUser-dialog-actions[b-ytzkub3w9l] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}
/* /Components/Pages/Stamgegevens/Stamgegevens.razor.rz.scp.css */
.stamgegevens-layout[b-3rnv54i4y6] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns 420ms cubic-bezier(.22, 1, .36, 1);
    background-color: var(--color-gray-50);
}

    .stamgegevens-layout.is-collapsed[b-3rnv54i4y6] {
        grid-template-columns: 65px minmax(0, 1fr);
    }

.stamgegevens-sidebar[b-3rnv54i4y6] {
    padding-top: 1vh;
    overflow-y: auto;
    min-height: 0;
    border-right: 1px solid var(--color-gray-200);
    background-color: var(--white);
}


/* =======================================================
   MOBILE
   ======================================================= */

@media (max-width: 768px) {

    .stamgegevens-layout[b-3rnv54i4y6] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        overflow-x: hidden;
        overflow-y: auto;
        transition: none;
    }

    /*
       The sidebar becomes the top navigation.
    */
    .stamgegevens-sidebar[b-3rnv54i4y6] {
        width: 100%;
        padding-top: 0;
        overflow: hidden;
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
    }

    /*
       Don't allow the collapsed desktop state to
       create a 65px column on mobile.
    */
    .stamgegevens-layout.is-collapsed[b-3rnv54i4y6] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    /*
       Content takes the full width below the navigation.
    */
    .stamgegevens-content[b-3rnv54i4y6] {
        width: auto;
        min-width: 0;
        margin: 10px;
        padding: 12px;
        overflow: visible;
        border-radius: 10px;
    }
}
/* /Components/Pages/Stamgegevens/StamgegevensSidebar.razor.rz.scp.css */
.stam-nav[b-hjf7008gnr] {
    padding: 0 18px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

.stam-nav__header[b-hjf7008gnr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0 18px 0;
}

.stam-nav-header-title[b-hjf7008gnr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .stam-nav-header-title span[b-hjf7008gnr] {
        font-size: var(--fs-caption);
        color: var(--color-gray-500);
    }

    .stam-nav-header-title h3[b-hjf7008gnr] {
        margin: 0;
    }

/* -------------------------------------------------------
   Collapse button
------------------------------------------------------- */

.collapse-btn[b-hjf7008gnr] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .collapse-btn:hover[b-hjf7008gnr] {
        background: rgba(0, 0, 0, 0.05);
    }

.collapse-icon[b-hjf7008gnr] {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
    transform: rotate(180deg);
}

.stam-nav.is-collapsed .collapse-icon[b-hjf7008gnr] {
    transform: rotate(360deg);
}


/* -------------------------------------------------------
   Groups
------------------------------------------------------- */

.stam-nav__groups[b-hjf7008gnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-body-1);
    min-width: 0;
}

.stam-group[b-hjf7008gnr] {
    min-width: 0;
}

.stam-group__btn[b-hjf7008gnr] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--color-gray-700);
}

    .stam-group__btn.is-active-category[b-hjf7008gnr] {
        background: var(--color-gray-50);
        font-weight: 500;
        color: var(--color-gray-800);
    }

    .stam-group__btn:hover[b-hjf7008gnr] {
        background: var(--color-gray-100);
    }

.stam-group__left[b-hjf7008gnr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stam-group__label[b-hjf7008gnr] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
    opacity: 1;
    transform: translateX(0);
}

.stam-icoon[b-hjf7008gnr] {
    font-size: 16px;
    opacity: 0.85;
}

.stam-group__icon[b-hjf7008gnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.stam-svg[b-hjf7008gnr] {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: color 0.15s ease;
}


/* -------------------------------------------------------
   Submenu
------------------------------------------------------- */

.stam-sub[b-hjf7008gnr] {
    list-style: none;
    margin: 6px 0 2px 0;
    padding: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stam-sub__item[b-hjf7008gnr] {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--color-gray-600);
}

    .stam-sub__item:hover[b-hjf7008gnr] {
        background: var(--surface-hover, rgba(0, 0, 0, 0.04));
        color: var(--txt-900, #111);
    }

    .stam-sub__item.is-active[b-hjf7008gnr] {
        background: var(--color-selected-bg);
        color: var(--color-primary-700);
        font-weight: 500;
    }


/* -------------------------------------------------------
   Chevron
------------------------------------------------------- */

.stam-chevron[b-hjf7008gnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.stam-chevron__svg[b-hjf7008gnr] {
    width: 12px;
    height: 18px;
    fill: currentColor;
    transform: rotate(0deg);
    transition: transform 180ms ease;
}

.stam-group__btn.is-open .stam-chevron__svg[b-hjf7008gnr] {
    transform: rotate(-180deg);
}


/* -------------------------------------------------------
   Submenu animation
------------------------------------------------------- */

.stam-subwrap[b-hjf7008gnr] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 320ms cubic-bezier(.4, 0, .2, 1), opacity 220ms ease, transform 220ms ease;
}

    .stam-subwrap.is-open[b-hjf7008gnr] {
        max-height: 60vh;
        opacity: 1;
        transform: translateY(0);
    }


/* -------------------------------------------------------
   Collapsed desktop state
------------------------------------------------------- */

.stam-nav.is-collapsed .stam-group__btn[b-hjf7008gnr] {
    justify-content: center;
    padding: 10px 0;
}

.stam-nav.is-collapsed .stam-group__left[b-hjf7008gnr] {
    gap: 0;
}

.stam-nav.is-collapsed .stam-chevron[b-hjf7008gnr] {
    display: none;
}

.stam-nav.is-collapsed .stam-group__label[b-hjf7008gnr] {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
}

.stam-nav.is-collapsed .stam-group__icon[b-hjf7008gnr] {
    transform: translateX(1px);
}


/* -------------------------------------------------------
   Reduced motion
------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .stam-chevron__svg[b-hjf7008gnr],
    .stam-subwrap[b-hjf7008gnr],
    .stam-group__label[b-hjf7008gnr],
    .stam-group__icon[b-hjf7008gnr] {
        transition: none;
    }
}


/* =======================================================
   TABLET
   ======================================================= */

@media (max-width: 1100px) {

    .stam-nav[b-hjf7008gnr] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .stam-nav__header[b-hjf7008gnr] {
        padding-top: 8px;
        padding-bottom: 14px;
    }

    .stam-nav-header-title h3[b-hjf7008gnr] {
        font-size: 20px;
    }

    .stam-nav-header-title span[b-hjf7008gnr] {
        font-size: 12px;
    }

    .stam-group__btn[b-hjf7008gnr] {
        padding: 9px 8px;
    }

    .stam-group__left[b-hjf7008gnr] {
        gap: 8px;
    }
}


/* =======================================================
   MOBILE
   ======================================================= */

@media (max-width: 768px) {

    /*
       The Stamgegevens sidebar becomes a horizontal
       navigation bar.
    */
    .stam-nav[b-hjf7008gnr] {
        width: 100%;
        height: auto;
        padding: 0 12px;
        overflow: visible;
    }

    /*
       Header stays compact.
    */
    .stam-nav__header[b-hjf7008gnr] {
        padding: 10px 0 12px 0;
    }

    .stam-nav-header-title[b-hjf7008gnr] {
        gap: 2px;
    }

        .stam-nav-header-title h3[b-hjf7008gnr] {
            font-size: 20px;
        }

        .stam-nav-header-title span[b-hjf7008gnr] {
            font-size: 12px;
        }

    /*
       Horizontal scrolling category list.
    */
    .stam-nav__groups[b-hjf7008gnr] {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 10px 0;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    /*
       Each category keeps its natural width.
    */
    .stam-group[b-hjf7008gnr] {
        flex: 0 0 auto;
    }

    .stam-group__btn[b-hjf7008gnr] {
        width: auto;
        min-height: 38px;
        padding: 8px 14px;
        border-radius: 9px;
        white-space: nowrap;
    }

    .stam-group__left[b-hjf7008gnr] {
        gap: 7px;
    }

    .stam-group__label[b-hjf7008gnr] {
        white-space: nowrap;
    }

    /*
       Active item.
    */
    .stam-group__btn.is-active-category[b-hjf7008gnr] {
        background: var(--color-gray-50);
    }

    /*
       No collapsed behavior on mobile.
       The categories should always remain readable.
    */
    .stam-nav.is-collapsed .stam-group__btn[b-hjf7008gnr] {
        justify-content: center;
        padding: 8px 14px;
    }

    .stam-nav.is-collapsed .stam-group__left[b-hjf7008gnr] {
        gap: 7px;
    }

    .stam-nav.is-collapsed .stam-group__label[b-hjf7008gnr] {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .stam-nav.is-collapsed .stam-group__icon[b-hjf7008gnr] {
        transform: none;
    }

    /*
       Don't show the desktop collapse button.
    */
    .collapse-btn[b-hjf7008gnr] {
        display: none;
    }

    /*
       Submenus, if you use them, should appear below
       their category rather than causing horizontal
       overflow.
    */
    .stam-subwrap[b-hjf7008gnr] {
        position: absolute;
        z-index: 10;
        background: white;
    }
}


/* =======================================================
   SMALL PHONE
   ======================================================= */

@media (max-width: 480px) {

    .stam-nav[b-hjf7008gnr] {
        padding: 0 8px;
    }

    .stam-nav__header[b-hjf7008gnr] {
        padding: 8px 0 10px 0;
    }

    .stam-nav-header-title h3[b-hjf7008gnr] {
        font-size: 18px;
    }

    .stam-nav-header-title span[b-hjf7008gnr] {
        font-size: 11px;
    }

    .stam-nav__groups[b-hjf7008gnr] {
        gap: 5px;
        padding-bottom: 8px;
    }

    .stam-group__btn[b-hjf7008gnr] {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 13px;
    }
}
/* /Components/Pages/Stamgegevens/Vehicles.razor.rz.scp.css */
.stamgegevens-content[b-igzwnlwqwe] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stam-page-header[b-igzwnlwqwe] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 18px 18px;
    border-bottom: 1px solid #edf0f3;
}

.stam-page-heading[b-igzwnlwqwe] {
    min-width: 0;
}

.vehicles-grid-container[b-igzwnlwqwe] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
}

    .vehicles-grid-container[b-igzwnlwqwe]  .k-grid {
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
    }

.stam-title[b-igzwnlwqwe] {
    padding: 8px 0 15px 0;
    margin: 0;
    flex: 0 0 auto;
}

.stam-topbar[b-igzwnlwqwe] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    flex: 0 0 auto;
}

.stam-topbar__left[b-igzwnlwqwe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stam-filter[b-igzwnlwqwe] {
    display: grid;
    gap: 6px;
    max-width: 220px;
}

.stam-filter__label[b-igzwnlwqwe] {
    font-size: var(--font-xs, 12px);
    color: var(--txt-600, #666);
}

.stam-topbar-actions[b-igzwnlwqwe] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-status[b-igzwnlwqwe] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.vehicle-status--active[b-igzwnlwqwe] {
    background: #e7f6ee;
    color: #28734a;
}

.vehicle-status--inactive[b-igzwnlwqwe] {
    background: #fdecec;
    color: #b42318;
}

.vehicle-form[b-igzwnlwqwe] {
    padding: 24px;
}

.vehicle-form-row[b-igzwnlwqwe] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

    .vehicle-form-row label[b-igzwnlwqwe] {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

.vehicle-dialog-actions[b-igzwnlwqwe] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}
/* /Components/Pages/Taken.razor.rz.scp.css */
.task-page[b-vndair2x2z] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.task-topbar[b-vndair2x2z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
}

.task-title-block[b-vndair2x2z] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.task-title-icon[b-vndair2x2z] {
    color: #2563eb;
    font-size: 22px;
}

.task-title[b-vndair2x2z] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.task-subtitle[b-vndair2x2z] {
    font-size: 12px;
    color: #8a94a3;
}

.task-filters[b-vndair2x2z] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-left: auto;
    width: fit-content;
}

.task-field[b-vndair2x2z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-label[b-vndair2x2z] {
    font-size: 12px;
    color: var(--color-secondary-700);
}

.task-datetime[b-vndair2x2z] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.task-checkbox[b-vndair2x2z] {
    width: 30px;
    height: 30px;
}

.task-checkbox .k-checkbox[b-vndair2x2z] {
    width: 30px;
    height: 30px;
}

[b-vndair2x2z] .k-checkbox .task-checkbox {
    width: 30px;
    height: 30px;
}

.task-search-field[b-vndair2x2z] {
    min-width: 220px;
}

.task-load-btn[b-vndair2x2z] {
    height: 34px;
}

/* ---------------- Main area ---------------- */
.task-main[b-vndair2x2z] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 12px;
}

/* ---------------- Sidebar ---------------- */
.task-sidebar[b-vndair2x2z] {
    display: flex;
    flex-direction: column;
    width: 350px;
    min-width: 300px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
}

.task-search-row[b-vndair2x2z] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.task-search-box[b-vndair2x2z] {
    flex: 1;
}

.task-filter-btn[b-vndair2x2z] {
    flex-shrink: 0;
}

.task-filter-wrapper[b-vndair2x2z] {
    position: relative;
    flex-shrink: 0;
}

.task-filter-btn[b-vndair2x2z] {
    flex-shrink: 0;
}

.task-filter-panel[b-vndair2x2z] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 6;
}

.task-filter-option[b-vndair2x2z] {
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
}

    .task-filter-option:hover[b-vndair2x2z] {
        background: var(--white);
    }

    .task-filter-option.active[b-vndair2x2z] {
        background: var(--white);
        color: var(--color-secondary-700);
        font-weight: 600;
    }

.task-vehicle-list[b-vndair2x2z] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-sidebar-pane[b-vndair2x2z] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.k-splitter-pane[b-vndair2x2z] {
    min-height: 0;
}

.task-vehicle-item[b-vndair2x2z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .task-vehicle-item:hover[b-vndair2x2z] {
        background: var(--nav-bg);
    }

    .task-vehicle-item.task-selected[b-vndair2x2z] {
        background: var(--nav-bg);
        border-color: #2563eb;
    }

.task-status-dot[b-vndair2x2z] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-truck-icon[b-vndair2x2z] {
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
}

.task-vehicle-info[b-vndair2x2z] {
    flex: 1;
    min-width: 0;
}

.task-vehicle-name[b-vndair2x2z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.task-vehicle-type[b-vndair2x2z] {
    font-size: 11px;
    color: #9ca3af;
}

.task-vehicle-meta[b-vndair2x2z] {
    text-align: right;
}

.task-last-position-label[b-vndair2x2z] {
    font-size: 10px;
    color: #9ca3af;
}

.task-last-position-time[b-vndair2x2z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.task-pin-icon[b-vndair2x2z] {
    font-size: 16px;
    flex-shrink: 0;
}

/* status color mapping, shared by dot + pin icon */
.status-green[b-vndair2x2z] {
    background-color: #22c55e;
    color: #22c55e;
}

.status-red[b-vndair2x2z] {
    background-color: #ef4444;
    color: #ef4444;
}

/* ---------------- Map area (existing component slots in here) ---------------- */
.task-map-area[b-vndair2x2z] {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.task-grid-wrapper[b-vndair2x2z] {
    height: 100%;
    width: 100%;
}

/* Algemene grid styling */
.task-grid-wrapper .k-grid[b-vndair2x2z] {
    border-radius: 8px;
    overflow: hidden;
}

/* Header */
.task-grid-wrapper .k-grid-header[b-vndair2x2z] {
    
}

.task-grid-wrapper .k-grid-header th[b-vndair2x2z] {
    white-space: nowrap;
}

/* Datum */
.datum-cell[b-vndair2x2z] {
    font-weight: 500;
}

/* Chauffeur */
.chauffeur-cell[b-vndair2x2z] {
    font-weight: 500;
}

/* Adressen */
.adres-cell[b-vndair2x2z] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duur */
.duration-cell[b-vndair2x2z] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Activiteit badges */
.activiteit-badge[b-vndair2x2z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.activiteit-badge .k-icon[b-vndair2x2z] {
    font-size: 15px;
}

/* Ophalen */
.activity-ophalen[b-vndair2x2z] {
    background-color: #f1edff;
    color: #6941c6;
}

/* Aankomst */
.activity-aankomst[b-vndair2x2z] {
    background-color: #eaf8ee;
    color: #18864b;
}

/* Lossen */
.activity-lossen[b-vndair2x2z] {
    background-color: #eaf3ff;
    color: #1769aa;
}

/* Onbepaald */
.activity-onbepaald[b-vndair2x2z] {
    background-color: #fff4e5;
    color: #c76b00;
}

/* Inleveren */
.activity-inleveren[b-vndair2x2z] {
    background-color: #eef4ff;
    color: #3658a8;
}

/* Onbekende activiteit */
.activity-default[b-vndair2x2z] {
    background-color: #f1f2f4;
    color: #59636e;
}

[b-vndair2x2z] .k-editor-toolbar {
    display: none;
}

.readonly-questionnaire-editor .k-editor-toolbar[b-vndair2x2z] {
    display: none;
}

.readonly-questionnaire-editor .k-editor-content[b-vndair2x2z] {
    border-top: 1px solid var(--kendo-color-border);
}

.questionnaire-question[b-vndair2x2z] {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 15px;
}

.questionnaire-option[b-vndair2x2z] {
    margin-left: 20px;
    margin-top: 3px;
}

.questionnaire-type[b-vndair2x2z] {
    color: #777;
    font-size: 13px;
}

.questionnaire-next[b-vndair2x2z] {
    margin-left: 35px;
}

.questionnaire-arrow[b-vndair2x2z] {
    display: block;
    margin: 4px 0;
}

.questionnaire-end[b-vndair2x2z] {
    margin-left: 20px;
}

.questionnaire-loop[b-vndair2x2z] {
    margin-left: 20px;
    font-style: italic;
}

[b-vndair2x2z] .k-editor-content {
    font-family: var(--font-family-sans);
}

.my-editor .k-editor-content[b-vndair2x2z] {
    font-family: var(--font-family-sans);
}

    .my-editor .k-editor-content p[b-vndair2x2z] {
        font-family: var(--font-family-sans);
    }

    .my-editor .k-editor-content strong[b-vndair2x2z] {
        font-family: var(--font-family-sans);
    }

[b-vndair2x2z] .k-grid-toolbar.k-toolbar {
    display: flex !important;
}

.task-toolbar[b-vndair2x2z] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-toolbar-actions[b-vndair2x2z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-toolbar-filters[b-vndair2x2z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.task-filter-label[b-vndair2x2z] {
    font-weight: 600;
    margin-right: 4px;
}

.oo-status-chips-label[b-vndair2x2z] {
    margin-right: 4px;
    color: var(--color-secondary-700);
    font-size: var(--fs-body-3);
    font-weight: 500;
    white-space: nowrap;
}

.oo-status-chips[b-vndair2x2z] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0 0 14px;
}

.oo-status-chip[b-vndair2x2z] {
    min-width: 54px;
    height: 26px;
    padding: 0 13px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
    cursor: pointer;
}

    .oo-status-chip:hover[b-vndair2x2z] {
        color: var(--color-primary-700);
    }

    .oo-status-chip.is-selected[b-vndair2x2z] {
        border-color: var(--color-selected-border);
        background: var(--color-selected-bg);
        color: var(--color-primary-700);
        font-weight: 500;
    }

    .oo-status-chip:focus-visible[b-vndair2x2z] {
        outline: 2px solid var(--color-selected-border);
        outline-offset: 2px;
    }

.task-loading-overlay[b-vndair2x2z] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 100;
    backdrop-filter: blur(2px);
}

.task-loading-content[b-vndair2x2z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
}
/* /Components/Pages/TotpProcess.razor.rz.scp.css */
.totp-card[b-dq7pdvr85g] {
    color: var(--color-secondary-700);
}

.totp-icon[b-dq7pdvr85g] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef5ff;
    color: var(--color-primary-700);
    margin-bottom: 28px;
}

.totp-icon .material-symbols-rounded[b-dq7pdvr85g] {
    font-size: 28px;
}

.totp-intro[b-dq7pdvr85g] {
    margin-bottom: 32px;
}

    .totp-intro h1[b-dq7pdvr85g] {
        margin: 0 0 18px;
        color: var(--color-secondary-700);
        font-size: var(--fs-display-2);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
    }

.totp-intro h2[b-dq7pdvr85g] {
    margin: 0 0 14px;
    color: var(--color-gray-500);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.totp-intro p[b-dq7pdvr85g] {
    margin: 0 0 8px;
    color: var(--color-gray-500);
    font-size: 16px;
    line-height: 1.45;
}

.totp-card[b-dq7pdvr85g]  .totp-form {
    display: grid;
    gap: 24px;
}

.totp-inputs[b-dq7pdvr85g] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.totp-inputs[b-dq7pdvr85g]  .totp-digit-input {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 64px;
    border: 1px solid #d3dceb;
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-secondary-700);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.totp-inputs[b-dq7pdvr85g]  .totp-digit-input:focus {
    border-color: var(--color-primary-700);
    box-shadow: 0 0 0 3px rgba(35, 103, 232, 0.14);
}

.totp-help[b-dq7pdvr85g] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dce5f5;
    border-radius: 8px;
    background: #f7faff;
    font-size: var(--fs-body-3);
    line-height: 1.35;
    padding: 13px 16px;
    color: var(--color-primary-700);
}

    .totp-help .k-svg-icon > svg[b-dq7pdvr85g] {
        fill: var(--color-primary-700);
    }

    .totp-help span[b-dq7pdvr85g] {
        color: var(--color-gray-500);
    }

.totp-help strong[b-dq7pdvr85g] {
    color: var(--color-primary-700);
}

.totp-error[b-dq7pdvr85g] {
    border-radius: 10px;
    background: #fff1f1;
    color: #bd1f1f;
    font-size: var(--fs-body-3);
    line-height: 1.35;
    padding: 12px 14px;
}

.totp-verify-button[b-dq7pdvr85g],
.totp-regenerate-button[b-dq7pdvr85g] {
    width: 100%;
    height: 54px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--fs-body-1);
    font-weight: 600;
    line-height: 1;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.totp-verify-button[b-dq7pdvr85g] {
    border: 0;
    background: var(--color-primary-700);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.totp-verify-button[b-dq7pdvr85g]  .k-svg-icon:last-child {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
}

.totp-verify-button:hover[b-dq7pdvr85g] {
    background: var(--color-primary-500);
}

.totp-regenerate-button[b-dq7pdvr85g] {
    margin-top: 14px;
    border: 1px solid #8896b5;
    background: #ffffff;
    color: var(--color-secondary-700);
}

.totp-regenerate-button:hover[b-dq7pdvr85g] {
    border-color: var(--color-primary-700);
    color: var(--color-primary-700);
}

.totp-verify-button:active[b-dq7pdvr85g],
.totp-regenerate-button:active[b-dq7pdvr85g] {
    transform: translateY(1px);
}

@media (max-width: 1440px) {
    .totp-icon[b-dq7pdvr85g] { 
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .totp-icon[b-dq7pdvr85g] {
        margin-top: 20px;
    }

    .totp-intro h1[b-dq7pdvr85g] {
        font-size: 28px;
    }

    .totp-inputs[b-dq7pdvr85g] {
        gap: 8px;
    }

    .totp-inputs[b-dq7pdvr85g]  .totp-digit-input {
        min-height: 46px;
        border-radius: 8px;
        font-size: 22px;
    }

    .totp-help[b-dq7pdvr85g] {
        align-items: flex-start;
    }
}

@keyframes totp-shake-b-dq7pdvr85g {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-4px);
    }

    40%, 60% {
        transform: translateX(4px);
    }
}

.totp-shake[b-dq7pdvr85g] {
    animation: totp-shake-b-dq7pdvr85g 0.4s;
}
/* /Components/Pages/Urenverantwoording.razor.rz.scp.css */
.vr-page[b-27oo9c8zkx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.vr-topbar[b-27oo9c8zkx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 14px 20px;
}

.vr-title-block[b-27oo9c8zkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.vr-title-icon[b-27oo9c8zkx] {
    color: #2563eb;
    font-size: 22px;
}

.vr-title[b-27oo9c8zkx] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-secondary-700);
    line-height: 1.2;
}

.vr-subtitle[b-27oo9c8zkx] {
    font-size: 12px;
    color: #8a94a3;
}

.vr-filters[b-27oo9c8zkx] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}

.vr-field[b-27oo9c8zkx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vr-label[b-27oo9c8zkx] {
    font-size: 12px;
    color: var(--color-secondary-700);
}

.vr-datetime[b-27oo9c8zkx] {
    display: flex;
    gap: 6px;
}

.vr-load-btn[b-27oo9c8zkx] {
    height: 34px;
}

/* ---------------- Main area ---------------- */
.vr-main[b-27oo9c8zkx] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 12px;
}

/* ---------------- Sidebar ---------------- */
.vr-sidebar[b-27oo9c8zkx] {
    display: flex;
    flex-direction: column;
    width: 350px;
    min-width: 300px;
    height: 100%;
    min-height: 0;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
}

.vr-search-row[b-27oo9c8zkx] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.vr-search-box[b-27oo9c8zkx] {
    flex: 1;
}

.vr-filter-btn[b-27oo9c8zkx] {
    flex-shrink: 0;
}

.vr-filter-wrapper[b-27oo9c8zkx] {
    position: relative;
    flex-shrink: 0;
}

.vr-filter-btn[b-27oo9c8zkx] {
    flex-shrink: 0;
}

.vr-filter-panel[b-27oo9c8zkx] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 6;
}

.vr-filter-option[b-27oo9c8zkx] {
    text-align: left;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
}

    .vr-filter-option:hover[b-27oo9c8zkx] {
        background: var(--white);
    }

    .vr-filter-option.active[b-27oo9c8zkx] {
        background: var(--white);
        color: var(--color-secondary-700);
        font-weight: 600;
    }

.vr-vehicle-list[b-27oo9c8zkx] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-sidebar-pane[b-27oo9c8zkx] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.k-splitter-pane[b-27oo9c8zkx] {
    min-height: 0;
}

.vr-vehicle-item[b-27oo9c8zkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .vr-vehicle-item:hover[b-27oo9c8zkx] {
        background: var(--nav-bg);
    }

    .vr-vehicle-item.vr-selected[b-27oo9c8zkx] {
        background: var(--nav-bg);
        border-color: #2563eb;
    }

.vr-status-dot[b-27oo9c8zkx] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vr-truck-icon[b-27oo9c8zkx] {
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
}

.vr-vehicle-info[b-27oo9c8zkx] {
    flex: 1;
    min-width: 0;
}

.vr-vehicle-name[b-27oo9c8zkx] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.vr-vehicle-type[b-27oo9c8zkx] {
    font-size: 11px;
    color: #9ca3af;
}

.vr-vehicle-meta[b-27oo9c8zkx] {
    text-align: right;
}

.vr-last-position-label[b-27oo9c8zkx] {
    font-size: 10px;
    color: #9ca3af;
}

.vr-last-position-time[b-27oo9c8zkx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary-700);
}

.vr-pin-icon[b-27oo9c8zkx] {
    font-size: 16px;
    flex-shrink: 0;
}

/* status color mapping, shared by dot + pin icon */
.status-green[b-27oo9c8zkx] {
    background-color: #22c55e;
    color: #22c55e;
}

.status-red[b-27oo9c8zkx] {
    background-color: #ef4444;
    color: #ef4444;
}

/* ---------------- Map area (existing component slots in here) ---------------- */
.vr-map-area[b-27oo9c8zkx] {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.uren-grid-wrapper[b-27oo9c8zkx] {
    height: 100%;
    width: 100%;
    position: relative;
}

    /* Algemene grid styling */
    .uren-grid-wrapper .k-grid[b-27oo9c8zkx] {
        border-radius: 8px;
        overflow: hidden;
    }

    /* Header */
    .uren-grid-wrapper .k-grid-header[b-27oo9c8zkx] {
        font-weight: 600;
    }

        .uren-grid-wrapper .k-grid-header th[b-27oo9c8zkx] {
            white-space: nowrap;
        }

/* Datum */
.datum-cell[b-27oo9c8zkx] {
    font-weight: 500;
}

/* Chauffeur */
.chauffeur-cell[b-27oo9c8zkx] {
    font-weight: 500;
}

/* Adressen */
.adres-cell[b-27oo9c8zkx] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duur */
.duration-cell[b-27oo9c8zkx] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Activiteit badges */
.activiteit-badge[b-27oo9c8zkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

    .activiteit-badge .k-icon[b-27oo9c8zkx] {
        font-size: 15px;
    }

/* Ophalen */
.activity-ophalen[b-27oo9c8zkx] {
    background-color: #f1edff;
    color: #6941c6;
}

/* Aankomst */
.activity-aankomst[b-27oo9c8zkx] {
    background-color: #eaf8ee;
    color: #18864b;
}

/* Lossen */
.activity-lossen[b-27oo9c8zkx] {
    background-color: #eaf3ff;
    color: #1769aa;
}

/* Onbepaald */
.activity-onbepaald[b-27oo9c8zkx] {
    background-color: #fff4e5;
    color: #c76b00;
}

/* Inleveren */
.activity-inleveren[b-27oo9c8zkx] {
    background-color: #eef4ff;
    color: #3658a8;
}

/* Onbekende activiteit */
.activity-default[b-27oo9c8zkx] {
    background-color: #f1f2f4;
    color: #59636e;
}

.uren-loading-overlay[b-27oo9c8zkx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 100;
    backdrop-filter: blur(2px);
}

.uren-loading-content[b-27oo9c8zkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
}
/* /Components/SmallComponents/MainLogin.razor.rz.scp.css */
.login-page[b-mul40a58f0] {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--color-gray-50);
    color: var(--color-secondary-700);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.5vw, 20px);
    font-family: Arial, Helvetica, sans-serif;
}

.login-shell[b-mul40a58f0] {
    width: min(100%, 1540px);
    min-height: min(88vh, 820px);
    display: grid;
    grid-template-columns: minmax(520px, 0.92fr) minmax(520px, 1fr);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.login-story[b-mul40a58f0] {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background: #eaf2ff;
}

    .login-story[b-mul40a58f0]::after {
        content: "";
        position: absolute;
        inset: 0;
        /*    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 247, 255, 0.84) 47%, rgba(214, 230, 250, 0.28) 72%, rgba(10, 49, 112, 0.25) 100%);*/
        pointer-events: none;
    }

.login-story-image[b-mul40a58f0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-story-content[b-mul40a58f0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-brand[b-mul40a58f0] {
    position: absolute;
    top: 55px;
    left: 65px;
    display: flex;
    align-items: center;
    z-index: 10;
}

    .login-brand img[b-mul40a58f0] {
        height: 65px;
        width: auto;
        object-fit: contain;
        display: block;
    }

.login-product-badge[b-mul40a58f0] {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 55px;
    border-radius: 10px;
    background: rgba(222, 235, 255, 0.92);
    color: var(--color-primary-700);
    font-size: var(--fs-body-3);
    font-weight: 700;
    line-height: 1;
    padding: 10px 16px;
}

.login-story-copy[b-mul40a58f0] {
    max-width: 520px;
    margin-top: 24px;
}

    .login-story-copy h2[b-mul40a58f0] {
        margin: 0;
        color: #06143d;
        font-size: var(--fs-display-3);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
    }

        .login-story-copy h2 span[b-mul40a58f0] {
            color: var(--color-primary-700);
        }

    .login-story-copy p[b-mul40a58f0] {
        max-width: 470px;
        margin: 26px 0 0;
        color: #435277;
        font-size: 17px;
        line-height: 1.55;
    }

.login-content[b-mul40a58f0] {
    margin-left: -20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: clamp(42px, 6vw, 90px);
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

    .login-content[b-mul40a58f0]  .login-form-card,
    .login-content[b-mul40a58f0]  .totp-card {
        width: min(100%, 560px);
    }

.login-content-header[b-mul40a58f0] {
    position: absolute;
    top: clamp(32px, 4vw, 58px);
    left: clamp(32px, 4vw, 58px);
    right: clamp(32px, 4vw, 58px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.login-mobile-brand[b-mul40a58f0] {
    display: none;
    align-items: center;
}

    .login-mobile-brand img[b-mul40a58f0] {
        width: auto;
        height: 44px;
        max-width: 180px;
        object-fit: contain;
    }

.login-language[b-mul40a58f0] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--color-gray-100);
    border-radius: 10px;
    background: #ffffff;
    color: var(--color-secondary-700);
    font-size: var(--fs-body-3);
    font-weight: 600;
    padding: 0 14px;
}

    .login-language .material-symbols-rounded[b-mul40a58f0] {
        font-size: 18px;
    }

    .login-language span[b-mul40a58f0] {
        padding-right: 5px;
    }

.login-footer[b-mul40a58f0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
    line-height: 1.35;
    padding: 22px 12px 0;
    text-align: center;
}

    .login-footer a[b-mul40a58f0] {
        color: var(--color-gray-500);
        text-decoration: none;
    }

        .login-footer a:hover[b-mul40a58f0] {
            color: var(--color-primary-700);
            text-decoration: underline;
        }

@media (max-width: 1140px) {
    .login-page[b-mul40a58f0] {
        position: relative;
        background: url("Images/elipsonlinebg.png") center / cover no-repeat;
    }

    .login-shell[b-mul40a58f0] {
        position: relative;
        z-index: 1;
        width: min(100%, 620px);
        min-height: auto;
        display: block;
    }

    .login-story[b-mul40a58f0] {
        display: none;
    }

    .login-content[b-mul40a58f0] {
        margin-left: 0;
        box-shadow: none;
        min-height: auto;
        padding: 88px 34px 46px;
        background: rgba(255, 255, 255, 0.94);
    }

    .login-content-header[b-mul40a58f0] {
        justify-content: space-between;
    }

    .login-mobile-brand[b-mul40a58f0] {
        display: flex;
    }

    .login-footer[b-mul40a58f0] {
        color: white;
    }

        .login-footer a[b-mul40a58f0] {
            color: white;
        }
}

@media (max-width: 600px) {
    .login-page[b-mul40a58f0] {
        justify-content: flex-start;
        padding: 18px;
        background-position: center bottom;
    }

    .login-shell[b-mul40a58f0] {
        width: 100%;
        min-height: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .login-content[b-mul40a58f0] {
        min-height: auto;
        align-items: flex-start;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 36px rgba(20, 38, 76, 0.16);
        padding: 84px 22px 34px;
    }

    .login-content-header[b-mul40a58f0] {
        top: 24px;
        right: 22px;
        left: 22px;
    }

    .login-mobile-brand img[b-mul40a58f0] {
        height: 38px;
        max-width: 150px;
    }

    .login-language[b-mul40a58f0] {
        height: 40px;
    }

    .login-footer[b-mul40a58f0] {
        display: none;
    }
}

[b-mul40a58f0] .k-checkbox {
    border-color: #07244a3d;
}