/* Info Bedrijfsontwikkeling */
.developmentInfoPage{
    max-width:1500px;
    margin:0 auto;
    padding-bottom:30px;
}
.devHero{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:28px;
    padding:27px 29px;
    border:1px solid #cbdce7;
    border-radius:15px;
    background:
        radial-gradient(circle at 92% 10%,rgba(20,130,189,.17),transparent 34%),
        linear-gradient(135deg,#f8fbfd 0%,#edf5fa 100%);
    box-shadow:0 8px 28px rgba(21,59,90,.09);
    overflow:hidden;
}
.devHero:before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:6px;
    background:linear-gradient(180deg,var(--blue),var(--red));
}
.devHeroMain{max-width:930px}
.devEyebrow{
    margin-bottom:9px;
    color:var(--blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
}
.devHero h2{
    margin:0;
    max-width:820px;
    color:var(--navy);
    font-size:26px;
    line-height:1.2;
}
.devHero p{
    max-width:900px;
    margin:12px 0 0;
    color:#526979;
    font-size:14px;
    line-height:1.6;
}
.devHeroBadges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.devHeroBadges span{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 10px;
    border:1px solid #bed3e1;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:var(--navy);
    font-size:11px;
    font-weight:700;
}
.devEditButton{
    flex:0 0 auto;
    min-width:155px;
}
.devEditNotice{
    margin-top:14px;
    padding:12px 15px;
    border:1px solid #e5c56a;
    border-left:5px solid #d99012;
    border-radius:9px;
    background:#fff8df;
    color:#664e11;
    font-size:13px;
    line-height:1.5;
}
.devOverview{
    display:grid;
    grid-template-columns:170px 170px minmax(260px,1fr);
    gap:12px;
    margin-top:14px;
}
.devStat{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:84px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 15px rgba(26,61,86,.06);
}
.devStatValue{
    color:var(--blue);
    font-size:25px;
    font-weight:750;
    line-height:1.1;
}
.devStatValue.devStatUpdate{
    color:var(--navy);
    font-size:17px;
}
.devStatLabel{
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}
.devToolbar{
    display:grid;
    grid-template-columns:minmax(320px,1fr) 260px auto;
    align-items:end;
    gap:12px;
    margin-top:18px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
}
.devToolbar label{
    color:var(--navy);
    font-weight:700;
}
.devToolbar input,
.devToolbar select{
    min-height:40px;
}
.devResultCount{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:40px;
    padding:8px 13px;
    border-radius:8px;
    background:#edf5fa;
    color:var(--navy);
    font-size:12px;
    white-space:nowrap;
}
.devResultCount span{
    color:var(--blue);
    font-size:17px;
    font-weight:800;
}
.devCategories{
    display:grid;
    gap:16px;
    margin-top:16px;
}
.devCategory{
    --dev-accent:#075c9f;
    overflow:hidden;
    border:1px solid var(--line);
    border-top:4px solid var(--dev-accent);
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 18px rgba(26,61,86,.07);
}
.devTone1{--dev-accent:#246c9d}
.devTone2{--dev-accent:#49795a}
.devTone3{--dev-accent:#53847c}
.devTone4{--dev-accent:#7a667f}
.devTone5{--dev-accent:#aa7934}
.devTone6{--dev-accent:#586d9c}
.devTone7{--dev-accent:#7c5d74}
.devCategoryHead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:66px;
    padding:13px 17px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,color-mix(in srgb,var(--dev-accent) 9%,white),white 48%);
}
.devCategoryIdentity{
    display:flex;
    align-items:center;
    gap:12px;
}
.devCategoryCode{
    display:grid;
    place-items:center;
    min-width:43px;
    height:34px;
    padding:0 8px;
    border-radius:7px;
    background:var(--dev-accent);
    color:white;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
}
.devCategoryHead h3{
    margin:0;
    color:var(--navy);
    font-size:17px;
}
.devCategoryHead h3 + span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}
.devTableWrap{overflow-x:auto}
.devTable{
    min-width:1120px;
    table-layout:fixed;
}
.devTable th:nth-child(1){width:23%}
.devTable th:nth-child(2){width:12%}
.devTable th:nth-child(3){width:29%}
.devTable th:nth-child(4){width:30%}
.devTable th:nth-child(5){width:110px}
.devTable th{
    padding:10px 12px;
    background:#f6f9fb;
    color:#536b7b;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.045em;
}
.devTable td{
    padding:13px 12px;
    vertical-align:top;
    background:#fff;
}
.devTable tbody tr:nth-child(even) td{
    background:#fbfcfd;
}
.devTable tbody tr:hover td{
    background:#f4f9fc;
}
.devWorkName{
    color:var(--navy);
    font-weight:700;
    line-height:1.4;
}
.devRowMeta{
    margin-top:5px;
    color:#84929c;
    font-size:10px;
    line-height:1.35;
}
.devTimeCell{text-align:center}
.devTimeBadge{
    display:inline-flex;
    justify-content:center;
    min-width:70px;
    padding:5px 9px;
    border:1px solid color-mix(in srgb,var(--dev-accent) 40%,white);
    border-radius:999px;
    background:color-mix(in srgb,var(--dev-accent) 10%,white);
    color:var(--dev-accent);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.devCellText{
    color:#405563;
    font-size:12px;
    line-height:1.55;
    white-space:pre-line;
}
.devEmpty{
    color:#98a5ad;
    font-size:12px;
    font-style:italic;
}
.devEditField{
    min-height:68px;
    resize:vertical;
    font-size:12px;
    line-height:1.45;
}
.devTimeInput{
    min-width:105px;
    text-align:center;
    font-weight:700;
}
.devActionCell{
    text-align:center;
}
.devSaveButton{
    min-width:85px;
}
.devNoResults,
.devErrorCard{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    min-height:190px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--muted);
    text-align:center;
}
.devNoResults{
    flex-direction:column;
}
.devNoResults strong{
    color:var(--navy);
    font-size:17px;
}
.devErrorCard{
    justify-content:flex-start;
    text-align:left;
}
.devErrorCard h2{margin:0;color:var(--navy)}
.devErrorCard p{margin:7px 0 14px}
.devErrorMark{
    display:grid;
    place-items:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fde8ea;
    color:#a52e42;
    font-size:27px;
    font-weight:800;
}
.devHeroLoading{min-height:178px}
.devLoadingGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:16px;
}
.devLoadingGrid div{
    height:130px;
    border-radius:12px;
    background:linear-gradient(90deg,#edf2f5 25%,#f8fafb 50%,#edf2f5 75%);
    background-size:200% 100%;
    animation:devShimmer 1.3s infinite linear;
}
@keyframes devShimmer{
    from{background-position:200% 0}
    to{background-position:-200% 0}
}
@media(max-width:1000px){
    .devHero{flex-direction:column}
    .devOverview{grid-template-columns:1fr 1fr}
    .devStatWide{grid-column:span 2}
    .devToolbar{grid-template-columns:1fr 1fr}
    .devResultCount{grid-column:span 2}
}
@media(max-width:720px){
    .developmentInfoPage{padding-bottom:18px}
    .devHero{padding:22px 20px}
    .devHero h2{font-size:22px}
    .devEditButton{width:100%}
    .devOverview{grid-template-columns:1fr 1fr}
    .devToolbar{grid-template-columns:1fr}
    .devResultCount{grid-column:auto}
    .devLoadingGrid{grid-template-columns:1fr}
    .devTable,
    .devTable tbody,
    .devTable tr,
    .devTable td{
        display:block;
        width:100%;
        min-width:0;
    }
    .devTable thead{display:none}
    .devTable tr{
        padding:7px 12px;
        border-bottom:1px solid var(--line);
    }
    .devTable td{
        display:grid;
        grid-template-columns:112px minmax(0,1fr);
        gap:10px;
        padding:8px 0;
        border:0;
        text-align:left;
    }
    .devTable td:before{
        content:attr(data-label);
        color:var(--muted);
        font-size:10px;
        font-weight:800;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .devTimeBadge{justify-self:start}
    .devActionCell .btn{justify-self:start}
}

/* Tekenkamer: urgentie bepaalt de volledige rijkleur. */
#drawingRoomTable.drawingOverviewTable tbody tr[data-search],
#drawingPlanningTable.drawingOverviewTable tbody tr[data-search]{
    --drawing-accent:#859bae;
    --drawing-surface:#f4f7fa;
}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Normaal,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Normaal{
    --drawing-accent:#4f8eaf;
    --drawing-surface:#edf6fb;
}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Hoog,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Hoog{
    --drawing-accent:#d19526;
    --drawing-surface:#fff7e5;
}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Spoed,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Spoed{
    --drawing-accent:#cf5260;
    --drawing-surface:#fff0f1;
}
.drawingOverviewTable tbody tr[data-search] td{background:var(--drawing-surface)}
.drawingOverviewTable .drawingStatusBadge{font-size:11px;padding:3px 7px}
.infoDrawingRoom .drawingInfoTypeTable{min-width:520px}
.infoDrawingRoom .drawingInfoTypeTable th:first-child{width:120px}
.infoDrawingRoom .drawingInfoGuideTable{min-width:850px}
.infoDrawingRoom .drawingInfoGuideTable th:first-child{width:12%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(2){width:28%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(3){width:17%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(4){width:13%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(5){width:30%}
.infoDrawingRoom .drawingInfoGuideTable .devTimeCell{text-align:left}
.infoDrawingRoom .drawingInfoGuideTable input[type=checkbox]{width:auto}
.infoDrawingRoom .drawingInfoEditRow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.infoDrawingRoom .drawingInfoEditRow input[type=text]{max-width:115px}
.infoDrawingRoom .drawingInfoEditRow label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.infoDrawingRoom .drawingInfoTypes{margin-top:16px}
.infoDrawingRoom .drawingInfoCategory[hidden],
.infoDrawingRoom .drawingInfoCategory tr[hidden]{display:none}
@media(max-width:720px){
    .infoDrawingRoom .drawingInfoGuideTable,
    .infoDrawingRoom .drawingInfoTypeTable{min-width:0}
    .infoDrawingRoom .drawingInfoGuideTable td,
    .infoDrawingRoom .drawingInfoTypeTable td{overflow-wrap:anywhere}
}



/* PlanningAM UX - compacte Tekenkamer */
.drawingProjectCombobox{position:relative;width:100%}
.drawingProjectCombobox>input{width:100%;height:42px;box-sizing:border-box}
.drawingProjectResults{position:absolute;z-index:10050;top:calc(100% + 4px);left:0;right:0;max-height:320px;overflow:auto;background:#fff;border:1px solid #cbd7df;border-radius:8px;box-shadow:0 10px 28px rgba(24,49,70,.18)}
.drawingProjectResults[hidden]{display:none}
.drawingProjectResults button{display:block;width:100%;border:0;background:#fff;padding:9px 12px;text-align:left;cursor:pointer}
.drawingProjectResults button:hover,.drawingProjectResults button:focus{background:#edf6f0}
.drawingProjectEmpty{padding:10px 12px;color:#657785}
.drawingCompactFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.drawingCompactFilters select{width:auto;min-width:135px;max-width:210px;height:38px;padding:0 30px 0 10px;border:1px solid #cbd7df;border-radius:7px;background:#fff}
.drawingCompactReset{height:38px;padding:0 13px}
#drawingRoomTable.drawingOverviewTable tbody tr[data-search],
#drawingPlanningTable.drawingOverviewTable tbody tr[data-search]{--drawing-accent:#8a969f;--drawing-surface:#f2f4f5}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Normaal,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Normaal{--drawing-accent:#4f9668 !important;--drawing-surface:#edf8f0 !important}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Hoog,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Hoog{--drawing-accent:#d19526 !important;--drawing-surface:#fff7e5 !important}
#drawingRoomTable.drawingOverviewTable tbody tr.drawingUrgency-Spoed,
#drawingPlanningTable.drawingOverviewTable tbody tr.drawingUrgency-Spoed{--drawing-accent:#cf5260 !important;--drawing-surface:#fff0f1 !important}
@media(max-width:800px){.drawingCompactFilters select{flex:1 1 145px;max-width:none}}

/* Isolate knowledge tables from the five-column development guidelines. */
.developmentInfoPage{width:100%;min-width:0}
.developmentInfoPage :is(.devHeroMain,.devToolbar>div,.devCategory,.devTableWrap){min-width:0}
.developmentInfoPage .devHero{flex-wrap:wrap}
.developmentInfoPage .devHeroMain{flex:1 1 480px}
.infoDrawingRoom .drawingInfoTypeTable{
    width:100%;
    min-width:0;
    table-layout:fixed;
}
.infoDrawingRoom .drawingInfoTypeTable th:first-child{width:110px}
.infoDrawingRoom .drawingInfoTypeTable th:nth-child(2){width:calc(100% - 110px)}
.infoDrawingRoom .drawingInfoTypeTable td{overflow-wrap:anywhere}
.infoDrawingRoom .drawingInfoGuideTable{
    width:100%;
    table-layout:fixed;
    min-width:850px;
}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(1){width:9%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(2){width:26%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(3){width:20%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(4){width:12%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(5){width:33%}
.infoDrawingRoom .drawingInfoGuideTable:has(th:nth-child(6)){min-width:1100px}
.infoDrawingRoom .drawingInfoGuideTable:has(th:nth-child(6)) th:nth-child(2){width:24%}
.infoDrawingRoom .drawingInfoGuideTable:has(th:nth-child(6)) th:nth-child(5){width:27%}
.infoDrawingRoom .drawingInfoGuideTable th:nth-child(6){width:8%}
.infoDrawingRoom .drawingInfoGuideTable td{overflow-wrap:anywhere}
@media(max-width:1000px){
    .developmentInfoPage .devToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:720px){
    .developmentInfoPage .devHeroMain{flex-basis:auto}
    .developmentInfoPage .devToolbar{grid-template-columns:minmax(0,1fr)}
    .infoDrawingRoom .drawingInfoTypeTable,
    .infoDrawingRoom .drawingInfoGuideTable,
    .infoDrawingRoom .drawingInfoGuideTable:has(th:nth-child(6)){
        width:100%;min-width:0;
    }
    #content .infoDrawingRoom .devTable tbody td{
        padding:8px 0;
        border:0;
        grid-template-columns:90px minmax(0,1fr);
    }
    .infoDrawingRoom .devTable td>*{min-width:0;max-width:100%}
    .infoDrawingRoom .devTable td[data-label="Richtlijn"]>div{min-width:0!important;flex-wrap:wrap}
}

/* Match the professional planning panels and AM accent. */
.devHero{background:#fff;box-shadow:var(--shadow);border-color:var(--line);border-radius:8px;padding:22px 24px}
.devHero:before{width:4px;background:var(--red)}
.devHero h2{font-size:24px;letter-spacing:-.02em}
.devHero p{font-size:13px;line-height:1.55}
@media(max-width:720px){.devHero{padding:16px}.devHero h2{font-size:21px}}