:root{
  --oranje:#FF7700; --oranje-zacht:#FFEBD9; --oranje-tekst:#A84A00;
  --inkt:#1A1A1A; --tekst2:#3D3A35; --grijs:#6B665E; --grijs2:#9C968C;
  --lijn:#E7E4DE; --lijn2:#F0EEEA; --grond:#F5F4F1; --wit:#FFFFFF;
  --rood:#B42318; --rood-zacht:#FDECEA; --groen:#1E6B37; --groen-zacht:#E2F2E6;
  --blauw:#1F4FA3; --blauw-zacht:#E3EEFF; --geel:#7A5600; --geel-zacht:#FFF4D6;
  --font:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kop:'Alegreya Sans','Public Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--grond);color:var(--inkt);font-family:var(--font);font-size:15px;-webkit-text-size-adjust:100%}
a{color:var(--oranje-tekst)}a:hover{color:#7A3600}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--kop);margin:0}
.loading{padding:40px;color:var(--grijs)}

/* ---------- Layout kantoor ---------- */
.shell{display:flex;flex-wrap:wrap;min-height:100vh}
.side{flex:1 1 230px;max-width:250px;min-width:0;background:var(--wit);border-right:1px solid var(--lijn);padding:22px 14px;display:flex;flex-direction:column;gap:22px}
.side .logo{width:170px;max-width:100%;margin:0 6px;min-width:0}
.logorij{display:flex;align-items:center;gap:6px}
.navlist{display:flex;flex-direction:column;gap:2px}
.nav{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px;color:var(--tekst2);text-decoration:none;font-weight:500;line-height:1.2;min-width:0}
.nav:hover{background:var(--grond);color:var(--inkt)}
.nav.on{background:var(--oranje-zacht);color:var(--inkt);font-weight:700}
.nav.on svg{color:#E06800}
.nav .badge{margin-left:auto;flex:0 0 auto}
.nav svg{flex:0 0 auto}
.sidefoot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--grond)}
.avatar{width:38px;height:38px;border-radius:99px;background:var(--inkt);color:var(--oranje);display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.main{flex:999 1 560px;min-width:0;padding:26px 36px 48px;display:flex;flex-direction:column;gap:20px}
@media (max-width:760px){
  .side{max-width:none;flex-basis:100%;width:100%;border-right:0;border-bottom:1px solid var(--lijn);padding:12px;gap:10px}
  .logorij{order:-2}
  .side .logo{width:150px}
  .navlist{flex-direction:row;overflow-x:auto;padding-bottom:4px;max-width:100%}
  .navlist .nav{white-space:nowrap;flex:0 0 auto;min-width:auto}
  .sidefoot{order:-1;margin:0;padding:6px 8px;gap:8px}
  .sidefoot .avatar{width:32px;height:32px;font-size:13px}
  .main{padding:18px 16px 40px}
}

/* ---------- Bouwstenen ---------- */
.kop{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kop .titel{display:flex;flex-direction:column;gap:3px;flex:1 1 260px}
.kop h1{font-size:36px;font-weight:800;letter-spacing:-.4px;line-height:1.05}
.sub{font-size:14px;color:var(--grijs);font-weight:500}
.card{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:18px 20px;min-width:0}
.card h2{font-size:22px;font-weight:800;margin-bottom:10px}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kpi .l{font-size:14px;color:var(--grijs)}
.kpi .v{font-family:var(--kop);font-size:42px;font-weight:800;line-height:1}
.kpi .s{font-size:13px;color:var(--grijs)}
.kpi.donker{background:var(--inkt);border-color:var(--inkt)}
.kpi.donker .l,.kpi.donker .s{color:#D6D2CB}.kpi.donker .v{color:var(--oranje)}
.rij{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.rij>.groot{flex:3 1 520px;min-width:0}.rij>.klein{flex:2 1 320px;min-width:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--lijn);background:var(--wit);font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;color:var(--inkt);white-space:nowrap}
.btn:hover{border-color:#CFCAC2;color:var(--inkt)}
.btn.pr{background:var(--oranje);border-color:var(--oranje);color:var(--inkt)}
.btn.pr:hover{background:#F06F00}
.btn.dk{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.btn.klein{min-height:34px;padding:0 10px;font-size:13px}
.btn.gevaar{color:var(--rood)}
.btn:disabled{opacity:.5;cursor:default}
.iconbtn{width:42px;height:42px;padding:0}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.f1,.f2{background:var(--lijn2);color:var(--tekst2)}
.f3,.f5{background:var(--geel-zacht);color:var(--geel)}
.f4,.f6,.fklaar{background:var(--blauw-zacht);color:var(--blauw)}
.f8{background:var(--oranje);color:var(--inkt)}
.f7{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.f9{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.fok{background:var(--groen-zacht);color:var(--groen)}
.fx{background:var(--lijn2);color:var(--grijs)}
.rood{background:var(--rood-zacht);color:var(--rood)}
.badge{background:var(--oranje);color:var(--inkt);font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px}
.code{font-family:var(--kop);font-weight:800;font-size:14px;background:var(--inkt);color:var(--oranje);border-radius:6px;padding:2px 8px;white-space:nowrap}
.code.p{background:var(--lijn2);color:var(--inkt)}
.muted{color:var(--grijs)}
.leeg{padding:18px;border:1.5px dashed #D6D2CB;border-radius:12px;text-align:center;color:var(--grijs);font-size:14px}

.tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tab{min-height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--lijn);background:var(--wit);font-size:14px;font-weight:600;color:var(--tekst2);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tab.on{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.tab b{font-size:12px;padding:1px 7px;border-radius:99px;background:var(--lijn2);color:var(--tekst2)}
.tab.on b{background:var(--oranje);color:var(--inkt)}
.zoek{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;flex:0 1 280px;color:var(--grijs)}
.zoek input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--inkt)}

/* tabellen */
.tabelbox{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;overflow-x:auto}
table.t{border-collapse:collapse;width:100%}
.t th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grijs);text-align:left;padding:11px 12px;border-bottom:1px solid var(--lijn);white-space:nowrap;background:#FAF9F7}
.t td{padding:10px 12px;border-bottom:1px solid var(--lijn2);font-size:14px;vertical-align:middle}
.t tbody tr:hover td{background:#FFF8F1}
.t tr.klik{cursor:pointer}
.t td.nw{white-space:nowrap}
.t input,.t select{border:1px solid transparent;border-radius:8px;padding:6px 8px;background:transparent;font-size:14px;width:100%;min-width:90px}
.t input:hover,.t select:hover{border-color:var(--lijn)}
.t input:focus,.t select:focus{border-color:var(--oranje);outline:0;background:var(--wit)}

/* formulieren */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.veld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--tekst2)}
.veld input,.veld select,.veld textarea{min-height:42px;border:1px solid var(--lijn);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:400;background:var(--wit);color:var(--inkt)}
.veld textarea{min-height:80px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--oranje);outline:2px solid var(--oranje-zacht)}
.veld.breed{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--oranje)}
.seg{display:inline-flex;background:var(--grond);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{min-height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:700;color:var(--grijs);cursor:pointer}
.seg button.on{background:var(--oranje);color:var(--inkt)}

/* actielijst */
.actie{display:flex;align-items:center;gap:14px;padding:12px 6px;border-top:1px solid var(--lijn2);text-decoration:none;color:var(--inkt);border-radius:8px}
.actie:hover{background:#FAF9F7;color:var(--inkt)}
.actie .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-weight:800}
.actie .tx{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.actie .tx strong{font-size:14px}.actie .tx span{font-size:13px;color:var(--grijs)}

/* staafgrafiek */
.bars{display:grid;grid-template-columns:170px minmax(0,1fr) 28px;gap:8px 10px;align-items:center;font-size:13px}
.bars .bg{height:14px;border-radius:4px;background:var(--lijn2)}
.bars .bg i{display:block;height:14px;border-radius:4px}

/* fases */
.stappen{display:flex;overflow-x:auto;padding:4px 0}
.stap{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 0 90px;text-align:center;font-size:12px;font-weight:600;color:var(--grijs)}
.stap i{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;background:var(--lijn2)}
.stap.klaar{color:var(--inkt)}.stap.klaar i{background:var(--oranje)}
.stap.nu{color:var(--inkt);font-weight:800}.stap.nu i{background:var(--inkt);color:var(--oranje);box-shadow:0 0 0 4px var(--oranje-zacht)}

/* dagplanning */
.dagen{display:flex;gap:6px;flex-wrap:wrap}
.dag{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:7px 6px;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);cursor:pointer}
.dag strong{font-size:14px}.dag small{font-size:12px;color:var(--grijs)}
.dag.on{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}.dag.on small{color:#FFB066}
.dag.vandaag{border-color:var(--oranje)}
.werven{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-content:start}
.werf{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.werf .wk{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--lijn2)}
.werf .wk a{font-weight:800;color:var(--inkt);text-decoration:none;font-size:15px}
.werf select{min-height:34px;border:1px solid var(--lijn);border-radius:8px;padding:0 8px;background:var(--wit);font-size:13px;font-weight:700}
.wn{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 6px 0 10px;border-radius:10px;background:var(--grond);font-weight:600;font-size:14px}
.wn .pl{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:12px;font-weight:700;color:var(--grijs2);padding:4px 6px;border-radius:6px}
.wn .pl.on{color:var(--oranje-tekst);background:var(--oranje-zacht)}
.wn .wnnaam{flex:1 1 auto;min-width:0;overflow-wrap:break-word;line-height:1.2;padding:5px 0;display:flex;flex-direction:column}
.wn .plbadge{font-size:11px;font-weight:800;color:var(--oranje-tekst)}
.wn.leider{background:var(--oranje-zacht)}
.wn .pl{margin-left:0;font-size:16px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.wn .pl.on{color:var(--oranje);background:transparent}
.wn>button,.wn>.chip{flex:0 0 auto}
.wn .x{border:0;background:transparent;cursor:pointer;color:var(--grijs);width:28px;height:28px;border-radius:6px;font-size:16px}
.wn .x:hover{background:var(--rood-zacht);color:var(--rood)}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:99px;background:var(--lijn2);font-size:13px;font-weight:600;color:var(--tekst2)}
.persoon{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--lijn2);font-size:14px}
.persoon>span:not(.code){flex:1 1 auto;min-width:0}

/* werkuren */
.uren td{text-align:center;padding:6px}
.uren td:first-child,.uren th:first-child{text-align:left;padding-left:14px;white-space:nowrap;font-weight:600}
.uren th{text-align:center}
.uc{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:10px;background:var(--grond);padding:4px;min-width:64px}
.uc input{width:52px;text-align:center;border:0;background:transparent;font-weight:800;font-size:16px;padding:4px 0;min-width:0}
.uc input:focus{outline:2px solid var(--oranje);border-radius:6px;background:var(--wit)}
.uc small{font-size:11px;color:var(--grijs);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc.extra{background:var(--oranje-zacht)}.uc.minder{background:var(--lijn2)}
.uc.leeg{background:var(--wit);border:1.5px dashed #D6D2CB}
.uc.slot{opacity:.75}

/* ---------- Gsm-app ---------- */
.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--grond)}
.apphead{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5}
.apphead img{width:34px;height:40px;object-fit:contain}
.apphead h1{font-size:23px;font-weight:800;line-height:1.1}
.appbody{flex:1 1 auto;padding:16px 18px 100px;display:flex;flex-direction:column;gap:14px}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--wit);border-top:1px solid var(--lijn);padding:4px 6px calc(10px + env(safe-area-inset-bottom));z-index:10}
.tabbar .in{display:flex;width:100%;max-width:520px}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1 1 0;min-height:54px;font-size:11px;font-weight:600;color:var(--grijs);text-decoration:none}
.tb.on{color:var(--inkt)}.tb.on svg{color:#E06800}
.hero{background:var(--inkt);color:var(--wit);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.hero .lbl{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#FFB066}
.hero h2{font-size:30px;font-weight:800;line-height:1}
.hero .pl{background:#2E2C29;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600}
.stepper{display:flex;align-items:center;justify-content:center;gap:22px}
.stepper button{width:58px;height:58px;border-radius:99px;border:1px solid var(--lijn);background:var(--grond);font-size:28px;font-weight:700;cursor:pointer}
.stepper button.plus{background:var(--oranje);border-color:var(--oranje)}
.stepper .getal{font-family:var(--kop);font-size:72px;font-weight:800;line-height:.9;min-width:90px;text-align:center}
.snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.snel button{min-height:44px;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);font-weight:800;cursor:pointer}
.snel button.on{background:var(--oranje);border-color:var(--oranje)}
.weekdagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wd{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:12px;border:0;background:transparent;font-size:12px;font-weight:600;color:var(--grijs);cursor:pointer}
.wd b{font-size:16px;color:var(--inkt)}
.wd i{width:6px;height:6px;border-radius:99px;background:transparent}
.wd i.ok{background:var(--groen)}
.wd.on{background:var(--inkt);color:#FFB066}.wd.on b{color:var(--wit)}
.groteknop{min-height:56px;border-radius:14px;font-size:16px;font-weight:800;width:100%}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:100%;max-width:420px;padding:28px;display:flex;flex-direction:column;gap:16px}
.login img{width:230px;max-width:100%}
.demo{background:var(--oranje-zacht);border-radius:12px;padding:14px;font-size:14px;display:flex;flex-direction:column;gap:10px}
.demobar{background:var(--inkt);color:var(--wit);font-size:13px;padding:7px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.demobar b{color:var(--oranje)}
.demobar button{background:transparent;border:1px solid #555;color:var(--wit);border-radius:8px;padding:3px 10px;cursor:pointer;font-size:12px}

#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--inkt);color:var(--wit);padding:13px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.2s;z-index:100;max-width:90vw}
#toast.toon{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.fout{background:var(--rood)}

/* ---------- Plannen & punten ---------- */
a.tab{text-decoration:none}
.st-open{background:var(--oranje);color:var(--inkt)}
.st-bezig{background:var(--blauw);color:var(--wit)}
.st-opgelost{background:var(--groen);color:var(--wit)}
.planlayout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1250px){.planlayout{grid-template-columns:200px minmax(0,1fr) 310px}}
@media (min-width:900px) and (max-width:1249px){.planlayout{grid-template-columns:230px minmax(0,1fr)}.planpaneel{grid-column:1/-1}}
.planlijst,.planpaneel{display:flex;flex-direction:column;gap:10px}
.planmidden{display:flex;flex-direction:column;gap:12px;padding:14px}
.planbalk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.planbalk:empty{display:none}
.planitem,.puntrij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--inkt)}
.planitem:hover,.puntrij:hover{background:var(--grond)}
.planitem.on,.puntrij.on{background:var(--oranje-zacht);border-color:#FFD2AD}
.planitem .tx,.puntrij .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.planitem .tx strong,.puntrij .tx strong{font-size:14px;overflow-wrap:anywhere}
.planitem .tx span,.puntrij .tx span{font-size:12px;color:var(--grijs)}
.puntlijst{display:flex;flex-direction:column;gap:2px}
.upload{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--lijn2)}
.upload label.btn span{overflow:hidden;text-overflow:ellipsis;max-width:170px}
.meer{position:relative}
.meer summary{list-style:none}.meer summary::-webkit-details-marker{display:none}
.meer .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:240px}
.meer .menu .btn{justify-content:flex-start}

.planvak{position:relative;border-radius:12px;overflow:hidden;background:#E9E6E0;border:1px solid var(--lijn)}
.planwrap{max-height:72vh;min-height:200px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gsmviewer .planwrap{max-height:62vh}
.planbox{position:relative;width:100%;margin:0 auto;user-select:none;-webkit-user-select:none}
.planbox img{display:block;width:100%;height:auto;background:#fff}
.plaatsmodus .planbox{cursor:crosshair}
.plaatsmodus{outline:3px solid var(--oranje);outline-offset:-3px}
.plaatsbanner{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--inkt);color:var(--wit);padding:8px 14px;border-radius:99px;font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center;pointer-events:none;white-space:nowrap}
.plaatsbanner[hidden]{display:none}
.zoomknoppen{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px}
.zoomknoppen button{width:44px;height:44px;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pin{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:99px;border:3px solid var(--wit);box-shadow:0 2px 6px rgba(0,0,0,.35);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;cursor:pointer;padding:0;line-height:1}
.pin.dringend{box-shadow:0 0 0 3px var(--rood),0 2px 6px rgba(0,0,0,.35)}
.pin.actief{width:40px;height:40px;font-size:15px;z-index:3;box-shadow:0 0 0 4px var(--inkt),0 2px 8px rgba(0,0,0,.4)}
.pin.nieuw{background:var(--inkt);color:var(--oranje);font-size:20px;z-index:4;animation:pop .25s}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(-50%,-50%) scale(1)}}
.puntform,.puntdetail{display:flex;flex-direction:column;gap:14px}
.fotoknop{min-height:52px;border-style:dashed;border-width:1.5px}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:8px}
.fotos.klein:empty{display:none}
.fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--lijn2);display:block}
.foto{position:relative;cursor:pointer}
.foto .fx{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:99px;border:0;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.foto .fx.zeker{background:var(--rood)}
.plusfoto{aspect-ratio:1;border:1.5px dashed #CFCAC2;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700;color:var(--grijs)}
.plusfoto.bezig{opacity:.5;pointer-events:none}
.reacties{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.reactie{background:var(--grond);border-radius:10px;padding:8px 10px;font-size:14px}
.reactie .muted{font-size:12px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox .btn{position:absolute;top:14px;right:14px;width:44px;padding:0}
.sheetbg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--wit);width:100%;max-width:520px;max-height:88vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:omhoog .2s}
@keyframes omhoog{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheetkop{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--lijn2)}
.sheetkop strong{flex:1;font-size:17px}
.sheetbody{overflow:auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.chips .tab{flex:0 0 auto}
.seg button:disabled{opacity:.35}
.planpaneel .seg{display:flex;flex-wrap:nowrap}.planpaneel .seg button{flex:1 1 auto;padding:0 6px;font-size:12px}

/* ---------- Parkeerverbod & container ---------- */
.rood-badge{background:var(--rood);color:var(--wit)}
.werfkaart{display:flex;flex-direction:column;gap:12px}
.werfkop{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.werfkop h2{flex:1 1 auto;margin:0;display:flex;align-items:center;gap:8px}
.werfitem{border:1px solid var(--lijn);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;background:#FCFBF9}
.werfitem.isvol{border-color:var(--rood);background:var(--rood-zacht)}
.werfitemkop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.werfitemkop strong{font-size:16px}
.werfvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.werfvelden .veld input,.werfvelden .veld select{min-height:38px;padding:6px 10px}
.btn.zeker{background:var(--rood);color:var(--wit);border-color:var(--rood)}
.cstappen{display:flex;flex-wrap:wrap;gap:4px}
.cstappen button{flex:1 1 auto;min-height:34px;border:1px solid var(--lijn);background:var(--wit);border-radius:8px;font-size:12px;font-weight:700;color:var(--grijs);cursor:pointer;padding:0 8px}
.cstappen button.klaar{background:var(--lijn2);color:var(--tekst2)}
.cstappen button.on{background:var(--inkt);color:var(--oranje);border-color:var(--inkt)}
.wissel{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px;border-radius:10px;background:var(--oranje-zacht)}
.wissel[hidden]{display:none}
.volmelding{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 10px;border-radius:10px;background:var(--wit);color:var(--rood);font-weight:600}
.gsmcontainer{display:flex;flex-direction:column;gap:10px}
.gsmcontainer.isvol .volmelding{color:var(--groen);background:var(--groen-zacht)}
.cicoon{width:40px;height:40px;border-radius:12px;background:var(--oranje-zacht);color:var(--oranje-tekst);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:0 0 auto}

/* ---------- Bestellingen & aankopen ---------- */
.seggroot{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:4px;align-self:flex-start}
.seggroot a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--grijs);text-decoration:none}
.seggroot a.on{background:var(--inkt);color:var(--wit)}
.groenvol{background:var(--groen);color:var(--wit)}
.t tr.sel td{background:var(--oranje-zacht)}
.t td.knoppen{display:flex;gap:6px;align-items:center}
.t td.knoppen:empty{display:table-cell}
.mini-in{min-height:36px;border:1px solid var(--lijn);border-radius:8px;padding:4px 8px;background:var(--wit);font-size:14px}
.zijpaneel{display:flex;flex-direction:column;gap:12px;align-self:flex-start;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
.zijpaneel.accent{border:2px solid var(--oranje)}
@media (max-width:999px){.zijpaneel{position:static;max-height:none;overflow:visible}}
.rit{display:flex;gap:12px;padding:12px;border-radius:12px;background:var(--grond);font-size:14px}
.rit>strong{width:52px;flex:0 0 auto}
.rit.vol{background:var(--oranje-zacht)}
.rit.vandaag{outline:2px solid var(--oranje)}
.ritlijst{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ritregel{display:flex;flex-direction:column;gap:2px}
a.ritregel{color:inherit;text-decoration:none;border-radius:8px;padding:2px 4px;margin:-2px -4px}a.ritregel:hover{background:rgba(255,255,255,.6)}a.ritregel:hover b{text-decoration:underline;color:var(--oranje-tekst)}
.projlink{color:inherit;text-decoration:none}.projlink:hover{color:var(--oranje-tekst);text-decoration:underline}.projlink b{color:var(--oranje-tekst)}.ritregel .muted{font-size:13px}
.kpi2{flex:1 1 520px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kpi2 .kpi .v{font-size:36px}
.grafiek{flex:1 1 460px;display:flex;flex-direction:column;gap:10px}
.staven{display:flex;align-items:flex-end;gap:6px;height:190px;border-bottom:1px solid var(--lijn)}
.staven.labels{height:auto;border:0}
.staaf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;flex:1 1 0;min-width:0}
.staaf i{display:block;width:70%;max-width:56px;border-radius:6px 6px 0 0;background:var(--oranje);min-height:2px}
.staaf b{font-size:11px;font-weight:700;white-space:nowrap}
.staaf span{font-size:12px;color:var(--grijs)}
.yn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:8px;font-size:12px;font-weight:800}
.yn.y,.statustegels .y{background:var(--groen-zacht);color:var(--groen)}
.yn.n,.statustegels .n{background:var(--rood-zacht);color:var(--rood)}
.yn.p,.statustegels .p{background:var(--geel-zacht);color:var(--geel)}
.yn.e,.statustegels .e{background:var(--lijn2);color:var(--grijs)}
.land{font-size:11px;font-weight:800;padding:3px 7px;border-radius:6px;background:var(--blauw-zacht);color:var(--blauw)}
.land.be{background:var(--lijn2);color:var(--tekst2)}
.statustegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;text-align:center;font-size:12px;font-weight:700}
.statustegels span{padding:8px 4px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:4px}
.controle{display:flex;flex-direction:column}
.chk{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--lijn2);font-size:14px;flex-wrap:wrap}
.qty{font-weight:700;white-space:nowrap;min-width:48px;text-align:center}
.teller{display:inline-flex;align-items:center;gap:2px}
.teller button{width:28px;height:28px;border-radius:8px;border:1px solid var(--lijn);background:var(--wit);font-weight:800;cursor:pointer}
.teller.groot button{width:42px;height:42px;font-size:20px}
.lijnweg{border:0;background:transparent;color:var(--grijs2);cursor:pointer;width:26px;height:26px;border-radius:6px}
.lijnweg:hover{background:var(--rood-zacht);color:var(--rood)}
.lijnform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 60px auto;gap:6px;padding-top:10px;border-top:1px solid var(--lijn2)}
.lijnform input{min-height:36px;border:1px solid var(--lijn);border-radius:8px;padding:4px 8px;min-width:0;font-size:13px}
.knopgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.knopgrid .btn{white-space:normal;text-align:center;min-height:42px;line-height:1.15;padding:6px 10px}
.retourvak{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--geel-zacht)}
.ritkaart{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--grond);margin-top:8px}
.ritkaart.klaar{background:var(--groen-zacht)}
.ritkaart.laat{background:var(--rood-zacht)}
.chk.ontvang .qty{font-size:16px}
.chktx{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.chkknop{display:flex;align-items:center;gap:6px;margin-left:auto}
.t .chip,.t .yn,.t .land{white-space:nowrap}

/* ---------- Wagenpark ---------- */
.ch{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;border:0}
.ch.ok{background:var(--groen-zacht);color:var(--groen)}.ch.bk{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.ch.dr{background:var(--rood-zacht);color:var(--rood)}.ch.iv{background:var(--lijn2);color:var(--grijs)}
.dt{display:flex;flex-direction:column;gap:3px;white-space:nowrap}.dt small{font-size:12px;color:var(--grijs);font-weight:500}
.plaat{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;border:1.5px solid var(--rood);color:var(--rood);border-radius:4px;padding:2px 6px;background:var(--wit);white-space:nowrap}
.wp-kpi{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.wp-meldingen{display:flex;flex-wrap:wrap;gap:14px}
.wp-melding{flex:1 1 min(360px,100%);display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:var(--oranje-zacht);color:#6B3000;flex-wrap:wrap}
.wp-melding.rood{background:var(--rood-zacht);color:#7A1A12}
.wp-actie{display:flex;gap:8px;align-items:flex-end}
.wp-actie input{min-height:38px}
.wp-onder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:18px;align-items:start}
.wp-onder .card{display:flex;flex-direction:column;gap:12px}
.wp-controle{display:grid;grid-template-columns:auto minmax(84px,110px) repeat(6,auto);gap:8px 6px;align-items:center;font-size:13px;overflow-x:auto}
.wp-controle .kol{color:var(--grijs);font-weight:700;font-size:12px}
.kmvak{display:flex;flex-direction:column;gap:2px;min-width:0}
.kmvak input{height:34px;border:1px solid var(--lijn);border-radius:8px;padding:0 8px;font-size:13px;min-width:0;width:100%}
.toestand{cursor:pointer}
.logs{display:flex;flex-direction:column}
.logregel{display:flex;align-items:center;gap:10px;padding:9px 4px;border:0;border-top:1px solid var(--lijn2);background:transparent;cursor:pointer;font-size:14px;color:var(--inkt);width:100%}
.logregel:hover{background:var(--grond)}
.wp-kaarten{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--grond);font-size:14px;border:0;cursor:pointer;color:var(--inkt);width:100%}
.kaartregel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 90px auto;gap:6px;align-items:center}
.kaartregel input,.kaartregel select{min-height:40px;border:1px solid var(--lijn);border-radius:8px;padding:4px 8px;min-width:0;font-size:14px;background:var(--wit)}
.gsmvoertuig{display:flex;flex-direction:column;gap:12px}
.kmform{display:flex;gap:8px}.kmform input{flex:1;min-width:0;min-height:48px;border:1px solid var(--lijn);border-radius:12px;padding:8px 12px;font-size:16px}
.kmform .btn{min-height:48px}
.gsmcontrole{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.gsmcontrole>div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:600}

/* ---------- Projectpagina, actielijst, instellingen ---------- */
.ptabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--lijn);margin-top:-4px}
.ptab{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;font-size:15px;font-weight:600;color:var(--grijs);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.ptab:hover{color:var(--inkt)}
.ptab.on{color:var(--inkt);font-weight:800;border-bottom-color:var(--oranje)}
.pmelding{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--oranje-zacht);color:#6B3000}
.bonicoon{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--blauw);background:var(--blauw-zacht);border-radius:6px;padding:1px 6px;vertical-align:middle}
.bonvak{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--grond)}
.urenkpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.urenkpi div{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.urenkpi span{font-size:12px;color:var(--grijs);font-weight:600}.urenkpi b{font-family:var(--kop);font-size:24px;font-weight:800}
.urenweek{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.urenrij{display:grid;grid-template-columns:52px minmax(0,1fr) auto 18px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--lijn2);font-size:14px}
.urenrij .ud b{text-transform:capitalize}
.urenrij .uw{min-width:0;display:flex;flex-direction:column}.urenrij .uw small{font-size:12px;color:var(--grijs)}
.urenrij .uu{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.urenrij .uu .muted{font-size:12px}
.urenrij .plus{font-size:11px;color:var(--oranje-tekst);font-weight:700}
.urenrij .ok{color:var(--groen)}
.pgeg .mini-in{width:100%;min-width:0}
.tweevak{display:flex;gap:6px;min-width:0}
.tweevak .mini-in{flex:1;min-width:0}
.sorteer{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--grijs)}
.sorteer .mini-in{min-height:40px;font-weight:600;color:var(--inkt)}
.uc{position:relative}
.opmdot{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:99px;background:var(--lijn);color:var(--grijs);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:help}
.opmdot.open{background:var(--oranje);color:var(--inkt)}
.urenopm{display:flex;flex-direction:column;gap:6px;border-color:#FFC999}
.opmrij{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--lijn2);font-size:14px;flex-wrap:wrap}
.fhold{background:var(--geel-zacht);color:var(--geel)}
.pmelding.geel{background:var(--geel-zacht);color:#5C4100}
.rijmenu .menu{min-width:220px}
.pmelding.rood{background:var(--rood-zacht);color:#7A1A12}
.pkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;align-items:start}
.pkaarten.twee{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.pkaarten .card{display:flex;flex-direction:column;gap:12px}
.pkaarten .card h2{margin:0}
.kv{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:10px 14px;font-size:14px;align-items:center}
.kv>span:nth-child(odd){color:var(--grijs)}
.kv>span:nth-child(even){font-weight:600;min-width:0;overflow-wrap:anywhere}
.balk{height:10px;border-radius:99px;background:var(--lijn2)}.balk i{display:block;height:10px;border-radius:99px;background:var(--oranje)}
.werfdagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.wdag{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:var(--grond);font-size:13px;min-height:72px}
.wdag.vol{background:var(--oranje-zacht)}.wdag.vandaag{outline:2px solid var(--oranje)}
.wdag small{font-size:11px;color:var(--grijs)}
.agroepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:18px;align-items:start}
.agroep{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:16px 18px 6px;display:flex;flex-direction:column;min-width:0}
.agkop{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.agkop h2{margin:0;font-size:19px;font-weight:800;flex:1}
.num{font-family:var(--kop);font-weight:800;font-size:16px;min-width:30px;height:30px;padding:0 8px;border-radius:99px;display:flex;align-items:center;justify-content:center}
.aitem{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--lijn2)}
.aitem .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-decoration:none;color:var(--inkt)}
.aitem .tx strong{font-size:14px}.aitem .tx span{font-size:13px;color:var(--grijs)}
.instnav{flex:1 1 200px;max-width:220px;display:flex;flex-direction:column;gap:2px}
.instnav a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--tekst2);text-decoration:none}
.instnav a.on{background:var(--inkt);color:var(--wit)}
@media (max-width:760px){.instnav{max-width:none;flex-direction:row;overflow-x:auto}.instnav a{white-space:nowrap}}
table.rechten{border-collapse:collapse;width:100%;min-width:620px}
.rechten th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grijs);padding:10px;border-bottom:1px solid var(--lijn);text-align:center}
.rechten td{padding:10px;border-bottom:1px solid var(--lijn2);font-size:14px;text-align:center}
.rechten th:first-child,.rechten td:first-child{text-align:left;font-weight:600}
.rechten .y{color:var(--groen);font-weight:800}.rechten .n{color:var(--grijs2)}
.int{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--grond)}
.int .lg{width:40px;height:40px;border-radius:10px;background:var(--wit);border:1px solid var(--lijn);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.int .tx{display:flex;flex-direction:column;flex:1;font-size:13px;color:var(--grijs)}.int .tx strong{font-size:14px;color:var(--inkt)}
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.galerij figure{margin:0;display:flex;flex-direction:column;gap:6px}
.galerij img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--lijn2);cursor:pointer}
.galerij figcaption{font-size:12px;color:var(--grijs);display:flex;align-items:center;gap:4px}
.galerij figcaption .lijnweg{margin-left:auto}
.docform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.docregel{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--lijn2);flex-wrap:wrap}
.heroknop{min-height:44px;background:#2E2C29;border-color:#2E2C29;color:var(--wit)}
.heroknop:hover{color:var(--wit);border-color:#555}

/* ---------- Gebruikers & rechten ---------- */
.gebtabel td{vertical-align:middle}
.loginstatus{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.loginstatus small{font-size:11px}
.maakvak{display:inline-flex;gap:6px;align-items:center}
table.matrix{min-width:760px}
.matrix th.fkol{vertical-align:top;min-width:118px}
.matrix th.fkol{display:table-cell}
.matrix th.fkol>*{display:block;margin:0 auto 4px}
.matrix .fnaam{width:124px;border:1px solid transparent;border-radius:8px;padding:4px 6px;font-weight:800;text-align:center;font-size:13px;text-transform:none;letter-spacing:0;background:transparent}
.matrix .fnaam:hover,.matrix .fnaam:focus{border-color:var(--lijn);background:var(--wit)}
.matrix th small{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--grijs)}
.matrix th select{font-size:11px;border:1px solid var(--lijn);border-radius:6px;padding:2px;max-width:110px;text-transform:none;letter-spacing:0;font-weight:600}
.matrix td input[type=checkbox]{width:20px;height:20px;accent-color:var(--oranje);cursor:pointer}
.matrix td input[type=checkbox]:disabled{cursor:default}
.matrix tr.groep td{background:var(--grond);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--grijs);text-align:left}
.nieuwefunctie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--lijn2)}
.profielkaart{display:flex;flex-direction:column;gap:14px}
.rechtlijst{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rechtlijst li{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--grond);font-size:14px}
.rechtlijst li span{font-size:13px;color:var(--grijs)}

@media print{
  .side,.demobar,.noprint,.tabbar{display:none!important}
  .main{padding:0}
  body{background:#fff}
  .werf,.card{break-inside:avoid}
}

/* taken per dag */
.taakdag{display:flex;flex-direction:column;gap:6px}
.taakdagkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;padding:6px 0;border-bottom:1px solid var(--lijn)}
.taakrij{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:10px}
.taakrij:hover{background:var(--grond)}
.taakrij input[type=checkbox]{width:22px;height:22px;accent-color:var(--oranje);flex:0 0 auto;margin-top:1px}
.taakrij .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.taakbewerk{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--oranje);border-radius:12px;background:var(--wit,#fff)}
.taakbewerk .knoppen{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.taakrij .lijnbewerk{background:none;border:0;color:var(--grijs2);cursor:pointer;padding:4px;border-radius:8px;display:inline-flex}
.taakrij .lijnbewerk:hover{color:var(--oranje);background:var(--grond)}
.taakrij.klaar .tx strong{text-decoration:line-through;color:var(--grijs2)}
.gsmtaak{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--lijn);border-radius:12px;background:#fff;cursor:pointer;min-height:52px}
.gsmtaak input[type=checkbox]{width:26px;height:26px;accent-color:var(--oranje);flex:0 0 auto}
.gsmtaak.klaar{background:var(--grond)}
.gsmtaak.klaar strong{text-decoration:line-through;color:var(--grijs2)}
/* standaardmateriaal */
.chip.soortst{background:#E9EEF7;color:#2A4C8C}
.chip.nieuwbadge{background:var(--oranje);color:#fff}
.regelvak{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--grond)}
.regel{display:grid;grid-template-columns:minmax(0,1fr) 74px 26px;gap:6px;align-items:center}
.regel input{min-width:0;padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;font:inherit;background:#fff}
.magvak{border:2px solid var(--oranje)}
.bonregels{margin:4px 0 6px;padding-left:18px;font-size:14px}
.bonregels li{margin:2px 0}

[hidden]{display:none!important}
.soortseg{display:grid!important;grid-template-columns:1fr;gap:2px}
.soortseg button{white-space:normal;line-height:1.2;padding:9px 10px;text-align:center;width:100%}
.chip.soortond{background:#EFE7F7;color:#5B2E86}
.levnieuw{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-direction:row}
.levnieuw strong{flex:1 0 100%}
.levnieuw .mini-in{flex:1 1 160px;min-width:0}
.exportlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px}

/* meldingen (belletje) */
.belknop{position:relative;margin-left:auto;width:42px;height:42px;flex:0 0 auto;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.belknop:hover{background:var(--grond)}
.belknop.heeft{color:#E06800}
.belteller{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#E5484D;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--wit)}
.belpaneel{position:fixed;z-index:60;width:420px;max-width:calc(100vw - 16px);max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.16);overflow:hidden}
@media (max-width:640px){.belpaneel{left:8px;right:8px;top:70px;width:auto}}
.belkop{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 14px;border-bottom:1px solid var(--lijn2)}
.belaantal{min-width:26px;height:26px;border-radius:7px;background:var(--oranje);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px}
.linkknop{border:0;background:none;color:#1C6FD1;font:inherit;font-size:14px;cursor:pointer;padding:4px}
.bellijst{overflow-y:auto;display:flex;flex-direction:column}
.belrij{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;border-bottom:1px solid var(--lijn2);background:var(--wit);padding:11px 14px;font:inherit;color:var(--tekst2);cursor:pointer;width:100%}
.belrij:hover{background:var(--grond)}
.belrij.nieuw{background:#FFF7F0;color:var(--inkt)}
.belrij .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.belrij .tx strong{font-size:14px}
.belrij:not(.nieuw) .tx strong{font-weight:600}
.belrij small{color:var(--grijs);font-size:12px}
.bolletje{width:10px;height:10px;border-radius:99px;margin-top:5px;flex:0 0 auto;background:var(--grijs2)}
.bolletje.rood{background:#E5484D}.bolletje.fok{background:#2E9E5B}.bolletje.f3{background:#E5A400}.bolletje.f4{background:#3B7DD8}.bolletje.f7{background:var(--oranje)}
.belvink{color:var(--grijs);padding:2px;border-radius:6px}
.belvink:hover{color:#2E9E5B;background:var(--grond)}
.belknop.inapp{width:40px;height:40px}
.meerknop{align-self:flex-start;margin-top:4px}
.aitem[hidden]{display:none!important}
button.opmdot{border:0;cursor:pointer;padding:0;font-family:inherit;font-size:12px;width:20px;height:20px;top:-7px;right:-7px}
.opmrij.af{opacity:.75}
.opmrij.licht{outline:2px solid var(--oranje);border-radius:10px}
.takenknop{margin-left:auto;white-space:nowrap}
.takenknop.heeft{border-color:var(--oranje);color:#B85500}
.takenknop b{font-weight:800}
@media (min-width:700px){.sheetbg:has(.sheet.breed){align-items:center}.sheet.breed{border-radius:18px;max-width:560px}}
.afwrij{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--grond)}
.card.gemeld{border:2px solid #F5C2C2}
.persoon .chip{flex:0 0 auto;width:auto}
.belinfo{background:var(--oranje-zacht);padding:10px 14px;font-size:13px;line-height:1.35}
.drchip{margin-right:2px}
.tab.tabrood{border-color:#F5C2C2;color:#B42318}
.tab.tabrood.on{background:#B42318;color:#fff;border-color:#B42318}
.drseg button.on.dringend{background:var(--oranje);color:var(--inkt)}
.drseg button.on.zeer_dringend{background:#B42318;color:#fff}
.dagkiezer{display:flex;gap:6px;align-items:center}
.dagkiezer .iconbtn{flex:0 0 auto}
a.weekrij{text-decoration:none;color:inherit;border-radius:8px}
a.weekrij.on{background:var(--oranje-zacht)}
.werf .wk .werfweg{flex:0 0 auto;width:30px;height:30px}
.versie{font-size:11px;color:var(--grijs);padding:0 10px;margin-top:-14px}
@media (max-width:760px){.versie{display:none}}
/* magazijnier: ritten per dag duidelijk gescheiden */
.ritdag{display:flex;flex-direction:column;gap:10px;background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:0 0 12px;overflow:hidden}
.ritdag.leeg{flex-direction:row;align-items:center;gap:12px;padding:12px 16px;border-style:dashed;background:transparent}
.ritdag.leeg .ritdagnaam{font-size:16px;color:var(--grijs)}
.ritdagkop{display:flex;align-items:baseline;gap:10px;padding:12px 16px;background:var(--inkt);color:#fff}
.ritdagnaam{font-family:var(--kop);font-size:20px;font-weight:800;text-transform:capitalize}
.ritteller{margin-left:auto;font-size:13px;font-weight:700;opacity:.85}
.ritdaglijst{display:flex;flex-direction:column;gap:10px;padding:0 12px}
.ritdag.vandaag{border:3px solid var(--oranje);box-shadow:0 6px 22px rgba(255,119,0,.18)}
.ritdag.vandaag .ritdagkop{background:var(--oranje);color:var(--inkt)}
.ritdag.vandaag .ritdagnaam{font-size:24px}
.ritdag.vandaag .ritkaart{background:#FFF4EA}
.ritvoorbij summary{cursor:pointer;font-weight:700;color:var(--grijs);padding:8px 4px}
.ritvoorbij[open]{display:flex;flex-direction:column;gap:12px}
.updatebalk{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:80;display:flex;gap:12px;align-items:center;background:var(--inkt);color:#fff;padding:10px 12px 10px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px;max-width:calc(100vw - 24px)}
/* werfkaart: naam krijgt voorrang, knoppen schuiven naar een eigen regel als het te smal wordt */
.werf .wk{flex-wrap:wrap;row-gap:6px}
.werf .wk > span{flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
.werf .wk .takenknop{flex:0 0 auto}
/* vernieuw-knop naast het belletje */
.vernieuwknop{width:42px;height:42px;flex:0 0 auto;border-radius:12px;border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vernieuwknop:hover{background:var(--grond)}
.vernieuwknop.inapp{width:40px;height:40px}
.vernieuwknop.draait svg{animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.belknop + .vernieuwknop,.vernieuwknop + .belknop{margin-left:0}
.tb{position:relative}
.tbteller{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#E5484D;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.logorij .vernieuwknop{margin-left:auto}
.vernieuwknop + .belknop{margin-left:0}
.side .logorij .logo{flex:1 1 auto;width:auto;max-width:140px}
.deelknop{border:1px solid var(--lijn);background:var(--wit);border-radius:8px;min-width:30px;height:26px;padding:0 6px;font:inherit;font-size:12px;font-weight:800;color:var(--grijs);cursor:pointer;margin-left:6px;flex:0 0 auto}
.deelknop.vm,.deelknop.nm{background:#E9EEF7;color:#2A4C8C;border-color:#C9D6EE}
.notaknop{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:99px;border:1px solid var(--lijn);background:var(--wit);color:var(--grijs);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.uc:hover .notaknop,.uc:focus-within .notaknop,.notaknop:focus-visible{opacity:1}
.notaknop.heeft{opacity:1;background:#2F6FED;border-color:#2F6FED;color:#fff}
.notaknop:hover{border-color:var(--oranje);color:var(--oranje)}.notaknop.heeft:hover{color:#fff;filter:brightness(1.1)}
.notatekst{font-size:11px;color:#2F6FED;font-weight:700;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
@media (hover:none){.notaknop{opacity:1}}
.uc input.auto::placeholder{color:var(--inkt);opacity:.55;font-weight:700}
.werf{position:relative}
.werf .wk{padding-right:26px}
.werf .wk .werfweg{position:absolute;top:6px;right:6px;width:26px;height:26px;margin:0!important}
/* werkverloop */
.verloopbalk{display:flex;gap:3px;height:10px;margin-top:10px}
.verloopbalk i{border-radius:4px;background:var(--lijn)}
.verloopbalk i.bezig{background:var(--oranje)}
.verloopbalk i.klaar{background:#2E9E5B}
.verloopbalk.klein{height:6px;margin:0}
.fasen{display:flex;flex-direction:column;gap:12px}
.fasekaart{display:flex;flex-direction:column;gap:10px;border-left:5px solid var(--lijn)}
.fasekaart.bezig{border-left-color:var(--oranje);box-shadow:0 4px 18px rgba(255,119,0,.12)}
.fasekaart.klaar{border-left-color:#2E9E5B;opacity:.85}
.fasekop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fasenr{width:30px;height:30px;border-radius:99px;background:var(--inkt);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.fasekaart.bezig .fasenr{background:var(--oranje);color:var(--inkt)}
.fasekaart.klaar .fasenr{background:#2E9E5B}
.fasenaam{flex:1 1 200px;min-width:0;font:inherit;font-size:18px;font-weight:800;border:1px solid transparent;border-radius:8px;padding:4px 8px;background:transparent}
.fasenaam:hover,.fasenaam:focus{border-color:var(--lijn);background:var(--wit)}
.fasest button.on.bezig{background:var(--oranje);color:var(--inkt)}
.fasest button.on.klaar{background:#2E9E5B;color:#fff}
.faseacties{display:flex;gap:4px;align-items:center}
.fasetijd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.fasetijd label{display:flex;gap:6px;align-items:center;font-weight:600}
.faseuitleg{width:100%;font:inherit;border:1px solid var(--lijn);border-radius:10px;padding:8px 10px;resize:vertical;background:var(--wit)}
.facheck{display:flex;flex-direction:column;gap:4px}
.facheck .check{display:flex;align-items:center;gap:8px}
.facheck .check span{flex:1}
.cnieuw{display:flex;gap:6px;margin-top:4px}
.cnieuw input{flex:1;min-width:0}
.facheck.groot{gap:8px}
.verloopkop .sjabloonvak{display:flex;gap:6px;flex-wrap:wrap}
.verloopapp{display:flex;flex-direction:column;gap:10px;border:2px solid var(--oranje)}
.faselink{font-size:12px;font-weight:700;color:#B85500;text-decoration:none}
.fasekaart.klaar:not(.open) .faseuitleg,.fasekaart.klaar:not(.open) .facheck{display:none}
.persoon .chip{flex:0 0 auto!important;max-width:max-content}
.fasefotos{display:flex;gap:8px;flex-wrap:wrap}
.fasefotos .foto{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--grond);flex:0 0 auto}
.fasefotos .foto img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.fasefotos .plusfoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px dashed var(--lijn);cursor:pointer;font-size:12px;font-weight:700;color:var(--grijs)}
.fotoweg{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:99px;border:0;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fotoweg.zeker{background:#E5484D}
.verloopapp .fasefotos .foto{width:96px;height:96px}
.fasekaart.klaar:not(.open) .fasefotos{display:none}
.cregel{display:flex;align-items:center;gap:6px}
.cregel input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--oranje)}
.ctekst{flex:1;min-width:0;font:inherit;font-weight:600;border:1px solid transparent;border-radius:6px;padding:4px 6px;background:transparent}
.ctekst:hover,.ctekst:focus{border-color:var(--lijn);background:var(--wit)}
.cknop{border:0;background:transparent;color:var(--grijs2);width:26px;height:26px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cknop:hover{background:var(--oranje-zacht);color:#B85500}
.faseinvoeg{align-self:center;border:1px dashed var(--lijn);background:transparent;color:var(--grijs);border-radius:99px;padding:4px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;margin:-4px 0}
.faseinvoeg:hover{border-color:var(--oranje);color:#B85500;background:var(--oranje-zacht)}
/* tekenen op foto's */
.tekbadge{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:2px 6px;pointer-events:none}
.tekbadge.leeg{background:rgba(255,119,0,.9);color:var(--inkt)}
.tekenbg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:12px}
.tekenvak{background:var(--wit);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;max-width:min(1200px,100%);max-height:100%;overflow:auto}
.tekenbalk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tekenkleuren{display:flex;gap:4px;flex-wrap:wrap}
.tekenkleuren button{display:flex;align-items:center;gap:6px;border:2px solid var(--lijn);background:var(--wit);border-radius:10px;padding:5px 9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tekenkleuren button i{width:16px;height:16px;border-radius:99px;display:inline-block}
.tekenkleuren button.on{border-color:var(--inkt);box-shadow:0 0 0 2px var(--inkt) inset}
.tekentekst{width:220px}
.tekenstage{position:relative;align-self:center;line-height:0;max-width:100%}
.tekenstage img{max-width:100%;max-height:calc(100vh - 230px);display:block;border-radius:10px;user-select:none;-webkit-user-drag:none}
.tekenlaag{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* ---------- Werkuren: arbeiders/bedienden en overzicht ---------- */
.urentabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.urentabs .seggroot{display:inline-flex;gap:2px}
.chip.rz{background:#FDE8E8;color:#B42318}
.ovtabel th a{color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:8px;padding:2px 4px}
.ovtabel th a:hover{background:var(--grond);color:var(--oranje-tekst)}
.ovtabel th a.nu{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.ovtabel th small{font-size:11px;font-weight:600;color:var(--grijs);text-transform:none;letter-spacing:0}
.ovcel{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:10px;background:var(--grond);padding:6px 4px;min-width:76px}
.ovcel b{font-size:16px;font-weight:800}.ovcel b small{font-size:11px;font-weight:700;color:var(--grijs)}
.ovcel.leegcel{background:transparent;color:var(--grijs2);border:1.5px dashed #E2DED7;min-height:42px;justify-content:center}
.ovregel{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:16px}
.ovextra,.ovafw{font-style:normal;font-size:11.5px;font-weight:800;border-radius:99px;padding:1px 6px}
.ovextra{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.ovafw{background:#FDE8E8;color:#B42318}
.afwlijst{display:flex;flex-direction:column;gap:6px}
.afwlijst .afwrij{flex-wrap:wrap}
.afwlijst .afwnaam{min-width:150px}
.afwlijst .afwper{font-weight:700;font-size:14px;min-width:240px}
.afwlijst .afwopm{flex:1;min-width:120px;font-size:13px}

/* ---------- Offertes ---------- */
.klikrij{cursor:pointer}.klikrij:hover td{background:var(--grond)}
.offactie{display:flex;gap:8px;align-items:flex-start}.offactie svg{margin-top:3px;color:var(--grijs);flex:0 0 auto}
.offactie span{display:flex;flex-direction:column;gap:1px}.offactie small{font-size:12px;color:var(--grijs)}
.offsamen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.offsamen>div{display:flex;flex-direction:column;gap:3px;min-width:0}.offsamen .muted{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.offsamen strong{font-size:15px;overflow-wrap:anywhere}
.offbeslis{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-radius:14px;background:var(--grond)}
.offstappen{display:flex;flex-direction:column;position:relative}
.offstap{display:flex;gap:12px;position:relative;padding-bottom:14px}
.offstap:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--lijn)}
.offbol{width:32px;height:32px;border-radius:99px;display:flex;align-items:center;justify-content:center;background:var(--wit);border:2px solid var(--lijn);color:var(--grijs);flex:0 0 auto;z-index:1}
.offstap.klaar .offbol{background:var(--groen,#1F9D55);border-color:var(--groen,#1F9D55);color:#fff}
.offstap.klaar:not(:last-child)::before{background:var(--groen,#1F9D55)}
.offstap.nu .offbol{border-color:var(--oranje);color:var(--oranje-tekst);background:var(--oranje-zacht)}
.offstap.laat .offbol{border-color:#E5484D;color:#B42318;background:#FDE8E8}
.offstap.gestopt{opacity:.45}
.offinh{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:4px}
.offstap.nu .offinh{background:var(--oranje-zacht);margin:-4px 0 0;padding:10px 12px;border-radius:12px}
.offkop{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.offkop .muted{font-size:13px}
.offknoppen{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.offgedaan{font-size:13px;color:var(--groen,#1F9D55);font-weight:700;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.offgedaan i{color:var(--tekst2);font-weight:500}
.linkknop{background:none;border:0;padding:0;color:var(--grijs);text-decoration:underline;font-size:12px;cursor:pointer;font-weight:500}
.offnotities{display:flex;flex-direction:column;gap:6px}
.offnota{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:10px;background:var(--grond);flex-wrap:wrap}
.offnota span{flex:1;min-width:200px;font-size:14px}.offnota small{font-size:12px}
.belscript{background:var(--grond);border-left:4px solid var(--oranje);border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.5}
.offcontact{display:flex;flex-direction:column;gap:10px;border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.typechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.typechip{display:inline-flex;cursor:pointer}
.typechip input{position:absolute;opacity:0;pointer-events:none}
.typechip span{padding:7px 12px;border-radius:99px;border:1.5px solid var(--lijn);background:var(--wit);font-size:13px;font-weight:600;color:var(--tekst2);user-select:none}
.typechip input:checked+span{background:var(--oranje);border-color:var(--oranje);color:var(--inkt)}
.typechip input:focus-visible+span{outline:2px solid var(--oranje);outline-offset:2px}
.opgeslagen{display:inline-flex;align-items:center;gap:6px;color:var(--groen,#1F9D55);font-weight:700;font-size:14px;min-height:42px}
.werf .wk select[data-actie=voertuig].vangekozen{background:var(--inkt);color:#fff;font-weight:800;border-color:var(--inkt)}
.werf .wk select.kiesmij{border:2px solid var(--oranje);background:var(--oranje-zacht)}
.vanteller{flex:0 0 auto;font-size:12px;font-weight:800;background:var(--oranje);color:var(--inkt);border-radius:99px;padding:2px 7px;margin-left:-4px}
.werf.wachtvoertuig{border-style:dashed;border-color:var(--oranje)}
.werf .wk select.vangekozen option{background:#fff;color:var(--inkt);font-weight:600}
/* ---------- Planning definitief / voorlopig ---------- */
.dagkop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.defbalk{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:14px;background:var(--oranje-zacht);flex-wrap:wrap}
.defbalk.def{background:var(--groen-zacht)}
.defbalk span{display:flex;flex-direction:column;line-height:1.25}.defbalk small{font-size:12px;color:var(--tekst2)}
.defbol{display:inline-block;width:12px;height:12px;border-radius:99px;background:#1F9D55;box-shadow:0 0 0 3px rgba(31,157,85,.22);flex:0 0 auto;vertical-align:middle}
.defbol.oranje{background:var(--oranje);box-shadow:0 0 0 3px rgba(255,119,0,.22)}
.dag .defbol{width:8px;height:8px;box-shadow:none;margin-left:2px;vertical-align:2px}
.btn.groen{background:#1F9D55;border-color:#1F9D55;color:#fff}.btn.groen:hover{filter:brightness(1.08)}
.appdef{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.3;background:var(--oranje-zacht);color:var(--oranje-tekst)}
.appdef.def{background:var(--groen-zacht);color:var(--groen,#1F9D55)}
.appdef strong{display:block;font-size:15px}
.werf .wk select[data-actie=voertuig]{width:68px;flex:0 0 68px;padding-left:8px;padding-right:4px}
.werf .wk > span.vanteller{flex:0 0 auto;min-width:0}
/* ---------- Abonnementen ---------- */
.abolet{display:flex;flex-direction:column;gap:8px;border:2px solid var(--oranje)}
.abolijn{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--grond);color:inherit;text-decoration:none;font-size:14px}
.abolijn:hover{background:var(--oranje-zacht)}.abolijn strong{min-width:150px}.abolijn span:nth-child(2){flex:1}
.abofacts{display:flex;flex-direction:column;gap:6px}
.abofact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--grond);border-left:4px solid var(--lijn)}
.abofact.ok{border-left-color:#1F9D55}.abofact.mist{border-left-color:#E5484D;background:#FDF1F1}
.abofact span{display:flex;flex-direction:column}.abofact small{font-size:12px}
.factknop{display:inline-flex;align-items:center;gap:2px}
.abseg{display:flex;flex-wrap:wrap;margin-top:6px}
.abseg label{display:inline-flex;cursor:pointer}.abseg input{position:absolute;opacity:0;pointer-events:none}
.abseg span{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;font-size:14px;font-weight:700;color:var(--grijs)}
.abseg input:checked+span{background:var(--oranje);color:var(--inkt)}
.abseg input:focus-visible+span{outline:2px solid var(--oranje)}
.offafspraak{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--blauw-zacht);color:var(--inkt);border:1px solid #BFD3FB}
.offafspraak strong{display:block;font-size:15px}.offafspraak small{font-size:12px;color:var(--tekst2)}
/* ---------- Plan tekenen ---------- */
.tekenlayout{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:1200px){.tekenlayout{grid-template-columns:minmax(0,1fr)}}
.tekenlijst,.tekenpaneel{display:flex;flex-direction:column;gap:10px}
.tekenpaneel{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.tekenmidden{display:flex;flex-direction:column;gap:10px;min-height:560px}
.tekenbalk2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tekentabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--lijn);padding-bottom:0}
.tekentabs button{border:0;background:transparent;padding:9px 12px;font-weight:700;font-size:13px;color:var(--grijs);white-space:nowrap;cursor:pointer;border-radius:8px 8px 0 0;display:inline-flex;gap:6px;align-items:center}
.tekentabs button small{font-size:11px;color:var(--grijs2)}
.tekentabs button b{background:var(--lijn2);border-radius:99px;padding:0 6px;font-size:11px}
.tekentabs button.on{background:var(--oranje);color:var(--inkt)}.tekentabs button.on small{color:var(--inkt)}
.tekenvlak{background:#FAF9F6;border:1px solid var(--lijn2);border-radius:12px;padding:8px;touch-action:none}
.tekenvlak svg{width:100%;height:auto;max-height:72vh;display:block;user-select:none}
.tekenvlak .obj.eigen{cursor:grab}.tekenvlak .obj.eigen:hover{filter:drop-shadow(0 0 2px #FF7700)}
.tform{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tform .breed{grid-column:1/-1}
.tform input{width:100%}
.palet{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.paletknop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid var(--lijn);border-radius:10px;background:var(--wit);cursor:pointer;font-size:12px;font-weight:700;color:var(--tekst2);text-align:center}
.paletknop:hover{border-color:var(--oranje);background:var(--oranje-zacht)}
.objlijst{display:flex;flex-direction:column;gap:4px}.objlijst button{text-align:left;border:0;background:var(--grond);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}
.objlijst button:hover{background:var(--oranje-zacht)}
.oplijst{display:flex;flex-direction:column;gap:6px}
.oprij{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--grond);border-radius:10px;padding:8px}
.oprij select,.oprij input{font-size:13px;padding:5px 6px;border:1px solid var(--lijn);border-radius:6px;background:var(--wit)}
.oprij label{display:flex;flex-direction:column;font-size:11px;color:var(--grijs);gap:2px}.oprij input{width:64px}
.murenlijst{display:flex;flex-direction:column;gap:6px}
.muurrij{background:var(--grond);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.muurkop{display:flex;gap:6px;align-items:center}.muurkop select{flex:1;min-width:0;font-size:13px;padding:5px 6px;border:1px solid var(--lijn);border-radius:6px;background:var(--wit)}
.muurkop .iconbtn{width:30px;height:30px;font-size:16px}
.muurnr{width:22px;height:22px;border-radius:99px;background:var(--oranje);color:var(--inkt);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
.muurvelden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.muurvelden label{display:flex;flex-direction:column;font-size:11px;color:var(--grijs);gap:2px}
.muurvelden input{width:100%;font-size:13px;padding:5px 6px;border:1px solid var(--lijn);border-radius:6px;background:var(--wit)}
.muurvelden input[readonly]{background:var(--lijn2);color:var(--grijs)}
.vormkeuze summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--tekst2)}
.tekenvlak .hoek{cursor:move}.tekenvlak .hoek:hover{fill:#FF7700}
.tekenpaneel{width:auto}
@media (min-width:1201px){.tekenlayout{grid-template-columns:220px minmax(0,1fr) 340px}}
.tekenvlak{position:relative;overflow:hidden}
.tekenvlak svg{max-height:68vh;cursor:grab}.tekenvlak svg:active{cursor:grabbing}
.tekenvlak .muurvlak{cursor:move}.tekenvlak .muurvlak:hover{fill:rgba(255,119,0,.18)}
.tzoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;align-items:center;gap:4px;background:rgba(255,255,255,.9);padding:4px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tzoom .iconbtn{width:32px;height:32px;font-size:18px;font-weight:700}
.tekenhulp{position:absolute;left:12px;bottom:10px;font-size:11px;color:var(--grijs);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:6px}
.tekenmeet{position:absolute;pointer-events:none;background:var(--inkt);color:#fff;font-size:12px;padding:5px 8px;border-radius:8px;line-height:1.35;z-index:3;white-space:nowrap}
.muurrij.gekozen{outline:2px solid var(--oranje);background:var(--oranje-zacht)}

/* plan tekenen: gereedschap */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0}
.tools .tool{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--rand,#E4E0DA);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--tekst,#1A1A1A)}
.tools .tool:hover{border-color:#FF7700}
.tools .tool.on{background:#FF7700;border-color:#FF7700;color:#fff}
.tools select,.tools input{font:inherit;font-size:13px;border:1px solid var(--rand,#E4E0DA);border-radius:8px;padding:5px 8px;background:#fff}
.tools .tooldikte{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--tekst2,#555)}
.tools .tooldikte input{width:58px}
.tools .toolsep{width:1px;height:24px;background:var(--rand,#E4E0DA);margin:0 4px}
.tekenvlak.tool-muur svg,.tekenvlak.tool-deur svg,.tekenvlak.tool-raam svg{cursor:crosshair}
.tekenvlak .opvlak{cursor:grab}.tekenvlak .opvlak:hover{fill:rgba(255,119,0,.15)}
.tekenvlak .ophandle{cursor:ew-resize}.tekenvlak .ophandle:hover{fill:#FF7700}
.tekenstappen{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;color:var(--tekst2,#555)}
.tekenvlak.tool-afbraak .abvlak,.tekenvlak.tool-afbraak .obj{cursor:pointer}
.tekenvlak.tool-afbraak .abvlak:hover{fill:#FF7700;fill-opacity:.25}
.tools .tool.ab-weg.on{background:#E5484D;border-color:#E5484D}
.tools .tool.ab-recup.on{background:#2F6FED;border-color:#2F6FED}
.objlijst span{font-size:13px;padding:4px 8px;border:1px solid var(--rand,#E4E0DA);border-radius:6px;background:#fff}

.offfilter{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.offfilter label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tekst2,#555)}
.sortkop{color:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.sortkop:hover,.sortkop.on{color:var(--oranje-tekst,#C55A00)}
.sortkop .sortpijl{opacity:.35;font-size:11px}

.ctxmenu{position:fixed;z-index:1000;min-width:240px;max-width:320px;background:#fff;border:1px solid var(--rand,#E4E0DA);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.ctxmenu .ctxkop{font-weight:800;font-size:14px;padding:6px 10px 2px}
.ctxmenu .ctxinfo{font-size:12.5px;color:var(--tekst2,#555);padding:1px 10px}
.ctxmenu .ctxlijn{height:1px;background:var(--rand,#E4E0DA);margin:6px 0}
.ctxmenu button{font:inherit;font-size:13.5px;text-align:left;background:none;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--tekst,#1A1A1A)}
.ctxmenu button:hover{background:#FFF1E5}
.ctxmenu button.rood{color:#C9302C}.ctxmenu button.blauw{color:#2F6FED}

/* plan tekenen: volledig scherm */
.tekenlayout.vol{position:fixed;inset:0;z-index:400;background:var(--achter,#F4F2EE);padding:10px;gap:10px;grid-template-columns:minmax(0,1fr) 320px;align-items:stretch}
.tekenlayout.vol .tekenlijst{display:none}
.tekenlayout.vol .tekenmidden{min-height:0;height:calc(100vh - 20px);overflow:hidden}
.tekenlayout.vol .tekenvlak{flex:1;min-height:0;display:flex;position:relative}
.tekenlayout.vol .tekenvlak svg{height:100%;max-height:none}
.tekenlayout.vol .tekenpaneel{position:static;max-height:calc(100vh - 20px);height:calc(100vh - 20px)}
body.tekenvol{overflow:hidden}
@media (max-width:900px){.tekenlayout.vol{grid-template-columns:minmax(0,1fr)}.tekenlayout.vol .tekenpaneel{position:fixed;right:10px;bottom:10px;width:min(320px,90vw);height:auto;max-height:45vh;z-index:401;box-shadow:0 8px 24px rgba(0,0,0,.2)}}
.tekenvlak .obj.sel{filter:drop-shadow(0 0 1.5px #FF7700) drop-shadow(0 0 1.5px #FF7700)}
.tekenvlak .zrand-e,.tekenvlak .zrand-w{cursor:ew-resize}.tekenvlak .zrand-n,.tekenvlak .zrand-s{cursor:ns-resize}
.tekenvlak .lhandle{cursor:ew-resize}.tekenvlak .lijnobj{cursor:pointer}
.tools .tool svg,.btn svg{flex:none}
.tools .tool{display:inline-flex;align-items:center;gap:6px}
.ctxmenu button{display:flex;align-items:center;gap:8px}
.opties-rij{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13.5px}
.opties-rij label{display:flex;align-items:center;gap:6px;cursor:pointer}
.objlijst button{font:inherit;font-size:13px;text-align:left;padding:6px 8px;border:1px solid var(--rand,#E4E0DA);border-radius:6px;background:#fff;cursor:pointer}
.objlijst button:hover{border-color:#FF7700}
.ctxmenu .ctxkop{display:flex;align-items:center;gap:8px}
.ctxmenu .ctxsluit{padding:4px!important;border-radius:6px;color:var(--tekst2,#555)}
.afstandrij{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.afstandrij label{display:flex;flex-direction:column;font-size:12px;gap:2px;color:var(--tekst2,#555)}
.afstandrij input{width:100%;min-width:0}
.tekenvlak.tool-afbraak .vloerobj{cursor:pointer}
.vinkrij{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;line-height:1.3}
.vinkrij input{width:18px!important;height:18px;flex:none;margin:0}
.opties-rij input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
.tekenpaneel{overflow-x:hidden}
.tekenpaneel .tform>*{min-width:0}
.tekenpaneel .veld{min-width:0}
.tekenpaneel .veld input,.tekenpaneel .veld select{width:100%;min-width:0;box-sizing:border-box}
#vlak svg text{pointer-events:none}
.tekenvlak .maatgreep{cursor:move}.tekenvlak .maatgreep:hover{stroke:rgba(255,119,0,.25)}

/* ---------- Klant kiezen uit Teamleader ---------- */
.klantzoek{position:relative}
.klantlijst{position:absolute;z-index:30;top:100%;left:0;right:0;margin-top:4px;min-width:260px;max-height:300px;overflow-y:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px}
.klantlijst button{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;color:var(--inkt)}
.klantlijst button:hover,.klantlijst button.on{background:var(--oranje-zacht)}
.klantlijst strong{font-size:14px}
.klantlijst span{font-size:12px;font-weight:400;color:var(--grijs)}
.klantlijst button.klantnieuw{flex-direction:row;align-items:center;gap:8px;border-top:1px solid var(--lijn2);border-radius:0 0 8px 8px;color:var(--oranje-tekst)}

/* ---------- Keuzelijst en bladeren in de huisstijl ---------- */
.keuze{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding:0 14px 0 16px;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;font-size:14px;font-weight:500;color:var(--inkt);cursor:pointer;white-space:nowrap;max-width:100%}
.keuze:hover{border-color:var(--oranje)}
.keuze:focus-visible,.keuze[aria-expanded=true]{border-color:var(--oranje);outline:2px solid var(--oranje-zacht)}
.keuze svg{transform:rotate(90deg);flex:0 0 auto;color:var(--grijs);transition:transform .12s}
.keuze[aria-expanded=true] svg{transform:rotate(-90deg)}
.keuze.klein{min-height:32px;padding:0 10px 0 12px;font-size:13px;gap:12px;border-color:transparent;background:transparent}
.keuze.klein:hover,.keuze.klein[aria-expanded=true]{background:var(--wit);border-color:var(--oranje)}
.keuzelijst{position:fixed;z-index:1000;max-height:300px;overflow-y:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;display:flex;flex-direction:column;gap:2px}
.keuzelijst button{display:block;width:100%;padding:9px 14px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:14px;color:var(--inkt);cursor:pointer;white-space:nowrap}
.keuzelijst button:hover,.keuzelijst button.actief{background:var(--oranje-zacht)}
.keuzelijst button.gekozen{font-weight:700;color:var(--oranje-tekst)}
.bladeren{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14px}
.bladeren .iconbtn{width:36px;height:36px;min-height:36px}
.bladeren button:disabled{opacity:.4;cursor:default}
.grootte{display:inline-flex;border:1px solid var(--lijn);border-radius:10px;overflow:hidden;background:var(--wit)}
.grootte button{min-width:42px;min-height:36px;border:0;border-left:1px solid var(--lijn);background:transparent;font-weight:700;font-size:13px;cursor:pointer;color:var(--inkt)}
.grootte button:first-child{border-left:0}
.grootte button:hover{background:var(--oranje-zacht)}
.grootte button.on{background:var(--oranje)}

/* ---------- Alle keuzelijsten in de huisstijl ---------- */
.keuzewrap{position:relative;display:inline-flex;min-width:0;max-width:100%;vertical-align:middle}
.keuzewrap[hidden]{display:none}
.veld>.keuzewrap,.form .keuzewrap{display:flex;width:100%}
.breed-keuze{width:100%}
.keuze>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.keuze:disabled{background:var(--lijn2);color:var(--grijs);cursor:default;border-color:var(--lijn)}
.keuze.compact{min-height:34px;padding:0 8px 0 10px;font-size:13px;gap:8px;border-radius:8px}
select.select-verborgen{position:absolute!important;left:0;bottom:0;width:100%!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.keuzelijst button:disabled{opacity:.45;cursor:default;background:transparent}
.keuzelijst{max-width:min(420px,calc(100vw - 16px))}
.keuzelijst button{white-space:normal}
@media print{.keuze svg{display:none}.keuze{border:0;padding:0;min-height:0}}
.werf .wk .keuzewrap[data-actie=voertuig]{width:68px;flex:0 0 68px}
.werf .wk .keuze.vangekozen{background:var(--inkt);color:#fff;font-weight:800;border-color:var(--inkt)}
.werf .wk .keuze.vangekozen svg{color:#fff}
.werf .wk .keuze.kiesmij{border:2px solid var(--oranje);background:var(--oranje-zacht)}
.keuzelijst button.meervoud{display:flex;align-items:center;gap:10px}
.keuzelijst button.meervoud i{flex:0 0 16px;height:16px;border:1.5px solid var(--grijs2);border-radius:4px;background:var(--wit)}
.keuzelijst button.meervoud.gekozen i{background:var(--oranje);border-color:var(--oranje);box-shadow:inset 0 0 0 2px var(--wit)}
.keuzelijst button.meervoud.gekozen{font-weight:600;color:var(--inkt)}
td[data-afspraak] .keuze{white-space:normal;text-align:left;max-width:190px}
#v_afspraak .keuze{width:100%;white-space:normal;text-align:left}

/* ---------- Datumvelden in de huisstijl ---------- */
.datumwrap{position:relative;display:inline-flex;min-width:0;max-width:100%;vertical-align:middle}
.datumwrap[hidden]{display:none}
.veld>.datumwrap,.form .datumwrap{display:flex;width:100%}
.datumwrap .datumtekst{width:100%;min-width:118px;padding-right:34px;background:var(--wit)}
.veld .datumwrap .datumtekst{min-height:42px}
.datumwrap .datumtekst:disabled{background:var(--lijn2);color:var(--grijs)}
.datumknop{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--grijs);cursor:pointer;padding:0}
.datumknop:hover{background:var(--oranje-zacht);color:var(--oranje-tekst)}
input.datum-verborgen{position:absolute!important;left:0;bottom:0;width:100%!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.datumkaart{position:fixed;z-index:1000;width:296px;max-width:calc(100vw - 16px);background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:12px;font-family:var(--font);color:var(--inkt)}
.datumkop{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.datumkop strong{flex:1;text-align:center;font-family:var(--kop);font-size:16px;font-weight:800}
.datumkop button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;font-size:16px;font-weight:700;color:var(--tekst2);cursor:pointer;padding:0}
.datumkop button:hover{background:var(--oranje-zacht)}
.datumdagen,.datumraster{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.datumdagen span{font-size:12px;font-weight:700;color:var(--grijs);padding:4px 0}
.datumraster button{height:36px;border:1px solid transparent;border-radius:9px;background:transparent;font-size:14px;color:var(--inkt);cursor:pointer;padding:0}
.datumraster button:hover:not(:disabled){background:var(--oranje-zacht)}
.datumraster button.anders{color:var(--grijs2)}
.datumraster button.nu{border-color:var(--oranje);font-weight:700}
.datumraster button.gekozen{background:var(--oranje);border-color:var(--oranje);font-weight:800;color:var(--inkt)}
.datumraster button:disabled{opacity:.3;cursor:default}
.datumraster button:focus-visible,.datumkop button:focus-visible,.datumvoet button:focus-visible{outline:2px solid var(--oranje);outline-offset:1px}
.datumvoet{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--lijn2)}
.datumvoet button{border:0;background:transparent;font-weight:700;font-size:13px;color:var(--oranje-tekst);cursor:pointer;padding:5px 8px;border-radius:7px}
.datumvoet button:hover{background:var(--oranje-zacht)}
@media print{.datumknop{display:none}}

/* ---------- Bladeren in alle lijsten ---------- */
tr.pag-weg{display:none!important}
.bladeren-auto{position:sticky;left:0;margin:0;padding:10px 12px;background:var(--wit);border-top:1px solid var(--lijn2)}
@media print{tr.pag-weg{display:table-row!important}.bladeren{display:none!important}}