/* 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 {
    color-scheme: light;
    /* =========================================
     KENDO COLORS
    ========================================= */
    --kendo-color-primary: var(--color-primary-700);
    --kendo-color-primary-hover: #0086c4;
    --kendo-color-primary-active: #0077ae;
    --kendo-color-primary-subtle: #E5F6FD;
    --kendo-color-primary-subtle-hover: #D0EFFB;
    --kendo-color-primary-subtle-active: #B8E7F8;
    --kendo-color-primary-emphasis: #006C9E;
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-on-surface: var(--color-primary-700);
    /* =========================================
     COLORS
    ========================================= */
    /* Primary */
    --color-primary-900: #076E9E;
    /*    --color-primary-700: #0095DA;*/
    --color-primary-700: #2f7df4;
    --color-primary-500: #36A5D9;
    --color-primary-300: #8EC5DF;
    --color-primary-50: #ECF1FD;
    /* secondary */
    --color-secondary-700: #07244A;
    /* Selected */
    --color-selected-bg: #F3F7FD;
    --color-selected-bg-soft: #fbfcfe;
    --color-selected-border: #97BCF1;
    --grid-selected-bg: #DDEAF7;
    /* 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: #F8F9FB;
    /*    --color-gray-50: #F7F7F7;*/
    /*    --color-gray-30: #FAFAFA;*/
    --color-gray-30: #FCFCFE;
    --color-white: #FFFFFF;
    /* Succes (green) */
    --color-success-500: #3BB273;
    --color-success-600: #2FA865;
    --color-success-700: #2A9D5B;
    --color-success-300: #6EE7B7;
    --color-success-50: #ECF9F1;
    --color-success-30: #F9FFFC;
    /* Danger (red) */
    --color-danger-700: #BE123C;
    --color-danger-500: #F43F5E;
    --color-danger-300: #FDA4AF;
    --color-danger-50: #FDF0F1;
    /* colors  */
    --blue: #3B82F6;
    --orange: #F59E0B;
    --red: #F43F5E;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --purple-light: #f1e7ff;
    --cyan: #0EA5E9;
    --green: #10B981;
    --teal: #14B8A6;
    --indigo: #6366F1;
    --yellow: #EAB308;
    --lime: #84CC16;
    --slate: #64748B;
    /* Badge foreground colors */
    --blue-badge-text: #0d6efd;
    --orange-badge-text: #a86708;
    --pink-badge-text: #c72f78;
    --purple-badge-text: #7650d8;
    --green-badge-text: #109048;
    --red-badge-text: #b42332;
    --default-badge-text: #5f6368;
    --teal-badge-text: #0F766E;
    --indigo-badge-text: #4F46E5;
    --yellow-badge-text: #A16207;
    --lime-badge-text: #4D7C0F;
    --slate-badge-text: #475569;
    /* Badge background colors */
    --blue-light: #e7f1ff;
    --orange-light: #fff6e8;
    --orange-lightv2: #fff0d9;
    --pink-light: #fde2f3;
    --purple-light: #f1e7ff;
    --green-light: #e5f9ee;
    --red-light: #f7ebed;
    --default-light: #f1f3f4;
    --default-border: #d6d9dc;
    --teal-light: #E6FFFB;
    --indigo-light: #EEF2FF;
    --yellow-light: #FEF9C3;
    --lime-light: #F1F8D7;
    --slate-light: #F1F5F9;
    /* surface  */
    --app-background: #f7f7f7;
    --white: #ffffff;
    --surface-secondary: #fafafa;
    --surface-hover: #f4f4f5;
    --input-background: #ffffff;
    /* navbar */
    --nav-bg: #F9FBFC;
    --nav-card-surface: #FFFFFF;
    /* =========================================
     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-h6: 16.5px;
    --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.25rem, 1.8vw + 1.8rem, 2.875rem); /* 36–46px */
    --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;
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* =========================================
       KENDO/TELERIK DARK SURFACES
    ========================================= */
    --kendo-color-app-surface: #1b1e23;
    --kendo-color-on-app-surface: #f5f7fa;
    --kendo-color-subtle: #9aa4b2;
    --kendo-color-surface: #24282e;
    --kendo-color-surface-alt: #292e35;
    --kendo-color-border: #3e454f;
    --kendo-color-border-alt: #505866;
    --kendo-color-base-subtle: #292e35;
    --kendo-color-base-subtle-hover: #30353d;
    --kendo-color-base-subtle-active: #343a43;
    --kendo-color-base: #30353d;
    --kendo-color-base-hover: #373d46;
    --kendo-color-base-active: #3e454f;
    --kendo-color-base-emphasis: #687383;
    --kendo-color-base-on-subtle: #e7eaf0;
    --kendo-color-on-base: #f5f7fa;
    --kendo-color-base-on-surface: #d2d7df;
    --kendo-color-inverse: oklch(14% 0.015 250deg);
    /* Text */
    --color-gray-900: #f5f7fa;
    --color-gray-800: #e7eaf0;
    --color-gray-700: #d2d7df;
    --color-gray-600: #b8c0cc;
    --color-gray-500: #9aa4b2;
    --color-gray-400: #7f8998;
    --color-gray-300: #505866;
    --color-gray-200: #3e454f;
    --color-gray-100: #30353d;
    --color-gray-50: #272b32;
    --color-gray-30: #1E2126;
    --color-white: #ffffff;
    --color-success-30: #183c2d;
    /* Dark surfaces */
    --app-background: #1b1e23;
    --white: #24282e;
    --surface-secondary: #292e35;
    --surface-hover: #343a43;
    --input-background: #2b3037;
    --color-secondary-700: #f2f5f8;
    --color-primary-50: #243746;
    /* colors */
    --purple-light: #352A57;
    --blue: #3b82f6;
    --orange: #d98a0b;
    --red: #e05262;
    --pink: #d9468d;
    --purple: #8878c9;
    --cyan: #209bd3;
    --green: #2da978;
    --teal: #2CB8A8;
    --indigo: #7C83E8;
    --yellow: #D6A915;
    --lime: #7FB53A;
    --slate: #7A8698;
    --blue-badge-text: #71a7ff;
    --orange-badge-text: #f4b84a;
    --pink-badge-text: #f178b4;
    --purple-badge-text: #b9a7ff;
    --green-badge-text: #63d69b;
    --red-badge-text: #ff8190;
    --default-badge-text: #b8c0cc;
    --teal-badge-text: #5EEAD4;
    --indigo-badge-text: #A5B4FC;
    --yellow-badge-text: #FACC15;
    --lime-badge-text: #A3E635;
    --slate-badge-text: #CBD5E1;
    --blue-light: #183456;
    --orange-lightv2: #5a4018;
    --orange-light: #473315;
    --pink-light: #462239;
    --purple-light: #352b53;
    --green-light: #183c2d;
    --red-light: #48242a;
    --default-light: #30353d;
    --default-border: #505866;
    --teal-light: #173B37;
    --indigo-light: #2A2D56;
    --yellow-light: #443B16;
    --lime-light: #2C3B19;
    --slate-light: #2C3440;
    /* selected */
    --color-selected-bg: #17354a;
    --color-selected-border: #23658b;
    --grid-selected-bg: #1b3d55;
    --color-selected-bg-soft: #151B24;
    /*    navbar*/
    --nav-bg: #172129;
    --nav-card-surface: #22313D;
}

* {
    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: var(--white) !important;
    transition: background-color 0.2s ease-in-out;
}

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

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

@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 {
    --nav-link-radius: 6px;
    color: var(--nav-text-color, var(--color-gray-700));
    display: flex;
    gap: 10px;
    white-space: nowrap;
    min-height: 34px;
    padding: 6px 9px;
    margin: 3px 0;
    align-items: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nav-link-radius);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.2;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

    .sidebar-nav .nav-item .nav-link.active {
        color: var(--nav-active-color) !important;
        background-color: var(--nav-card-background, var(--white)) !important;
        border-color: var(--nav-card-border-color) !important;
        box-shadow: var(--nav-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.10));
    }

    /* Blue accent for active top-level links only (not dropdown children). */
    .sidebar-nav .nav-item > .nav-link.active:not(.drop-link),
    .sidebar-nav .nav-item > .drop-toggle.is-parent-active {
        box-shadow:
            inset 3px 0 0 var(--nav-active-accent-color),
            var(--nav-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.10));
    }

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

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

.sidebar-nav .nav-item:is(:hover, .open) > .nav-link:not(.drop-title) {
    color: var(--nav-hover-color, #4338ca);
    background-color: var(--nav-hover-background, #eef2ff);
    border-color: var(--nav-hover-border-color, transparent);
}

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

/* Collapsed top-level rows: remove hidden label space and center every icon. */
.sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link {
    display: flex;
    width: 36px;
    min-width: 36px;
    min-height: 34px;
    margin-inline: auto;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
}

.sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link > .nav-label,
.sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link > .drop-icon {
    display: none !important;
}

.sidebar-main.collapsed .sidebar-nav > .nav-list > .nav-item > .nav-link > svg {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 !important;
}

.sidebar-nav .nav-item .drop-link.active {
    color: var(--nav-child-active-color, #1d4ed8) !important;
    background-color: var(--nav-child-active-background, #e8f0fe) !important;
    border-color: var(--nav-child-active-border-color, transparent) !important;
    box-shadow: none;
}

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

.drop-toggle.is-parent-active {
    color: var(--nav-active-color) !important;
    background-color: var(--nav-card-background, var(--white)) !important;
    border-color: var(--nav-card-border-color, #dfe3ea) !important;
    box-shadow: var(--nav-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.10));
    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: 7px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

    .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: 16px;
    height: 16px;
    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(--white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-800);
}

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

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

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

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

    .btn-primary-text:hover {
        color: var(--color-primary-500);
    }

.btn--noborder {
    border: none;
    box-shadow: none;
}

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

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

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

.btn-danger-fill {
    color: var(--color-danger-700);
    background: var(--white);
    border: 1px solid var(--color-gray-200);
}

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

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

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

.btn-succes-fillv2:hover {
    color: white;
    background-color: var(--color-success-700);
    border: 1px solid var(--color-success-700);
}

.btn-succes-fill {
    color: var(--color-success-700);
    background: var(--white);
    border: 1px solid var(--color-gray-200);
}

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

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

.k-button:disabled, .k-button.k-disabled, .k-button.k-button-base:disabled, .k-button.k-button-base.k-disabled, .k-button.k-button-solid:disabled, .k-button.k-button-solid.k-disabled, .k-button.k-button-solid.k-button-base:disabled, .k-button.k-button-solid.k-button-base.k-disabled {
    background-color: var(--color-gray-100);
}
/* ===== Popup / Dropdown Surface (reusable) ===== */
.ui-popup {
    min-width: 220px;
    margin-top: 8px;
    margin-right: 12px;
    overflow: hidden;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 5px !important;
    background: var(--white, #fff) !important;
    color: var(--color-gray-700);
    box-shadow: 0 8px 24px rgb(16 24 40 / 12%) !important;
}

.ui-popup-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ui-popup-header {
    display: flex;
    padding: 14px 16px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-30);
}

.ui-popup-title-icon {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    background: var(--color-primary-50, #ecf1fd);
    color: var(--color-primary-700, #2f7df4);
}

.ui-popup-title-icon .k-svg-icon {
    width: 17px;
    height: 17px;
}

.ui-popup-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ui-popup-title {
    color: var(--color-secondary-700, #07244a);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.3;
}

.ui-popup-description {
    color: var(--color-gray-500, #71717a);
    font-size: 11px;
    line-height: 1.35;
}

.ui-popup-body {
    display: flex;
    padding: 16px;
    flex-direction: column;
    gap: 14px;
    background: var(--white, #fff);
}

.ui-popup-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.ui-popup-field > label,
.ui-popup-section-title {
    color: var(--color-gray-700, #3f3f46);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.ui-popup-option {
    display: flex;
    min-height: 38px;
    padding: 9px 10px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 6px;
    background: var(--color-gray-30, #fcfcfe);
    color: var(--color-gray-700, #3f3f46);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.ui-popup-option .k-checkbox {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    align-self: center;
    flex: 0 0 16px;
    vertical-align: initial;
}

.ui-popup-option:hover {
    border-color: var(--color-selected-border, #97bcf1);
    background: var(--color-selected-bg-soft, #fbfcfe);
}

.ui-popup-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-popup-option > span {
    min-width: 0;
    gap: 1px;
}

.ui-popup-option strong {
    color: var(--color-gray-700, #3f3f46);
    font-size: 12px;
    font-weight: 600;
}

.ui-popup-option small {
    color: var(--color-gray-500, #71717a);
    font-size: 11px;
    line-height: 1.35;
}

.k-popup {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    border: 0;
}

.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);
    font-weight: 600;
}

.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-label-xs {
    font-size: var(--fs-body-3);
    font-weight: 500;
    color: var(--color-gray-800);
    line-height: 1.1;
}

.txt-label-xxs {
    font-size: var(--fs-caption);
    font-weight: 550;
    color: var(--color-gray-800);
    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;
}

.report-viewer-window.k-window > .k-window-content:first-child,
.report-viewer-window.k-window > .k-window-content:last-child,
.report-viewer-window .k-window-content:first-child,
.report-viewer-window .k-window-content:last-child {
    padding: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.report-email-window.k-window > .k-window-content:first-child,
.report-email-window.k-window > .k-window-content:last-child,
.report-email-window .k-window-content:first-child,
.report-email-window .k-window-content:last-child {
    padding: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

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

/* Telerik named window sections must always remain direct children.
   Hide empty chrome for shared loading/footerless windows at the window level. */
.loading-window .k-window-titlebar,
.loading-window .k-window-actions,
.loading-window .k-window-footer,
.footerless-window .k-window-footer {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.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: 10px;
    min-width: 0;
}

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

.window-footer-log {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-left: 0px;
}

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


.confirm-dialog-title-icon--warning {
    background-color: var(--orange-lightv2);
}

    .confirm-dialog-title-icon--warning svg,
    .confirm-dialog-title-icon--warning svg path {
        fill: var(--orange);
    }

.confirm-dialog-button--warning {
    color: white;
    background-color: var(--orange);
    border-color: var(--orange);
}

    .confirm-dialog-button--warning:hover {
        color: white;
        background-color: var(--orange);
        border-color: var(--orange);
    }

/* ===== 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: var(--white);
}

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

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

.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;
    text-decoration: none;
}

    .window-breadcrumb:hover, .win-title: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-3);
    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);
    border-radius: 5px;
}

/* ===== 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: var(--white);
    font-size: var(--fs-body-2);
}

    .k-picker:focus-within, .k-picker.k-picker-solid:focus-within {
        border: none;
        background-color: var(--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: var(--white);
    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;
}

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

.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-empty-xs {
    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-xs {
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

.attachment-empty__description-xs {
    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;
}

.attachment-title {
    font-size: var(--fs-h6);
}

.attachment-title-xs {
    font-size: var(--fs-body-2-5);
}

/* ===== 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: var(--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: var(--white);
    color: var(--color-gray-600);
}

    .k-tooltip .k-callout {
        color: var(--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: var(--color-selected-bg);
    border: 1px solid var(--color-selected-border);
    border-radius: 20px;
    font-size: var(--fs-body-2);
    color: var(--color-gray-700);
}

.k-chip-action .k-svg-icon > svg {
    fill: var(--color-primary-700);
}

.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: var(--color-selected-bg) !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: var(--color-selected-bg) !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;
}

.k-grid .k-table-alt-row {
    background: var(--color-gray-30);
}

.k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: #EAF2FF;
}

.k-table-tbody .k-table-row.k-selected > .k-table-td:not(.k-group-cell), .k-table-list .k-table-row.k-selected:not(.k-group-cell) {
    background-color: var(--grid-selected-bg);
}

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

.gb-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    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;
    color: var(--color-primary-700);
}

    .gb-title-icon svg {
        width: 13px;
        height: 13px;
        fill: currentColor;
    }

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

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

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

.gb-toolbar__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    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: var(--white) !important;
    color: var(--color-gray-700) !important;
    border: 1px solid var(--color-gray-200) !important;
}

    .gb-btn--ghost:hover {
        background: var(--color-gray-50) !important;
    }

    .gb-btn--ghost:disabled,
    .gb-btn--ghost.k-disabled {
        background: var(--white) !important;
        color: var(--color-gray-700) !important;
        border-color: var(--color-gray-200) !important;
        opacity: 1 !important;
    }

.gb-btn--soft {
    background: var(--white) !important;
    color: var(--color-gray-700) !important;
    border: 1px solid var(--color-gray-200) !important;
}

    .gb-btn--soft:hover {
        background: var(--color-gray-100) !important;
        border-color: var(--color-gray-200) !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-5);
    font-weight: 500;
    color: var(--color-gray-800);
    margin-bottom: -5px;
}

.gb-column-description {
    font-size: var(--fs-caption);
    font-weight: 400;
    color: var(--color-gray-500);
    margin-top: 7px;
}

.gb-column-label {
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--color-secondary-700);
    margin-bottom: 5px;
}

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

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

.gb-title-icon--route {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.gb-title-icon--staffel {
    color: #e66f00;
    background: #fff2e6;
}

.gb-title-icon--toeslag {
    color: #8e4ae8;
    background: #f0e0ff;
}

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

.k-splitbar {
    background: var(--color-gray-50) !important;
}

/*.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: 550;
    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 var(--color-gray-300);
            border-radius: 6px;
        }

    .wire-attachments-mini .k-upload-button, .rem-file-select .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: var(--white);
}

.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 ===== */
.bottom-content .k-tabstrip {
    padding: 8px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

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

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

.bottom-content .k-tabstrip-content,
.bottom-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: var(--white);
    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: var(--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);*/
    color: var(--color-secondary-700);
    font-size: var(--fs-caption);
    font-weight: 500;
    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: 4px 0px 0px;
    border-radius: 4px;
    /*    background: var(--color-gray-50);*/
    color: var(--color-gray-500);
    font-size: 12px;
    line-height: 1.25;
}

.activity-location-name {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary-700);
    font-weight: 600;
}

    .activity-location-name .k-svg-icon svg {
        width: 12px;
        height: 12px;
    }

.activity-location-address {
    margin-top: 5px;
}

/* ===== 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: var(--white);
    overflow: hidden;
}

.detail-list-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 18px;
    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: var(--white);
}

.detail-list-item {
    position: relative;
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 5px;
    background: var(--white);
    text-align: left;
    cursor: pointer;
    transition: all .18s ease;
}

    .detail-list-item.is-selected::before {
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        bottom: -1px;
        width: 5px;
        background: var(--color-primary-700);
        border-radius: 15px 0 0 15px;
    }

    .detail-list-item:hover {
        border-color: var(--color-selected-border);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 149, 218, .02);
    }

    .detail-list-item.is-selected {
        border-color: var(--color-selected-border);
        box-shadow: 0 8px 24px rgba(0, 149, 218, .02);
        padding: 14px 14px 14px 20px;
    }

.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: var(--color-primary-50);
    color: var(--color-primary-700);
}

.detail-list-item__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    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: 20px;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 12px;
    font-weight: 500;
    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: var(--color-primary-50);
    color: var(--color-primary-700);
}

.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: 550;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.grid-status-badge--purple {
    color: var(--purple-badge-text);
    background: var(--purple-light);
}

.grid-status-badge--pink {
    color: var(--pink-badge-text);
    background: var(--pink-light);
}

.grid-status-badge--orange {
    color: var(--orange-badge-text);
    background: var(--orange-light);
}

.grid-status-badge--blue {
    color: var(--blue-badge-text);
    background: var(--blue-light);
}

.grid-status-badge--green {
    color: var(--green-badge-text);
    background: var(--green-light);
}

.grid-status-badge--red {
    color: var(--red-badge-text);
    background: var(--red-light);
}

.grid-status-badge--default {
    color: var(--default-badge-text);
    background: var(--default-light);
    border: 1px solid var(--default-border);
}

.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: 20px 20px 20px 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: 12px;
    border-bottom: 1px solid #eeeeee;
}

.invoice-preview-header-meta {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

.invoice-preview-header h2,
.invoice-preview-header h4,
.invoice-preview-header h5 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 500;
    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: var(--color-gray-30);
    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: 14px 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: var(--color-gray-30);
    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-middle-pane
{
    height:100% !important;
}

.contract-section {
    padding: 12px 16px;
}

.contractRouteGrid{
    overflow:auto !important;
}

.contract-section-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: black;
    font-size: 14px;
}

    .contract-section-title span {
        padding-right: 8px;
        white-space: nowrap;
    }

    .contract-section-title::after {
        content: "";
        height: 1px;
        background: black;
        flex: 1;
    }

.contract-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 80px;
    padding-left: 20px;
    padding-bottom: 12px;
}

.contract-tile {
    width: 90px;
    height: 80px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: white;
}

    .contract-tile:hover {
        background: #f3f7ff;
        border-color: #7aa7e8;
    }

.contract-tile-icon {
    font-size: 22px;
}

.contract-tile-text {
    font-size: 12px;
    text-align: center;
}*/



.contract-selected {
    background-color: var(--color-selected-bg);
    color: var(--color-primary-700);
    border-radius: 10px;
    font-weight: 600;
    user-select: none;
}

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

.k-treeview-item-content:focus, .k-treeview-item-content.k-focus {
    box-shadow: none;
}

.k-treeview-item-content:hover {
    box-shadow: none;
    background: var(--color-gray-50);
}


.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: 14px;
    }

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

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

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

.k-dialog-wrapper:has(.global-msgbox) {
    z-index: 99999 !important;
}

.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: var(--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-2);
    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);
    color: var(--color-secondary-700);
    font-weight: 500;
    padding: 10px 0 0 0;
}

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

.stam-form-row {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin-bottom: 20px;
    margin-top: -12px;
}

    .stam-form-row > .stam-form-box {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        height: auto;
        margin: 0;
    }

@media (max-width: 900px) {
    .stam-form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== 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 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 20px 0px 0px 30px;
    background-color: white;
    border-right: 1px solid var(--color-gray-200);
}

.stam-content-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 12px;
}

.stam-content-nav-toggle.k-button {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
    margin-left: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none !important;
    color: var(--color-primary-700) !important;
}

    .stam-content-nav-toggle.k-button:hover {
        text-decoration: underline;
    }

.stam-content-nav-title {
    flex: 0 0 auto;
    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 {
    display: flex;
    align-items: center;
    padding: 0 5px;
    font-size: var(--fs-caption);
    color: var(--color-secondary-700);
}

    .telerik-suffix .k-svg-icon {
        width: 15px !important;
        height: 15px !important;
        color: var(--color-gray-500);
    }

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

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


.contract-type-dialog {
    padding: 1.5rem;
}

.contract-type-dialog-message {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--kendo-color-on-app-surface);
}

.contract-type-buttons {
    display: flex;
    gap: 1rem;
}

.contract-type-button {
    flex: 1;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
}

    .contract-type-button .k-svg-icon {
        font-size: 28px;
    }

.planning-drop-placeholder {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    opacity: .7;
}

}

/* ===== Telerik Switch ===== */
.k-switch, .k-switch .k-switch-track {
    height: 25px;
}

    .k-switch .k-switch-thumb {
        width: 25px;
        height: 25px;
    }

    .k-switch.k-switch-off .k-switch-thumb-wrap, .k-switch.k-switch-md.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 10px;
    }

    .k-switch.k-switch-on .k-switch-thumb-wrap, .k-switch.k-switch-md.k-switch-on .k-switch-thumb-wrap {
        inset-inline-start: calc(100% - 10px);
    }

/* ===== Telerik PDF-viewer ===== */
.k-pdf-viewer .k-pdf-viewer-canvas {
    background-color: var(--color-gray-700);
}

.k-pdf-viewer, .k-pdf-viewer .k-toolbar {
    border: none;
}

.report-email-window .rem-report-tabstrip .k-tabstrip-content,
.report-email-window .rem-report-tabstrip .k-content {
    overflow: hidden;
}

.k-pdf-viewer {
    border: none !important;
}

    .k-pdf-viewer .k-pdf-viewer-toolbar {
        border: none !important;
    }

    .k-pdf-viewer .k-pdf-viewer-content {
        border: none !important;
    }

.splitbuttonTelerik .k-button {
    background-color: transparent !important;
    border: 1px solid var(--color-gray-200) !important
    /* styling */
}

    .splitbuttonTelerik .k-button.k-disabled {
        background-color: transparent !important;
        /* disabled styling */
    }

.splitbuttonTelerik .k-icon-button {
    background-color: transparent !important;
    /* pijltje */
}

.splitbuttonTelerik .k-split-button-arrow {
    background-color: transparent !important;
    /* alleen het rechter pijltje */
}

.container-valid {
    background-color: rgba(25, 135, 84, 0.04) !important;
    border-color: #198754 !important;
    box-shadow: 0 0 0 .2rem rgba(25,135,84,.25);
}

.container-invalid {
    background-color: rgba(220, 53, 69, 0.04) !important;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
}

/*Contracten popups */

.contract-route-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contract-route-regel-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contract-staffel-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contract-route-regel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .contract-route-regel-row > label {
        width: 120px;
        font-weight: 600;
    }

.contract-route-regel-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.contract-route-regel-footer-right {
    display: flex;
    gap: 10px;
}

.contract-staffel-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contract-staffel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .contract-staffel-row > label {
        width: 130px;
        font-weight: 600;
    }

.contract-staffel-group {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 15px;
}

    .contract-staffel-group legend {
        padding: 0 6px;
        font-weight: 600;
    }

.contract-staffel-two-columns {
    display: flex;
    gap: 25px;
}

    .contract-staffel-two-columns > fieldset {
        flex: 1;
    }

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

.contract-staffel-footer-right {
    display: flex;
    gap: 10px;
}

.contract-toeslag-conditie-header,
.contract-toeslag-conditie-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr 150px 1fr;
    column-gap: 8px;
    align-items: center;
}

.contract-toeslag-conditie-header {
    font-weight: 600;
    margin-bottom: 6px;
}

.contract-toeslag-conditie-row {
    margin-bottom: 6px;
}

.toeslagConditionCheckBox {
    margin-top: 5px !important;
}

.customDropdownToeslag {
    max-width: 1000px !important;
}

.rem-body-field .telerik-editor div.k-editor-content div.k-content {
    font-family: "Inter", serif;
}

.custom-appointment {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.appointment-content {
    width: 100%;
    height: 100%;
    padding: 4px 3px;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
}

.appointment-resize-handle {
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px;
    z-index: 10;
    touch-action: none;
}

.resize-start {
    top: 0;
    cursor: ns-resize;
}

.resize-end {
    bottom: 0;
    cursor: ns-resize;
}

.appointment-resize-handle:hover {
    background: rgba(0, 0, 0, 0.15);
}

.appointment-horizontal-resize-handle {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 8px;
    z-index: 11;
    cursor: ew-resize;
    touch-action: none;
}

.resize-date-start {
    left: 0;
}

.resize-date-end {
    right: 0;
}

.appointment-horizontal-resize-handle:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* ===== Telerik Radio button ===== */
.k-radio-item, .k-radio-list-item {
    gap: 10px;
}

.scheduler-context-menu {
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    min-width: 180px;
    padding: 2px 0;
    height: 30px;
}

.scheduler-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 10px;
    cursor: pointer;
    user-select: none;
}

    .scheduler-context-item:hover {
        background: #f5f5f5;
    }

.scheduler-context-item {
    cursor: pointer;
}

.month-outside {
    background-color: var(--color-gray-50) !important;
}

.theme-toggle .btn-icon-small svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}



.simple-booking-page {
    box-sizing: border-box;
    min-height: 100%;
    padding: 8px 10px 62px;
    background: #f5f6f8;
}

    .simple-booking-page *,
    .simple-booking-page *::before,
    .simple-booking-page *::after {
        box-sizing: border-box;
    }

.simple-page-header {
    margin-bottom: 8px;
}

    .simple-page-header h4 {
        margin: 0;
        font-size: 19px;
        font-weight: 600;
    }

.simple-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 10px;
    align-items: start;
    height: auto;
    min-height: 0;
}

.simple-main-column {
    min-width: 0;
    height: auto;
    min-height: 0;
    align-self: start;
}

.simple-panel,
.simple-activity-card,
.simple-attachments-panel {
    background: #fff;
    border: 1px solid #d9dee5;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
}

.simple-panel {
    padding: 9px 10px;
    margin-bottom: 8px;
}

.simple-order-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(170px, 1.15fr) minmax(130px, .9fr) minmax(130px, .9fr);
    gap: 8px;
    align-items: start;
}

.simple-container-grid {
    display: grid;
    grid-template-columns: 150px 190px 70px 85px minmax(180px, 260px) minmax(330px, 1fr) 125px;
    gap: 8px;
    align-items: end;
}

.simple-inline-preferences {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 30px;
    padding-bottom: 1px;
}

    .simple-inline-preferences label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
    }

.simple-field {
    min-width: 0;
}

    .simple-field label {
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
    }

.simple-field-number {
    min-width: 65px;
}

.simple-field-extra {
    min-width: 180px;
}

.simple-container-add {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

    .simple-container-add .k-button {
        width: 100%;
    }



.simple-value-summary {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 3px;
    padding: 3px 5px;
    color: #2049b0;
    font-size: 11px;
    line-height: 1.25;
}

.simple-section-heading {
    margin: 0 0 4px 1px;
    font-size: 12px;
    font-weight: 600;
}

.simple-activities {
    margin-bottom: 8px;
}

.simple-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.simple-activity-card {
    min-width: 0;
    overflow: hidden;
}

.simple-activity-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 5px 8px;
    border-bottom: 1px solid #dfe3e8;
    background: #fafafa;
    font-size: 14px;
    font-weight: 700;
}

.simple-activity-body {
    padding: 8px;
}

.simple-instructions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 7px;
}

.simple-date-grid {
    display: grid;
    grid-template-columns: minmax(120px, 1.35fr) minmax(82px, .65fr) minmax(82px, .65fr);
    gap: 7px;
    margin: 7px 0;
}

.simple-activity-body .k-textarea {
    min-height: 48px;
}

.simple-added-panel {
    width: 100%;
    min-height: 145px;
    margin-bottom: 0;
}

.simple-added-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.simple-added-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.simple-table-wrap {
    max-height: 180px;
    overflow: auto;
    border: 1px solid #dfe3e8;
}

.simple-container-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .simple-container-table th,
    .simple-container-table td {
        padding: 5px 7px;
        border-bottom: 1px solid #e4e7eb;
        text-align: left;
        white-space: nowrap;
    }

    .simple-container-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f7f8fa;
        font-weight: 600;
    }

    .simple-container-table tr.is-selected {
        background: #eaf3ff;
    }

.simple-actions-column {
    width: 84px;
}

.simple-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.simple-empty-state {
    display: grid;
    place-items: center;
    min-height: 90px;
    color: #6b7280;
    border: 1px dashed #cdd3da;
    border-radius: 4px;
    font-size: 12px;
}

/* Bijlagenkolom */
.simple-attachments-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    margin-bottom: 10px;
}

.simple-attachments-title {
    padding: 7px 9px;
    border-bottom: 1px solid #d9dee5;
    background: #fafafa;
    font-size: 12px;
    font-weight: 600;
}

.simple-attachments-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    flex: 0 0 auto;
    min-height: 0;
}

.simple-drop-zone {
    display: flex;
    flex: 1;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 1px dashed #cbd2da;
    border-radius: 4px;
    color: #667085;
    background: #fbfcfd;
    font-size: 12px;
}

.simple-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}



.simple-cargo-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.simple-cargo-button {
    min-width: auto;
    height: 30px;
    padding: 4px 9px;
    font-size: 12px;
}

.simple-cargo-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.simple-attachment-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 30px 30px;
    gap: 5px;
    align-items: center;
    padding: 5px;
    border: 1px solid #e1e5ea;
    border-radius: 4px;
}

.simple-attachment-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.simple-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.simple-attachment-action {
    min-width: 28px !important;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 0;
    background: transparent;
}

.simple-attachment-action-danger {
    color: #d92d20;
}

.simple-action-bar {
    position: fixed;
    right: 10px;
    bottom: 8px;
    left: 10px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid #d9dee5;
    background: rgb(245 246 248 / 96%);
    backdrop-filter: blur(3px);
}

/* Telerik-componenten iets compacter op deze pagina */
.simple-booking-page .k-input,
.simple-booking-page .k-picker,
.simple-booking-page .k-numerictextbox,
.simple-booking-page .k-textbox {
    min-height: 30px;
}

.simple-booking-page .k-input-inner {
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 1500px) {
    .simple-page-grid {
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .simple-order-grid {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .simple-container-grid {
        display: grid;
        grid-template-columns: 150px 190px 70px 85px minmax(220px, 1fr) 125px;
        gap: 8px;
        align-items: end;
    }
}

@media (max-width: 1100px) {
    .simple-page-grid {
        grid-template-columns: 1fr;
    }

    .simple-attachments-panel {
        min-height: 220px;
    }

    .simple-attachments-body {
        min-height: 180px;
    }
}

@media (max-width: 850px) {
    .simple-order-grid,
    .simple-container-grid,
    .simple-activity-grid,
    .simple-instructions-grid {
        grid-template-columns: 1fr;
    }

    .simple-date-grid {
        grid-template-columns: 1fr 1fr;
    }

    .simple-date-field {
        grid-column: 1 / -1;
    }

    .simple-preferences {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* Kaart Window */
.kaart-info-panel-container {
    container-type: inline-size;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.kaart-map-panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.kaart-info-panel {
    display: flex;
    flex: 0 0 400px;
    width: 400px;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

@media (max-width: 1020px) {
    .kaart-info-panel-container {
        flex-direction: column;
    }

    .kaart-map-panel {
        width: 100%;
        min-height: 450px;
    }

    .kaart-info-panel {
        width: 100%;
        flex-basis: auto;
    }
}

@media (max-width: 768px) {
    .kaart-map-panel {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .kaart-info-panel-container {
        gap: 0.5rem;
    }

    .kaart-map-panel {
        min-height: 450px;
    }
}


.truck-planning-page {
    height: 100%;
}

.planning-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.planning-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.week-navigation {
    display: flex;
    gap: 12px;
    align-items: center;
}

.scheduler-resource-switch {
    display: flex;
    gap: 5px;
}


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

.planning-layout {
    width: 100%;
    height: 750px;
    min-width: 0;
    overflow: visible;
}


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

.planning-left-panel,
.planning-right-panel {
    position: relative;
    height: 100%;
    min-width: 0;
}

.planning-left-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .planning-left-panel > .k-tabstrip {
        flex: 1;
        min-height: 0;
    }

.planning-right-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

    .planning-right-panel > .k-treelist {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
    }

    .planning-right-panel .k-grid-content,
    .planning-right-panel .k-treelist-scrollable {
        overflow-y: auto !important;
    }

.planning-orders-section {
    flex: 0 0 70%;
    min-height: 0;
    overflow: hidden;
}

.planning-right-content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.planning-activities-section {
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.planning-activities-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.planning-no-selection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    font-size: 13px;
}

.panel-title-text {
    font-weight: 600;
    margin-right: 20px;
}


/* =========================
   SCHEDULER
   ========================= */

.planning-scheduler {
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

    /* Tijdregel 00:00 verbergen */
    .planning-scheduler.planning-view-week .k-scheduler-head .k-scheduler-row:nth-child(2) {
        display: none !important;
    }

.k-scheduler-nonwork, .k-scheduler .k-nonwork-hour {
    background-color: var(--color-gray-50) !important;
}

.k-scheduler-layout-flex .k-scheduler-cell.k-heading-cell {
    font-weight: 550;
    color: var(--color-secondary-700);
}

/* =========================
   PANEL CONTENT
   ========================= */
.panel-title {
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px solid #d6d6d6;
}

.panel-subtitle {
    font-weight: 600;
    padding: 10px;
}

.left-resource-tabs {
    display: flex;
    gap: 5px;
    padding: 8px;
    border-bottom: 1px solid #d6d6d6;
}

    .left-resource-tabs .k-button {
        flex: 1;
    }

.left-resource-content {
    overflow-y: auto;
}

.resource-item,
.order-item {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    cursor: grab;
}

    .resource-item:hover,
    .order-item:hover {
        background: rgba(0, 0, 0, 0.04);
    }

/* Interne scheidingslijn binnen één dag verwijderen */
.planning-scheduler.planning-view-week .planning-day-first-half {
    border-right-color: transparent !important;
}

.planning-scheduler.planning-view-week .planning-day-second-half {
    border-left-color: transparent !important;
}

.planning-scheduler .k-event-actions .k-svg-i-chevron-right {
    display: none !important;
}


/* Dynamic title for windows */
.rv-title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 5px 0;
}

.rv-title-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 5px;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

    .rv-title-icon .k-svg-icon {
        width: 18px !important;
        height: 18px !important;
    }

.rv-title-main {
    color: var(--color-secondary-700);
    font-size: var(--fs-h5);
    margin-bottom: 2px;
    font-weight: 500;
}

.rv-title-sub {
    margin-top: 0px;
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.25;
}

/* Tabstrip tab Icon */
.tabstriptab-icon .k-svg-icon {
    width: 13px;
    height: 13px;
}

/* =========================================================
   Telerik global notifications
   ========================================================= */

.global-notification {
    z-index: 2147483647 !important;
    margin: 50px 10px 0 0;
    gap: var(--space-3);
}

    /* Notification card */
    .global-notification .k-notification {
        padding: 8px 10px;
        gap: var(--space-4);
        border: 1px solid;
        border-radius: 5px;
        box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
        font-size: var(--fs-caption);
        font-weight: var(--font-medium);
        line-height: var(--lh-normal);
    }

    /* Message */
    .global-notification .k-notification-content {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .app-notification-text {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-1);
    }

    .app-notification-title {
        font-size: var(--fs-body-3);
        font-weight: var(--font-semibold);
        line-height: var(--lh-snug);
        color: inherit;
    }

    .app-notification-message {
        font-size: var(--fs-caption);
        font-weight: var(--font-regular);
        line-height: var(--lh-normal);
        color: inherit;
        opacity: 0.9;
    }

        /* Telerik SVG icon */
        .global-notification .k-notification-status .k-svg-icon {
            width: 15px;
            height: 15px;
        }

    /* Close button */
    .global-notification .k-notification-actions {
        align-self: flex-start;
        margin-left: var(--space-3);
    }

    .global-notification .k-notification-action {
        opacity: 0.8;
    }

        .global-notification .k-notification-action:hover {
            opacity: 1;
        }

    /* Information */
    .global-notification .k-notification-info {
        color: var(--white);
        background: var(--blue);
        border-color: var(--blue);
    }

    /* Warning */
    .global-notification .k-notification-warning {
        color: var(--white);
        background: var(--orange);
        border-color: var(--orange);
    }

    /* Success */
    .global-notification .k-notification-success {
        color: var(--white);
        background: var(--color-success-700);
        border-color: var(--color-success-700);
    }

    /* Error */
    .global-notification .k-notification-error {
        color: var(--white);
        background: var(--color-danger-700);
        border-color: var(--color-danger-700);
    }

@media (max-width: 600px) {
    .global-notification {
        right: var(--space-3) !important;
        left: var(--space-3) !important;
        margin: var(--space-3);
    }

        .global-notification .k-notification {
            width: 100%;
            min-width: 0;
        }
}

/* =========================================================
   Status chip
   ========================================================= */

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

.oo-status-chips {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 10px 0 14px;
}

.oo-status-chip {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--color-gray-500);
    font-size: var(--fs-caption);
    cursor: pointer;
}

    .oo-status-chip:hover {
        color: var(--color-primary-700);
    }

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

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