/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8ezavay3gx],
.components-reconnect-repeated-attempt-visible[b-8ezavay3gx],
.components-reconnect-failed-visible[b-8ezavay3gx],
.components-pause-visible[b-8ezavay3gx],
.components-resume-failed-visible[b-8ezavay3gx],
.components-rejoining-animation[b-8ezavay3gx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-failed[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8ezavay3gx] {
    display: block;
}


#components-reconnect-modal[b-8ezavay3gx] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8ezavay3gx 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8ezavay3gx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8ezavay3gx 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8ezavay3gx]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8ezavay3gx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8ezavay3gx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8ezavay3gx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8ezavay3gx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8ezavay3gx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8ezavay3gx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8ezavay3gx] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8ezavay3gx] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8ezavay3gx] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8ezavay3gx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8ezavay3gx] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8ezavay3gx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8ezavay3gx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8ezavay3gx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Info.razor.rz.scp.css */
/* ---- page header ---- */
.page-subtitle[b-vdlizidz25] {
    color: var(--begra-gray-600);
    margin-top: .25rem;
    font-size: .9375rem;
}

/* ====================================================
   INTRO HERO
   ==================================================== */
.intro-hero[b-vdlizidz25] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 1.75rem;
    margin-bottom: 1.75rem;
}

.intro-logo-col[b-vdlizidz25] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-logo[b-vdlizidz25] {
    width: 110px;
    height: auto;
}

.intro-content-col[b-vdlizidz25] {
    flex: 1;
}

.intro-title[b-vdlizidz25] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: .75rem;
    border: none;
    padding: 0;
}

.intro-content-col p[b-vdlizidz25] {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--begra-dark);
    margin-bottom: .75rem;
}

.intro-content-col p:last-child[b-vdlizidz25] {
    margin-bottom: 0;
}

.what-can-you-do-title[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--begra-green-light);
}

/* ---- capability cards ---- */
.capability-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

.capability-card[b-vdlizidz25] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.1rem;
}

.cap-icon[b-vdlizidz25] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--begra-green-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--begra-green-dark);
}

.cap-icon svg[b-vdlizidz25] {
    width: 1.2rem;
    height: 1.2rem;
}

.cap-body[b-vdlizidz25] {
    flex: 1;
}

.cap-title[b-vdlizidz25] {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--begra-dark);
    margin-bottom: .3rem;
}

.cap-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 640px) {
    .intro-hero[b-vdlizidz25] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .capability-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
}

/* ---- sections ---- */
.info-section[b-vdlizidz25] {
    margin-bottom: 2.5rem;
}

.info-section h2[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--begra-green-light);
}

.section-ico[b-vdlizidz25] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--begra-green);
    flex-shrink: 0;
}

/* ---- info cards grid ---- */
.info-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.info-card[b-vdlizidz25] {
    padding: 1rem;
}

.info-card-label[b-vdlizidz25] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--begra-gray-600);
    margin-bottom: .25rem;
}

.info-card-value[b-vdlizidz25] {
    font-size: .9375rem;
    color: var(--begra-dark);
    font-weight: 500;
}

.badge-beta[b-vdlizidz25] {
    display: inline-block;
    background: var(--begra-orange);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .1em .45em;
    border-radius: 999px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ---- roles table ---- */
.info-table[b-vdlizidz25] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.info-table th[b-vdlizidz25] {
    text-align: left;
    padding: .5rem .75rem;
    background: var(--begra-gray-100);
    font-weight: 600;
    color: var(--begra-gray-700, var(--begra-dark));
    border-bottom: 2px solid var(--begra-gray-200);
}

.info-table td[b-vdlizidz25] {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--begra-gray-200);
    vertical-align: top;
}

.info-table tr:last-child td[b-vdlizidz25] {
    border-bottom: none;
}

.role-badge[b-vdlizidz25] {
    display: inline-block;
    padding: .15em .6em;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.role-admin[b-vdlizidz25]         { background: #fde8e8; color: #b91c1c; }
.role-montageplanner[b-vdlizidz25]{ background: #dcfce7; color: #15803d; }
.role-inkoop[b-vdlizidz25]        { background: #dbeafe; color: #1d4ed8; }
.role-projectleider[b-vdlizidz25] { background: #fef9c3; color: #854d0e; }
.role-lezer[b-vdlizidz25]         { background: var(--begra-gray-200); color: var(--begra-dark); }

/* ---- modules grid ---- */
.module-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.module-card[b-vdlizidz25] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.module-status[b-vdlizidz25] {
    font-size: 1.1rem;
    font-weight: 700;
}

.module-done .module-status[b-vdlizidz25] { color: var(--begra-green); }
.module-partial .module-status[b-vdlizidz25] { color: var(--begra-orange); }
.module-pending .module-status[b-vdlizidz25] { color: var(--begra-gray-400, #9ca3af); }

.module-name[b-vdlizidz25] {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--begra-dark);
}

.module-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.45;
}

/* ---- todo ---- */
.todo-group[b-vdlizidz25] {
    margin-bottom: 1.5rem;
}

.todo-group-title[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.priority-dot[b-vdlizidz25] {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-high   .priority-dot[b-vdlizidz25] { background: var(--begra-red); }
.priority-medium .priority-dot[b-vdlizidz25] { background: var(--begra-orange); }
.priority-low    .priority-dot[b-vdlizidz25] { background: var(--begra-blue); }

.priority-high[b-vdlizidz25]   { color: var(--begra-red); }
.priority-medium[b-vdlizidz25] { color: var(--begra-orange); }
.priority-low[b-vdlizidz25]    { color: var(--begra-blue); }

.todo-list-card[b-vdlizidz25] {
    padding: .5rem 1rem;
}

.todo-list[b-vdlizidz25] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-item[b-vdlizidz25] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--begra-gray-200);
    font-size: .875rem;
}

.todo-item:last-child[b-vdlizidz25] {
    border-bottom: none;
}

.todo-tag[b-vdlizidz25] {
    flex-shrink: 0;
    display: inline-block;
    padding: .1em .5em;
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tag-backend[b-vdlizidz25]  { background: #dbeafe; color: #1d4ed8; }
.tag-frontend[b-vdlizidz25] { background: #dcfce7; color: #15803d; }
.tag-test[b-vdlizidz25]     { background: #fef9c3; color: #854d0e; }
.tag-infra[b-vdlizidz25]    { background: #f3e8ff; color: #7c3aed; }

.todo-text[b-vdlizidz25] {
    line-height: 1.5;
    color: var(--begra-dark);
}

.todo-text code[b-vdlizidz25] {
    background: var(--begra-gray-100);
    padding: .1em .3em;
    border-radius: 3px;
    font-size: .8125rem;
}

/* ---- architecture grid ---- */
.arch-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.arch-card[b-vdlizidz25] {
    padding: 1rem;
}

.arch-project[b-vdlizidz25] {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--begra-green-dark);
    margin-bottom: .2rem;
    font-family: 'Consolas', monospace;
}

.arch-role[b-vdlizidz25] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--begra-gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.arch-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-dark);
    line-height: 1.5;
}

/* ---- responsive ---- */
@media (max-width: 768px) {
    .info-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
    .arch-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
    .module-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .info-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
    .arch-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
    .module-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
    .info-table th:last-child[b-vdlizidz25],
    .info-table td:last-child[b-vdlizidz25] { display: none; }
}
/* /Components/Pages/Planning.razor.rz.scp.css */
.planning-controls[b-dbeovctb55] {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.planning-zoom[b-dbeovctb55] {
    display: flex;
    gap: .5rem;
}

.planning-zoom button[b-dbeovctb55] {
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    color: var(--begra-dark);
    border-radius: 6px;
    padding: .5rem .875rem;
    min-height: 44px;
    cursor: pointer;
    font-weight: 600;
}

.planning-zoom button.active[b-dbeovctb55] {
    background: var(--begra-primary);
    border-color: var(--begra-primary);
    color: #fff;
}

.planning-nav[b-dbeovctb55] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.planning-period[b-dbeovctb55] {
    margin-left: .5rem;
}

.planning-summary[b-dbeovctb55] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.planning-summary .begra-card[b-dbeovctb55] {
    padding: .75rem 1rem;
}

.planning-list[b-dbeovctb55] {
    list-style: none;
    margin: .5rem 0 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.planning-item[b-dbeovctb55] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: 6px;
    padding: .5rem .75rem;
    cursor: pointer;
}

.planning-item:hover[b-dbeovctb55] {
    background: var(--begra-gray-100);
}

.planning-title[b-dbeovctb55] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.planning-dates[b-dbeovctb55] {
    color: var(--begra-gray-600);
    font-size: .875rem;
    white-space: nowrap;
}

.planning-calendar-scroll[b-dbeovctb55] {
    margin-bottom: 1rem;
    overflow-x: auto;
    /* Schaduw-indicatoren die aangeven dat er gescrold kan worden */
    background:
        linear-gradient(to right, var(--begra-white) 30%, transparent) left center,
        linear-gradient(to left,  var(--begra-white) 30%, transparent) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right center;
    background-repeat: no-repeat;
    background-size: 80px 100%, 80px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

.planning-calendar-table[b-dbeovctb55] {
    width: 100%;
    border-collapse: collapse;
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    min-width: max-content;
}

.planning-calendar-table th[b-dbeovctb55],
.planning-calendar-table td[b-dbeovctb55] {
    border-bottom: 1px solid var(--begra-gray-200);
    padding: .4rem .5rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Sticky project-info kolommen (1=ID, 2=Naam, 3=Start) ───────────────── */
.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    position: sticky;
    z-index: 2;
    background: var(--begra-white);
}

.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55] {
    left: 0;
    min-width: 36px;
    max-width: 48px;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55] {
    left: 48px;
    min-width: 140px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    left: 228px;
    min-width: 90px;
    border-right: 2px solid var(--begra-gray-200);
}

/* Thead sticky cellen hebben hogere z-index dan tbody sticky cellen */
.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55] {
    z-index: 3;
    background: var(--begra-gray-100);
}

.planning-calendar-head[b-dbeovctb55] {
    text-align: center;
    min-width: 28px;
    padding: .35rem .2rem;
}

.planning-calendar-head span[b-dbeovctb55] {
    display: block;
    font-size: .75rem;
    font-weight: 600;
}

.planning-calendar-head small[b-dbeovctb55] {
    color: var(--begra-gray-600);
    font-size: .6875rem;
}

.planning-calendar-name[b-dbeovctb55] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-row[b-dbeovctb55] {
    cursor: pointer;
}

.calendar-row:hover[b-dbeovctb55] {
    background: var(--begra-gray-100);
}

.planning-track[b-dbeovctb55] {
    display: grid;
    gap: 0;
    align-items: center;
    min-height: 28px;
    position: relative;
}

.planning-track-cell[b-dbeovctb55] {
    display: block;
    height: 22px;
    border-right: 1px solid var(--begra-gray-200);
    background: color-mix(in srgb, var(--begra-gray-100) 55%, var(--begra-white));
    grid-row: 1;
}

.planning-track-cell:last-of-type[b-dbeovctb55] {
    border-right: none;
}

.planning-bar[b-dbeovctb55] {
    grid-row: 1;
    display: block;
    height: 16px;
    border-radius: 999px;
    background: var(--begra-primary);
    border: 1px solid var(--begra-primary-dark);
    z-index: 1;
}

.planning-bar.s1[b-dbeovctb55] { background: var(--status-1); border-color: var(--status-1); }
.planning-bar.s2[b-dbeovctb55] { background: var(--status-2); border-color: var(--status-2); }
.planning-bar.s3[b-dbeovctb55] { background: var(--status-3); border-color: var(--status-3); }
.planning-bar.s4[b-dbeovctb55] { background: var(--status-4); border-color: var(--status-4); }
.planning-bar.s5[b-dbeovctb55] { background: var(--status-5); border-color: var(--status-5); }
.planning-bar.s6[b-dbeovctb55] { background: var(--status-6); border-color: var(--status-6); }
.planning-bar.s7[b-dbeovctb55] { background: var(--status-7); border-color: var(--status-7); }
.planning-bar.s8[b-dbeovctb55] { background: var(--status-8); border-color: var(--status-8); }
.planning-bar.s9[b-dbeovctb55] { background: var(--status-9); border-color: var(--status-9); }

.planning-section[b-dbeovctb55] {
    margin-bottom: 1rem;
}

.planning-slot[b-dbeovctb55] {
    margin-top: .75rem;
}

.planning-collapse-toggle[b-dbeovctb55] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--begra-dark);
    text-align: left;
    cursor: pointer;
    padding: .25rem 0 .5rem 0;
    font: inherit;
}

.planning-collapse-toggle > span[b-dbeovctb55] {
    color: var(--begra-primary);
    font-weight: 700;
    min-width: 1.25rem;
    text-align: right;
}

.planning-item .status-badge[b-dbeovctb55] {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .planning-item[b-dbeovctb55] {
        grid-template-columns: 1fr;
    }

    .planning-item .status-badge[b-dbeovctb55] {
        max-width: 100%;
        justify-self: start;
    }

    .planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55] {
        left: 40px;
        min-width: 100px;
        max-width: 120px;
    }

    .planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
        left: 160px;
        min-width: 80px;
    }

    .planning-calendar-head[b-dbeovctb55] {
        min-width: 22px;
        padding: .25rem .15rem;
    }

    .planning-calendar-head span[b-dbeovctb55] { font-size: .6875rem; }
    .planning-calendar-head small[b-dbeovctb55] { font-size: .625rem; }

    .planning-calendar-table th[b-dbeovctb55],
    .planning-calendar-table td[b-dbeovctb55] {
        padding: .3rem .35rem;
    }
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
:global([data-theme="dark"]) .planning-item[b-dbeovctb55] {
    border-color: #333;
}

:global([data-theme="dark"]) .planning-item:hover[b-dbeovctb55] {
    background: #1e1e1e;
}

:global([data-theme="dark"]) .planning-calendar-table[b-dbeovctb55] {
    background: #141414;
    border-color: #333;
}

:global([data-theme="dark"]) .planning-calendar-table th[b-dbeovctb55],
:global([data-theme="dark"]) .planning-calendar-table td[b-dbeovctb55] {
    border-bottom-color: #262626;
}

:global([data-theme="dark"]) .planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
:global([data-theme="dark"]) .planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
:global([data-theme="dark"]) .planning-calendar-table thead th:nth-child(3)[b-dbeovctb55] {
    background: #1a1a1a;
}

:global([data-theme="dark"]) .planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55],
:global([data-theme="dark"]) .planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55],
:global([data-theme="dark"]) .planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    background: #141414;
}

:global([data-theme="dark"]) .calendar-row:hover[b-dbeovctb55] {
    background: #1e1e1e;
}

:global([data-theme="dark"]) .calendar-row:hover td:nth-child(1)[b-dbeovctb55],
:global([data-theme="dark"]) .calendar-row:hover td:nth-child(2)[b-dbeovctb55],
:global([data-theme="dark"]) .calendar-row:hover td:nth-child(3)[b-dbeovctb55] {
    background: #1e1e1e;
}

:global([data-theme="dark"]) .planning-track-cell[b-dbeovctb55] {
    background: #1a1a1a;
    border-right-color: #333;
}

:global([data-theme="dark"]) .planning-calendar-scroll[b-dbeovctb55] {
    background:
        linear-gradient(to right, #141414 30%, transparent) left center,
        linear-gradient(to left,  #141414 30%, transparent) right center,
        radial-gradient(farthest-side at 0 50%, rgba(255,255,255,.08), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.08), transparent) right center;
    background-repeat: no-repeat;
    background-size: 80px 100%, 80px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

:global([data-theme="dark"]) .planning-zoom button[b-dbeovctb55] {
    background: #1e1e1e;
    border-color: #333;
    color: #ccc;
}

:global([data-theme="dark"]) .planning-zoom button:hover[b-dbeovctb55] {
    border-color: var(--begra-primary);
    color: #fff;
}
/* /Components/Pages/ProjectDetail.razor.rz.scp.css */
.chapter-divider[b-avpa8fhfzv] {
    border: none;
    border-top: 1px solid var(--begra-gray-200);
    margin: 1.25rem 0 .75rem;
}

.chapter-subheader[b-avpa8fhfzv] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .75rem;
    color: var(--begra-dark);
}

.chapter-always-open-header[b-avpa8fhfzv] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    padding-bottom: .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--begra-gray-200);
}

.chapter-inner[b-avpa8fhfzv] {
    border-top: 1px solid var(--begra-gray-200);
    margin-top: .5rem;
    padding-top: .5rem;
}

.chapter-inner:first-child[b-avpa8fhfzv] {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.chapter-inner > summary[b-avpa8fhfzv] {
    cursor: pointer;
    padding: .45rem .25rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
    border-radius: .25rem;
}

.chapter-inner > summary[b-avpa8fhfzv]::-webkit-details-marker { display: none; }

.chapter-inner > summary[b-avpa8fhfzv]::before {
    content: "+";
    font-size: .85rem;
    font-weight: 700;
    color: var(--begra-primary);
    min-width: .9rem;
    text-align: center;
}

.chapter-inner[open] > summary[b-avpa8fhfzv]::before {
    content: "−";
}

.chapter-inner > summary:hover[b-avpa8fhfzv] {
    background: var(--begra-gray-100);
}

.chapter-inner > *:not(summary)[b-avpa8fhfzv] {
    padding-left: .25rem;
}

.chapter-badge[b-avpa8fhfzv] {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--begra-primary) 15%, var(--begra-white));
    color: var(--begra-primary);
    vertical-align: .05em;
}

:global([data-theme="dark"]) .chapter-badge[b-avpa8fhfzv] {
    background: rgba(66, 153, 225, .2);
}

.montage-send-summary[b-avpa8fhfzv] {
    margin-left: .35rem;
    color: var(--begra-gray-600);
    font-weight: 600;
}

.chapter-ico[b-avpa8fhfzv] {
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: -.2rem;
    margin-right: .5rem;
    color: var(--begra-primary);
    flex-shrink: 0;
}

.montage-send-summary.all-sent[b-avpa8fhfzv] {
    color: var(--begra-success);
}

.montage-request-title-accepted[b-avpa8fhfzv] {
    color: var(--begra-success);
}

.procurement-title-present[b-avpa8fhfzv] {
    color: var(--begra-success);
}

.chapter-check[b-avpa8fhfzv] {
    margin-left: .5rem;
    color: var(--begra-success);
    font-weight: 700;
}

.procurement-row-purchased td[b-avpa8fhfzv] {
    background: color-mix(in srgb, var(--begra-success) 18%, var(--begra-white));
}

:global([data-theme="dark"]) .procurement-row-purchased td[b-avpa8fhfzv] {
    background: rgba(0, 166, 81, .18);
}

.montage-request-row-sent td[b-avpa8fhfzv] {
    background: color-mix(in srgb, var(--begra-success) 12%, var(--begra-white));
}

.montage-request-row-cancelled td[b-avpa8fhfzv] {
    background: color-mix(in srgb, var(--begra-gray-200) 45%, var(--begra-white));
}

.montage-request-row-accepted td[b-avpa8fhfzv] {
    background: color-mix(in srgb, var(--begra-success) 20%, var(--begra-white));
}

.accept-offer-backdrop[b-avpa8fhfzv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 200;
}

.accept-offer-modal[b-avpa8fhfzv] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 2rem));
    max-height: 90dvh;
    overflow-y: auto;
    z-index: 201;
}

.mail-notice[b-avpa8fhfzv] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .9rem;
    padding: .55rem .75rem;
    border-radius: .4rem;
    background: color-mix(in srgb, var(--begra-blue) 12%, var(--begra-white));
    font-size: .875rem;
    flex-wrap: wrap;
}

.mail-notice svg[b-avpa8fhfzv] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--begra-blue);
    flex-shrink: 0;
}

.btn-sm[b-avpa8fhfzv] {
    padding: .25rem .65rem;
    font-size: .8rem;
}

.mail-preview-panel[b-avpa8fhfzv] {
    margin-top: .9rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: .4rem;
    overflow: hidden;
}

.mail-preview-panel summary[b-avpa8fhfzv] {
    cursor: pointer;
    padding: .55rem .75rem;
    font-weight: 600;
    font-size: .875rem;
    background: var(--begra-gray-100);
    user-select: none;
}

.mail-preview-body[b-avpa8fhfzv] {
    padding: .75rem 1rem;
    font-size: .875rem;
    max-height: 260px;
    overflow-y: auto;
    background: var(--begra-white);
    color: var(--begra-dark);
}

:global([data-theme="dark"]) .mail-notice[b-avpa8fhfzv] {
    background: rgba(66, 153, 225, .15);
}

:global([data-theme="dark"]) .mail-preview-panel summary[b-avpa8fhfzv] {
    background: var(--begra-gray-200);
}

:global([data-theme="dark"]) .mail-preview-body[b-avpa8fhfzv] {
    background: var(--begra-gray-100);
    color: var(--begra-dark);
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
:global([data-theme="dark"]) .montage-request-row-sent td[b-avpa8fhfzv] {
    background: rgba(0, 166, 81, .12);
}

:global([data-theme="dark"]) .montage-request-row-cancelled td[b-avpa8fhfzv] {
    background: rgba(255, 255, 255, .04);
}

:global([data-theme="dark"]) .montage-request-row-accepted td[b-avpa8fhfzv] {
    background: rgba(0, 166, 81, .18);
}
/* /Components/Pages/Projects.razor.rz.scp.css */
/* ── Filter bar ──────────────────────────────────────────────────────────── */
.projects-filter-bar[b-kmiyvqt387] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* ── Status tabs met kleuren ─────────────────────────────────────────────── */
.status-tabs[b-kmiyvqt387] {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
}

.status-tab[b-kmiyvqt387] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: var(--begra-white);
    border: 1.5px solid var(--begra-gray-200);
    padding: .375rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    min-height: 36px;
    color: var(--begra-gray-900);
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}

.status-tab:hover[b-kmiyvqt387] {
    border-color: var(--begra-primary);
    background: var(--begra-primary-light);
    color: var(--begra-primary-dark);
}

/* "Alles" en "Lopend" actief */
.status-tab.active:not([class*="status-tab-s"])[b-kmiyvqt387] {
    background: var(--begra-primary);
    border-color: var(--begra-primary);
    color: #fff;
}

.running-tab .tab-dot[b-kmiyvqt387] { background: var(--begra-primary); }

/* Gekleurde dot per status */
.tab-dot[b-kmiyvqt387] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status-specifieke dot + actief */
.status-tab-s1 .tab-dot[b-kmiyvqt387] { background: var(--status-1); }
.status-tab-s2 .tab-dot[b-kmiyvqt387] { background: var(--status-2); }
.status-tab-s3 .tab-dot[b-kmiyvqt387] { background: var(--status-3); }
.status-tab-s4 .tab-dot[b-kmiyvqt387] { background: var(--status-4); }
.status-tab-s5 .tab-dot[b-kmiyvqt387] { background: var(--status-5); }
.status-tab-s6 .tab-dot[b-kmiyvqt387] { background: var(--status-6); }
.status-tab-s7 .tab-dot[b-kmiyvqt387] { background: var(--status-7); }
.status-tab-s8 .tab-dot[b-kmiyvqt387] { background: var(--status-8); }
.status-tab-s9 .tab-dot[b-kmiyvqt387] { background: var(--status-9); }

.status-tab-s1.active[b-kmiyvqt387] { background: var(--status-1); border-color: var(--status-1); color: #fff; }
.status-tab-s2.active[b-kmiyvqt387] { background: var(--status-2); border-color: var(--status-2); color: #fff; }
.status-tab-s3.active[b-kmiyvqt387] { background: var(--status-3); border-color: var(--status-3); color: #fff; }
.status-tab-s4.active[b-kmiyvqt387] { background: var(--status-4); border-color: var(--status-4); color: #fff; }
.status-tab-s5.active[b-kmiyvqt387] { background: var(--status-5); border-color: var(--status-5); color: #fff; }
.status-tab-s6.active[b-kmiyvqt387] { background: var(--status-6); border-color: var(--status-6); color: #fff; }
.status-tab-s7.active[b-kmiyvqt387] { background: var(--status-7); border-color: var(--status-7); color: #fff; }
.status-tab-s8.active[b-kmiyvqt387] { background: var(--status-8); border-color: var(--status-8); color: #fff; }
.status-tab-s9.active[b-kmiyvqt387] { background: var(--status-9); border-color: var(--status-9); color: #fff; }

.status-tab.active .tab-dot[b-kmiyvqt387] { background: rgba(255,255,255,.85); }

/* ── Zoekbalk ────────────────────────────────────────────────────────────── */
.projects-search[b-kmiyvqt387] {
    position: relative;
    max-width: 480px;
}

.projects-search .search-icon[b-kmiyvqt387] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    color: var(--begra-gray-600);
}

.projects-search input[b-kmiyvqt387] {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-radius: 8px;
    border: 1.5px solid var(--begra-gray-200);
    transition: border-color .15s, box-shadow .15s;
}

.projects-search input:focus[b-kmiyvqt387] {
    border-color: var(--begra-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-clear[b-kmiyvqt387] {
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--begra-gray-600);
    font-size: 1rem;
    padding: .25rem;
    line-height: 1;
    min-height: 0;
}

.search-clear:hover[b-kmiyvqt387] { color: var(--begra-dark); }

/* ── Tabel verbeteringen ─────────────────────────────────────────────────── */
.projects-table .col-number[b-kmiyvqt387] { font-weight: 600; color: var(--begra-primary-dark); font-size: .9rem; white-space: nowrap; }
.projects-table .col-date[b-kmiyvqt387]  { white-space: nowrap; color: var(--begra-gray-600); font-size: .875rem; }
.projects-table .col-city[b-kmiyvqt387]  { color: var(--begra-gray-900); }
.projects-table .col-status[b-kmiyvqt387] { white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.projects-footer[b-kmiyvqt387] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--begra-gray-600);
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Lege/laad-staat ─────────────────────────────────────────────────────── */
.projects-loading[b-kmiyvqt387],
.projects-empty[b-kmiyvqt387] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--begra-gray-600);
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    border-radius: 8px;
}

/* ── Dark mode aanpassingen ──────────────────────────────────────────────── */
:global([data-theme="dark"]) .status-tab[b-kmiyvqt387] {
    background: #1e1e1e;
    border-color: #333;
    color: #ccc;
}

:global([data-theme="dark"]) .status-tab:hover[b-kmiyvqt387] {
    background: rgba(0, 92, 185, .18);
    border-color: var(--begra-primary);
    color: #fff;
}

:global([data-theme="dark"]) .status-tab.active:not([class*="status-tab-s"])[b-kmiyvqt387] {
    background: var(--begra-primary);
    border-color: var(--begra-primary);
    color: #fff;
}

/* Tabelrij hover in dark mode: zorg voor leesbare tekst */
:global([data-theme="dark"]) .projects-table tbody tr.clickable:hover td[b-kmiyvqt387] {
    color: #fff !important;
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* ---- KPI cards ---- */
.kpi-grid[b-dad0wi9i1b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .kpi-grid[b-dad0wi9i1b] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .kpi-grid[b-dad0wi9i1b] { grid-template-columns: 1fr; }
}

.kpi-card[b-dad0wi9i1b] {
    text-align: center;
    padding: 1.25rem 1rem;
}

.kpi-card--alert[b-dad0wi9i1b] {
    border-color: var(--begra-red);
}

.kpi-value[b-dad0wi9i1b] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--begra-primary);
    line-height: 1.1;
}

.kpi-card--alert .kpi-value[b-dad0wi9i1b] {
    color: var(--begra-red);
}

.kpi-label[b-dad0wi9i1b] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    margin-top: .25rem;
}

/* ---- Charts row ---- */
.charts-row[b-dad0wi9i1b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .charts-row[b-dad0wi9i1b] { grid-template-columns: 1fr; }
}

.chart-card[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
}

.chart-card h2[b-dad0wi9i1b] {
    margin-bottom: 1rem;
}

/* ---- Donut chart ---- */
.donut-wrapper[b-dad0wi9i1b] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.donut-svg[b-dad0wi9i1b] {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.donut-legend[b-dad0wi9i1b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8125rem;
}

.donut-legend li[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.donut-legend .legend-empty[b-dad0wi9i1b] {
    opacity: .45;
}

.legend-dot[b-dad0wi9i1b] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-label[b-dad0wi9i1b] {
    flex: 1;
    color: var(--begra-gray-900);
}

.legend-count[b-dad0wi9i1b] {
    font-weight: 600;
    min-width: 1.5rem;
    text-align: right;
    color: var(--begra-dark);
}

/* ---- Horizontal bar chart ---- */
.bar-chart[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bar-group[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.bar-cat-label[b-dad0wi9i1b] {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--begra-gray-900);
}

.bar-count[b-dad0wi9i1b] {
    font-weight: 400;
    color: var(--begra-gray-600);
}

.bar-item[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

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

.bar-dot--price[b-dad0wi9i1b]    { background: var(--begra-primary); }
.bar-dot--purchase[b-dad0wi9i1b] { background: var(--begra-orange); }

.bar-track[b-dad0wi9i1b] {
    flex: 1;
    height: 10px;
    background: var(--begra-gray-200);
    border-radius: 5px;
    overflow: hidden;
}

.bar-fill[b-dad0wi9i1b] {
    height: 100%;
    border-radius: 5px;
    min-width: 2px;
    transition: width .4s ease;
}

.bar-fill--price[b-dad0wi9i1b]    { background: var(--begra-primary); }
.bar-fill--purchase[b-dad0wi9i1b] { background: var(--begra-orange); }

.bar-amount[b-dad0wi9i1b] {
    font-size: .75rem;
    min-width: 5rem;
    text-align: right;
    color: var(--begra-gray-900);
    white-space: nowrap;
}

.bar-legend-row[b-dad0wi9i1b] {
    display: flex;
    gap: 1.25rem;
    font-size: .75rem;
    color: var(--begra-gray-600);
    margin-top: .25rem;
}

.bar-legend-row span[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ---- Tables ---- */
.section-card[b-dad0wi9i1b] {
    margin-bottom: 1rem;
}

.section-card h2[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.table-scroll[b-dad0wi9i1b] {
    overflow-x: auto;
}

.data-table[b-dad0wi9i1b] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.data-table th[b-dad0wi9i1b] {
    text-align: left;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--begra-gray-600);
    border-bottom: 2px solid var(--begra-gray-200);
    white-space: nowrap;
}

.data-table td[b-dad0wi9i1b] {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--begra-gray-200);
    vertical-align: middle;
}

.data-table tbody tr:last-child td[b-dad0wi9i1b] {
    border-bottom: none;
}

.data-table tbody tr:hover[b-dad0wi9i1b] {
    background: var(--begra-gray-100);
}

/* ---- Throughput badge ---- */
.days-badge[b-dad0wi9i1b] {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.days-badge--ok[b-dad0wi9i1b]   { background: #E8F5E9; color: #2E7D32; }
.days-badge--mid[b-dad0wi9i1b]  { background: #FFF3E0; color: #E65100; }
.days-badge--high[b-dad0wi9i1b] { background: #FFEBEE; color: #C62828; }

/* ---- Count badge ---- */
.count-badge[b-dad0wi9i1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--begra-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 0 .35rem;
}

.empty-hint[b-dad0wi9i1b] {
    color: var(--begra-gray-400);
    font-size: .9rem;
    padding: .5rem 0;
}

/* Dark mode overrides */
[data-theme="dark"] .days-badge--ok[b-dad0wi9i1b]   { background: #1B5E2066; color: #A5D6A7; }
[data-theme="dark"] .days-badge--mid[b-dad0wi9i1b]  { background: #E65100aa; color: #FFCC80; }
[data-theme="dark"] .days-badge--high[b-dad0wi9i1b] { background: #C62828aa; color: #EF9A9A; }
[data-theme="dark"] .data-table tbody tr:hover[b-dad0wi9i1b] { background: #1A1A1A; }

/* ---- Section headings ---- */
.section-heading[b-dad0wi9i1b] {
    margin: 1.75rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--begra-gray-900);
    border-bottom: 2px solid var(--begra-gray-200);
    padding-bottom: .5rem;
}

.section-sub[b-dad0wi9i1b] {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--begra-gray-600);
    margin-left: .5rem;
}

/* ---- Financial KPI grid ---- */
.kpi-grid--financial[b-dad0wi9i1b] {
    margin-bottom: 1rem;
}

.kpi-value--sm[b-dad0wi9i1b] {
    font-size: 1.375rem;
}

.kpi-value--positive[b-dad0wi9i1b] {
    color: #2E7D32;
}

.kpi-sub[b-dad0wi9i1b] {
    font-size: .75rem;
    color: var(--begra-gray-400);
    margin-top: .125rem;
}

/* ---- Budget bar dot ---- */
.bar-dot--budget[b-dad0wi9i1b] { background: #7B1FA2; }
.bar-fill--budget[b-dad0wi9i1b] { background: #7B1FA2; }

.bar-project-name[b-dad0wi9i1b] {
    font-weight: 400;
    color: var(--begra-gray-600);
    font-size: .8125rem;
    margin-left: .35rem;
}

/* ---- Vertical month bar chart ---- */
.month-bar-svg[b-dad0wi9i1b] {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Montage-aanvraag stats ---- */
.montage-stats-total[b-dad0wi9i1b] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.montage-stats-number[b-dad0wi9i1b] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--begra-primary);
    line-height: 1;
}

.montage-stats-label[b-dad0wi9i1b] {
    font-size: .875rem;
    color: var(--begra-gray-600);
}

.montage-stats-bars[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.montage-stat-row[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

.montage-stat-name[b-dad0wi9i1b] {
    min-width: 7rem;
    color: var(--begra-gray-900);
    font-size: .8125rem;
}

.montage-stat-count[b-dad0wi9i1b] {
    min-width: 2rem;
    text-align: right;
    font-weight: 600;
    font-size: .8125rem;
}

.montage-fill--draft[b-dad0wi9i1b]    { background: var(--begra-gray-400); }
.montage-fill--sent[b-dad0wi9i1b]     { background: var(--begra-primary); }
.montage-fill--accepted[b-dad0wi9i1b] { background: #00A651; }
.montage-fill--cancelled[b-dad0wi9i1b]{ background: var(--begra-red); }

/* ---- Count badge alert ---- */
.count-badge--alert[b-dad0wi9i1b] {
    background: var(--begra-red);
}

/* ---- Upcoming deadlines ---- */
.urgency--overdue td[b-dad0wi9i1b] { background: #FFEBEE; }
.urgency--critical td[b-dad0wi9i1b] { background: #FFF3E0; }

.urgency-badge[b-dad0wi9i1b] {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.urgency-badge--overdue[b-dad0wi9i1b]  { background: #FFEBEE; color: #B71C1C; }
.urgency-badge--critical[b-dad0wi9i1b] { background: #FFF3E0; color: #E65100; }
.urgency-badge--warning[b-dad0wi9i1b]  { background: #FFFDE7; color: #F57F17; }
.urgency-badge--ok[b-dad0wi9i1b]       { background: #E8F5E9; color: #2E7D32; }

.deadline-days[b-dad0wi9i1b] {
    font-size: .75rem;
    color: var(--begra-gray-600);
    margin-left: .3rem;
}

/* Dark mode deadline rows */
[data-theme="dark"] .urgency--overdue td[b-dad0wi9i1b]  { background: #B71C1C22; }
[data-theme="dark"] .urgency--critical td[b-dad0wi9i1b] { background: #E6510022; }
[data-theme="dark"] .urgency-badge--overdue[b-dad0wi9i1b]  { background: #B71C1C44; color: #EF9A9A; }
[data-theme="dark"] .urgency-badge--critical[b-dad0wi9i1b] { background: #E6510044; color: #FFCC80; }
[data-theme="dark"] .urgency-badge--warning[b-dad0wi9i1b]  { background: #F57F1744; color: #FFF176; }
[data-theme="dark"] .urgency-badge--ok[b-dad0wi9i1b]       { background: #2E7D3244; color: #A5D6A7; }
[data-theme="dark"] .kpi-value--positive[b-dad0wi9i1b]     { color: #A5D6A7; }
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
.ss-wrap[b-qih31srwfu] {
    position: relative;
    display: block;
}

.ss-input[b-qih31srwfu] {
    width: 100%;
    padding-right: 2rem;
}

.ss-arrow[b-qih31srwfu] {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--begra-gray-600);
    font-size: .75rem;
}

.ss-list[b-qih31srwfu] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-300, #ccc);
    border-radius: .4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
}

.ss-list li[b-qih31srwfu] {
    padding: .45rem .75rem;
    cursor: pointer;
    font-size: .925rem;
    color: var(--begra-dark);
}

.ss-list li:hover[b-qih31srwfu],
.ss-list li:focus[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary) 12%, var(--begra-white));
}

.ss-list li.ss-selected[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary) 20%, var(--begra-white));
    font-weight: 600;
}

.ss-list li.ss-empty[b-qih31srwfu] {
    color: var(--begra-gray-600);
    cursor: default;
    font-style: italic;
}

:global([data-theme="dark"]) .ss-list[b-qih31srwfu] {
    background: var(--begra-gray-100);
    border-color: var(--begra-gray-300);
}

:global([data-theme="dark"]) .ss-list li[b-qih31srwfu] {
    color: var(--begra-dark);
}

:global([data-theme="dark"]) .ss-list li:hover[b-qih31srwfu] {
    background: rgba(66, 153, 225, .18);
}