@font-face{font-family:Figtree;src:url('../fonts/figtree-variable.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--green:#546c59;--deep:#1e2720;--orange:#eaa57b;--cream:#fdf6f2;--mint:#e2e9e3;--shadow:0 12px 32px -14px rgb(30 39 32 / .28)}
html{font-size:16px;min-height:100%;scroll-behavior:smooth}body{font-family:Figtree,system-ui,sans-serif;color:#212529;background:var(--cream);line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;line-height:1.05;color:var(--deep)}
h1{font-size:clamp(2.5rem,5vw,5rem)}h2{font-size:clamp(2rem,3vw,3rem)}h3{font-size:clamp(1.6rem,2.5vw,2.3rem)}a{color:var(--green)}a:hover{color:var(--deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9e4b19;outline-offset:3px}
.skip-link{position:absolute;z-index:100;top:-5rem;left:1rem;background:#fff;color:var(--deep);padding:.75rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}
.app-navbar{z-index:10;background:var(--green);box-shadow:var(--shadow);padding:.5rem clamp(1rem,3vw,3rem);border-radius:0 0 1.75rem 1.75rem}
.navbar-brand{display:flex;align-items:center;min-height:3rem}.navbar-brand img,.home-header img{display:block;width:auto;height:2.5rem;max-width:min(60vw,18rem);object-fit:contain}
.navbar-toggler{display:flex;align-items:center;gap:.5rem;border:0;color:#fff!important;font-weight:700}.app-navbar .navbar-nav{gap:.15rem;flex-wrap:wrap;align-items:center}.app-navbar .nav-link{color:#fff!important;font-weight:600;border-radius:999px;padding:.65rem .9rem!important;white-space:nowrap}.app-navbar .nav-link:hover,.app-navbar .nav-link:focus-visible{background:rgb(30 39 32 / .35)}
.container-fluid{max-width:84rem;padding-inline:clamp(1rem,3vw,2.5rem)}.main{padding-block:clamp(1.5rem,3vw,3rem)}
.card{background:#fff;border:1px solid rgb(84 108 89 / .12);border-radius:1.75rem;box-shadow:var(--shadow);color:#212529;overflow:hidden}.card-details{padding:0;margin:0 0 1.5rem;border:1px solid rgb(84 108 89 / .12)}.card .card{box-shadow:none;border-color:rgb(84 108 89 / .18)}.card-body{padding:clamp(1.25rem,2.5vw,2rem)}.card-title{color:var(--deep)}
.btn{font-weight:700;border-radius:999px;padding:.65rem 1.25rem;min-height:2.75rem;box-shadow:none!important}.btn-primary,.btn-info{background:var(--orange);border-color:var(--orange);color:var(--deep)}.btn-primary:hover,.btn-info:hover{background:#e5905c;border-color:#e5905c;color:var(--deep)}.btn-success{background:var(--green);border-color:var(--green);color:#fff}.btn-success:hover{background:var(--deep);border-color:var(--deep);color:#fff}.btn-danger{background:#9f2d33;border-color:#9f2d33;color:#fff}.btn-danger:hover{background:#842229;border-color:#842229;color:#fff}.btn-outline-primary,.btn-outline-secondary{color:var(--green);border-color:var(--green)}.btn-outline-primary:hover,.btn-outline-secondary:hover{background:var(--green);border-color:var(--green);color:#fff}.btn-secondary{background:var(--green);border-color:var(--green)}.btn-secondary:hover{background:var(--deep);border-color:var(--deep)}
.month-label{background:var(--mint);color:var(--deep);font-weight:700;text-align:center;border-radius:999px;padding:.65rem 1rem;margin-bottom:.5rem}
.btn-group .month-label{display:flex;align-items:center;margin:0;border-radius:0}
.form-control,.custom-select,.input-group-text{border:1px solid #b3c4b6;border-radius:.75rem;min-height:2.75rem}.form-control:focus,.custom-select:focus{border-color:var(--green);box-shadow:0 0 0 .2rem rgb(84 108 89 / .18)}.input-group>.form-control:not(:first-child){border-radius:0 .75rem .75rem 0}.input-group>.input-group-prepend>.input-group-text{border-radius:.75rem 0 0 .75rem;background:var(--mint);color:var(--green)}label{font-weight:600}
.table-responsive{border-radius:1rem;overflow-x:auto}.table{margin-bottom:0;background:#fff}.table thead th{background:var(--green);color:#fff;border:0;font-weight:700;white-space:nowrap}.table td{border-color:var(--mint);vertical-align:middle}.table tbody tr:hover{background:var(--cream)}.table a{text-decoration:underline;text-underline-offset:.15em}
.text-warning{color:#9e4b19!important}.text-success{color:#3d4f41!important}#sig-canvas{touch-action:manipulation;border:1px solid #b3c4b6;border-radius:.75rem;width:100%}
.home{min-height:100vh;background:linear-gradient(180deg,rgb(30 39 32 / .79),rgb(30 39 32 / .62)),url('../img/bg-1-1600.webp') center/cover fixed;color:#fff}.home-header{padding:1rem clamp(1rem,4vw,3rem)}.home-header img{height:3rem}.home .main{padding-top:1rem}.home h1,.home h3{color:#fff}.home h3{font-family:Figtree,system-ui,sans-serif;font-size:1.2rem;font-weight:500;text-transform:none}.home .row>a{color:var(--deep);padding:0 .6rem;margin-bottom:1.25rem;min-width:11rem;flex:1 0 25%;text-decoration:none}.home .row>a .card{width:100%;min-height:8rem;justify-content:center;background:var(--cream);border:0;transition:transform .2s,box-shadow .2s}.home .row>a:hover .card,.home .row>a:focus-visible .card{transform:translateY(-4px);box-shadow:0 28px 70px -24px rgb(30 39 32 / .5)}.home .row>a svg{color:var(--green)}.home .row>a>.card-text{color:#fff;font-weight:700;margin-top:.5rem}.home .card.border-0.shadow{max-width:32rem;margin-inline:auto!important;border-radius:2.25rem}.home .card.border-0.shadow .card-body{padding:clamp(1.5rem,4vw,3rem)}
.dashboard-intro h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;overflow-wrap:anywhere}.brand-accent{color:var(--orange)}
@media(max-width:991.98px){.app-navbar{border-radius:0 0 1.25rem 1.25rem}.app-navbar .navbar-nav{align-items:stretch;padding:.75rem 0}.app-navbar .nav-link{white-space:normal}.home{background-attachment:scroll}}
@media(max-width:575.98px){.home .row>a{flex-basis:45%;min-width:8rem}.home .row>a .card{min-height:6.5rem}.home .row>a svg{width:2.25rem;height:2.25rem}.card-body{padding:1.1rem}.table{font-size:.9rem}}
@media(max-width:575.98px){.dashboard-page .home-header{padding:.6rem 1rem}.dashboard-page .home-header img{height:2rem}.dashboard-page .main{padding-top:0}.dashboard-intro{padding-top:.75rem!important;padding-bottom:.5rem!important}.dashboard-intro h1{font-size:1.8rem;margin-bottom:.25rem}.dashboard-intro h3{font-size:1rem;margin-bottom:0}.dashboard-page .row>a .card{min-height:5.5rem}.dashboard-page .row>a{margin-bottom:.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.home .row>a .card{transition:none}}
/* Bootstrap 4 view classes retained while using Bootstrap 5 assets. */
.btn-block{display:block;width:100%}.form-group{margin-bottom:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.ml-2{margin-left:.5rem!important}.mr-2{margin-right:.5rem!important}.font-weight-bold{font-weight:700!important}.font-weight-light{font-weight:300!important}
.input-group-prepend,.input-group-append{display:flex}.input-group-prepend>.input-group-text{border-radius:.75rem 0 0 .75rem}.input-group-append>.btn{border-radius:0 .75rem .75rem 0}.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.app-navbar{width:min(calc(100% - 1rem),78rem);margin:.5rem auto 0;border-radius:999px;min-height:4rem;display:flex;justify-content:space-between;position:relative}.app-navbar .navbar-toggler{display:flex;margin-left:auto}.app-navbar .navbar-collapse{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--green);border-radius:1.75rem;padding:.75rem;box-shadow:var(--shadow);max-height:calc(100dvh - 6rem);overflow:auto}.app-navbar .navbar-nav{align-items:stretch;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.app-navbar .nav-link{display:block;white-space:normal}.app-navbar .navbar-toggler:focus{box-shadow:0 0 0 .2rem var(--orange)}
.app-navbar .nav-link.current{background:var(--cream);color:var(--deep)!important}
.local-navigation{padding:.4rem 1rem}.local-navigation .navbar-brand img{height:2rem}.local-navigation .nav-link{font-size:.84rem;padding:.45rem .55rem!important;line-height:1.2}.local-navigation .nav-link .bi{font-size:1.1rem;margin-right:.2rem}
@media(min-width:992px){.local-navigation{border-radius:1.25rem;flex-wrap:wrap}.local-navigation .navbar-toggler{display:none}.local-navigation .navbar-collapse{display:block!important;position:static;flex-basis:100%;background:none;box-shadow:none;max-height:none;overflow:visible;padding:.2rem 0 0}.local-navigation .navbar-nav{grid-template-columns:repeat(7,minmax(0,1fr))}.local-navigation .nav-link{display:flex;align-items:center;justify-content:center;min-height:2.25rem;text-align:center}}
@media(max-width:575.98px){.app-navbar{width:calc(100% - 1rem);border-radius:1.5rem}.app-navbar .navbar-collapse{border-radius:1.5rem}.app-navbar .navbar-nav{grid-template-columns:1fr}}
@media(max-width:991.98px){.local-navigation .navbar-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.local-navigation .nav-link{min-height:2.75rem;display:flex;align-items:center}}
.btn-warning{background:var(--orange);border-color:var(--orange);color:var(--deep)}.btn-warning:hover{background:#e5905c;border-color:#e5905c;color:var(--deep)}.form-row{display:flex;flex-wrap:wrap;margin-inline:-.25rem}.form-row>*{padding-inline:.25rem}.card-details .col-xl-6,.card-details .col-xl-12{min-width:0}.card-details .container-xl{max-width:none;padding-inline:0}
.main>.card-details:first-child{background:var(--mint);border:0;box-shadow:none}.main>.card-details:first-child .card-body{padding-block:1.5rem}.main>.card-details:first-child a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}.main>.card-details:first-child h2{margin:.5rem 0 0}
.card-body>h5{font-size:1.7rem;margin-bottom:1rem}.card-body>.d-flex,.card-body>.card-text>.d-flex{gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--mint)}.card-body>.d-flex:last-child,.card-body>.card-text>.d-flex:last-child{border-bottom:0}.card-body>.d-flex>div:last-child,.card-body>.card-text>.d-flex>div:last-child{text-align:right;min-width:0;overflow-wrap:anywhere;font-weight:600}.card-details>.btn{width:calc(100% - 2rem);margin:.25rem 1rem 1rem}.card-details>.btn+.btn{margin-top:0}.card-details>.btn-group,.card-details>form>.btn-group{padding:1rem}.card-details>.table-responsive{margin-top:.5rem}
.complaint-preview{max-width:min(60vw,30rem)}
.card-form>form{padding:1.25rem 1.5rem 0}.card-form>form:last-child{padding-bottom:1.5rem}.card-form>form>.btn{width:100%;margin:0}
@media(min-width:1200px){.container-xl.d-xl-flex{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.container-xl.d-xl-flex>.col-xl-6{width:auto;padding:0}.container-xl.d-xl-flex>.col-xl-12{grid-column:1/-1;width:auto;padding:0}}
@media(max-width:575.98px){.card-body>.d-flex,.card-body>.card-text>.d-flex{flex-direction:column;align-items:flex-start;gap:.1rem}.card-body>.d-flex>div:last-child,.card-body>.card-text>.d-flex>div:last-child{text-align:left}}
.login-page{display:flex;flex-direction:column;min-height:100svh}.login-page>.container{flex:1;display:grid;place-items:center;width:100%}.login-page .main{width:100%;padding-block:.75rem}.login-page .card.border-0.shadow{margin:0 auto!important}.login-page .home-header{flex:none;padding-block:.75rem}
@media(max-height:600px){.login-page .card.border-0.shadow .card-body{padding:1rem 1.5rem}.login-page .card-title{margin-block:0 .5rem!important}.login-page .form-group{margin-bottom:.6rem}.login-page .card-body>p.text-center{margin-bottom:.25rem}}
@media (max-width: 600px) {
    .mobile-card-table { overflow: visible; background: var(--cream); padding: .35rem; }
    .mobile-card-table table, .mobile-card-table tbody, .mobile-card-table tr { display: block; width: 100%; background: transparent; }
    .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mobile-card-table tr { margin: .55rem 0; padding: .65rem .8rem; border: 1px solid var(--mint); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgb(30 39 32 / .07); }
    .mobile-card-table td { display: block; width: 100%; padding: .4rem 0; border: 0; text-align: left!important; overflow-wrap: anywhere; }
    .mobile-card-table td::before { display: block; content: attr(data-label); font-weight: 700; color: var(--deep); }
    .demo-table td:not([data-label="Actie"]) { display: grid; grid-template-columns: minmax(6.5rem,38%) minmax(0,1fr); gap: .6rem; }
    .mobile-card-table td.table-icon { display: none; }
    .mobile-card-table td[colspan] { display: block; }
    .mobile-card-table td[colspan]::before { content: none; }
    .mobile-card-table td[data-label="Actie"] { display: block; }
    .mobile-card-table td[data-label="Actie"]::before { display: block; margin-bottom: .35rem; }
    .mobile-card-table td a { white-space: normal; overflow-wrap: anywhere; }
    .mobile-card-table .complaint-preview { max-width: none; white-space: normal; text-overflow: clip; }
    .mobile-card-table td form { min-width: 0; }
    .delivery-complete-form { flex-direction: column; }
    .delivery-complete-form .btn { width: 100%; }
}
.dashboard-page .row>a .card{min-height:5.5rem;border-radius:1.5rem 1.5rem 0 0;box-shadow:none}
.dashboard-group{flex:0 0 100%;color:#fff;font-size:1.6rem;margin:1.25rem 0 .75rem}.dashboard-group small{display:block;font-family:Figtree,system-ui,sans-serif;font-size:1rem;font-weight:500;text-transform:none;line-height:1.4}
.dashboard-page .row>a>.card-text{width:100%;min-height:3rem;display:grid;place-items:center;margin:0;padding:.25rem .5rem .75rem;background:var(--cream);color:var(--deep);border-radius:0 0 1.5rem 1.5rem;line-height:1.25}
.dashboard-page .row>a{transition:transform .2s}.dashboard-page .row>a:hover,.dashboard-page .row>a:focus-visible{transform:translateY(-4px)}.dashboard-page .row>a:hover .card,.dashboard-page .row>a:focus-visible .card{transform:none;box-shadow:none}
@media(max-width:575.98px){.dashboard-page .row>a .card{min-height:4rem}.dashboard-page .row>a>.card-text{min-height:3rem}}
.dashboard-page .row>a.logout-link .card,.dashboard-page .row>a.logout-link>.card-text{background:#9f2d33;color:#fff}.dashboard-page .row>a.logout-link svg{color:#fff}.dashboard-page .row>a.logout-link:hover .card,.dashboard-page .row>a.logout-link:hover>.card-text{background:#842229}
.app-navbar .nav-link.logout-link{background:#9f2d33;color:#fff!important}.app-navbar .nav-link.logout-link:hover,.app-navbar .nav-link.logout-link:focus-visible{background:#842229;color:#fff!important}
.local-role-picker{color:#fff}.local-role-picker .btn{min-width:6.5rem;margin:.2rem}
.list-tools{display:grid;gap:.45rem;padding:.75rem 1rem .25rem}.list-tools .form-control,.list-tools .form-select{min-width:0;min-height:2.5rem;font-size:.9rem}.list-tools summary{width:max-content;max-width:100%;color:var(--green);font-weight:700;font-size:.9rem;cursor:pointer}.list-tools-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.5rem}.list-tools-message{margin:0;font-size:.85rem;color:var(--deep)}.list-tools-message:empty{display:none}.mobile-card-table tr[hidden]{display:none!important}
.list-tools-search{display:flex;gap:.4rem}.list-tools-search .form-control{flex:1}.list-tools-search .btn{flex:none;min-height:2.5rem;padding:.35rem .7rem}.list-tools-search .btn[hidden]{display:none!important}
.list-pagination{display:grid;gap:.5rem;padding:.75rem .5rem}.list-page-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto repeat(2,minmax(0,1fr));align-items:center;gap:.25rem;width:100%;max-width:22rem;margin-inline:auto}.list-page-buttons .btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:.4rem .15rem;border-radius:.75rem}.list-page-count{padding-inline:.35rem;white-space:nowrap;font-size:.9rem;font-weight:700}.list-live{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.list-live .btn{padding:.4rem .85rem}.list-live label{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.list-live .form-check-input{margin:0}.mobile-card-table[aria-busy="true"]{opacity:.65}
@media(max-width:400px){.list-tools-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
    .dashboard-intro,.login-page .card.border-0.shadow{animation:page-in .3s ease both}
    .scroll-reveal{opacity:0;transform:translate3d(0,12px,0);transition:opacity .35s ease,transform .35s ease}
    .scroll-reveal.is-in-view,.scroll-reveal:focus-within{opacity:1;transform:none}
    .btn,.app-navbar .nav-link{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
    .btn:active{transform:scale(.98)}
}
@keyframes page-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:575.98px){
    .local-role-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;padding-inline:1rem}
    .local-role-picker p{grid-column:1/-1}
    .local-role-picker .btn{min-width:0;width:100%;margin:0;padding:.55rem .2rem;font-size:.9rem}
    .dashboard-page .row>a{flex:0 0 100%;min-width:0;flex-direction:row!important;align-items:stretch!important;padding:0 .6rem;margin-bottom:.6rem}
    .dashboard-page .row>a .card{width:3.5rem;min-width:3.5rem;min-height:3.5rem;border-radius:1rem 0 0 1rem;align-items:center;box-shadow:none}
    .dashboard-page .row>a>.card-text{width:auto;min-width:0;min-height:3.5rem;flex:1;display:flex;align-items:center;justify-content:flex-start;text-align:left;padding:.6rem .8rem;border-radius:0 1rem 1rem 0;overflow-wrap:anywhere}
}
/* Give the menu a clear reading order and roomy targets on phones. */
@media(max-width:575.98px){
    .app-navbar{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;padding:.35rem .75rem .5rem;min-height:0}
    .app-navbar .navbar-toggler{grid-column:2;grid-row:1;justify-self:end;min-height:2.5rem;padding:.25rem .5rem;margin:0;font-size:.88rem}
    .app-navbar .navbar-toggler svg{width:1.25rem;height:1.25rem;flex:none}
    .app-navbar .navbar-brand{grid-column:1/-1;grid-row:2;justify-self:center;justify-content:center;min-height:0;margin:0;padding:0}
    .app-navbar .navbar-brand img,.local-navigation .navbar-brand img{height:2rem;max-width:calc(100vw - 3rem)}
    .app-navbar .navbar-collapse{grid-column:1/-1;grid-row:3;top:calc(100% + .25rem);padding:.5rem;max-height:calc(100dvh - 5.5rem)}
    .app-navbar .navbar-nav,.local-navigation .navbar-nav{grid-template-columns:1fr;gap:.4rem;padding:0}
    .app-navbar .nav-link,.local-navigation .nav-link{display:flex;align-items:center;gap:.65rem;min-height:2.9rem;padding:.6rem .85rem!important;border:1px solid rgb(255 255 255 / .25);border-radius:.85rem;background:rgb(255 255 255 / .08);font-size:1rem;line-height:1.25}
    .app-navbar .nav-link .bi{width:1.35rem;flex:none;font-size:1.2rem;margin:0;text-align:center}
    .app-navbar .nav-link.current{border-color:var(--cream);font-weight:800}
    .app-navbar .nav-link.logout-link{border-color:#9f2d33}
}