/* Importing Google Fonts - INTER */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* =========================================
     COLORS
    ========================================= */
    /* Primary */
    --color-primary-700: #0095DA;
    --color-primary-500: #36A5D9;
    --color-primary-300: #8EC5DF;
    --color-primary-50: #F2F7FF;
    --color-secondary-700: #07244A;
    /* Selected */
    --color-selected-bg: #F3F7FD;
    --color-selected-border: #97BCF1;
    /* Gray */
    --color-gray-900: #18181B;
    --color-gray-800: #27272A;
    --color-gray-700: #3F3F46;
    --color-gray-600: #52525B;
    --color-gray-500: #71717A;
    --color-gray-400: #A1A1AA;
    --color-gray-300: #D4D4D8;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #F4F4F5;
    --color-gray-50: #FAFAFA;
    --color-white: #FFFFFF;
    /* Succes (green) */
    --color-success-700: #047857;
    --color-success-500: #10B981;
    --color-success-300: #6EE7B7;
    --color-success-50: #ECF9F1;
    /* Danger (red) */
    --color-danger-700: #BE123C;
    --color-danger-500: #F43F5E;
    --color-danger-300: #FDA4AF;
    --color-danger-50: #FDF0F1;
    /* =========================================
     FONTS
    ========================================= */
    --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    /* Line heights (as multipliers) */
    --lh-tight: 1.15;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    /* Letter spacing */
    --ls-tight: -0.01em;
    --ls-normal: 0em;
    --ls-wide: 0.01em;
    /* Type scale (responsive) */
    --fs-caption: clamp(0.75rem, 0.7327rem + 0.0851vw, 0.8125rem); /* ~12–13px */
    --fs-body-3: clamp(0.8125rem, 0.7656rem + 0.125vw, 0.875rem); /* ~13–14px */
    --fs-body-2-5: clamp(0.84375rem, 0.22vw + 0.79rem, 0.90625rem); /* ~13.5–14.5px */
    --fs-body-2: clamp(0.875rem, 0.25vw + 0.82rem, 0.95rem); /* ~14–15px */
    --fs-body-1: clamp(0.95rem, 0.3vw + 0.9rem, 1rem); /* ~15–16px */

    --fs-h5: clamp(1rem, 0.9654rem + 0.1702vw, 1.125rem); /* ~16–18px */
    --fs-h4: clamp(1.125rem, 0.5vw + 1.05rem, 1.25rem); /* ~18–20px */
    --fs-h3: clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem); /* ~20–24px */
    --fs-h2: clamp(1.5rem, 0.9vw + 1.25rem, 1.75rem); /* ~24–28px */
    --fs-h1: clamp(1.75rem, 1.1vw + 1.4rem, 2rem); /* ~28–32px */

    --fs-display-3: clamp(2rem, 1.6vw + 1.6rem, 2.5rem); /* ~32–40px */
    --fs-display-2: clamp(2.5rem, 2.2vw + 2rem, 3.25rem); /* ~40–52px */
    --fs-display-1: clamp(3.25rem, 3vw + 2.6rem, 4.5rem); /* ~52–72px */
    /* =========================================
     SPACING
    ========================================= */
    --space-0: 0px;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 96px;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Inter", serif;
}

body {
    min-height: 100vh;
    background: white;
    margin: 0;
    overflow: hidden;
}

html, body {
    height: 100%;
    font-family: var(--font-family-sans);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: var(--ls-normal);
}

main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Alleen article scrollt */
article.content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 !important;
}

.page-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-login {
    padding-left: -1rem !important;
}

.page {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-products {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* barbar container */
.hover-sidebar {
    position: fixed;
    top: 41px;
    left: 0;
    height: 100%;
    width: fit-content !important;
    background-color: #d0c1c1; /* transparant zwart */
    overflow-x: hidden;
    transition: width 0.3s ease;
    z-index: 9999;
}

    /* Open bij hover */
    .hover-sidebar:hover {
        width: 250px;
        background-color: #258cfb;
    }

    /* Nav items */
    .hover-sidebar nav {
        display: flex;
        flex-direction: column;
        padding-top: 60px;
    }

    .hover-sidebar .nav-link {
        color: white;
        padding: 12px 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color 0.2s;
    }

        .hover-sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .hover-sidebar .nav-link span {
            margin-right: 10px;
        }

    /* Pictogrammen blijven altijd zichtbaar, tekst alleen bij hover */
    .hover-sidebar:not(:hover) .nav-link label {
        display: none;
    }

    /*main {
    margin-left: 100px;
    transition: margin-left 0.5s ease;
}*/

    /*.hover-sidebar:hover ~ main {
    margin-left: 250px;
}
*/
    /* Alleen tekst tonen bij hover op sidebar */
    .hover-sidebar .nav-text {
        display: none;
    }

    .hover-sidebar:hover .nav-text {
        display: inline;
    }


/*.custom-width {
    width: 90% !important;
}
*/
.custom-link {
    color: white !important;
}

.hover-sidebar.collapsed {
    width: fit-content !important;
    background-color: #d0c1c1;
}

.hover-sidebar.expanded {
    width: fit-content !important;
    background-color: #258cfb;
    transition: width 0.2s ease, background-color 0.1s ease;
}

.nav-text {
    opacity: 0;
    transition: opacity 0.1s ease;
}

.hover-sidebar.expanded .nav-text {
    opacity: 1;
}


.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-products {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

.icon-logo {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}

/* Verberg alleen het pijltje (caret) van het profielmenu */
.dxbl-menu-item.no-caret .dxbl-menu-dropdown-toggle {
    display: none !important;
}

/* Verberg dropdown-toggle icoon (het pijltje) alleen bij profielmenu */
.dxbl-menu-item:has(.bi-person-circle) .dxbl-menu-dropdown-toggle {
    display: none !important;
}

.sidebar-menu {
    padding: 1rem;
}

.categorie-title {
    font-weight: bold;
    cursor: pointer;
    margin-top: 0.5rem;
}

.submenu {
    list-style: none;
    padding-left: 1.5rem;
}

.submenu-item {
    cursor: pointer;
    padding: 2px 0;
}

/* Zorg dat het menu links of boven duidelijk afsteekt */
.rz-navigation-menu, .rz-menu {
    background-color: #2C3E50;
    color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Menu-items */
.rz-menu-item {
    padding: 8px 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    /* Hover-effecten */
    .rz-menu-item:hover {
        background-color: #34495E;
        color: #ECF0F1;
    }

/* Actieve menu-item highlight */
.rz-menu-item-active {
    background-color: #1ABC9C;
    color: white;
}

/* Iconen binnen menu */
.rz-menu-item-icon {
    color: #ECF0F1;
    margin-right: 6px;
}

.menu-dark {
    background-color: #0000004c !important;
    color: white !important;
}

.menu-light {
    background-color: #f4f4f4 !important;
    color: black !important;
}

.form-footer {
}

/*.activity-item {
    cursor: move;
    user-select: none;
}

    .activity-item:hover {
        background-color: #f1f1f1;
    }*/

.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-products {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Sidebar container */
.hover-sidebar {
    position: fixed;
    top: 41px;
    left: 0;
    height: 100%;
    width: fit-content !important;
    background-color: #d0c1c1; /* transparant zwart */
    overflow-x: hidden;
    transition: width 0.3s ease;
    z-index: 1000;
}

    /* Open bij hover */
    .hover-sidebar:hover {
        width: 250px;
        background-color: #258cfb;
    }

    /* Nav items */
    .hover-sidebar nav {
        display: flex;
        flex-direction: column;
        padding-top: 60px;
    }

    .hover-sidebar .nav-link {
        color: white;
        padding: 12px 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color 0.2s;
    }

        .hover-sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .hover-sidebar .nav-link span {
            margin-right: 10px;
        }

    /* Pictogrammen blijven altijd zichtbaar, tekst alleen bij hover */
    .hover-sidebar:not(:hover) .nav-link label {
        display: none;
    }

    /*main {
    margin-left: 100px;
    transition: margin-left 0.5s ease;
}*/

    /*.hover-sidebar:hover ~ main {
    margin-left: 250px;
}
*/
    /* Alleen tekst tonen bij hover op sidebar */
    .hover-sidebar .nav-text {
        display: none;
    }

    .hover-sidebar:hover .nav-text {
        display: inline;
    }


/*.custom-width {
    width: 90% !important;
}
*/
.custom-link {
    color: white !important;
}

.hover-sidebar.collapsed {
    width: fit-content !important;
    background-color: #d0c1c1;
}

.hover-sidebar.expanded {
    width: fit-content !important;
    background-color: #258cfb;
    transition: width 0.2s ease, background-color 0.1s ease;
}

.nav-text {
    opacity: 0;
    transition: opacity 0.1s ease;
}

.hover-sidebar.expanded .nav-text {
    opacity: 1;
}


.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-products {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

.icon-logo {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}

/* Verberg alleen het pijltje (caret) van het profielmenu */
.dxbl-menu-item.no-caret .dxbl-menu-dropdown-toggle {
    display: none !important;
}

/* Verberg dropdown-toggle icoon (het pijltje) alleen bij profielmenu */
.dxbl-menu-item:has(.bi-person-circle) .dxbl-menu-dropdown-toggle {
    display: none !important;
}

.stamgegevens-layout {
    height: 100%;
}

/*.sidebar {
    margin-top: 1vh;
    min-width: 300px !important;
    transition: width 0.3s ease;
    background: #f8f9fa;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    overflow-x: hidden;
    height: 90vh;
    overflow-y: auto;
}*/

/* Ingeklapte staat */
/*.sidebar.collapsed {
        margin-top: 1vh;
        min-width: 50px !important;*/ /* of 0 als je het helemaal wil verbergen */
/*width: 50px !important;
        background-color: transparent !important;
        border: none;
    }*/

/* Toggle-knop */
.toggle-btn {
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-bottom: 10px;
}

.sidebar-menu {
    padding: 1rem;
}

.categorie-title {
    font-weight: bold;
    cursor: pointer;
    margin-top: 0.5rem;
}

.submenu {
    list-style: none;
    padding-left: 1.5rem;
}

.submenu-item {
    cursor: pointer;
    padding: 2px 0;
}

/* Zorg dat het menu links of boven duidelijk afsteekt */
.rz-navigation-menu, .rz-menu {
    background-color: #2C3E50; /* Donkerblauw/grijs */
    color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Menu-items */
.rz-menu-item {
    padding: 8px 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    /* Hover-effecten */
    .rz-menu-item:hover {
        background-color: #34495E;
        color: #ECF0F1;
    }

/* Actieve menu-item highlight */
.rz-menu-item-active {
    background-color: #1ABC9C;
    color: white;
}

/* Iconen binnen menu */
.rz-menu-item-icon {
    color: #ECF0F1;
    margin-right: 6px;
}

.menu-dark {
    background-color: #0000004c !important;
    color: white !important;
}

.menu-light {
    background-color: #f4f4f4 !important;
    color: black !important;
}

.form-footer {
}

/*.activity-item {
    cursor: move;
    user-select: none;
}*/
/* Overschrijf cursor op inputvelden binnen dat item */
/*.activity-item input,
    .activity-item select,
    .activity-item .rz-dropdown,
    .activity-item .rz-calendar {
        cursor: auto !important;
    }
    .activity-item:hover {
        background-color: #f1f1f1;
    }*/

.invalid-field {
    border: 1px solid red;
}

input:focus, textarea:focus, .rz-inputtext:focus {
    background-color: #e6f7ff !important;
    transition: background-color 0.2s ease-in-out;
}

.invalid-field {
    border: 1px solid red;
}

input:focus, textarea:focus, .rz-inputtext:focus {
    background-color: #FCFCFC !important;
    transition: background-color 0.2s ease-in-out;
}

/* Globaal voor slepen via .drag-handle */
.dragging *,
.dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}


.standardInput {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.largeInputField {
    width: 100%;
}

.mediumInputField {
    width: 65%;
}

.standardInputField {
    width: 50%;
    margin-left: auto;
}

.standardInputField60 {
    width: 60%;
    margin-left: auto;
}


.smallerInputField {
    width: 40%;
}


.containerInboekOptionalElements {
    min-height: 240px;
    max-height: 240px;
    min-width: 150px;
    max-width: 150px;
    overflow-x: auto;
    overflow-y: auto;
}

.containerInboekOptionalElementItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.input-error-containerformat {
    outline: none !important;
    border-color: red;
    border: 2px solid red !important;
    background-color: #ffe6e6; /* optioneel licht rood */
}

.rz-navigation-menu {
    z-index: 9999 !important;
}

.textaligncenterdateinput {
    text-align: center;
}

.badge-container {
    position: relative;
    display: inline-block;
}

.badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    line-height: 1;
}

.data-grid-container {
    position: relative;
}

.data-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* Higher than elements below */
}

/* Zorgt dat deze specifieke dialog altijd vooraan staat */
.rz-dialog-wrapper.custom-dialog {
    z-index: 2147483647 !important;
}

.rz-tabview-panels {
    overflow: hidden !important;
}

.command-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    height: 48px;
    border-bottom: 1px solid #ddd;
    background-color: var(--rz-surface);
}

.divider-report {
    width: 1px;
    height: 100%;
    background-color: #ccc;
}


/* voor Preview van rapportages.*/

.ReportContent {
    height: 100%;
    overflow: hidden !important; /* the iframe handles the height and scrollbar, no need to use second scrollbar here.*/
}

.ReportContentEmail {
    height: 100%;
}

.email-popup-container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.email-form {
    width: 30%;
    padding: 20px;
}

.email-details {
    margin-bottom: 20px;
}

    .email-details label {
        display: block;
        margin-bottom: 5px;
    }

    .email-details input,
    #body {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }

.email-body textarea {
    height: 20vh !important;
}

.email-bodysub textarea {
    height: 10vh !important;
}

.pdf-preview {
    width: 70%; /* Adjust to take more space */
    height: 300%;
    padding: 20px;
}

.send-email {
    text-align: left;
}

    .send-email .rz-button {
    }

.attachments-table {
    width: 100%;
    margin-bottom: 20px;
}

    .attachments-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .attachments-table th, .attachments-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }


.totp-inputs {
    display: flex;
    justify-content: center;
    margin: 40px 0px;
}

.totp-digit-input {
    width: 60px;
    height: 50px;
    margin: 0 5px;
    text-align: center;
    font-size: 1.2em;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* Login Screen */
.login-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}

    .login-screen .imgBx {
        position: relative;
        width: 50%;
        height: 100%;
        margin-left: -1rem;
    }

.imgBx img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    object-fit: cover;
}

.contentBx {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

    .contentBx .formBx {
        width: 50%
    }

        .contentBx .formBx .logo {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }

            .contentBx .formBx .logo img {
                width: 50%
            }

        .contentBx .formBx h2 {
            color: black;
            font-weight: 600;
            font-size: 1.5em;
            text-transform: uppercase;
            margin-bottom: 20px;
            border-bottom: 4px solid #0095da;
            display: inline-block;
            letter-spacing: 1px;
        }

        .contentBx .formBx .inputBx {
            margin-bottom: 20px;
        }

            .contentBx .formBx .inputBx span {
                font-size: 16px;
                margin-bottom: 5px;
                display: inline-block;
                color: black;
                font-weight: 300;
                letter-spacing: 1px;
            }

            .contentBx .formBx .inputBx input {
                width: 100%;
                padding: 10px 20px;
                outline: none;
                font-weight: 400;
                border: 1px solid #607d8b;
                font-size: 16px;
                letter-spacing: 1px;
                color: #607d8b;
                background: transparent;
                border-radius: 5px;
            }

            .contentBx .formBx .inputBx button {
                width: 100%;
                padding: 10px 20px;
                font-size: 16px;
                letter-spacing: 1px;
                border-radius: 5px;
                background: #00496D;
                color: #fff;
                outline: none;
                border: none;
                font-weight: 600;
                cursor: pointer;
            }

                .contentBx .formBx .inputBx button:hover {
                    background: black;
                }

        .contentBx .formBx .remember label {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: #607d8b;
            font-weight: 400;
            font-size: 14px;
        }

            .contentBx .formBx .remember label p {
                margin: 0px 10px;
            }

        .contentBx .formBx .remember input[type=checkbox] {
            accent-color: #00496D;
        }



.qr-code-img {
    width: 250px;
    height: 250px;
    display: block;
    margin: 0 auto 20px;
}


.verify-button {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 5px;
    background: #00496D;
    color: #fff;
    outline: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.regenerate-button {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 5px;
    background: white;
    color: black;
    outline: none;
    border: 1px solid black;
    font-weight: 400;
    cursor: pointer;
}

    .verify-button:hover, .regenerate-button:hover {
        background-color: #0056b3;
    }

.LogOutPopupDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.LogOutPopupP {
    font-weight: 500;
    padding: 20px 0px 20px 0px;
}

.LogOutPopupButton {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
    margin: auto;
    margin-bottom: 20px;
}

.progress-blue .rz-progressbar-value {
    background: #2196F3 !important;
}

.progress-orange .rz-progressbar-value {
    background: #c3dd40 !important;
}

.progress-green .rz-progressbar-value {
    background: #4CAF50 !important;
}



/* DIT IS VOOR DE CONTEXT MENU VAN GRIDS -- ContextMenuItems renderen als navigation-menu */
.rz-context-menu .rz-navigation-item {
    position: relative;
}

    /* Alleen de SUBmenu's (ul binnen een li) naar rechts laten uitklappen */
    .rz-context-menu .rz-navigation-item > ul.rz-navigation-menu {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-left: 1px;
        z-index: 100000;
    }

/* Disabled ritregel in afkoppelen popup */
.ritregelPopup-disabled {
    opacity: 0.4;
    background-color: #f5f5f5 !important;
    color: #999;
}

    .ritregelPopup-disabled td {
        cursor: not-allowed;
    }

.rz-spinnerPlanning {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    animation: rz-spinPlanning 0.8s linear infinite;
}

@keyframes rz-spinPlanning {
    to {
        transform: rotate(360deg);
    }
}


/* Sticky pager onderaan MudDataGrid */
.mud-data-grid .mud-table-pagination {
    position: sticky;
    bottom: 0;
    z-index: 99999;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}

/* Zorg dat content niet over pager heen scrollt */
.mud-data-grid .mud-table-pagination {
    padding-bottom: 56px; /* hoogte van pager */
}


/* Alle grid kolommen minimale breedte */
.k-grid th,
.k-grid td {
    min-width: 100px;
}

/* Header iets breder */
.k-grid th {
    min-width: 100px;
    font-weight: 600;
}

.k-header k-touch-action-none k-filterable k-table-th {
    min-width: 100px;
}

/* Header cells */
.k-table-th {
    min-width: 170px !important;
    font-weight: 600;
}

/* Data cells */
.k-table-td {
    min-width: 150px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Verberg group drop panel */
/*.k-grouping-header {
    display: none !important;
}
*/


/* Verwijder spacing die het achterlaat */
.k-grid-grouping-header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.k-grid-toolbar {
    padding: 4px 6px !important;
    min-height: unset !important;
}

.grid-toolbar-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grid-search-compact {
    max-width: 220px;
}

/* Header spacing */
.k-grid-header {
    margin-top: 0 !important;
}

.k-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Filter row compact */
.k-filter-row th {
    padding: 2px 4px !important;
}

/* === Toolbar container === */
.grid-toolbar-row {
    display: flex;
    align-items: center;
    flex-direction: row;
}
/* Container */
.search-settings-container {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}



/* Toolbar row */
.grid-toolbar-row {
    display: flex;
    align-items: center;
}

/* === Kill empty Telerik toolbar === */
.k-grid-toolbar.k-toolbar {
    display: none !important;
}

    /* === Als je toolbar WEL content heeft (bijv search/settings) === */
    .k-grid-toolbar.k-toolbar:has(*) {
        display: flex !important;
    }

/* Default toolbar hidden */
.k-grid-toolbar.k-toolbar {
    display: none !important;
}

    /* Alleen tonen als er echte content is */
    .k-grid-toolbar.k-toolbar .grid-toolbar-row {
        display: flex;
    }

    .k-grid-toolbar.k-toolbar:has(.grid-toolbar-row) {
        display: flex !important;
    }

.settingButtonGrid {
    border-bottom: 1px solid gray !important;
}

.searchBarGrid {
    width: inherit;
}

.column-panel {
    margin-bottom: 3px;
}



.fake-progress-wrapper {
    position: relative;
    height: 6px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0;
}

.fake-progress-bar {
    height: 100%;
    background: linear-gradient( 90deg, #3b82f6, #06b6d4, #3b82f6 );
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
    transition: width 0.2s ease;
}

.fake-progress-text {
    position: absolute;
    right: 6px;
    top: -16px;
    font-size: 10px;
    color: #3b82f6;
    font-weight: 600;
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.planning-toolbar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
}

.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toolbar-divider {
    width: 1px;
    background: #ccc;
    margin: 0 6px;
}


.planning-header-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 8px;
    background: #fafafa;
}

    .planning-header-row.locked {
        border-bottom: 2px solid darkorange;
        border-top: 1px solid darkorange;
    }

.planning-header-hover-zone {
    position: relative;
    height: 20px;
    z-index: 100
}


.planning-header-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    opacity: 0.5;
    pointer-events: none
}


.planning-header-teaser {
    font-weight: 550;
    font-size: 16px;
    color: orangered;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
    background-color: transparent;
    margin-top: -5px;
}

:root {
    --app-header-offset: 85px; /* hoogte top-nav + command-bar */
    --planning-toolbar-height: 110px; /* pas aan indien nodig */
}

.floating-header {
    position: fixed;
    top: var(--app-header-offset);
    left: 0;
    right: 0;
    background: var(--rz-base-background-color, #fff);
    border-bottom: 1px solid #ddd;
    z-index: 999;
    transform: translateY(calc(-100% - var(--app-header-offset)));
    transition: transform 0.25s ease;
}

    .planning-header-hover-zone:hover ~ .floating-header,
    .floating-header:hover,
    .floating-header:focus-within,
    .floating-header.locked {
        transform: translateY(0);
    }



.planning-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.planning-header-toolbar {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
}

.planning-page.with-planning-toolbar {
    padding-top: var(--planning-toolbar-height);
}


/* Drag and drop planning scherm nieuw*/

.drag-handle {
    cursor: grab;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.planning-drop-zone {
    height: 100%;
    width: 100%;
    inset: 0;
    z-index: 9999;
}




.planning-drop-row {
    width: 100%;
    height: 100%;
}

    .planning-drop-row:hover {
        outline: 2px dashed darkorange;
        background: rgba(255,140,0,0.08);
    }


.planning-grid-container {
    position: relative;
    height: 100%;
}

.planning-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: transparent;
    /* default: grid blijft klikbaar */
    pointer-events: none;
}

    /* alleen tijdens drag actief */
    .planning-drop-overlay.active {
        pointer-events: auto;
    }

.move-date-dialog {
    padding: 18px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    justify-self: center;
}

.move-date-buttons {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cm-item {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.cm-shortcut {
    opacity: 0.6;
    font-size: 11px;
}



/*SENA*/
/* SIDEBAR */
.sidebar {
    width: 200px;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: width 0.3s ease, transform 0.3s ease;
    color: var(--color-gray-600);
    z-index: 9999;
}

    .sidebar.collapsed {
        /*        width: 60px;*/
        width: 50px;
    }

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        transform: translateX(-100%);
        z-index: 1500;
    }

        .sidebar:not(.collapsed) {
            transform: translateX(0);
        }
}

.sidebar-menu-button {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
}

@media (max-width:768px) {
    .sidebar-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }
}

.sidebar-nav .nav-item .nav-link {
    color: var(--gray-600);
    display: flex;
    gap: 12px;
    white-space: nowrap;
    padding: 7px 10px;
    margin: 3px 3px;
    align-items: center;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.4s ease;
    cursor: pointer;
}

    .sidebar-nav .nav-item .nav-link.active {
        background-color: #0095DA !important;
        color: white !important;
        fill: white!important;
    }

    .sidebar-nav .nav-item .nav-link.active svg {
        fill: white!important;
    }

.sidebar-main.collapsed .nav-item .nav-link {
    padding: 7px 5px;
}

.sidebar-nav .nav-item:is(:hover, .open) > .nav-link:not(.drop-title) {
    color: #0095DA;
    background-color: #EFF7FB;
}

.sidebar-nav .nav-link :where(.nav-label, .drop-icon) {
    transition: opacity 0.3s ease;
}

.sidebar-main.collapsed .nav-link :where(.nav-label, .drop-icon) {
    opacity: 0;
    pointer-events: none;
}

.sidebar-nav .nav-item .drop-link.active {
    background-color: rgba(0, 149, 218, 0.10) !important;
    color: #0095DA !important;
}

.drop-menu .drop-link.active svg {
    fill: currentColor;
}

.drop-toggle.is-parent-active {
    background-color: #0095DA !important;
    color: white !important;
    cursor: pointer;
}

    .drop-toggle.is-parent-active svg {
        fill: currentColor;
    }

.sidebar-main.collapsed .nav-item .drop-link {
    padding: 7px 15px;
}


/* =========================================
     BUTTONS
========================================= */
/* Button: classic white */
.btn {
    font-weight: 500;
    font-size: var(--fs-body-3);
    border-radius: 5px;
    padding: 6px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}

    .btn .k-button-text,
    .btn .k-button-content {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .btn:hover {
        background-color: var(--color-gray-50);
        box-shadow: none;
        border: solid 1px var(--color-gray-200);
    }

.btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.btn-icon-primary svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: var(--color-primary-700);
}

.btn-icon-small svg {
    width: 16px;
    height: 16px;
    display: block;
}

.btn-small {
    padding: 6px 7px;
}

/* ===== Variants ===== */
.btn-white {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-800);
}

    .btn-white:hover {
        background: var(--color-gray-50);
    }

/* Primary */
.btn-primary {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: var(--color-white);
}

    .btn-primary:hover {
        background: var(--color-primary-500);
        border-color: var(--color-primary-500);
        color: var(--color-white);
    }

.btn--noborder {
    border: none;
}

    .btn--noborder:hover {
        border: none;
    }

    .btn--noborder:focus {
        border: none !important;
    }

.btn-danger {
    color: var(--color-danger-700);
}

.btn-danger-fill {
    background-color: var(--color-danger-700);
    color: white;
}

.btn-danger-fill:hover {
    background-color: var(--color-danger-500);
    color: white;
}

.btn-succes {
    color: var(--color-success-700);
}

.btn-succes-fill {
    color: white;
    background-color: var(--color-success-500);
}

    .btn-succes-fill:hover {
        color: white;
        background-color: var(--color-success-700);
    }

.btn-info {
    color: var(--color-primary-700);
}

.btn-gray {
    background-color: var(--color-gray-50);
}

    .btn-gray:hover {
        background-color: var(--color-gray-100);
    }

/* Button: Profile */
.btn-profile {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--color-primary-700);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--fs-body-3);
}

    .btn-profile:hover {
        filter: brightness(0.97);
        box-shadow: none;
    }

.k-button-solid-base:focus:hover {
    outline: none;
    box-shadow: none;
}

    .k-button-solid-base:focus:hover:active {
        outline: none;
        box-shadow: none;
    }

.k-button-solid-base:focus {
    outline: none;
    box-shadow: none;
}

.k-button:focus {
    border: solid 1px var(--color-gray-100);
}

.k-button-solid:focus {
    border: solid 1px var(--color-gray-100);
    box-shadow: none;
}

.btn-full {
    width: 100%;
    justify-content: flex-start;
}

.btn-lg {
    padding: 5px 8px;
}

.k-button:active {
    box-shadow: none !important;
}

.k-button:focus,
.k-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/*.k-button.k-icon-button .k-button-icon.k-svg-icon > svg, .k-button.k-icon-button .k-button-icon.k-icon-md > svg, .k-button.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg, .k-button.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg {
    width: 18px;
    height: 18px;
}*/


/* ===== Popup / Dropdown Surface (reusable) ===== */
.ui-popup {
    min-width: 220px;
    background: var(--color-white);
    margin-top: 8px;
    margin-right: 12px;
}

.k-popup {
    box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 6px;
    border-radius: 5px;
}

.popup-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
}


/* ===== Text styles (reusable) ===== */
h5 {
    font-size: var(--fs-h5);
    color: var(--color-secondary-700);
    font-weight: 500;
    margin: 0;
}

h4 {
    font-size: var(--fs-h4);
    color: var(--color-secondary-700);
    font-weight: 500;
}

h3 {
    font-size: var(--fs-h3);
    color: var(--color-secondary-700);
    font-weight: 500;
}

h6 {
    font-size: var(--fs-body-1);
    color: var(--color-secondary-700);
    font-weight: 500;
    margin: 0;
}

.txt-body {
    font-size: var(--fs-body-2);
    font-weight: 500;
}

.txt-body-2 {
    font-size: var(--fs-body-2);
    font-weight: 400;
}

.txt-body-3 {
    font-size: var(--fs-body-3);
    font-weight: 400;
}

.txt-bold {
    font-size: var(--fs-body-2);
    font-weight: 700;
}

.txt-bold-grid {
    font-weight: 600;
    color: var(--color-secondary-700);
}

.txt-primary-grid {
    color: var(--color-primary-700);
}

.txt-muted {
    font-size: var(--fs-caption);
    font-weight: 400;
    color: var(--color-gray-500);
}

.txt-label {
    font-size: var(--fs-body-2);
    font-weight: 600;
    color: var(--color-gray-700);
    line-height: 1.1;
}

.txt-label-sm {
    font-size: var(--fs-body-2);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.1;
}

.txt-caption {
    font-size: var(--fs-body-2) !important;
    color: var(--color-gray-700);
}

.txt-description {
    font-size: var(--fs-body-3) !important;
    color: var(--color-gray-500);
    font-weight: 400;
}

.txt-primary {
    font-size: var(--fs-caption);
    font-weight: 400;
    color: var(--color-primary-700);
}

.txt-secondary {
    font-size: var(--fs-body-3);
    color: var(--color-secondary-700);
}

.txt-checkbox {
    margin-left: 5px;
}

.txt-checkbox-xl {
    font-size: var(--fs-body-2-5);
    font-weight: 450;
}

p { 
    font-size: var(--fs-body-2);
}

.txt-window-title {
    color: var(--color-secondary-700);
    font-weight: 550;
}

/* ===== Layout helpers ===== */
.flex-stack {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.gap-2 {
    gap: var(--space-2) !important;
}

.gap-3 {
    gap: var(--space-3) !important;
}

.gap-4 {
    gap: var(--space-4) !important;
}

.gap-5 {
    gap: var(--space-5) !important;
}

.divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: var(--space-) 0;
}

.flex-1 {
    flex: 1;
}

.align-start {
    align-items: start;
}

.form-grid {
    display: grid;
    gap: var(--space-3);
}

.form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid--1 {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .form-grid--2 {
        grid-template-columns: 1fr;
    }
}


/* ===== Dropdown styling ===== */
.ui-dd {
    width: 100%;
    border: 1px solid var(--color-gray-200);
    border-radius: 5px;
}

    .ui-dd:focus {
        width: 100%;
        border: 1px solid var(--color-gray-200);
        border-radius: 5px;
    }

/*.k-list-ul {
    border: 1px solid var(--color-gray-200);
}

.k-picker-solid {
    border: 1px solid var(--color-gray-200);
}

    .k-picker-solid.k-focus {
        border: 1px solid var(--color-gray-200);
    }
    */


.ui-dd__label {
    font-size: var(--fs-caption);
    color: var(--color-gray-500);
    margin-bottom: -5px;
}

.rz-dropdown-panel {
    z-index: 199999 !important;
}

.rz-notification {
    z-index: 9999999 !important;
}

.rz-dialog-wrapper, .rz-dialog-side {
    z-index: 10004 !important;
}

/* ===== Breadcrumbs ===== */
.ui-breadcrumb {
    font-size: var(--fs-body-2);
}

/* ===== Dialog ===== */
.k-dialog-titlebar {
    border-bottom: 1px solid var(--color-gray-200);
    padding: 15px 20px;
}

.k-dialog-content {
    padding: 24px;
}

.k-window-content:first-child, .k-window-content:last-child {
    padding-block: 24px;
}

.k-window {
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    /*    border: 1px solid var(--color-gray-200);*/
    outline: 1px solid var(--color-gray-200);
}

    .k-window:focus {
        border-radius: 5px;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.08);
        border: none;
    }

.k-window-actions {
    border-color: var(--color-gray-200) !important;
}

/* ===== Window Action Bar ===== */
.bottom-actionbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.bottom-actionbar__left,
.bottom-actionbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bottom-actionbar__right {
    margin-left: auto;
    justify-content: flex-end;
}

/* ===== Checkbox ===== */
.rz-chkbox-box {
    border-color: var(--color-gray-200);
    border-radius: 4px;
    border-width: 1px;
    background-color: var(--color-white);
}

    .rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) {
        background-color: var(--color-primary-700);
    }

.checkbox-panel {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

/* ===== Dropdown ===== */
.rz-dropdown {
    border-radius: 5px;
    height: 2.4rem;
    background-color: white;
    font-size: var(--fs-body-2);
}

/* ===== Radzen Dialog ===== */
.rz-dialog {
    border-radius: 15px;
}

.rz-dialog-side {
    border-radius: 15px 0 0 15px;
}

.rz-dialog-content {
    padding: 1.35rem;
}

.rz-dialog-titlebar, .rz-dialog-side-titlebar {
    background-color: white;
    border-bottom: 1px solid var(--color-gray-200);
    padding: 15px 20px;
}

.rz-dialog-title, rz-dialog-side-title {
    font-size: var(--fs-h4);
    font-weight: 600;
}

.dialog-body-full {
    height: calc(100vh - 120px);
    min-height: 0;
    padding: 0;
}

/* ===== Confirm dialog ===== */
.confirm-dialog-body {
    padding: 20px;
    font-size: var(--fs-body-2);
    line-height: 1.5;
}

.confirm-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.confirm-dialog-title-icon {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.confirm-dialog-title-icon svg {
    width: 15px;
    height: 15px;
}

.confirm-dialog-title-icon--confirm {
    background-color: var(--color-primary-50);
}

.confirm-dialog-title-icon--confirm svg,
.confirm-dialog-title-icon--confirm svg path {
    fill: var(--color-primary-700);
}

.confirm-dialog-title-icon--info {
    background-color: #FEF3C7;
}

.confirm-dialog-title-icon--info svg,
.confirm-dialog-title-icon--info svg path {
    fill: #B45309;
}

.confirm-dialog-title-icon--danger {
    background-color: var(--color-danger-50);
}

.confirm-dialog-title-icon--danger svg,
.confirm-dialog-title-icon--danger svg path {
    fill: var(--color-danger-700);
}

.confirm-dialog-button--info {
    color: #422006;
    background-color: #F59E0B;
    border-color: #F59E0B;
}

.confirm-dialog-button--info:hover {
    color: #422006;
    background-color: #FBBF24;
    border-color: #FBBF24;
}

/* ===== Overige modification ===== */
.valid.modified:not([type=checkbox]) {
    outline: none !important;
}

.rz-timespanpicker > .rz-inputtext, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox, .comboac-input-color {
    font-size: var(--fs-body-2) !important;
}

.rz-datepicker-popup-container {
    z-index: 10004 !important;
}

/* ===== Telerik Window ===== */
.k-window:focus {
    outline: 1px solid var(--color-gray-300);
}

.k-window-title, .rz-dialog-side-title {
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--color-secondary-700);
}

.k-window-titlebar {
    border-radius: 15px 15px 0px 0px;
    border-bottom: 1px solid var(--color-gray-200);
    align-items: first baseline;
    /*    padding: 10px 25px 10px;*/
    background-color: white;
}

.k-window-titlebar-actions {
    margin-block: 0;
}

.window-titlebar {
    display: flex;
    flex-direction: column;
    gap:5px;
    align-items: flex-start;
    text-decoration: none;
    width: 50%;
}

.window-breadcrumb {
    font-size: var(--fs-caption);
    color: var(--color-primary-700);
    font-weight: 400;
    text-decoration: none;
}

.win-title {
    color: var(--color-secondary-700);
    font-weight: 500;
}

.window-breadcrumb:hover {
    color: var(--color-primary-500);
}

a:hover {
    color: var(--color-primary-700);
}

.form-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 10px 0 -5px 0;
}

.k-window-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px;
}

.afstand-model-window .k-window-content {
    background: var(--color-gray-50);
}

.dialog-body {
    max-height: calc(100vh - 100px);
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 10px;
    background-color: var(--color-gray-50);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-right: 5px;
}

.rz-dialog-side-content {
    padding: 15px 25px;
}

.centered-window {
    transform: translate(-50%, -50%);
}

/* ===== Telerik Input Textbox ===== */
.k-input, .k-input-value-text {
    font-size: var(--fs-body-2);
    color: var(--color-gray-800);
}

.k-chip-label {
    font-size: var(--fs-body-2);
    color: var(--color-secondary-700);
}

.k-input {
    border-color: var(--color-gray-200);
}

/* ===== Telerik Checkbox ===== */
.k-checkbox {
    margin-left: 2px;
}

    .k-checkbox::after {
        width: 14px;
        height: 14px;
    }

    .k-checkbox:checked, .k-checkbox:checked:focus {
        background-color: var(--color-primary-700) !important;
    }

/* ===== Validatie ===== */
.req {
    color: var(--color-danger-500);
    font-weight: 700;
    margin-left: 4px;
}

.validation-message {
    font-size: var(--fs-caption);
    color: var(--color-danger-700);
}

/* ===== Telerik Picker ===== */
.k-picker {
    background-color: white;
    font-size: var(--fs-body-2);
}

    .k-picker:focus-within, .k-picker.k-picker-solid:focus-within {
        border: none;
        background-color: white;
    }

.k-list-item.k-selected, .k-selected.k-list-optionlabel, .k-list-custom-value.k-selected {
    background-color: var(--color-gray-50);
}

/* ===== Bijlages ===== */
.attachment-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-100);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.attachment-item__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .attachment-item__icon img {
        width: 32px;
        height: 32px;
        object-fit: contain;
        display: block;
    }

.attachment-item__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-item__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.attachment-item__bodytext {
    font-size: var(--fs-body-3);
    font-weight: 500;
    color: var(--color-gray-700);
}

@media (max-width: 576px) {
    .attachment-item {
        gap: 12px;
        padding: 12px 12px;
    }

    .attachment-item__path {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
    }
}

.attachment-box .k-upload .k-upload-files {
    max-height: 215px;
}

.k-upload .k-upload-files {
    max-height: 500px;
}

.attachment-empty {
    display: flex;
    flex-direction: column;
    justify-items: center;
    gap: 0;
    height: auto;
    align-items: center;
    margin: auto;
    text-align: center;
    color: #637095;
}

.attachment-empty__visual {
    width: 150px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .attachment-empty__visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.attachment-empty__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.attachment-empty__title {
    font-size: var(--fs-body-2);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-secondary-700);
    margin: 5px 0;
}

.attachment-empty__description {
    max-width: 250px;
    font-size: var(--fs-caption);
    line-height: 1.45;
    color: var(--color-gray-400);
}

.attachment-max-height .attachment-box .k-upload .k-upload-files {
    max-height: auto!important;
}

/* ===== Telerik Dropzone ===== */
.k-dropzone-inner {
    background-color: var(--color-gray-50);
    border-radius: 10px;
    border: 2px dashed var(--color-gray-200);
}

.k-upload {
    border: none;
}

    .k-upload .k-dropzone {
        border: 1px dashed var(--color-gray-200);
        background-color: var(--color-gray-50);
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .k-upload .k-upload-files, .k-upload .k-file {
        border: none !important;
    }

        .k-upload .k-upload-files .k-file {
            padding: 0px;
            margin: 10px 0;
            background-color: white;
        }

    .k-upload .k-upload-button {
        /*        background-color: var(--color-primary-700);*/
        background-color: white;
        color: var(--color-secondary-700);
        font-size: var(--fs-caption);
        padding: 5px 15px;
    }

    .k-upload .k-dropzone .k-dropzone-hint, .k-upload .k-upload-dropzone .k-dropzone-hint {
        font-size: var(--fs-caption);
        padding: 5px 15px;
        color: var(--color-secondary-700);
    }

    .k-upload .k-file.k-focus {
        box-shadow: inset 0 0 0 3px var(--color-gray-600, rgba(0, 0, 0, 0.16));
        border-radius: 10px;
    }

/* ===== Telerik Tooltip ===== */
.k-tooltip {
    background: white;
    color: var(--color-gray-600);
}

    .k-tooltip .k-callout {
        color: white;
    }

/* ===== Telerik MultiSelect ===== */
/*.k-chip {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: 20px;
    font-size: var(--fs-body-2);
}

.k-chip-action .k-svg-icon > svg {
    fill: var(--color-gray-400);
}*/

.k-chip {
    background: color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 8%, #fff);
    border: 1px solid var(--kendo-color-primary, #0d6efd);
    border-radius: 20px;
    font-size: var(--fs-body-2);
    color: var(--color-gray-700);
}

.k-chip-action .k-svg-icon > svg {
    fill: var(--kendo-color-primary, #0d6efd);
}

.move-date-dialog {
    padding: 18px;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* ⭐ verticaal netjes */
    align-items: center; /* ⭐ horizontaal center */
    gap: 14px;
    justify-self: center;
}

.move-date-buttons {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.cm-item {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.cm-shortcut {
    opacity: 0.6;
    font-size: 11px;
}


.planningCircleYellow {
    color: #e6b800;
}

.planningCircleRed {
    color: red;
}

.planningCircleGreen {
    color: green;
}

.planningFlagYellow {
    color: #e6b800;
}

.planningFlagRed {
    color: red;
}

.planningFlagGreen {
    color: green;
}

.planningIconCell {
    display: flex;
    justify-content: center; /* horizontaal */
    align-items: center; /* verticaal */
    width: 100%;
    height: 100%;
}

.wa-icon-square {
    width: 32px;
    height: 32px;
    background-color: #25D366; /* officiële WhatsApp groen */
    border-radius: 6px; /* licht afgerond */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-icon-white {
    color: white;
    width: 18px;
    height: 18px;
}

.rz-dropdown-panel {
    z-index: 9999999 !important;
}

.rz-notification {
    z-index: 999999 !important;
}

.rz-dialog-wrapper {
    z-index: 999999 !important;
}

.combo-popup-active .k-input,
.combo-popup-active .k-picker,
.combo-popup-active .k-multicolumncombobox {
    background-color: #F6F9FF !important;
}

.combo-popup-active .k-input-inner {
    background-color: transparent !important;
}

.combo-popup-active .k-input:hover,
.combo-popup-active .k-picker:hover,
.combo-popup-active .k-input:focus-within,
.combo-popup-active .k-picker:focus-within {
    background-color: #F6F9FF !important;
}

/* ===== Telerik Context Menu ===== */
.k-menu-group .k-menu-link,
.k-menu-group.k-menu-group-md .k-menu-link {
    padding-block: var(--kendo-spacing-2, 0.5rem);
    padding-inline: var(--kendo-spacing-3, 0.75rem);
    padding-inline-end: calc(var(--kendo-spacing-3, 0.75rem) * 2 + 16px);
}

.k-menu-group .k-item:focus > .k-link, .k-menu-group .k-item.k-focus > .k-link, .k-menu.k-context-menu .k-item:focus > .k-link, .k-menu.k-context-menu .k-item.k-focus > .k-link, .k-menu-group .k-menu-item:focus, .k-menu-group .k-menu-item.k-focus, .k-context-menu .k-menu-item:focus, .k-context-menu .k-menu-item.k-focus {
    outline: none;
    box-shadow: none;
    border: none;
}

/* ===== Telerik Dialog Window ===== */
.k-dialog-content {
    padding: 24px !important;
    font-size: var(--fs-body-2);
}

.k-dialog-wrapper .k-dialog {
    max-width: auto;
}

/*.k-dialog-wrapper .k-dialog {
    max-width: 600px;
}*/


.k-dialog-title {
    margin-top: 1px;
}

/* ===== Telerik Grid ===== */
.k-grid td, .k-grid .k-table-td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-inactive {
    background-color: #f5f5f5 !important;
    color: #999;
}

/* ===== Telerik Grid Toolbox ===== */
.tlbx {
    display: flex;
    justify-content: end;
}

.gb-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px 7px 10px;
    border-bottom: 1px solid var(--color-gray-200);
}

.gb-title-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 15px;
}

@media (max-width: 800px) {
    .gb-title-flex {
        flex-direction: column;
        justify-content: start;
        gap: 8px;
    }
}

.gb-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px 0 0px;
}

.gb-title-icon  {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary-50);
    border-radius: 555px;
    width: 25px;
    height: 25px;
}

.gb-title-icon svg  {
    width: 13px;
    height: 13px;
    fill: var(--color-primary-700);
}

.gb-toolbar__left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.gb-crumb {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: all 0.15s ease;
}

    .gb-crumb:hover {
        color: #111827;
    }

.gb-crumb--active {
    color: var(--color-primary-700) !important;
    text-decoration: underline !important;
}

.gb-crumb-sep {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1;
}

.gb-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gb-btn {
    height: 30px;
    padding: 0 6px !important;
    border-radius: 5px !important;
    font-size: var(--fs-body-3);
    font-weight: 500;
    box-shadow: none !important;
    transition: all 0.15s ease;
}

    .gb-btn .k-button-icon,
    .gb-btn .k-icon,
    .gb-btn .k-svg-icon {
        margin-right: 6px;
    }

.gb-btn--ghost {
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

    .gb-btn--ghost:hover {
        background: #f9fafb !important;
        border-color: #d1d5db !important;
        color: #111827 !important;
    }

    .gb-btn--ghost:disabled,
    .gb-btn--ghost.k-disabled {
        background: #fff !important;
        color: #9ca3af !important;
        border-color: #eceff3 !important;
        opacity: 1 !important;
    }

.gb-btn--soft {
    background: #f9fafb !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

    .gb-btn--soft:hover {
        background: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }

.gb-btn .k-button-icon, .gb-btn .k-icon, .gb-btn .k-svg-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.gb-toolbar__search {
    width: 100%;
}

    .gb-toolbar__search .k-input {
        font-size: var(--fs-body-3) !important;
    }

.gb-column-wrapper {
    position: relative;
}

.gb-column-popover {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    font-size: var(--fs-body-2);
}

.gb-column-title {
    font-size: var(--fs-body-2);
    font-weight: 400;
    color: var(--color-gray-500);
    margin-bottom: -5px;
}

.gb-column-label {
    font-size: var(--fs-body-2);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: 5px;
}

.gb-btn-icon {
    padding: 5px 0px 5px 5px !important;
}

.gb-divider {
    margin: 0px 5px;
}

/* ===== Facturatie NAV ===== */
.fac-section-nav-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: white;
    border-bottom: 1px solid var(--color-gray-200);
    padding: 0 16px;
}

.fac-section-title {
    margin: 0;
    white-space: nowrap;
    font-size: var(--fs-body-3);
    font-weight: 350;
    color: var(--color-gray-400);
}

.fac-section-nav-separator {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .fac-section-nav-separator svg {
        width: 14px;
        height: 14px;
    }

    .fac-section-nav-separator path {
        fill: none;
        stroke: #9aa0a6;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.fac-section-nav {
    display: flex;
    align-items: stretch;
    gap: 3rem;
    min-height: 30px;
    flex: 0 0 auto;
}

.fac-section-nav__item {
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding: 0 0.25rem;
    color: #5f6368;
    text-align: center;
    text-decoration: none;
    font-size: var(--fs-body-3);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
}

    .fac-section-nav__item:hover {
        color: #202124;
        text-decoration: none;
        border-bottom-color: #1697e6;
    }

    .fac-section-nav__item.active {
        color: #1697e6;
        border-bottom-color: #1697e6;
    }

/* ===== Planning Verkenner NAV ===== */

.pv-block,
.pv-block-3,
.pv-block-4 {
    width: 100%;
    min-width: 0;
}

.pv-button-row--stretch {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

    .pv-button-row--stretch .k-button,
    .pv-button-row--stretch .pv-stretch-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        justify-content: center;
        padding: 5px;
    }

    .pv-button-row--stretch .k-button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.nav-tabstrip .k-tabstrip-items-wrapper {
    background-color: var(--color-gray-100);
}

/* ===== Planning Verkenner Tabstrips and Grid  ===== */
.main-pane-section .k-tabstrip-content {
    padding: 0px;
}

.grid-modif .k-grid {
    border-top: none;
}

.main-pane .k-splitter {
    border-top: none;
}

/* ===== Telerik Splitter ===== */
.k-splitter {
    border: none;
}

/*.nested-splitter-host .k-splitbar {
    background-color: white;
}*/

/* ===== Telerik SVG ===== */
.k-svg-icon {
    width: 17px;
    height: 17px;
}

/* ===== Content Nav ===== */
.content-nav__button {
    width: 100%;
    text-align: left !important;
    align-items: flex-start;
    justify-content: start;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-body-3);
    font-weight: 500;
    color: var(--color-gray-800);
    position: relative;
    transition: all 0.15s ease;
}

    .content-nav__button:hover {
        background: var(--color-gray-100);
    }

    .content-nav__button.is-active {
        background: white;
        color: var(--color-primary-700);
        font-weight: 600;
        border-left: 2px solid var(--color-primary-700);
    }

.content-stepper {
    padding: 0px 0px 0px 20px;
}

    .content-stepper .k-step-link {
        background-color: white !important;
        border-radius: 5px;
        border: 1px solid var(--color-gray-200);
        padding: 5px;
        margin-left: 5px;
    }

.k-stepper .k-step-label .k-step-text {
    max-width: 100%;
    cursor: pointer;
}

.k-stepper .k-step-current .k-step-label{
    font-weight: 650;
}
/* ===== Order Detail page ===== */
.detail-tabstrip .k-tabstrip-content, .k-tabstrip > .k-content {
    padding: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}
/*
.top-content {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}*/

.grid-noborder {
    border: none;
}

.grid-rounded {
    border-radius: 5px;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 3px;
}

.grid-roundborder {
    border-radius: 5px;
    border: 1px solid var(--color-gray-200);
}

.grid-border-y {
    border-left: none;
    border-right: none;
}

/* ===== Order Overzicht page ===== */
.unpinned-tab {
    width: 30px;
    background-color: white;
}

.unpinned-tab__text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: 5px 2px !important;
    font-size: var(--fs-body-3);
}

/* ===== Container inboek page - Form ===== */
.container-inboek-form.k-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.container-inboek-form .k-form-fieldset,
.container-inboek-form .k-form-legend {
    margin: 0;
    padding: 0;
}

.container-inboek-form .k-form-buttons {
    display: none;
}

.activity-order {
    text-align: center;
    background-color: var(--color-gray-100);
    font-weight: 500;
}

/* ===== Badge with counting filters or bijlagen etc ===== */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 50px;
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 12px;
    font-weight: 600;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 50px;
    background-color: var(--color-primary-700);
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.grid-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1;
    margin-left: 5px;
}

.grid-count-badge--empty {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
}

.grid-count-badge--active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* ===== Container inboeken - Lading toevoegen form ===== */
.lading-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background-color: var(--color-gray-50);
    border-radius: 0;
}

    .lading-form,
    .lading-form ::deep form {
        height: 100%;
        min-height: 0;
    }

        .lading-form ::deep form {
            display: flex;
            flex-direction: column;
        }

.lading-window .k-window-content {
    padding: 0;
    border-radius: 15px;
}

.activity-details-window .k-window-content {
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.tabstrip-nopadding .k-tabstrip-content {
    padding-block: 0;
    padding-inline: 0;
    height: 100%;
}


.factuurregel-form,
.factuurregel-form.k-form,
factuurregel-form .k-form-fieldset {
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.factuurregel-window .k-window-content {
    display: flex;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-gray-50);
}


/* ===== Support Window ===== */

.support-window .k-window-content {
    padding: 25px;
}

.support-content {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 34px;
}

.teamviewer-card {
    border: 1px solid var(--color-gray-100);
    border-radius: 8px;
    padding: 18px 26px;
    text-align: center;
}

    .teamviewer-card h3 {
        margin: 0 0 14px;
        font-size: var(--fs-h5);
        font-weight: 600;
    }

.teamviewer-preview {
    height: 162px;
    margin-bottom: 18px;
    background: var(--color-gray-100);
}

.teamviewer-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 40px;
    border-radius: 4px;
    background: var(--color-primary-700);
    color: white;
    font-size: var(--fs-body-1);
    text-decoration: none;
}

    .teamviewer-open:hover {
        color: white;
        background-color: var(--color-primary-500);
    }

.teamviewer-download {
    margin-top: 12px;
    color: #6b7280;
    font-size: 13px;
}

    .teamviewer-download a {
        color: #079bd8;
    }

.support-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.support-link {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
    padding: 0 28px;
    border: 1px solid var(--color-gray-100);
    border-radius: 6px;
    color: #111827;
    font-size: var(--fs-body-1);
    font-weight: 500;
    text-decoration: none;
}

    .support-link:hover {
        background: #f9fafb;
        border-color: var(--color-primary-500);
    }

    .support-link svg {
        width: 26px;
        display: inline-flex;
        justify-content: center;
        font-size: 22px;
    }

/* ===== Attachments Compact ===== */
.wire-attachments-mini {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .wire-attachments-mini .k-upload,
    .wire-attachments-mini .k-fileselect {
        width: 100%;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        background: transparent;
    }

    .wire-attachments-mini .k-upload {
        flex: 1 1 auto;
    }

        .wire-attachments-mini .k-upload .k-dropzone,
        .wire-attachments-mini .k-upload-dropzone {
            flex: 0 0 auto;
            min-height: 32px;
            width: 100%;
            padding: 5px;
            gap: 8px;
            border: 1px dashed #d8dde6;
            border-radius: 6px;
        }

    .wire-attachments-mini .k-upload-button {
        height: 28px;
        padding: 0 10px;
        font-size: 13px;
        min-width: auto;
    }

    .wire-attachments-mini .k-upload .k-dropzone .k-dropzone-hint,
    .wire-attachments-mini .k-upload .k-upload-dropzone .k-dropzone-hint {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .wire-attachments-mini .k-upload-files {
        flex: 0 1 auto;
        min-height: 0;
        height: auto;
        max-height: 33vh;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 6px;
        margin-top: 8px;
        padding-right: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 0;
    }

    .wire-attachments-mini .k-upload .k-upload-files .k-file {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        margin: 0;
    }

.wire-attachments-mini__file {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 24px 24px;
    /*    grid-template-columns: 1fr 24px 24px;*/
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 6px;
    border: 1px solid #e1e6ef;
    border-radius: 5px;
    background: #fff;
}

.wire-attachments-mini__file-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.wire-attachments-mini__file-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #243247;
}

.wire-attachments-mini__action {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #617085;
}

    .wire-attachments-mini__action:hover {
        background: #f1f4f8;
    }

.wire-attachments-mini__action--danger {
    color: #e0003c;
}

.wire-attachments-mini__action svg {
    width: 15px;
    height: 15px;
}

.wire-attachments-mini__upload-icon {
    display: inline-flex;
    align-items: center;
}

/* ===== Telerik tabstrip box-shadow ===== */
.top-content .k-tabstrip {
    padding: 8px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.top-content .k-tabstrip-items-wrapper, .top-content
.k-tabstrip-items {
    overflow: visible;
}

    .top-content .k-tabstrip-items .k-item.k-active {
        position: relative;
        z-index: 2;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    }

.top-content .k-tabstrip-content,
.top-content .k-tabstrip > .k-content {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ===== Invoervelden boxes ===== */
.wire-box,
.wire-panel {
    min-width: 0;
    min-height: 11rem;
    display: flex;
    border: var(--inboek-border);
    border-radius: 5px;
    background: #fff;
    line-height: 1;
}

.wire-box-tall {
    min-height: clamp(18rem, 30vh, 25rem);
}

.wire-attachments-group,
.wire-attachments-field {
    height: 100%;
    min-height: 0;
}

.wire-attachments-panel {
    min-height: 0;
    overflow: hidden;
}

/* Form box */
.form-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.form-box-xs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 0.5rem;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.form-box-label {
    color: var(--color-gray-400);
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.2;
}

.form-box-label-primary {
    color: var(--color-secondary-700);
    font-size: var(--fs-body-3);
    font-weight: 550;
    line-height: 1.2;
    margin: 2px 0px 15px 0px;
}

.profile-dd .form-box .checkbox-box-xs {
    box-shadow: none !important;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(5rem, 0.75fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 0.35rem;
}

    .form-row label, .form-row-xs, .form-row-xl, .form-row-xxs label {
        margin: 0;
        font-weight: 500;
        line-height: 1.1;
        font-size: var(--fs-body-2-5);
    }

.form-row-xs {
    display: grid;
    grid-template-columns: minmax(6rem, 0.9fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 0.3rem;
}

.form-row-xxs {
    display: grid;
    grid-template-columns: minmax(6.5rem, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.3rem;
}

.form-row-xl {
    display: grid;
    grid-template-columns: minmax(3.5rem, 0.6fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 0.3rem;
}

.form-row-even {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.3rem;
}

.form-control {
    width: 100%;
    min-width: 0;
    height: 1.8rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0.25rem 0.45rem;
    font: inherit;
}

.checkbox-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.checkbox-box-xs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    padding-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    line-height: 1.2;
}

    .checkbox-row input {
        width: 1rem;
        height: 1rem;
    }

.optional-elements-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 4px;
    width: 100%;
}

/* ===== Telerik Switch ===== */
.k-switch-label-on, .k-switch-label-off {
    font-size: 12px;
    font-weight: 500;
    padding-right: 3px;
}

.k-switch-on .k-switch-track {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

/* ===== Locatie Summary ===== */
.activity-location-summary {
    padding: 2px 0px;
    border-radius: 4px;
    /*    background: var(--color-gray-50);*/
    color: var(--color-gray-500);
    font-size: 11px;
    line-height: 1.25;
}

.activity-location-name {
    color: var(--color-gray-600, #1f2937);
    font-weight: 600;
}

.activity-location-address {
    margin-top: 0.1rem;
}

/* ===== Voorcalculatie Window ===== */
.voorcalculatie-form, .lading-details-form, .ritregel-details-window .k-window-content {
    background-color: var(--color-gray-50);
}

/* ===== Shared side-list overview for Lading, Activiteit, Rit Regel ===== */
.detail-list-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-gray-200);
    background: #fff;
    overflow: hidden;
}

.detail-list-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 5px;
/*    border-bottom: 1px solid var(--color-gray-200);*/
}

.fe-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.detail-list-search-toolbar {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 20px 3px;
}

.fe-search {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.fe-search .k-svg-icon {
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: var(--color-gray-500);
    transform: translateY(-50%);
    pointer-events: none;
}

.fe-search .k-textbox,
.fe-search .k-input {
    width: 100%;
    height: 34px;
}

.fe-search input,
.fe-search .k-input-inner {
    padding-left: 38px !important;
    color: var(--color-secondary-700, #111827);
    font-size: var(--fs-body-3);
}

.fe-search input::placeholder {
    color: var(--color-gray-500);
}

.detail-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    background: white;
}

.detail-list-item {
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

    .detail-list-item:hover {
        border-color: var(--color-gray-200);
        background: var(--color-gray-50);
/*        transform: translateY(-1px);*/
    }

    .detail-list-item.is-selected {
        border-color: var(--color-selected-border);
        background: var(--color-selected-bg);
    }

.detail-list-item__icon {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--color-gray-100, #f1f5f9);
    color: var(--color-gray-600, #475569);
    transition:
        background-color 160ms ease,
        color 160ms ease;
    font-weight: 600;
    font-size: var(--fs-body-2);
}

    .detail-list-item__icon .k-svg-icon {
        width: 15px;
        height: 15px;
    }

    .detail-list-item.is-selected .detail-list-item__icon {
        background: color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 9%, #fff);
        color: var(--kendo-color-primary, #0d6efd);
    }

.detail-list-item__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 5px;
}

    .detail-list-item__main strong {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        color: var(--color-secondary-700);
        font-size: var(--fs-body-3);
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 550;
    }

.detail-list-item__meta {
    flex: 0 0 auto;
    max-width: 120px;
}

    .detail-list-item__main span,
    .detail-list-item__meta {
        color: var(--color-gray-500);
        font-size: var(--fs-caption);
        line-height: 1.2;
    }

.detail-list-item__meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.detail-list-item-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--color-gray-100, #f1f5f9);
    color: var(--color-gray-600, #475569);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.detail-list-item-badge--package {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-list-item-badge--amount {
    color: var(--color-gray-700, #334155);
}

.detail-list-item.is-selected .detail-list-item-badge {
    background: color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 9%, #fff);
    color: var(--kendo-color-primary, #0d6efd);
}

.detail-list-item__weight {
    color: var(--color-gray-500, #64748b);
    white-space: nowrap;
}

.detail-list-item__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--color-gray-500, #64748b);
    transition: color 160ms ease;
}

    .detail-list-item__chevron .k-svg-icon {
        width: 15px;
        height: 15px;
    }

    .detail-list-item:hover .detail-list-item__chevron,
    .detail-list-item.is-selected .detail-list-item__chevron {
        color: var(--kendo-color-primary, #0d6efd);
    }

.detail-list-empty-state {
    padding: 14px;
    border-radius: 6px;
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    font-size: 13px;
    line-height: 1.3;
}

/* ===== Grid status badge ===== */
.grid-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.grid-status-badge--purple {
    color: #6f42c1;
    background: #f1e7ff;
    border: 1px solid #6f42c1;
}

.grid-status-badge--pink {
    color: #d63384;
    background: #fde2f3;
    border: 1px solid #f7b8da;
}

.grid-status-badge--orange {
    color: #e67e22;
    background: #fff0dc;
    border: 1px solid #ffd8a8;
}

.grid-status-badge--blue {
    color: #0d6efd;
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
}

.grid-status-badge--green {
    color: #198754;
    background: #dff5e7;
    border: 1px solid #a9dfbf;
}

.grid-status-badge--red {
    color: #dc3545;
    background: #fde2e2;
    border: 1px solid #f5b5b9;
}

.grid-status-badge--default {
    color: #5f6368;
    background: #f1f3f4;
    border: 1px solid #d6d9dc;
}

.missing-number {
    color: orange;
    font-weight: bold;
    cursor: help;
}

.search-container {
    position: relative;
    margin-bottom: 10px;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 9px;
    z-index: 1;
    color: #808080;
    font-size: 20px;
}

.search-container .k-input-inner {
    margin-top: 2px;
    padding-left: 35px !important;
}

.gridLayoutPopup {
    margin-top: 3px;
}

    .gridLayoutPopup .k-grid-header {
        display: none !important;
    }


.status-unassigned {
    background: #FEF3C7;
    color: #92400E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ===== Shared invoice preview ===== */
.invoice-preview-shell {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 15px 15px 15px 8px;
    background: var(--color-gray-50);
}

.invoice-empty-state {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.invoice-empty-visual {
    width: min(180px, 55%);
    height: 150px;
    margin-bottom: 22px;
}

.invoice-empty-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.invoice-empty-state h4 {
    margin: 0 0 10px;
    color: var(--color-secondary-700);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.2;
}

.invoice-empty-state p {
    max-width: 360px;
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--fs-body-3);
    line-height: 1.45;
}

.invoice-preview-card {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.invoice-preview-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

.invoice-preview-header h2,
.invoice-preview-header h4,
.invoice-preview-header h5 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

    .invoice-preview-header h5 {
        color: var(--color-secondary-700);
    }

.invoice-preview-header span {
    color: #9ca3af;
    font-size: 13px;
    white-space: nowrap;
}

.invoice-preview-meta {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
}

.invoice-debtor {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.25;
}

.invoice-debtor strong {
    color: var(--color-secondary-700);
    font-size: 17px;
    font-weight: 600;
}

.invoice-debtor span {
    color: var(--color-gray-500);
    font-size: var(--fs-body-3);
}

.invoice-label,
.invoice-facts span {
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
}

.invoice-label {
    margin-bottom: 5px;
}

.invoice-facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 5px;
    border: 1px solid var(--color-gray-100);
}

.invoice-facts div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.invoice-facts strong {
    color: var(--color-secondary-700);
    font-size: var(--fs-body-2);
    font-weight: 600;
}

.invoice-lines {
    flex: 1 1 auto;
    min-height: 150px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 0;
}

.invoice-lines-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
}

.invoice-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.invoice-icon-btn {
    width: 26px;
    height: 26px;
    padding: 0 !important;
    color: var(--color-primary-700);
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
}

.invoice-icon-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.invoice-icon-btn-danger {
    color: var(--color-danger-700);
}

.invoice-lines-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.invoice-lines-grid .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.invoice-totals {
    flex: 0 0 auto;
    align-self: stretch;
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 16px 18px;
    background: #fafafa;
    border-radius: 5px;
    border: 1px solid var(--color-gray-100);
}

.invoice-total-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(72px, auto) 42px;
    align-items: baseline;
    gap: 12px;
    color: #374151;
    font-size: 13px;
}

.invoice-total-row strong {
    color: #111827;
    font-weight: 500;
    text-align: right;
}

.invoice-total-row span:last-child {
    color: #6b7280;
    text-align: right;
}

.invoice-total-row-strong {
    padding-top: 6px;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

.invoice-total-row-strong strong {
    font-weight: 700;
    color: var(--color-secondary-700);
}

.search-container {
    position: relative;
    margin-bottom: 10px;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 9px;
    z-index: 1;
    color: #808080;
    font-size: 20px;
}

.search-container .k-input-inner {
    margin-top: 2px;
    padding-left: 35px !important;
}

.gridLayoutPopup {
    margin-top: 3px;
}

    .gridLayoutPopup .k-grid-header {
        display: none !important;
    }


.contract-tree-container {
    height: calc(100vh - 170px);
    overflow: auto;
    white-space: nowrap;
}


.contract-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

contract-middle-pane
{
    height:100% !important;
}
.contract-tile {
    min-width: 120px;
    max-width: 300px;
    height: 100px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid lightgray;
    border-radius: 8px;
    transition: .2s;
}

    .contract-tile:hover {
        border-color: darkgray;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }

.contract-tile-text {
    margin-top: 10px;
    text-align: center;
    word-break: break-word;
}


.k-treeview-item-content.k-focus {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border-radius: 10px;
    user-select: none;
}

.contract-selected {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-radius: 10px;
    font-weight: 600;
    padding: 2px 8px;
    user-select: none;
}

.contract-inactive {
    color: #dc2626;
    font-weight: 600;
}




.contract-popup {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    height: 100%;
    box-sizing: border-box;
}

.contract-popup-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

    .contract-popup-header label {
        font-size: .8rem;
        color: var(--txt-muted);
        display: block;
    }

    .contract-popup-header div:last-child {
        font-size: 1.2rem;
        font-weight: 600;
    }

.contract-popup-body {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem 1.25rem;
    align-items: center;
}

    .contract-popup-body label {
        font-size: .9rem;
        font-weight: 500;
    }

    .contract-popup-body .k-input,
    .contract-popup-body .k-picker,
    .contract-popup-body .k-dropdownlist,
    .contract-popup-body .k-textarea {
        width: 100%;
    }

.contract-form-row {
    display: contents;
}

.contract-note-full-width {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.25rem;
    align-items: start;
}

    .contract-note-full-width .k-textarea {
        width: 100%;
        min-height: 140px;
        max-height: 140px;
    }

.contract-checkbox {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .contract-checkbox label {
        margin: 0;
    }


.contract-dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}



.contract-dialog-actions-right {
    display: flex;
    gap: .75rem;
}


.msgbox-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.msgbox-icon {
    flex-shrink: 0;
    margin-top: 4px;
}

.msgbox-message {
    flex-grow: 1;
    white-space: pre-wrap;
    line-height: 1.5;
    min-height: 50px;
}

.msgbox-buttons {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: 25px;
}


@media (max-width: 1100px) {
    .invoice-preview-card {
        padding: 16px;
    }

    .invoice-preview-meta {
        grid-template-columns: 1fr;
    }

    .invoice-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 760px) {
    .invoice-preview-shell {
        padding: 8px;
    }

    .invoice-preview-header,
    .invoice-lines-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-lines-toolbar {
        gap: 8px;
    }

    .invoice-action-group {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .invoice-facts {
        grid-template-columns: 1fr;
    }

    .invoice-total-row {
        grid-template-columns: minmax(90px, 1fr) minmax(64px, auto) 36px;
    }
}

.column-empty-state {
    align-items: center;
    border-radius: 6px;
    color: var(--color-gray-500);
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
}

.column-empty-icon {
    align-items: center;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    color: var(--color-gray-500);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin-bottom: 4px;
    width: 38px;
}

    .column-empty-icon svg {
        height: 30px;
        width: 30px;
    }

.column-empty-state strong {
    color: var(--color-gray-700);
    font-size: var(--fs-body-2);
    font-weight: 600;
}

.column-empty-state span {
    color: var(--color-gray-500);
    font-size: var(--fs-body-3);
}

/* ===== Rit Details Window ===== */
.rit-details-window .k-window-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-gray-50);
}

.rit-details-window .k-window-titlebar {
    flex: 0 0 auto;
}

/* ===== Stamgegevens details layout ===== */
.stam-form-box {
    background: white;
    padding: 17px 18px 25px 18px;
    border: 1px solid var(--color-gray-200);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 15px 0px;
}

.stam-form-label {
     display: flex;
     flex-direction: row;
     gap: 7px;
     align-items: center;
     color: var(--color-secondary-700);
     font-size: var(--fs-body-3);
     padding: 0 0 12px;
     font-weight: 500;
}

.stam-form-label svg {
     width: 12px;
     height: 12px;
}

.stam-form-box-margin { 
    margin-top: 20px!important;
}

.stam-form-desc-label { 
    font-size: var(--fs-body-2-5);
    color: var(--color-primary-700);
    padding: 10px 0 0 0;
}

.stam-form-divider {
    margin: 15px 0 5px 0;
    color: var(--color-gray-400);
}

/* ===== Stamgegevens details layout context nav ===== */
.dialog-body-full {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: var(--color-gray-50);
    display: flex;
    flex-direction: column;
}

.dialog-body-full > form,
.dialog-body-full .k-form {
    flex: 1 1 auto;
    min-height: 0;
}

.dialog-body-full .k-form > .k-form-fieldset,
.dialog-body-full .k-form > .k-form-legend + .k-form-fieldset {
    flex: 1 1 auto;
    min-height: 0;
}

.stam-content-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.stam-content-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.stam-content-content {
    height: 100%;
    overflow-y: auto;
    min-height: 0;
    padding: 0 12px 50px 12px;
    scroll-padding-top: 30px;
    scroll-padding-bottom: 50px;
}

.stam-content-nav {
    min-height: 0;
    overflow: hidden;
    padding: 20px 0px 20px 30px;
    background-color: white;
    border-right: 1px solid var(--color-gray-200);
}

.stam-content-nav-title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-secondary-700);
    font-size: var(--fs-body-1);
    font-weight: 500;
    margin-bottom: 20px;
}

.stam-content-nav-title svg {
    width: 14px;
    height: 14px;
}

.stam-content-section {
    padding: 25px 25px 30px 25px;
    border: 1px solid var(--color-gray-200);
    border-radius: 5px;
    margin-bottom: 24px;
    background-color: white;
}

.stam-content-nav__button {
    text-align: left !important;
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    background: white !important;
    cursor: pointer !important;
}

@media (max-width: 991.98px) {
    .stam-content-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .stam-content-nav {
        display: none;
    }

    .stam-content-content {
        width: 100%;
    }
}


.copy-contract {
    padding: 16px 18px;
    height: 100%;
    box-sizing: border-box;
}

.copy-grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 0;
    min-height: 200px;
    border-bottom: 1px solid #ddd;
}

.copy-block {
    border-right: 1px solid #ddd;
    padding: 10px 18px;
    box-sizing: border-box;
    min-width: 0;
}

    .copy-block:last-child {
        border-right: none;
    }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    white-space: nowrap;
}

    .checkbox-row label {
        margin: 0;
        cursor: pointer;
    }

.inline-row {
    display: grid;
    grid-template-columns: 250px 100px 15px 350px;
    align-items: center;
    column-gap: 8px;
    margin: 8px 0 16px 24px;
}

    .inline-row label {
        margin: 0;
        white-space: nowrap;
    }

.contract-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0 0;
}

.period-row {
    display: grid;
    grid-template-columns: 145px 140px 140px;
    align-items: center;
    column-gap: 8px;
    margin-top: 45px;
}

    .period-row label {
        margin: 0;
    }

.telerik-suffix { 
    padding: 0 5px;
    font-size: var(--fs-caption);
    color: var(--color-secondary-700);
}

/* Voorcalculatie window css */
.voorcalculatie-details-window .k-window-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.voorcalculatie-details-window .k-window-title {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 920px) {
    .k-window.voorcalculatie-details-window {
        width: 90vw !important;
        max-width: 90vw !important;
        height: 90dvh !important;
        max-height: 90dvh !important;
    }
}

.checkbox-list-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px;
}

.checkbox-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.telerik-notification .k-notification {
    padding: 10px 20px;
    font-size: var(--fs-body-3);
}