/* ============================================================
   ADMINISTRATIE: de indeling
   Links een vast menu, rechts een onderdeel tegelijk. Bewust vlak:
   geen glas, geen kaders om alles heen. Lijnen alleen waar ze iets
   scheiden: tussen het menu en de inhoud niet, tussen aanklikbare
   regels wel. De kleuren komen uit de --mb-kleuren van de site.
   Dit bestand is op beide sites hetzelfde.
   ============================================================ */
.ax-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ax-sectie{padding-top:8rem}
.ax-wrap{max-width:1360px}

.ax{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:0 3.5rem;align-items:start}
.ax[hidden]{display:none}

/* ---------- het menu ---------- */
.ax-menu{position:sticky;top:6.5rem;display:flex;flex-direction:column;gap:1.9rem}
.ax-wie b{display:block;font-family:var(--mb-kop-font);font-weight:400;font-size:1.4rem;line-height:1.15;color:var(--text-1)}
.ax-wie b em{color:var(--mb-accent)}
.ax-wie span{display:block;margin-top:.3rem;font-size:.74rem;color:var(--text-3);overflow-wrap:anywhere}
.ax-wie span:empty{display:none}
.ax-items,.ax-onder,.ax-beheer{display:flex;flex-direction:column}
.ax-menu button{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;margin:0;text-align:left;
  font-family:inherit;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2);
  background:none;border:0;border-left:2px solid transparent;border-radius:0;padding:.52rem .85rem;cursor:pointer;
  transition:color .15s,border-color .15s}
.ax-menu button:hover{color:var(--text-1)}
.ax-menu button:focus-visible{outline:2px solid var(--mb-accent);outline-offset:-2px}
.ax-menu button[aria-current="page"],.ax-menu button[aria-pressed="true"]{color:var(--text-1);font-weight:600;border-left-color:var(--mb-accent);background:none}
.ax-menu button[hidden]{display:none}
.ax-items i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--mb-accent);font-variant-numeric:tabular-nums}
.ax-items i:empty{display:none}
.ax-beheer[hidden]{display:none}
.ax-beheer>span{padding:0 .85rem .45rem;font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ax-onder button{font-size:.8rem;color:var(--text-3)}

/* ---------- de inhoud ---------- */
.ax-kop{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;margin-bottom:2rem;min-height:2.7rem}
.ax-kop h2{font-family:var(--mb-kop-font);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1;color:var(--text-1)}
.ax-acties{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ax-acties [hidden]{display:none}
.ax-acties select{font-family:inherit;font-size:.82rem;color:var(--text-1);background:var(--mb-invoer);border:1px solid var(--mb-rand-sterk);border-radius:999px;padding:.52rem .95rem}
.ax-acties select:focus{outline:none;border-color:var(--mb-accent)}
.ax-acties select option{color:#1d2a38}
.ax-view[hidden]{display:none}
.ax-sub{margin:-.9rem 0 1.8rem;font-size:.84rem;color:var(--text-3);max-width:46rem;line-height:1.6}
.ax-knoppen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.ax .ad-beheer-melding{margin:0 0 1.8rem}

/* overzicht: cijfers zonder kader */
.ax .mb-cijfers{gap:1.6rem 2.4rem;margin-bottom:3rem}
.ax .mb-cijfer,.ax .mb-cijfer.is-hoofd{padding:0;border-radius:0;background:none;border:0;box-shadow:none}
.ax .ad-cijfers .mb-cijfer b{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600;margin-top:.45rem}
.ax .mb-cijfer small{margin-top:.4rem}
.ax-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 2.8rem;align-items:start}
.ax .mb-paneel{padding:0;margin:0;border-radius:0;background:none;border:0;box-shadow:none}
.ax .mb-paneel-kop{margin-bottom:.95rem}
.ax .mb-paneel-kop h3{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ax .mb-paneel-kop small{font-size:.72rem}
.ax-drie .mb-lijst li{grid-template-columns:6.8rem minmax(0,1fr) auto}
.ax-drie .ad-kantoren li{grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem}

/* boekingen */
.ax .ad-filters{align-items:center;margin-bottom:1.3rem}
.ax-tel{margin-left:auto;font-size:.78rem;color:var(--text-3);white-space:nowrap}
.ax .ad-rij:first-child summary{padding-top:1.05rem}

/* facturen */
.ax-tabel{width:100%;max-width:56rem;border-collapse:collapse;font-size:.86rem}
.ax-tabel th{text-align:left;padding:0 1rem .7rem 0;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--mb-rand-sterk);white-space:nowrap}
.ax-tabel td{padding:.7rem 1rem .7rem 0;color:var(--text-2);vertical-align:top}
.ax-tabel td b{color:var(--text-1);font-weight:600}
.ax-tabel .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.ax-leeg{font-size:.88rem;color:var(--text-3);max-width:40rem;line-height:1.6}

/* prijzen */
.ax .ap{margin-top:0;padding:0}

/* gereedschap: een rustige lijst */
.ax-tools{list-style:none;margin:0;padding:0;max-width:46rem}
.ax-tools li+li{border-top:1px solid var(--line)}
.ax-tools a{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;padding:.95rem 0;text-decoration:none;color:var(--text-3)}
.ax-tools b{font-size:.95rem;font-weight:600;color:var(--text-1);white-space:nowrap;transition:color .15s}
.ax-tools span{font-size:.82rem;text-align:right}
.ax-tools a:hover b{color:var(--mb-accent)}

/* account */
.ax-feiten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.6rem;margin:0 0 2.4rem;max-width:38rem;font-size:.88rem}
.ax-feiten dt{color:var(--text-3)}
.ax-feiten dd{margin:0;color:var(--text-1);overflow-wrap:anywhere}
.ax-ww{max-width:38rem}
.ax-ww[hidden]{display:none}
.ax-ww h3{font-size:1rem;font-weight:600;color:var(--text-1);margin-bottom:1.1rem}

.ax .mb-stand{margin-top:2.4rem}

@media (max-width:1100px){.ax-drie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ax-sectie{padding-top:6.5rem}
  .ax{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .ax-menu{position:static;gap:.9rem}
  .ax-wie b{font-size:1.25rem}
  /* het menu wordt een rij die je opzij kunt schuiven */
  .ax-items{flex-direction:row;overflow-x:auto;gap:.2rem;border-bottom:1px solid var(--line);scrollbar-width:none}
  .ax-items::-webkit-scrollbar{display:none}
  .ax-items button{width:auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:.6rem .75rem;margin-bottom:-1px}
  .ax-items button[aria-current="page"]{border-bottom-color:var(--mb-accent)}
  .ax-beheer,.ax-onder{flex-direction:row;flex-wrap:wrap;align-items:center}
  .ax-beheer>span{padding:0 .4rem 0 0}
  .ax-beheer button,.ax-onder button{width:auto;border-left:0;padding:.3rem .7rem .3rem 0}
  .ax-beheer button[aria-pressed="true"]{color:var(--mb-accent)}
  .ax-kop{margin-bottom:1.5rem}
}
@media (max-width:640px){
  .ax-drie{grid-template-columns:minmax(0,1fr)}
  .ax-tools a{flex-direction:column;gap:.2rem}
  .ax-tools span{text-align:left}
  .ax-tel{margin-left:0;width:100%}
}

/* ============================================================
   DUIDELIJKER: kaarten, kopbalken en een menu met een eigen vlak
   Elk blok is een kaart met bovenin een balk met zijn naam, zodat
   je in een oogopslag ziet wat bij elkaar hoort. Het menu heeft
   een zachte gradient in de merkkleur. Alles via de --mb-kleuren,
   dus op beide sites in de eigen stijl.
   ============================================================ */
.ax{--ax-kaart:var(--mb-vlak);--ax-rand:var(--mb-rand-sterk);--ax-r:16px;
  --ax-balk:linear-gradient(90deg,var(--mb-accent-vlak),transparent 85%),var(--mb-vlak-2)}

/* het menu */
.ax-menu{gap:1.3rem;padding:1.5rem .85rem 1rem;border-radius:var(--ax-r);border:1px solid var(--ax-rand);
  background:linear-gradient(165deg,var(--mb-accent-vlak) 0%,transparent 46%),linear-gradient(180deg,var(--mb-vlak-2),var(--mb-vlak));
  box-shadow:inset 0 1px 0 var(--mb-accent-lijn),0 24px 50px -34px rgba(0,0,0,.6)}
.ax-wie{padding:0 .75rem .2rem}
.ax-items,.ax-beheer,.ax-onder{gap:.15rem}
.ax-menu button{border-left:0;border-radius:10px;padding:.62rem .8rem;font-size:.92rem;transition:color .15s,background .15s,box-shadow .15s}
.ax-menu button:hover{background:var(--mb-vlak-2)}
.ax-menu button[aria-current="page"],.ax-menu button[aria-pressed="true"]{background:var(--mb-accent-vlak);box-shadow:inset 3px 0 0 var(--mb-accent);color:var(--text-1)}
.ax-menu button:focus{outline:none}
.ax-menu button:focus-visible{outline:1.5px solid var(--mb-accent-lijn);outline-offset:1px}
.ax-beheer{padding-top:1.1rem;border-top:1px solid var(--line)}
.ax-beheer>span{padding:0 .8rem .5rem}
.ax-onder{padding-top:.8rem;border-top:1px solid var(--line)}
.ax-onder button{font-size:.82rem}

/* de kop van het onderdeel */
.ax-kop{margin-bottom:1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.ax-kop h2{font-size:clamp(1.9rem,2.9vw,2.5rem)}
.ax-sub{margin:0 0 1.5rem}

/* kaarten */
.ax-drie>.mb-paneel,.ap-raster>div,.ax-tools,.ax-ww,.ax-feiten,.ax-tabel-hoes,.ax-view[data-view="boekingen"] #adLijst{
  background:var(--ax-kaart);border:1px solid var(--ax-rand);border-radius:var(--ax-r);overflow:hidden}
.ax-drie>.mb-paneel,.ap-raster>div{padding:0 1.25rem 1.25rem}
.ax-drie,.ax .ap-raster{gap:1.4rem}

/* kopbalken */
.ax-drie .mb-paneel-kop,.ax .ap h4,.ax-ww h3{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 -1.25rem 1.1rem;padding:.85rem 1.25rem;background:var(--ax-balk);border-bottom:1px solid var(--line)}
.ax-drie .mb-paneel-kop h3,.ax .ap h4,.ax-ww h3{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-1)}
.ax-drie .mb-paneel-kop small{font-size:.72rem;color:var(--text-3);margin-right:1.4rem}
.ax-drie .mb-paneel-kop[role="button"]{padding-right:1.25rem}
.ax-drie .mb-paneel-kop[role="button"]::after{right:1.25rem;top:1.05rem}
.ax-drie .mb-paneel.is-dicht{padding-bottom:0}
.ax-drie .mb-paneel.is-dicht>.mb-paneel-kop{margin-bottom:0;border-bottom:0}
.ax-drie .mb-paneel.is-dicht>.mb-paneel-kop::after{top:1.15rem}

/* cijfers: vier kaarten */
.ax .mb-cijfers{gap:1.4rem;margin-bottom:1.4rem}
.ax .mb-cijfer{padding:1.15rem 1.25rem 1.2rem;border-radius:var(--ax-r);background:var(--ax-kaart);border:1px solid var(--ax-rand)}
.ax .mb-cijfer.is-hoofd{padding:1.15rem 1.25rem 1.2rem;border-radius:var(--ax-r);border:1px solid var(--mb-accent-lijn);
  background:linear-gradient(150deg,var(--mb-accent-vlak),transparent 75%),var(--ax-kaart)}

/* boekingen: de lijst in een kaart */
.ax-view[data-view="boekingen"] #adLijst{padding:0 1.25rem}
.ax-view[data-view="boekingen"] .ad-detail{background:var(--mb-vlak-2)}
.ax-view[data-view="boekingen"] .mb-leeg{padding:1.4rem 0}
.ax .ad-keuze{border-radius:var(--ax-r)}

/* prijzen */
.ax .ap-rij{padding:.42rem 0}
.ax .ap-kantoor>b{font-size:1rem}
.ax .ap-kantoor.is-bewerk{background:var(--mb-vlak-2)}

/* facturen, gereedschap, account */
.ax-tabel-hoes{padding:1.1rem 1.25rem;max-width:60rem;overflow-x:auto}
.ax-tabel{max-width:none}
.ax-tools{padding:0 1.25rem;max-width:50rem}
.ax-tools a{padding:1rem 0}
.ax-feiten{padding:1.1rem 1.25rem;max-width:40rem;margin-bottom:1.4rem}
.ax-ww{padding:0 1.25rem 1.25rem;max-width:40rem}

@media (max-width:900px){
  .ax-menu{padding:1.1rem .9rem .8rem;gap:.8rem}
  .ax-items{gap:.2rem;border-bottom:0;padding-bottom:.2rem}
  .ax-items button{border-bottom:0;margin-bottom:0;padding:.55rem .8rem}
  .ax-items button[aria-current="page"]{box-shadow:none}
  .ax-beheer,.ax-onder{padding-top:.7rem}
  .ax-beheer button,.ax-onder button{padding:.4rem .7rem}
  .ax-beheer button[aria-pressed="true"]{box-shadow:none}
}

/* pictogrammen in het menu en in de kopbalken */
.ax-icoon{flex:none;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ax-items button{justify-content:flex-start;gap:.75rem}
.ax-items button .ax-icoon{color:var(--text-3);transition:color .15s}
.ax-items button:hover .ax-icoon,.ax-items button[aria-current="page"] .ax-icoon{color:var(--mb-accent)}
.ax-items i{margin-left:auto;min-width:1.35rem;padding:.08rem .4rem;border-radius:999px;text-align:center;background:var(--mb-accent-vlak);border:1px solid var(--mb-accent-lijn)}
.ax-drie .mb-paneel-kop h3,.ax .ap h4,.ax-ww h3{display:flex;align-items:center;gap:.6rem}
.ax .ap h4{justify-content:flex-start}
.ax-drie .mb-paneel-kop h3 .ax-icoon,.ax .ap h4 .ax-icoon,.ax-ww h3 .ax-icoon{color:var(--mb-accent)}

/* per kwartaal: past in zijn kaart, zonder schuifbalk */
.ax-drie .mb-tabel-rol{overflow:visible;margin-top:0}
.ax-drie .ad-kwartalen{font-size:.78rem}
.ax-drie .ad-kwartalen th{padding:0 .5rem .6rem 0;letter-spacing:.1em}
.ax-drie .ad-kwartalen td{padding:.4rem .5rem .4rem 0}
.ax-drie .ad-kwartalen th:last-child,.ax-drie .ad-kwartalen td:last-child{padding-right:0;text-align:right}

/* de zwevende cameratekening van de site hoort niet over de cijfers heen te liggen */
body:has(.ax-sectie) .cam-scene{display:none}