:root{--blue:#075c9f;--blue2:#1482bd;--navy:#153b5a;--red:#ed174c;--bg:#f2f5f7;--line:#d8e2e9;--text:#263746;--muted:#586c7b;--green:#4d8b37;--orange:#d99012;--danger:#bd4047;--white:#fff;--shadow:0 2px 10px rgba(26,61,86,.05)}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}
header{height:86px;background:white;border-bottom:3px solid var(--red);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:40;box-shadow:0 2px 12px #00000012}.brand{display:flex;align-items:center;gap:18px}.brand img{width:205px}.brand-title{border-left:1px solid var(--line);padding-left:18px}.brand-title h1{margin:0;color:var(--navy);font-size:24px}.brand-title span{font-size:13px;color:var(--muted)}.user{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;font-weight:700}.menuBtn{display:none;border:0;background:var(--navy);color:#fff;padding:9px 11px;border-radius:7px}
.layout{display:grid;grid-template-columns:252px 1fr;min-height:calc(100vh - 86px)}aside{background:var(--navy);color:#fff;padding:18px 14px;overflow:auto}.navgroup{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a9c5d8;margin:18px 10px 8px}.nav{display:flex;width:100%;border:0;background:transparent;color:#dbe8f0;padding:10px 12px;border-radius:8px;text-align:left;gap:9px;align-items:center}.nav:hover{background:#ffffff12;color:#fff}.nav.active{background:#ffffff1e;color:#fff;box-shadow:inset 3px 0 var(--red);font-weight:600}.nav.person{padding-left:20px;font-size:13px}.nav.locked{margin-top:5px;border:1px solid #ffffff25}
main{padding:26px;min-width:0;max-width:2100px;width:100%;margin:0 auto}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}.toolbar h2{margin:0;color:var(--navy);font-size:26px;letter-spacing:-.02em}.toolbar{padding:0 0 17px;border-bottom:1px solid var(--line)}.toolbar h2::before{content:"";display:inline-block;width:4px;height:25px;background:var(--red);margin-right:12px;vertical-align:-4px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:7px;padding:9px 13px;font-weight:600}.primary{background:var(--blue);color:#fff}.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.danger{background:var(--danger);color:white}.success{background:var(--green);color:white}
.grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(170px,1fr));
    gap:14px;
}

.card{
    background:white;
    border:1px solid var(--line);
    border-radius:9px;
    padding:17px;
    box-shadow:var(--shadow);
}

.kpi .num{
    font-size:29px;
    font-weight:700;
    color:var(--blue);
    margin-top:8px;
}

.kpi .lbl{
    font-size:13px;
    color:var(--muted);
}

.section{
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:var(--shadow);
    margin-top:18px;
    overflow:hidden;
}

.sectionHead{
    padding:15px 17px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}

.sectionHead h3{
    margin:0;
    color:var(--navy);
}

.sectionHead > .muted{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#f7fafc;
    color:var(--navy);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.filters{
    padding:12px 17px 13px;
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(145px,1fr)
    );
    gap:9px;
    border-bottom:1px solid var(--line);
    background:#fafcfd;
}

.filters > div{
    min-width:0;
}

.filterSearch{
    grid-column:span 2;
}

.filters input,
.filters select{
    min-height:36px;
}

.filters .btn{
    min-height:36px;
    white-space:nowrap;
}

input,
select,
textarea{
    border:1px solid #cbd8e1;
    border-radius:7px;
    padding:8px;
    background:#fff;
    width:100%;
}

label{
    font-size:12px;
    color:var(--muted);
    display:block;
    margin:0 0 5px;
}

.filters label{
    margin-bottom:4px;
    font-size:12px;
    font-weight:600;
    color:var(--navy);
}

.tableWrap{
    width:100%;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
}
table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

th,
td{
    padding:11px 12px;
    border-bottom:1px solid #e5ecef;
    text-align:left;
    font-size:13px;
    vertical-align:middle;
}

tbody tr:last-child td{
    border-bottom:0;
}

th{
    white-space:nowrap;
    font-size:12px;
}

td{
    line-height:1.35;
}

th{
    background:var(--navy);
    color:#fff;
    font-weight:600;
    letter-spacing:.01em;
    border-bottom:1px solid #d3dfe7;
}


.click{
    color:var(--blue);
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    transition:color .15s ease;
}

.click:hover{
    color:var(--navy);
    text-decoration:underline;
    text-underline-offset:2px;
}

.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}
.badge.warn{
    background:#fff1cb;
    color:#8a5a00;
}

.badge.danger{
    background:#fde8ea;
    color:#a72f38;
}

.drawingDeadlineSoon td{
    background:#fff3f5;
}

.drawingDeadlineOverdue td{
    background:#fbdfe3;
}

.drawingDeadlineOverdue td:first-child{
    border-left:3px solid var(--red);
}
    
.active{
    background:#e6f3fc;
    color:#075c9f;
}

.concept{
    background:#eef0f2;
    color:#5b6872;
}

.submitted{
    background:#fff1cb;
    color:#8a5a00;
}

.draftdecision{
    background:#ffe2be;
    color:#9a4c00;
}

.decision,
.done{
    background:#dff2dd;
    color:#376f2a;
}

.waiting{
    background:#fde9ed;
    color:#a52e42;
}
    .onhold{
    background:#f1e8fb;
    color:#6b3f8f;
}
    .status-onhold{
    background:#f1e8fb;
}








.tableWrap tbody tr{
    transition:
        filter .15s ease,
        box-shadow .15s ease;
}

.tableWrap tbody tr:hover{
    filter:brightness(.975);
    box-shadow:inset 0 0 0 1px #d8e2e9;
}
    
tr.urgent{
    box-shadow:inset 5px 0 #d93442;
}

/* Deadline over 8 t/m 14 dagen */
tr.deadlineUpcoming{}


/* Deadline over 4 t/m 7 dagen */
tr.deadlineSoon{}


/* Deadline vandaag t/m 3 dagen */
tr.deadlineCritical{}


/* Deadline verlopen */
tr.deadlineOverdue{}


.inlineDate{
    width:125px;
    min-width:125px;
}.smallBtn{padding:6px 9px;border:0;border-radius:6px;background:var(--blue);color:#fff}.muted{color:var(--muted)}.empty{padding:28px;text-align:center;color:var(--muted)}
.modal{position:fixed;inset:0;background:#102a3a90;display:none;align-items:center;justify-content:center;z-index:100;padding:20px}.modal.open{display:flex}.dialog{background:#fff;border-radius:13px;box-shadow:0 20px 60px #0004;width:min(1000px,100%);max-height:92vh;overflow:auto}.dialogHead{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.dialogBody{padding:20px}.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.span2{grid-column:span 2}.span3{grid-column:span 3}.dialogFoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.checks{border:1px solid var(--line);border-radius:8px;padding:10px;max-height:180px;overflow:auto}.check{display:flex;gap:8px;align-items:center;padding:5px}.check input{width:auto}
.login{position:fixed;inset:0;background:linear-gradient(135deg,#153b5a,#075c9f);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.loginCard{width:min(440px,100%);background:#fff;border-radius:16px;padding:28px;box-shadow:0 25px 80px #0005}.loginCard img{width:240px;display:block;margin:0 auto 20px}.loginCard h2{color:var(--navy);margin:0 0 5px}.hint{font-size:12px;color:var(--muted);margin-top:10px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:14px 17px;border-bottom:1px solid var(--line)}.tab{padding:7px 10px;border-radius:7px;border:1px solid var(--line);background:#fff}.tab.active{background:var(--blue);color:#fff}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(2,1fr)}.formgrid{grid-template-columns:1fr 1fr}.span3{grid-column:span 2}}
@media(max-width:800px){header{height:auto;padding:12px}.brand img{width:155px}.brand-title span{display:none}.menuBtn{display:block}.layout{grid-template-columns:1fr}aside{position:fixed;left:-310px;top:76px;bottom:0;width:285px;z-index:50;transition:.2s}aside.open{left:0}main{padding:14px}.user select{max-width:145px}.grid{grid-template-columns:1fr}.filters,.formgrid{grid-template-columns:1fr}.span2,.span3{grid-column:auto}}

.feed{display:grid;gap:10px;padding:14px 17px}
.feedItem{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:start;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.feedItem.unread{border-left:5px solid var(--blue);background:#f5fbff}

.feedItem.colleagueChange{
    border-left:5px solid #d93442;
    background:#fff0f1;
}

.feedTime{font-size:12px;color:var(--muted)}
.feedAction{font-weight:600;color:var(--navy)}
.feedProject{font-size:12px;color:var(--blue);font-weight:700}
.attentionGrid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;padding:14px 17px}
.attentionCard{border:1px solid var(--line);border-radius:10px;padding:13px;background:#fff;cursor:pointer}
.attentionCard:hover{box-shadow:var(--shadow)}
.attentionCard .n{font-size:24px;font-weight:700;color:var(--blue)}
.timeline{position:relative;padding:8px 0 8px 25px}
.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)}
.timelineItem{position:relative;margin:0 0 16px;padding:0 0 0 13px}
.timelineItem:before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--blue)}
.timelineMeta{font-size:12px;color:var(--muted);margin-bottom:3px}
.timelineText{font-size:13px}
.sidePanel{position:fixed;right:-620px;top:86px;bottom:0;width:min(600px,100vw);background:#fff;z-index:90;box-shadow:-12px 0 35px #0003;transition:.25s;overflow:auto}
.sidePanel.open{right:0}
.sidePanelHead{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.sidePanelBody{padding:18px}
.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detailBox{border:1px solid var(--line);border-radius:9px;padding:10px}
.detailBox span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
@media(max-width:800px){.feedItem{grid-template-columns:1fr}.attentionGrid{grid-template-columns:1fr 1fr}.detailGrid{grid-template-columns:1fr}.sidePanel{top:76px}}


.legend{
    display:flex;
    flex-wrap:wrap;
    gap:5px 10px;
    align-items:center;
    font-size:10px;
    line-height:1.2;
    color:var(--muted);
}

.legendItem{
    display:flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}

.legendSwatch{
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:3px;
    border:1px solid #aebfca;
}.sw-active{background:#cfeaf9;border-color:#76afd0}.sw-concept{background:#e1e6ea;border-color:#9ba8b1}.sw-onhold{background:#e5d7f2;border-color:#9b78b5}.sw-submitted{background:#ffe6a3;border-color:#d7ad38}.sw-draft{background:#ffd3a3;border-color:#d9893f}.sw-done{background:#cce9d2;border-color:#6ca277}.sw-urgent{background:#ffd9dd;border-left:4px solid #d93442;border-color:#d96b76}

.toast{position:fixed;right:22px;bottom:22px;z-index:300;padding:12px 16px;border-radius:9px;
background:#376f2a;color:#fff;box-shadow:0 8px 28px #0003;font-weight:600;display:none}
.toast.error{background:#a52e42}

.relationSummary{padding:0}
.relationSummary table{min-width:760px}
.relationSummary .totalRow{font-weight:700;background:#edf3f7}
.actionBad{color:#a52e42;font-weight:700}
.actionSoon{color:#8a5a00;font-weight:700}


/* PlanningAM v4 – online-ready samenwerking */
.actingBox{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#f7fafc}
.actingBox label{margin:0;font-size:11px;white-space:nowrap}.actingBox select{min-width:165px;padding:6px}
.actingBanner{background:#fff5d9;border:1px solid #ead08c;border-radius:9px;padding:9px 13px;margin-bottom:13px;color:#765400}
.updateBadge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#edf3f7;color:var(--navy)}
.update-none{background:#eef0f2;color:#5b6872}
.update-advisor{background:#dceeff;color:#075c9f}
.update-specialist{background:#eee4fa;color:#59408f}
.update-drawing{background:#d9f0ef;color:#17655f}
.update-customer{background:#ffe4cf;color:#9a4c00}
.update-authority{background:#fff0b8;color:#806000}
.update-external{background:#f7dfef;color:#8b3d72}
.update-review{background:#dff2dd;color:#376f2a}
.update-processing{background:#e3e7ff;color:#334da3}
.quickUpdate{white-space:nowrap}.managementGrid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px;padding:17px}.miniTable{width:100%;min-width:0}.miniTable th,.miniTable td{padding:8px;font-size:12px}
.stale{color:#a52e42;font-weight:700}.fresh{color:#376f2a}.updateTimeline{display:grid;gap:10px;margin-top:12px}.updateEntry{border:1px solid var(--line);border-radius:9px;padding:10px;background:#fff}
@media(max-width:1100px){
    .managementGrid{grid-template-columns:1fr}
    .actingBox label{display:none}
}

@media(max-width:800px){
    .actingBox{width:100%}
    .actingBox select{min-width:0}
    .user{flex-wrap:wrap;justify-content:flex-end}
}

/* ==========================================================
   Planning AM - laadanimatie na inloggen
   ========================================================== */

.loginLoader{
    display:none;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
}

.loginLoader.show{
    display:block;
    animation:loginLoaderFadeIn .20s ease-out;
}

.loginLoaderText{
    text-align:center;
    font-size:13px;
    font-weight:600;
    color:var(--navy);
    margin-bottom:12px;
}

.chickJourney{
    position:relative;
    height:62px;
    margin:0 6px;
}

.chickTrack{
    position:absolute;
    left:28px;
    right:32px;
    top:34px;
    height:4px;
    border-radius:999px;
    background:#d8e2e9;
    overflow:hidden;
}

.chickTrackProgress{
    width:0%;
    height:100%;
    background:var(--blue);
    border-radius:999px;
    transition:width .45s ease;
}

.loaderEgg,
.loaderBarn{
    position:absolute;
    top:17px;
    font-size:29px;
    line-height:1;
    z-index:2;
    user-select:none;
    pointer-events:none;
}

.loaderEgg{
    left:0;
}

.loaderBarn{
    right:0;
}

.loaderChick{
    position:absolute;
    left:27px;
    top:14px;
    font-size:30px;
    line-height:1;
    z-index:3;

    transform:
        translateX(-50%)
        translateY(0);

    transition:left .45s ease;

    user-select:none;
    pointer-events:none;
}

.loginLoader.show .loaderChick{
    animation:chickWalk .34s infinite alternate ease-in-out;
}

@keyframes chickWalk{

    from{
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-2deg);
    }

    to{
        transform:
            translateX(-50%)
            translateY(-3px)
            rotate(2deg);
    }
}

@keyframes loginLoaderFadeIn{

    from{
        opacity:0;
        transform:translateY(-4px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.loginButtonLoading{
    opacity:.65;
    cursor:wait !important;
    pointer-events:none;
}

#loginButton:disabled{
    cursor:wait;
}
    /* ==========================================================
   Planning AM - algemene laad- en foutmelding
   ========================================================== */

.appActionOverlay{
    position:fixed;
    inset:0;
    z-index:99999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(15,36,54,.24);
    backdrop-filter:blur(2px);
}


.appActionOverlay.show{
    display:flex;
    animation:loginLoaderFadeIn .18s ease-out;
}


.appActionCard{
    width:min(420px,calc(100vw - 32px));

    padding:24px;

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 18px 55px
        rgba(15,36,54,.22);

    text-align:center;
}


.appActionTitle{
    margin:0 0 7px;

    font-size:17px;
    font-weight:700;

    color:var(--navy);
}


.appActionMessage{
    margin:0;

    font-size:13px;
    line-height:1.5;

    color:var(--muted);
}


.appActionProgressText{
    margin-top:8px;

    font-size:12px;
    font-weight:700;

    text-align:center;

    color:var(--navy);
}


.appActionVisual{
    position:relative;

    height:78px;

    margin-top:17px;
}


.appActionTrack{
    position:absolute;

    left:30px;
    right:30px;
    top:39px;

    height:4px;

    overflow:hidden;

    border-radius:999px;

    background:#d8e2e9;
}


.appActionTrackProgress{
    width:0%;
    height:100%;

    border-radius:999px;

    background:var(--blue);

    transform-origin:left center;
}


.appActionEgg,
.appActionBarn{
    position:absolute;

    top:21px;

    font-size:30px;
    line-height:1;

    user-select:none;
    pointer-events:none;

    z-index:2;
}


.appActionEgg{
    left:0;
}


.appActionBarn{
    right:0;
}


.appActionChick{
    position:absolute;

    left:0%;
    top:18px;

    font-size:31px;
    line-height:1;

    transform:
        translateX(-50%);

    transition:
        left .25s ease;

    user-select:none;
    pointer-events:none;

    z-index:3;
}


@keyframes appActionProgress{

    0%{
        transform:scaleX(.08);
        opacity:.45;
    }

    55%{
        transform:scaleX(.72);
        opacity:1;
    }

    100%{
        transform:scaleX(1);
        opacity:.35;
    }

}


@keyframes appActionChickWalk{

    from{
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-2deg);
    }

    to{
        transform:
            translateX(-50%)
            translateY(-3px)
            rotate(2deg);
    }

}


/* ==========================================================
   Echte fout
   ========================================================== */

.appActionOverlay.error{
    background:rgba(50,20,20,.30);
}


.appActionOverlay.error .appActionCard{
    max-width:460px;
}


.appActionErrorVisual{
    display:none;

    margin:16px 0 12px;

    font-size:55px;
    line-height:1;
}


.appActionOverlay.error .appActionVisual{
    display:none;
}


.appActionOverlay.error .appActionErrorVisual{
    display:block;

    animation:
        appErrorShake
        .45s
        ease-out;
}


.appActionOverlay.error .appActionTitle{
    color:#a52e42;
}


.appActionErrorActions{
    display:none;

    margin-top:18px;

    gap:10px;

    justify-content:center;
}


.appActionOverlay.error .appActionErrorActions{
    display:flex;
}


@keyframes appErrorShake{

    0%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-5px);
    }

    50%{
        transform:translateX(5px);
    }

    75%{
        transform:translateX(-3px);
    }

    100%{
        transform:translateX(0);
    }

}

@media(max-width:600px){

    .loginLoader{
        margin-top:18px;
        padding-top:15px;
    }

    .loginLoaderText{
        font-size:12px;
        margin-bottom:10px;
    }

    .chickJourney{
        height:58px;
        margin:0 3px;
    }

    .chickTrack{
        left:26px;
        right:29px;
        top:32px;
    }

    .loaderEgg,
    .loaderBarn{
        top:16px;
        font-size:26px;
    }

    .loaderChick{
        left:25px;
        top:14px;
        font-size:27px;
    }
}

    /* ==========================================================
   Planning AM - verbeterde mobiele weergave
   ========================================================== */

@media(max-width:800px){

    /* Hoofdscherm */
    main{
        padding:10px;
        overflow-x:hidden;
    }

    .layout{
        width:100%;
        min-width:0;
    }

    /* Header compacter */
    header{
        min-height:64px;
        padding:8px 10px;
        gap:8px;
    }

    .brand{
        gap:8px;
        min-width:0;
    }

    .brand img{
        width:125px;
        max-width:32vw;
    }

    .brand-title{
        padding-left:8px;
    }

    .brand-title h1{
        font-size:18px;
    }

    .user{
        gap:6px;
    }

    #who{
        display:none;
    }

    .avatar{
        width:34px;
        height:34px;
        font-size:12px;
        flex:0 0 auto;
    }

    .user .btn{
        padding:7px 9px;
        font-size:12px;
    }

    /* Zijmenu */
    aside{
        top:64px;
        width:min(285px,88vw);
    }

    /* Bovenbalken */
    .toolbar{
        align-items:stretch;
        gap:8px;
    }

    .toolbar h2{
        width:100%;
        font-size:20px;
    }

    .actions{
        width:100%;
    }

    .actions .btn{
        flex:1 1 auto;
    }

    /* Kaarten */
    .card{
        padding:13px;
        border-radius:10px;
    }

    .section{
        margin-top:12px;
        border-radius:10px;
    }

    .sectionHead{
        padding:12px;
        gap:8px;
        flex-wrap:wrap;
    }

/* Filters */
.filters{
    padding:10px 12px;
    grid-template-columns:1fr;
    gap:8px;
}

.filterSearch{
    grid-column:auto;
}

.filters input,
.filters select,
.filters .btn{
    width:100%;
}

.filters > div{
    width:100%;
}

    /* Beheer-tabs:
       horizontaal scrollen in plaats van alles onder elkaar */
    .tabs{
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        padding:10px 12px;
        gap:6px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    .tab{
        flex:0 0 auto;
        white-space:nowrap;
    }

    /* Tabellen blijven bruikbaar zonder de hele pagina breed te trekken */
    .tableWrap{
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .tableWrap table{
        width:max-content;
        min-width:850px;
    }

    th,
    td{
        padding:8px 9px;
        font-size:12px;
    }

    /* Invoervelden groot genoeg voor aanraken */
    input,
    select,
    textarea{
        min-height:40px;
        font-size:16px;
    }

    textarea{
        min-height:80px;
    }

    .inlineDate{
        width:135px;
        min-width:135px;
        font-size:14px;
    }

    /* Modals vrijwel schermvullend */
    .modal{
        padding:8px;
        align-items:flex-start;
    }

    .dialog{
        width:100%;
        max-width:none;
        max-height:calc(100vh - 16px);
        margin:0;
        border-radius:10px;
    }

    .dialogHead{
        padding:12px 14px;
        position:sticky;
        top:0;
        background:#fff;
        z-index:3;
    }

    .dialogBody{
        padding:14px;
    }

    .dialogFoot{
        position:sticky;
        bottom:0;
        background:#fff;
        padding:10px 14px;
        flex-wrap:wrap;
        z-index:3;
    }

    .dialogFoot .btn{
        flex:1 1 auto;
    }

    .formgrid{
        grid-template-columns:1fr;
        gap:11px;
    }

    .span2,
    .span3{
        grid-column:auto;
    }

    /* Projectdetail */
    .sidePanel{
        top:64px;
        width:100vw;
        max-width:100vw;
    }

    .sidePanelHead{
        padding:12px 14px;
    }

    .sidePanelBody{
        padding:12px;
    }

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

    /* Dashboard */
    .grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .attentionGrid{
        grid-template-columns:1fr 1fr;
        padding:10px 12px;
        gap:8px;
    }

    .feed{
        padding:10px 12px;
    }

    .feedItem{
        grid-template-columns:1fr;
        gap:5px;
    }

    /* Beheer */
    .managementGrid{
        grid-template-columns:1fr;
        padding:12px;
    }

    /* Meldingen */
    .toast{
        left:10px;
        right:10px;
        bottom:10px;
        text-align:center;
    }

    .appActionCard{
        width:calc(100vw - 24px);
        padding:18px;
    }
}


/* Extra compact voor kleine telefoons */
@media(max-width:480px){

    .brand-title{
        display:none;
    }

    .brand img{
        width:135px;
        max-width:42vw;
    }

    .menuBtn{
        flex:0 0 auto;
    }

    .user .btn{
        font-size:0;
        padding:8px;
    }

    .user .btn::after{
        content:"Uit";
        font-size:12px;
    }

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

    .kpi .num{
        font-size:25px;
    }

    .actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .actions .btn{
        width:100%;
    }
}
    

.personBadge{display:inline-block;min-width:30px;padding:4px 7px;margin:2px;border-radius:999px;font-weight:700;font-size:12px;text-align:center}
.personBadge.accepted{background:#c9efc2;color:#17621f;border:1px solid #8fd486}
.personBadge.pending,.personBadge.refused{background:#ffd5d9;color:#9b1727;border:1px solid #ef9ca6}
.personBadge.neutral{background:#e8eef3;color:#173c55;border:1px solid #c7d4de}
.shortDescriptionCell{max-width:180px;white-space:normal}
.secondReadingList{padding:12px}.secondReadingTask{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px;border-bottom:1px solid #d8e1e7}.secondReadingTask:last-child{border-bottom:0}
.secondReadingActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.secondReaderAssign{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.secondReadingPending{padding:10px 12px;background:#fff3c9;border:1px solid #e1c66c;border-radius:8px}.secondReadingHistoryList{margin-top:12px}.secondReadingHistory{padding:8px 0;border-top:1px solid #e1e7eb}
@media(max-width:900px){.secondReadingTask{align-items:flex-start;flex-direction:column}.secondReadingActions{justify-content:flex-start}}

.compactDialog{max-width:620px}
.formMessage{min-height:20px;margin-top:10px;font-weight:600}
.errorMessage{color:#a91e2d}
.reviewConsequence{padding:12px;background:#eef5f8;border:1px solid #cbdbe4;border-radius:8px;color:#173c55}

.dashboardLinkCard,.attentionCard{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.dashboardLinkCard:hover,.attentionCard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,57,82,.12);border-color:#91b6cc}
.dashboardLinkCard:focus-visible{outline:3px solid #2b83b8;outline-offset:2px}
.cardLinkHint{margin-top:8px;font-size:12px;color:#47758f;font-weight:600}
.attentionGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.dashboardActionList{padding:0 16px}
.dashboardActionRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid #dce5ea}
.dashboardActionRow[onclick]{cursor:pointer}
.dashboardActionRow:last-child{border-bottom:0}
.dashboardActionRow:hover{background:#f4f8fa}
@media(max-width:1200px){
  .attentionGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .personalPlanningTable{min-width:0!important;width:100%}
  .personalPlanningTable thead{display:none}
  .personalPlanningTable,.personalPlanningTable tbody{display:block}
  .personalPlanningTable tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:12px;border:1px solid #cfdae1;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(15,57,82,.07)}
  .personalPlanningTable td{display:flex!important;flex-direction:column;justify-content:flex-start;min-width:0!important;padding:10px 12px!important;border-bottom:1px solid #e1e8ec}
  .personalPlanningTable td::before{content:attr(data-label);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#527286;margin-bottom:5px}
  .personalPlanningTable td[data-label="Laatste update"],.personalPlanningTable td[data-label="Handeling"]{grid-column:1/-1}
  .personalPlanningTable td[data-label="Handeling"]{display:flex!important;flex-direction:row;gap:8px;align-items:center}
  .personalPlanningTable td[data-label="Handeling"]::before{margin-right:auto}
  .personalPlanningTable select,.personalPlanningTable .inlineDate{width:100%;max-width:none}
}
@media(max-width:700px){
  .attentionGrid{grid-template-columns:1fr}
  .personalPlanningTable tr{grid-template-columns:1fr;margin:8px}
  .personalPlanningTable td[data-label="Laatste update"],.personalPlanningTable td[data-label="Handeling"]{grid-column:auto}
  .dashboardActionRow{grid-template-columns:1fr}
}

/* Professionele visuele afronding */
html,body{max-width:100%;overflow-x:hidden}
aside{position:sticky;top:86px;height:calc(100vh - 86px);box-shadow:3px 0 14px rgba(15,45,65,.08)}
.nav{font-size:14px;min-height:40px}
.navgroup{font-size:11px;color:#bdd2df}
th{font-size:12.5px}
td{font-size:13.5px}
.legend{font-size:11px;gap:7px 13px}
.dashboardPrioritySection{border-top:3px solid var(--blue)}
.dashboardPrioritySection .sectionHead{background:#f8fbfd}
.attentionCard{position:relative;min-height:92px;padding:17px 15px;border-top:3px solid #b7ccd9}
.attentionCard .n{font-size:27px}
.attentionPrimary{border-top-color:#075c9f}
.attentionContact{border-top-color:#5a879f}
.attentionDistribution{border-top-color:#768d9a}
.attentionReview{border-top-color:#6b5a8e}
.dashboardLinkCard{position:relative;overflow:hidden}
.dashboardLinkCard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#8bb6ce}
.dashboardLinkCard:hover::before{background:var(--blue)}
/* Persoonlijke planning: rustige basis met duidelijke statuskleuren. */
.personalPlanningTable tbody tr{--status-accent:#8fa3af;background:var(--project-row,#fff)!important;box-shadow:none!important;transition:filter .15s ease,box-shadow .15s ease}
.personalPlanningTable tbody tr.s-Actief{--status-accent:#3d8fbe;}
.personalPlanningTable tbody tr.s-Concept{--status-accent:#7f8d96;}
.personalPlanningTable tbody tr.s-Onhold{--status-accent:#845ba3;}
.personalPlanningTable tbody tr.s-Ingediend{--status-accent:#c99413;}
.personalPlanningTable tbody tr.s-Ontwerpbesluit{--status-accent:#cf7625;}
.personalPlanningTable tbody tr.s-Besluit,
.personalPlanningTable tbody tr.s-Klaar{--status-accent:#4f915b;}
.personalPlanningTable tbody tr:hover{filter:brightness(.975)}
.personalPlanningTable tr.deadlineUpcoming td:first-child{border-left:4px solid #6fa5ca}
.personalPlanningTable tr.deadlineSoon td:first-child{border-left:4px solid #d4aa2e}
.personalPlanningTable tr.deadlineCritical td:first-child{border-left:4px solid #dc8730}
.personalPlanningTable tr.deadlineOverdue td:first-child,
.personalPlanningTable tr.urgent td:first-child{border-left:4px solid #d93442}
.personalPlanningTable td[data-label="Specialist"]{text-align:center!important}
.personalPlanningTable .noSpecialistBadge{display:inline-flex;justify-content:center;margin-left:0;text-align:center}
.personalPlanningTable tr.s-Actief td[data-label="Status"] select{border-left:4px solid #3d8fbe;background:#f7fcff}
.personalPlanningTable tr.s-Concept td[data-label="Status"] select{border-left:4px solid #7f8d96;background:#fafbfc}
.personalPlanningTable tr.s-Onhold td[data-label="Status"] select{border-left:4px solid #845ba3;background:#fcf9fe}
.personalPlanningTable tr.s-Ingediend td[data-label="Status"] select{border-left:4px solid #c99413;background:#fffdf5}
.personalPlanningTable tr.s-Ontwerpbesluit td[data-label="Status"] select{border-left:4px solid #cf7625;background:#fffaf5}
.personalPlanningTable tr.s-Besluit td[data-label="Status"] select,
.personalPlanningTable tr.s-Klaar td[data-label="Status"] select{border-left:4px solid #4f915b;background:#f7fcf8}
@media(max-width:1200px){
  header{padding:0 16px}
  .brand{gap:12px}
  .brand img{width:175px}
  .brand-title{padding-left:12px}
  .brand-title h1{font-size:21px}
  .user{gap:7px}
}
@media(max-width:950px){
  .brand-title{display:none}
  .actingBox label{display:none}
}
@media(max-width:800px){
  aside{position:fixed;top:76px;height:auto;box-shadow:8px 0 28px rgba(0,0,0,.2)}
  header{gap:10px}
  .brand img{width:145px}
  .user>span:not(.avatar){display:none}
}

/* Tekenkamer: de volledige rij toont de urgentie; status blijft een klein label. */
.drawingOverviewTable{border-collapse:separate;border-spacing:0}
.drawingOverviewTable thead th{background:var(--navy);color:#fff;border-top:1px solid #cddfeb;border-bottom:1px solid #cddfeb;font-weight:700;padding:11px 12px}
.drawingOverviewTable tbody tr[data-search]{--drawing-accent:#859bae;--drawing-surface:#f4f7fa;transition:background .16s ease}
.drawingOverviewTable tbody tr.drawingUrgency-Normaal{--drawing-accent:#4f8eaf;--drawing-surface:#edf6fb}
.drawingOverviewTable tbody tr.drawingUrgency-Hoog{--drawing-accent:#d19526;--drawing-surface:#fff7e5}
.drawingOverviewTable tbody tr.drawingUrgency-Spoed{--drawing-accent:#cf5260;--drawing-surface:#fff0f1}
.drawingOverviewTable tbody tr:is([data-search],[data-status]) td{padding:12px;border-bottom:1px solid #d8e5ed;line-height:1.45;background:var(--drawing-surface)}
.drawingOverviewTable tbody tr:is([data-search],[data-status]) td:first-child{border-left:4px solid var(--drawing-accent)}
.drawingOverviewTable tbody tr:is([data-search],[data-status]):hover td{filter:brightness(.985)}
.drawingOverviewTable .drawingStatusBadge{font-size:11px;padding:3px 7px;white-space:nowrap}
#drawingPlanningTable td:nth-child(2) .muted{margin-top:3px}
#drawingPlanningTable td:last-child{font-variant-numeric:tabular-nums}
@media(max-width:700px){.drawingOverviewTable tbody tr[data-search] td{padding:10px}.drawingOverviewTable thead th{padding:9px 10px}}

/* Projectkaart – Agra-Matic */
.projectMapShell{padding:0;max-width:1800px;margin:auto}
.projectMapHeader{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 24px;background:var(--navy);border-bottom:4px solid var(--red);border-radius:12px 12px 0 0;margin-bottom:18px}
.projectMapHeader h3{margin:0;color:white;font-size:24px}
.projectMapHeader p{margin:7px 0 0;color:#dbe8f0;font-size:14px;line-height:1.5}
.projectMapHeaderActions{display:flex;gap:8px;flex-wrap:wrap}
.projectMapHeader .btn{min-height:40px}
.projectMapKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.projectMapKpi{border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:9px;padding:17px 18px;background:white;box-shadow:var(--shadow);min-width:0}
.projectMapKpi:nth-child(2){border-top-color:var(--red)}
.projectMapKpi span{font-size:14px;color:var(--navy);font-weight:600}
.projectMapKpi strong{display:block;font-size:28px;color:var(--blue);margin-top:9px;line-height:1.3;overflow-wrap:anywhere}
.projectMapGrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr);gap:16px}
.projectMapPanel{border:1px solid var(--line);border-radius:10px;background:white;overflow:hidden;box-shadow:0 3px 14px #153b5a08}
.projectMapFilters{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;padding:16px;background:#edf3f7}
.projectMapFilters>div{min-width:0}
.projectMapFilters label{font-size:14px;color:var(--navy);font-weight:600;margin-bottom:6px}
.projectMapFilters input,.projectMapFilters select{min-height:42px;font-size:14px}
.projectMapShell button:focus-visible,.projectMapShell input:focus-visible,.projectMapShell select:focus-visible,.projectMapShell summary:focus-visible{outline:3px solid var(--blue2);outline-offset:3px}
.projectMapCanvas{height:610px;background:#edf3f7}
.projectMapList{max-height:610px;overflow:auto}
.projectMapListHead{position:sticky;top:0;z-index:2;background:var(--navy);color:white;padding:14px 16px;border-bottom:3px solid var(--red);font-weight:600;font-size:16px}
.projectMapRow{padding:14px 16px;border-bottom:1px solid #e7edf1;cursor:pointer;font-size:14px;line-height:1.5}
.projectMapRow strong{color:var(--blue)}
.projectMapRow:hover{background:#edf6fc}
.projectMapRow small{display:block;color:var(--muted);margin-top:4px;font-size:13px}
.projectMapBadge{display:inline-flex;align-items:center;border:1px solid #cbd8e1;border-radius:5px;padding:3px 8px;font-size:12px;margin:7px 5px 0 0;background:#edf3f7;color:var(--navy)}
.projectMapEmpty{padding:26px;color:var(--muted);text-align:center;font-size:14px}
.leaflet-container{font-family:Segoe UI,Arial,sans-serif}
.projectMapCluster{background:var(--blue);color:white;border:3px solid white;box-shadow:0 3px 10px #153b5a55;border-radius:50%;display:grid;place-items:center;font-weight:700}
.projectMapCluster.selected{background:var(--red)}
#projectMapDistribution .sectionHead{background:#edf3f7;border-left:4px solid var(--red);padding:18px}
#projectMapDistribution th{background:var(--navy);color:white;font-size:14px}
#projectMapDistribution td{font-size:14px;padding:10px 12px}
#projectMapDistribution tbody tr:nth-child(even){background:#f7fafc}
#projectMapDistribution tbody tr:hover{background:#edf6fc}
#projectMapDistribution .btn{font-size:14px;text-align:left}
.projectMapFooter{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:12px 0}
#projectMapStatus{color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:1100px){.projectMapGrid{grid-template-columns:1fr}.projectMapFilters{grid-template-columns:repeat(2,minmax(0,1fr))}.projectMapFilters>div:last-child{grid-column:1/-1}.projectMapCanvas{height:500px}.projectMapList{max-height:420px}.projectMapKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.projectMapHeader{padding:18px}.projectMapKpis{gap:10px}.projectMapKpi{padding:13px}.projectMapKpi strong{font-size:24px}.projectMapFilters{grid-template-columns:1fr}.projectMapCanvas{height:430px}}


/* Shared project status colours: a light row tint, independent deadline cues. */
:root{
    --row-active:#edf7fd;
    --row-concept:#f2f4f6;
    --row-onhold:#f6f1fa;
    --row-submitted:#fff9e9;
    --row-draftdecision:#fff4e9;
    --row-done:#eff8ee;
}
tr.s-Actief{--project-row:var(--row-active)}
tr.s-Concept{--project-row:var(--row-concept)}
tr.s-Onhold{--project-row:var(--row-onhold)}
tr.s-Ingediend{--project-row:var(--row-submitted)}
tr.s-Ontwerpbesluit{--project-row:var(--row-draftdecision)}
tr.s-Besluit,tr.s-Klaar{--project-row:var(--row-done)}

/* Shared Agra-Matic components */
.btn,.smallBtn,.tab{transition:background .15s ease,box-shadow .15s ease;min-height:36px}
.btn.primary:hover,.smallBtn:hover{background:var(--navy)}
.btn.secondary:hover{background:#edf3f7;border-color:#aabfcf}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--blue2);outline-offset:3px}
input:disabled,select:disabled{color:var(--muted);background:#f3f6f8;opacity:1}
.sectionHead{background:#f7fafc;padding:17px 19px}
.sectionHead h3{font-size:17px}
.card.kpi{border-top:3px solid var(--blue);padding:19px 20px}
.card.kpi .lbl{font-size:13px;color:var(--navy);font-weight:600}
.card.kpi .num{font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dashboardLinkCard::before{display:none}
.dashboardLinkCard:hover{border-color:#9abed6;box-shadow:0 3px 12px #153b5a12}
.dashboardOverview{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--muted);font-size:13px}
.dashboardOverview .actions{gap:10px}
.filters{padding:16px 18px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));background:#f5f8fa}
.filters input,.filters select{min-height:40px}
.filterSearch{grid-column:span 2}
.activeFilterSummary{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding-top:10px;border-top:1px solid var(--line);font-size:12px}
.activeFilterSummary[hidden]{display:none}
.filterSummaryLabel{font-weight:600;color:var(--muted);margin-right:4px}
.filterChip{border:1px solid #b9d2e3;background:#eaf3fa;color:var(--navy);border-radius:5px;padding:5px 9px;font-size:12px;max-width:100%;overflow-wrap:anywhere;text-align:left}
.filterChip:hover{background:#dcecf7}
.tableWrap tbody tr:not(.totalRow){background:var(--project-row,#fff)}
.tableWrap tbody tr:hover{background:var(--project-row,#f6fafd);filter:brightness(.985)}
.personalPlanningTable tbody tr:hover{background:var(--project-row,#f6fafd)!important;filter:brightness(.985)}
.personalPlanningTable td[data-label="Klant en type"] b{color:var(--navy)}
.personalPlanningTable td[data-label="Handeling"] .smallBtn{display:block;width:100%;margin:3px 0;white-space:nowrap}
.personalPlanningTable .quickUpdate{background:#fff;color:var(--blue);border:1px solid #cbd8e1}
.deadlineHint{display:block;font-size:11px;font-weight:600;margin-top:5px;line-height:1.3}
.deadlineHint.overdue{color:#a52e42}.deadlineHint.critical{color:#a45b10}.deadlineHint.soon{color:#806000}
.mapLocationMissing{background:#fff0db;border-color:#e1c296;color:#815315}
.appActionVisual{height:22px!important;margin:22px 0!important}
.appActionVisual .appActionEgg,.appActionVisual .appActionChick,.appActionVisual .appActionBarn{display:none!important}
.appActionTrack{left:0!important;right:0!important;top:8px!important;height:5px!important}
.appActionErrorVisual{font-size:24px!important;color:var(--danger);font-weight:700}
@media(max-width:1100px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){main{padding:16px}.toolbar h2{font-size:22px}.filterSearch{grid-column:1/-1}.filters{grid-template-columns:1fr}.dashboardOverview{align-items:flex-start}.projectMapFilters{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.pageHeading p{margin:8px 0 0 16px;font-size:13px;color:var(--muted);line-height:1.5;max-width:720px}

.sidePanelHead{background:var(--navy);border-bottom:3px solid var(--red);color:#fff}
.sidePanelHead h3{font-size:18px;line-height:1.4;margin:0;color:white}
.projectDetailSection{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.projectDetailSection h4{margin:0 0 12px;color:var(--navy);font-size:14px}
.projectDetailSection .detailBox{border:0;border-radius:0;padding:0 0 8px;background:transparent;line-height:1.5;font-size:13px}
.projectDetailSection .detailBox>span:first-child{font-size:12px;margin-bottom:5px;font-weight:600}
.projectDetailSection .detailGrid{column-gap:20px;row-gap:12px}
.projectDetailSection .updateEntry{background:#f7fafc}

/* Drawing status colours use the same restrained palette as project planning. */
.drawingOverviewTable tbody tr[data-status="Gepland"]{--drawing-surface:var(--row-draftdecision)}
.drawingOverviewTable tbody tr[data-status="Geaccepteerd"]{--drawing-surface:var(--row-done)}
.drawingOverviewTable tbody tr[data-status="In uitvoering"]{--drawing-surface:var(--row-active)}
.drawingOverviewTable tbody tr[data-status="On hold"]{--drawing-surface:var(--row-onhold)}
.drawingOverviewTable tbody tr[data-status="Geweigerd"]{--drawing-surface:#fff0f2}
.drawingOverviewTable tbody tr[data-status="Klaar"],.drawingOverviewTable tbody tr[data-status="Archief"]{--drawing-surface:var(--row-done)}
.drawingOverviewTable tbody tr[data-urgency="Spoed"]{--drawing-accent:#cf5260}
.drawingOverviewTable tbody tr[data-urgency="Hoog"]{--drawing-accent:#d19526}
.drawingOverviewTable tbody tr.drawingDeadlineOverdue{--drawing-accent:#cf5260}
.attentionGrid.attentionSupplement{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media(max-width:700px){.attentionGrid.attentionSupplement{grid-template-columns:1fr}}

/* Tekenkamer is the shared visual reference for planning and work queues. */
#content .section:has(> .tableWrap),
#content .section:has(> .filters){
    padding:17px;
    background:#fff;
}
#content .section:has(> .tableWrap) > .sectionHead,
#content .section:has(> .filters) > .sectionHead{
    padding:3px 0 14px;
    background:#fff;
    border-bottom:0;
    align-items:center;
}
#content .section:has(> .tableWrap) > .sectionHead h3,
#content .section:has(> .filters) > .sectionHead h3{
    font-size:24px;
    line-height:1.25;
    letter-spacing:-.02em;
}
#content .sectionHead > .muted{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    font-size:13px;
    font-weight:400;
    color:var(--muted);
}
#content .legend{margin-top:7px;line-height:1.5}
#content .filters{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:12px 9px;
    padding:0 0 13px;
    background:#fff;
    border-bottom:0;
}
#content .filters > div{
    flex:0 1 185px;
    min-width:145px;
    max-width:100%;
}
#content .filters > .filterSearch{
    flex:1 0 100%;
    width:100%;
}
#content .filterSearch input{max-width:420px}
#content .filters label{font-weight:400;color:var(--muted)}
#content .filters input,#content .filters select{
    min-height:38px;
    border-radius:6px;
    padding:8px 10px;
}
#content .filters > .activeFilterSummary{
    flex:1 0 100%;
    padding-top:9px;
}
#content .tableWrap table{
    border-collapse:separate;
    border-spacing:0;
}
#content .tableWrap thead th{
    background:var(--navy);
    color:#fff;
    padding:11px 12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0;
}
#content .tableWrap tbody td{
    padding:12px;
    line-height:1.45;
    border-bottom:1px solid var(--line);
}
#content .tableWrap tbody tr[class*="s-"]{
    --status-accent:#859bae;
}
#content .tableWrap tbody tr.s-Actief{--status-accent:#3d8fbe}
#content .tableWrap tbody tr.s-Concept{--status-accent:#85939b}
#content .tableWrap tbody tr.s-Onhold{--status-accent:#845ba3}
#content .tableWrap tbody tr.s-Ingediend{--status-accent:#c99413}
#content .tableWrap tbody tr.s-Ontwerpbesluit{--status-accent:#cf7625}
#content .tableWrap tbody tr.s-Besluit,
#content .tableWrap tbody tr.s-Klaar{--status-accent:#4f915b}
#content .tableWrap tbody tr[class*="s-"] td:first-child{
    border-left:4px solid var(--status-accent);
}
#content .tableWrap tbody tr.deadlineUpcoming td:first-child{border-left-color:#6fa5ca}
#content .tableWrap tbody tr.deadlineSoon td:first-child{border-left-color:#d4aa2e}
#content .tableWrap tbody tr.deadlineCritical td:first-child{border-left-color:#dc8730}
#content .tableWrap tbody tr.deadlineOverdue td:first-child,
#content .tableWrap tbody tr.urgent td:first-child{border-left-color:#d93442}
#content .tableWrap .badge{font-size:11px;padding:3px 7px}
#content .tableWrap .muted{line-height:1.45}
#content .tableWrap .smallBtn{border-radius:6px;font-size:12px}
@media(max-width:800px){
    #content .section:has(> .tableWrap),#content .section:has(> .filters){padding:12px}
    #content .section:has(> .tableWrap) > .sectionHead h3,
    #content .section:has(> .filters) > .sectionHead h3{font-size:21px}
    #content .filters > div{flex:1 1 180px}
    #content .filters > .filterSearch{flex-basis:100%}
    #content .filterSearch input{max-width:none}
}

/* On-demand project PDF: no embedded documents in overview tables. */
.drawingPdfButton{display:block;margin-top:7px;min-height:28px;padding:4px 8px;font-size:11px;white-space:nowrap;width:auto}
.drawingPdfModalControl{margin-top:8px}
.pdfAttachmentOverlay{position:fixed;inset:0;z-index:12000;background:#153b5a88;display:flex;align-items:center;justify-content:center;padding:20px}
.pdfAttachmentOverlay[hidden]{display:none}
.pdfAttachmentDialog{width:min(600px,100%);max-height:90vh;overflow:auto;border-radius:10px;border:1px solid var(--line);background:#fff;padding:22px;box-shadow:0 15px 50px #153b5a40}
.pdfAttachmentHead{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:2px solid var(--red)}
.pdfAttachmentHead h3{margin:0;color:var(--navy)}
.pdfAttachmentDialog p{font-size:13px;line-height:1.6}
.pdfAttachmentDialog label{margin-top:20px}
.pdfAttachmentCurrent{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px;background:#f2f7fa;border:1px solid var(--line);border-radius:7px}
.pdfAttachmentCurrent strong{overflow-wrap:anywhere;font-size:13px;min-width:0}
.pdfAttachmentActions{margin-top:16px;display:flex;justify-content:flex-end}

/* Agra-Matic phone layout. Desktop presentation stays unchanged. */
.mobileNavBackdrop[hidden]{display:none}
.mobileNavBackdrop{position:fixed;inset:var(--am-header-height,76px) 0 0;background:#102b4266;border:0;border-radius:0;z-index:49}
@media(max-width:800px){
 header{height:auto;min-height:64px;padding:8px 12px;gap:8px;flex-wrap:wrap}
 header .brand{min-width:0;gap:9px;flex:1 1 auto}
 header .brand img{max-width:100px;max-height:40px;object-fit:contain}
 header .brand-title h1{font-size:19px}
 header .brand-title span{display:none}
 header .user{min-width:0;max-width:100%;gap:8px;flex-wrap:wrap}
 header #who{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 header .actingBox{max-width:100%;min-width:0}
 header .actingBox select{max-width:100%;font-size:16px}
 .menuBtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 aside,#side{top:var(--am-header-height,76px);height:calc(100dvh - var(--am-header-height,76px));overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);z-index:50}
 body.mobileNavOpen{overflow:hidden}
 .sidePanel{top:var(--am-header-height,76px);height:calc(100dvh - var(--am-header-height,76px));max-width:100vw}
 main{min-width:0;padding:12px}
 .toolbar,.sectionHead{flex-wrap:wrap;gap:10px}
 .toolbar .actions{display:flex;flex-wrap:wrap;width:100%;gap:8px}
 .toolbar .actions .btn{flex:1 1 auto}
 .btn,.smallBtn,.nav,.drawingPdfButton,.filterChip{min-height:44px}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:44px}
 input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0}
 #content .filters > div{flex:1 1 100%;min-width:0;width:100%}
 .activeFilterSummary{flex-wrap:wrap}
 .tabs{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
 .modal{padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .modal .dialog{max-width:100%;max-height:calc(100dvh - 16px)}
 .pdfAttachmentOverlay{padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .pdfAttachmentDialog{padding:16px;max-height:calc(100dvh - 16px)}
 .pdfAttachmentHead{align-items:flex-start}
 .pdfAttachmentActions .btn{width:100%}
 .projectMapFilters{grid-template-columns:minmax(0,1fr)}
 .projectMapCanvas{height:55svh;min-height:330px}
}
@media(max-width:700px){
 #content .tableWrap:has(> .mobileProjectCards){overflow:visible;border:0;background:transparent}
 #content table.mobileProjectCards{display:block;width:100%;min-width:0!important;table-layout:auto}
 #content .mobileProjectCards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #content .mobileProjectCards tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%}
 #content .mobileProjectCards tbody tr{display:block;min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--drawing-surface,var(--project-row,#fff));box-shadow:0 2px 6px #153b5a08}
 #content .mobileProjectCards tbody td{display:grid;grid-template-columns:105px minmax(0,1fr);gap:8px;width:auto!important;min-width:0;max-width:none;padding:10px 12px;border:0;border-bottom:1px solid #153b5a12;white-space:normal;overflow-wrap:anywhere;background:transparent}
 #content .mobileProjectCards tbody td::before{content:attr(data-label);font-size:12px;font-weight:600;color:var(--navy);line-height:1.5}
 #content .mobileProjectCards tbody td:first-child{border-left:4px solid var(--drawing-accent,var(--status-accent,var(--red)));font-weight:600}
 #content .mobileProjectCards tbody td:last-child{border-bottom:0}
 #content .mobileProjectCards tbody td[colspan]{display:block}
 #content .mobileProjectCards tbody td[colspan]::before{content:none}
 #content .mobileProjectCards td>*{min-width:0;max-width:100%}
 #content .mobileProjectCards td .drawingPdfButton{grid-column:2;width:100%;white-space:normal}
 #content .mobileProjectCards td select,#content .mobileProjectCards td input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0}
}

/* Compact phone cards override legacy personal table flex rules. */
.mobileFilterToggle{display:none}
@media(max-width:800px){
 #content .filters>.mobileFilterToggle,.projectMapFilters>.mobileFilterToggle{display:block;width:100%;order:99}
 #content .filters:not(.mobileFiltersExpanded)>div:not(.filterSearch):not(.activeFilterSummary){display:none}
 .projectMapFilters:not(.mobileFiltersExpanded)>div:not(:has(input[type="search"])):not(.activeFilterSummary){display:none}
}
@media(max-width:700px){
 #content .mobileProjectCards tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));margin:0!important;gap:0;border-left:4px solid var(--drawing-accent,var(--status-accent,var(--red)));border-radius:8px}
 #content .mobileProjectCards tbody td{display:block!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;padding:8px 10px!important;text-align:left!important;line-height:1.35;font-size:13px;white-space:normal!important}
 #content .mobileProjectCards tbody td::before{display:block;font-size:10px;line-height:1.25;margin:0 0 4px!important;text-transform:none;letter-spacing:0;color:#617889;font-weight:600}
 #content .mobileProjectCards tbody td:first-child{grid-column:1/-1;border-left:0!important;padding-bottom:6px!important}
 #content .mobileProjectCards tbody td:nth-child(2){grid-column:1/-1;padding-top:6px!important}
 #content .mobileProjectCards tbody td:first-child::before{display:none}
 #content .mobileProjectCards tbody td:first-child .muted{display:inline;font-size:11px;margin-left:6px}
 #content .mobileProjectCards tbody td:first-child br{display:none}
 #content .mobileProjectCards tbody td[data-label="Klant en type"] b,
 #content .mobileProjectCards tbody td[data-label="Klant / type"] b{font-size:15px}
 #content .mobileProjectCards tbody td[data-label="Locatie"],
 #content .mobileProjectCards tbody td[data-label="Korte projectomschrijving"],
 #content .mobileProjectCards tbody td[data-label="Laatste update"],
 #content .mobileProjectCards tbody td[data-label="Handeling"],
 #content .mobileProjectCards tbody td[colspan]{grid-column:1/-1}
 #content .mobileProjectCards td .badge{display:inline-flex;width:auto;max-width:100%;font-size:11px}
 #content .mobileProjectCards td select,
 #content .mobileProjectCards td input:not([type="checkbox"]):not([type="radio"]){min-height:44px;padding:6px;max-width:100%;font-size:16px}
 #content .mobileProjectCards td .smallBtn{display:inline-flex;width:auto;align-items:center;justify-content:center;margin:3px 4px 3px 0;white-space:normal}
 #content .mobileProjectCards td .drawingPdfButton{width:auto;display:inline-flex;margin-top:5px}
}

/* AM consistency review: tekenkamer remains the visual reference. */
.projectMapHeader{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-bottom:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:var(--shadow)}
.projectMapHeader h3{color:var(--navy);font-size:24px;line-height:1.25;letter-spacing:-.02em}
.projectMapHeader p{color:var(--muted);font-size:13px;margin-top:6px}
.projectMapKpi{border-radius:8px;box-shadow:var(--shadow)}
.projectMapPanel{border-radius:8px}
#projectMapDistribution .sectionHead{background:#fff;border-left:0;border-bottom:1px solid var(--line);padding:14px 18px}
#projectMapDistribution .sectionHead h3{color:var(--navy);font-size:20px}
@media(max-width:800px){
 .projectMapHeader{padding:14px 16px}
 .projectMapHeader h3{font-size:21px}
 .projectMapFilters>div:has(#projectMapSearch){display:block!important}
}
@media(max-width:700px){
 #content .mobileProjectCards tbody tr.deadlineUpcoming{--status-accent:#6fa5ca}
 #content .mobileProjectCards tbody tr.deadlineSoon{--status-accent:#d4aa2e}
 #content .mobileProjectCards tbody tr.deadlineCritical{--status-accent:#dc8730}
 #content .mobileProjectCards tbody tr.deadlineOverdue,
 #content .mobileProjectCards tbody tr.urgent{--status-accent:#d93442}
 #content .mobileProjectCards tbody tr.deadlineOverdue,
 #content .mobileProjectCards tbody tr.urgent{border-left-color:#d93442}
 #content .mobileProjectCards td[data-label="Specialist"]{text-align:left!important}
 #content .mobileProjectCards td[data-label="Handeling"]::before{margin:0 0 4px!important}
}

/* Keep Leaflet controls inside the map, below the project detail panel. */
.projectMapCanvas{position:relative;z-index:0;isolation:isolate}
.projectMapCanvas .leaflet-control-layers label{display:block;margin:4px 0;font-size:13px}
.projectMapCanvas .leaflet-control-layers input[type=radio],
.projectMapCanvas .leaflet-control-layers input[type=checkbox]{width:auto;min-height:0;height:auto;margin:0 6px 0 0;display:inline-block;vertical-align:middle}
.projectMapCanvas .leaflet-control-layers label span{display:inline}


.projectDrawingSummary{margin:12px 0;padding:12px;border:1px solid var(--border,#d6dbe2);border-radius:8px;overflow-wrap:anywhere}
.projectDrawingSummary h4{margin:0 0 8px}
@media(max-width:800px){
 .drawingCapacityForecastTable thead{display:none}
 .drawingCapacityForecastTable tbody,.drawingCapacityForecastTable tr,.drawingCapacityForecastTable td{display:block;width:100%;box-sizing:border-box}
 .drawingCapacityForecastTable tr{margin:10px 0;border:1px solid #d6dbe2;border-radius:8px;padding:6px}
 .drawingCapacityForecastTable td{display:grid;grid-template-columns:minmax(105px,40%) 1fr;gap:8px;overflow-wrap:anywhere}
 .drawingCapacityForecastTable td::before{content:attr(data-label);font-weight:600}
}