@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&display=swap');
:root {
  --orange:#FFA300; --orange-dark:#F39545; --orange-tint:#FFF4E0;
  --ink:#1a1a1a; --dark:#303030; --bg-soft:#F8F8F8; --field-bg:#F2F2F2;
  --color-bg:#fff; --color-surface:#fff; --color-border:#eaeaea; --color-text:var(--ink);
  --color-text-muted:#777; --color-header-bg:#fff; --color-group-bg:#F8F8F8; --color-child-bg:#fff;
  --color-eigen:#4f8fe8; --color-walvis:#9b6be8; --color-rothermo:#68b77a; --color-kika:#ef6fa8; --color-transport:#e9bd3f; --color-shamos-transport:#e9bd3f; --color-kasteel-bouw:#ee8b36; --color-tegelfloor:#5f9f8a; --color-qschilders:#7b8794; --color-weh:#6fa6a0;
  --col-id-width:46px; --col-name-width:250px; --col-executor-width:120px; --col-date-width:105px; --row-week-height:30px; --row-header-height:45px; --row-height:58px;
  --radius-sm:12px; --radius-md:16px; --radius-lg:28px;
  --shadow-card:0 12px 30px rgba(0,0,0,.05); --shadow-card-hover:0 20px 40px rgba(0,0,0,.08);
  --font-head:"Baloo 2",sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.page{max-width:1400px;margin:0 auto;padding:48px 32px 64px}
.page-header{margin-bottom:24px}.page-header:before{content:"WERKPLANNING";display:block;color:var(--orange);font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.09em;margin-bottom:4px}
.page-header h1{margin:0;font-family:var(--font-head);font-size:clamp(2.4rem,5vw,4rem);line-height:1;font-weight:700;letter-spacing:-.02em}
.page-header h1:after{content:".";color:var(--orange)}.subtitle{margin:10px 0 0;color:var(--color-text-muted);font-size:.96rem;line-height:1.6}
.filters{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.filter-group{display:flex;align-items:flex-start;gap:12px}.filter-label{width:72px;flex:0 0 72px;padding-top:9px;font-family:var(--font-head);font-size:.78rem;font-weight:700;color:#777}.filter-options{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid #e3e5e8;background:#f7f7f8;color:var(--ink);font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s}
.filter-btn:hover{border-color:var(--orange);transform:translateY(-1px)}.filter-btn:active{transform:translateY(0)}
.filter-dot{width:18px;height:18px;border-radius:50%;background:#aaa;flex-shrink:0;border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}.filter-btn.filter-all .filter-dot{background:#aaa}
.filter-btn.executor-eigen .filter-dot{background:var(--color-eigen)}.filter-btn.executor-walvis .filter-dot{background:var(--color-walvis)}.filter-btn.executor-rothermo .filter-dot{background:var(--color-rothermo)}.filter-btn.executor-kika .filter-dot{background:var(--color-kika)}.filter-btn.executor-transport .filter-dot{background:var(--color-transport)}.filter-btn.executor-shamos-transport .filter-dot{background:var(--color-shamos-transport)}.filter-btn.executor-kasteel-bouw .filter-dot{background:var(--color-kasteel-bouw)}.filter-btn.executor-tegelfloor .filter-dot{background:var(--color-tegelfloor)}.filter-btn.executor-qschilders .filter-dot{background:var(--color-qschilders)}.filter-btn.executor-weh .filter-dot{background:var(--color-weh)}
.filter-btn.is-active{border-color:var(--orange);background:#f7f7f8;color:var(--ink);box-shadow:0 0 0 2px rgba(255,163,0,.10)}
.filter-btn.executor-eigen,.filter-btn.executor-walvis,.filter-btn.executor-rothermo,.filter-btn.executor-kika,.filter-btn.executor-transport,.filter-btn.executor-shamos-transport,.filter-btn.executor-kasteel-bouw,.filter-btn.executor-tegelfloor,.filter-btn.executor-qschilders,.filter-btn.executor-weh{background:#f7f7f8;color:var(--ink)}.filter-btn.is-active .filter-dot{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.gantt-wrapper{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.gantt-scroll{display:grid;grid-template-columns:var(--col-id-width) var(--col-name-width) var(--col-executor-width) repeat(10,var(--col-date-width));grid-template-rows:var(--row-week-height) var(--row-header-height);grid-auto-rows:var(--row-height);overflow:auto;max-height:calc(var(--row-week-height) + var(--row-header-height) + 10 * var(--row-height));position:relative}.grid-row{display:contents}
.cell{display:flex;align-items:center;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);min-width:0}
.cell--id-header,.cell--corner,.cell--executor-header,.cell--date-header{position:sticky;top:var(--row-week-height);background:#fff;font-family:var(--font-head);font-weight:700;font-size:.82rem;color:#777;z-index:3;justify-content:center;text-align:center;border-bottom:1px solid var(--color-border)}
.cell--id-header{left:0;z-index:6;justify-content:center;padding:0;color:var(--ink);text-align:center}
.cell--corner{left:var(--col-id-width);z-index:6;justify-content:flex-start;padding:0 14px;color:var(--ink);font-size:.9rem}
.cell--id{position:sticky;left:0;z-index:4;padding:0;background:#fff;color:#999;justify-content:center;text-align:center;font-size:.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell--name{position:sticky;left:var(--col-id-width);z-index:4;padding:0 14px;font-size:.88rem;border-right:1px solid var(--color-border)}
.cell--executor-header{left:calc(var(--col-id-width) + var(--col-name-width));z-index:6;justify-content:flex-start;padding:0 8px;color:var(--ink)}
.cell--executor{position:sticky;left:calc(var(--col-id-width) + var(--col-name-width));z-index:4;padding:0 8px;background:#fff;font-size:.8rem;box-shadow:3px 0 7px rgba(0,0,0,.035)}
.executor-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell--task-name,.cell--child-name{background:#fff}.cell--child-name{padding-left:38px;color:#666}.cell--group-name{background:var(--bg-soft);font-family:var(--font-head);font-weight:700;gap:8px;cursor:pointer}.name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toggle-btn{flex-shrink:0;width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--orange-tint);color:#9b6100;font-size:.9rem;font-weight:700;cursor:pointer;border-radius:8px}.toggle-btn:hover{background:#ffe9bd}
.row--group .cell--id,.row--group .cell--executor{background:var(--bg-soft)}.row--group .cell--date{background:var(--bg-soft)}.cell--date{justify-content:center;padding:8px 10px}
.bar{width:100%;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;cursor:pointer;padding:0;transition:filter .15s,transform .15s,box-shadow .15s;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}.bar:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.10)}.bar:focus-visible{outline:3px solid var(--orange-tint);outline-offset:2px;filter:brightness(1.04);box-shadow:0 5px 12px rgba(0,0,0,.10)}.bar:active{transform:translateY(0) scale(.97)}
.bar--group{height:30px;border-radius:8px;opacity:.58}
.executor-eigen{background:var(--color-eigen)}.executor-walvis{background:var(--color-walvis)}.executor-rothermo{background:var(--color-rothermo)}.executor-kika{background:var(--color-kika)}.executor-transport{background:var(--color-transport)}.executor-shamos-transport{background:var(--color-shamos-transport)}.executor-kasteel-bouw{background:var(--color-kasteel-bouw)}.executor-tegelfloor{background:var(--color-tegelfloor)}.executor-qschilders{background:var(--color-qschilders)}.executor-weh{background:var(--color-weh)}
.hint{margin:14px 4px 0;font-size:.82rem;color:#888}
.tooltip{position:fixed;top:0;left:0;max-width:270px;background:var(--dark);color:#fff;padding:13px 15px;border-radius:var(--radius-sm);font-size:.82rem;line-height:1.45;box-shadow:0 16px 36px rgba(0,0,0,.2);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s;z-index:100}.tooltip.is-visible{opacity:1;visibility:visible}.tooltip .tt-date{font-family:var(--font-head);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--orange);margin-bottom:3px}.tooltip .tt-name{font-family:var(--font-head);font-size:.98rem;font-weight:700;margin-bottom:4px}.tooltip .tt-desc{color:#eee;margin-bottom:5px}.tooltip .tt-executor{color:#bbb;font-size:.76rem;border-top:1px solid #505050;padding-top:6px;margin-top:7px}
@media(max-width:640px){:root{--col-id-width:46px;--col-name-width:190px;--col-executor-width:112px;--col-date-width:88px}.page{padding:30px 12px 40px}.page-header h1{font-size:2.5rem}}

.powered-by{text-align:center;margin-top:38px;font-size:.8rem;color:#999}.powered-by a{color:var(--orange);font-weight:700;text-decoration:none}.powered-by a:hover{text-decoration:underline}


/* Categorieën als visuele secties in de planning */
.row--category .cell{background:#f3f4f5;border-bottom:1px solid #dde0e3}.cell--category-label{position:sticky;left:0;z-index:5;padding:0 12px;font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;border-left:4px solid var(--orange);gap:8px}.cell--category-date{background:#f3f4f5}
.category-toggle{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 25px;border:1px solid #ead7b1;border-radius:8px;background:#fff;color:#9b6100;font-size:.9rem;font-weight:700;cursor:pointer;transition:.15s}.category-toggle:hover{background:var(--orange-tint);border-color:var(--orange)}.category-toggle:focus-visible{outline:3px solid var(--orange-tint);outline-offset:2px}


/* Weekindeling: maandag t/m zondag */
.week-start{border-left:2px solid #d6d8db!important}
.cell--week-fixed,.cell--week-number{position:sticky;top:0;z-index:7;background:#f3f4f5;height:var(--row-week-height);justify-content:center;font-family:var(--font-head);font-size:.72rem;font-weight:700;color:#666;border-bottom:1px solid #dde0e3}
.cell--week-fixed{left:0;z-index:9;background:#f3f4f5}
.cell--week-number{letter-spacing:.03em}

/* Losse weekselector op paginaniveau */
.week-selector-wrap{position:sticky;top:12px;z-index:30;display:flex;justify-content:flex-end;margin:0 0 10px;pointer-events:none}
.week-selector{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 7px 6px 10px;border:1px solid #e3e5e8;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 4px 12px rgba(0,0,0,.08);backdrop-filter:blur(6px)}
.week-selector-label{margin-right:2px;font-family:var(--font-head);font-size:.72rem;font-weight:700;color:#777}
.week-selector-btn{width:30px;height:28px;padding:0;border:1px solid #dfe2e5;border-radius:8px;background:#f7f7f8;color:#555;font-family:var(--font-body);font-size:.72rem;font-weight:700;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.06);transition:.15s}
.week-selector-btn:hover{border-color:var(--orange);transform:translateY(-1px)}
.week-selector-btn.is-active{border-color:var(--orange);background:var(--orange-tint);color:#8b5700;box-shadow:0 2px 7px rgba(255,163,0,.14)}



/* Compact uitvoerdersfilter voor mobile-friendly */
.filter-group--select{align-items:center}.filter-group--select .filter-label{padding-top:0}.filter-select{width:min(100%,260px);min-height:40px;padding:8px 36px 8px 12px;border:1px solid #e3e5e8;border-radius:12px;background:#f7f7f8;color:var(--ink);font-family:var(--font-body);font-size:.88rem;font-weight:600;cursor:pointer}.filter-select:focus{outline:3px solid var(--orange-tint);border-color:var(--orange)}
@media(max-width:640px){.filters{margin-bottom:12px}.filter-group--select{gap:8px}.filter-group--select .filter-label{width:auto;flex:0 0 auto}.filter-select{flex:1;width:auto;min-width:0}}


/* Mobiele planning: gezamenlijke tijdlijn met leesbare gekleurde blokken */
.mobile-board{display:none}
@media(max-width:640px){
  :root{--mobile-date-width:86px}
  .page{padding:26px 10px 38px}.page-header{margin-bottom:18px}
  .gantt-wrapper{overflow:visible;border:0;box-shadow:none;background:transparent}
  .gantt-scroll{display:block;overflow:visible;max-height:none}
  .tooltip{display:none!important}
  .mobile-board{display:block;margin-bottom:14px;border:1px solid var(--color-border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.04)}
  .mobile-category-header{width:100%;display:flex;align-items:center;gap:8px;padding:11px 12px;border:0;border-left:4px solid var(--orange);background:#f3f4f5;color:var(--ink);font-family:var(--font-head);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;text-align:left}
  .mobile-board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mobile-board-grid{display:grid;grid-auto-rows:minmax(48px,auto);column-gap:0;row-gap:5px;width:max-content;min-width:100%;padding:0 0 8px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--mobile-date-width) - 1px),var(--color-border) calc(var(--mobile-date-width) - 1px),var(--color-border) var(--mobile-date-width))}
  .mobile-board-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafafa;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);color:#666;font-size:.68rem}
  .mobile-board-date small{font-size:.58rem;color:#999;font-weight:500}
  .mobile-board-date.week-start{border-left:2px solid #d6d8db!important}
  .mobile-plan-block{min-width:0;margin:3px 5px;border:0;border-radius:9px;padding:5px 8px;color:#fff;font-family:var(--font-body);font-size:.7rem;font-weight:700;line-height:1.15;text-align:left;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(0,0,0,.10),0 2px 5px rgba(0,0,0,.08);overflow:hidden}
  .mobile-plan-block span{display:-webkit-box;overflow:hidden;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
  .mobile-plan-block.is-selected{outline:3px solid var(--orange-tint);outline-offset:1px}
  .mobile-detail-panel{margin:0;border-top:1px solid var(--color-border);padding:12px 13px;background:#fff;min-height:58px}
  .mobile-detail-placeholder{color:#999;font-size:.75rem}
  .mobile-detail-period{font-family:var(--font-head);font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--orange);letter-spacing:.03em}
  .mobile-detail-name{margin-top:2px;font-family:var(--font-head);font-size:.95rem;font-weight:700;color:var(--ink)}
  .mobile-detail-executor{margin-top:2px;color:#777;font-size:.72rem}
  .mobile-detail-description{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border);color:#666;font-size:.76rem;line-height:1.45}
  .hint{margin-top:10px}
}


/* Mobiel dagoverzicht */
.mobile-day-view{display:none}
@media(max-width:640px){
  .week-selector-wrap{display:none}
  .mobile-day-view{display:block}
  .mobile-day-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:8px 4px 14px}
  .mobile-day-arrow{width:44px;height:44px;border:1px solid #e3e5e8;border-radius:12px;background:#fff;color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.05)}
  .mobile-day-arrow:disabled{opacity:.3;cursor:default}
  .mobile-day-heading{text-align:center;min-width:0}.mobile-day-heading strong{display:block;font-family:var(--font-head);font-size:1.05rem;line-height:1.15}.mobile-day-heading span{display:block;margin-top:3px;color:#888;font-size:.7rem}
  .mobile-day-strip{display:flex;gap:6px;overflow-x:auto;padding:0 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.mobile-day-strip::-webkit-scrollbar{display:none}
  .mobile-day-chip{flex:0 0 42px;height:48px;border:1px solid #e3e5e8;border-radius:11px;background:#f7f7f8;color:#666;font-size:.76rem;font-weight:700;cursor:pointer}.mobile-day-chip span,.mobile-day-chip small{display:block}.mobile-day-chip small{height:12px;color:var(--orange);font-size:.62rem;letter-spacing:1px}.mobile-day-chip.is-active{border-color:var(--orange);background:var(--orange-tint);color:#8b5700;box-shadow:0 2px 7px rgba(255,163,0,.12)}
  .mobile-day-empty{padding:28px 18px;border:1px dashed #ddd;border-radius:14px;background:#fafafa;text-align:center;color:#888;font-size:.82rem}
  .mobile-day-category{margin:5px 0 18px}.mobile-day-category h2{margin:0 0 7px 3px;font-family:var(--font-head);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#666}
  .mobile-day-cards{display:flex;flex-direction:column;gap:7px}
  .mobile-day-card{border:1px solid var(--color-border);border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.035);overflow:hidden}
  .mobile-day-card summary{display:grid;grid-template-columns:12px 1fr 22px;align-items:center;gap:10px;padding:12px;cursor:pointer;list-style:none}.mobile-day-card summary::-webkit-details-marker{display:none}
  .mobile-day-dot{width:10px;height:10px;border-radius:50%;display:block}.mobile-day-task{min-width:0}.mobile-day-task strong{display:block;font-size:.84rem;line-height:1.25}.mobile-day-task small{display:block;margin-top:2px;color:#888;font-size:.68rem}.mobile-day-chevron{color:#aaa;font-size:1rem;text-align:center;transition:transform .15s}.mobile-day-card[open] .mobile-day-chevron{transform:rotate(180deg)}
  .mobile-day-description{padding:0 12px 12px 34px;border-top:1px solid #f0f0f0;padding-top:10px;color:#666;font-size:.76rem;line-height:1.45}
  .mobile-day-dot.executor-eigen{background:var(--color-eigen)}.mobile-day-dot.executor-walvis{background:var(--color-walvis)}.mobile-day-dot.executor-rothermo{background:var(--color-rothermo)}.mobile-day-dot.executor-kika{background:var(--color-kika)}.mobile-day-dot.executor-shamos-transport{background:var(--color-shamos-transport)}.mobile-day-dot.executor-kasteel-bouw{background:var(--color-kasteel-bouw)}.mobile-day-dot.executor-tegelfloor{background:var(--color-tegelfloor)}.mobile-day-dot.executor-qschilders{background:var(--color-qschilders)}.mobile-day-dot.executor-weh{background:var(--color-weh)}
}


.completed-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-right:7px;border-radius:50%;background:#3f9b5f;color:#fff;font-size:12px;font-weight:800;line-height:1;vertical-align:-2px;box-shadow:0 1px 3px rgba(0,0,0,.12)}.completed-icon span{transform:translateY(-.5px)}