/* ============ Afwezigheidsplanning =========== */

/* Light-blue achtergrond voor weekendkolommen */
.bbm-th.weekend,
.bbm-td.weekend {
  background-color: #e6f2ff !important;
}

/* Kleuren voor de types */
.bbm-td.afw-v {
  background-color: var(--pink-365) !important;
  color: #fff !important;
}
.bbm-td.afw-p {
  background-color: var(--pink-dark) !important;
  color: #fff !important;
}
.bbm-td.afw-z {
  background-color: #272240 !important;
  color: #fff !important;
}

/* De letter (V/P/Z) wit en iets groter */
.bbm-td.afw-v .afw-type,
.bbm-td.afw-p .afw-type,
.bbm-td.afw-z .afw-type {
  font-weight: bold;
  font-size: 1em;
}

/* Highlight tijdens drag-select */
.bbm-td.afw-select {
  outline: 3px solid #2d3748;  /* donkerblauw ipv roze */
  outline-offset: -3px;
}

/* Iets meer padding voor cellen zodat de kleur ‘pakt’ */
.bbm-td {
  min-width: 40px;
  min-height: 35px;
  text-align: center;
}

/* =============================================
   Afwezigheidsplanning: layout & styling tweaks
   =============================================*/

/* Desktop: tabel vult container, geen scroll */
.afw-calendar {
  table-layout: fixed;
  width: 100%;       /* verdeelt kolommen gelijkmatig over container */
  margin-bottom: 1.5em;
  overflow-x: hidden;
}

/* Alle cellen niet wrappen */
.afw-calendar th,
.afw-calendar td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

/* Eerste kolom (maandnaam + lege kopcel) breed en gekleurd */
.afw-calendar th:first-child,
.afw-calendar td:first-child {
  width: 10ch;        /* past 'December' lekker */
  padding-left: 0.5em;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.03);
}

/* Maandnaam vetgedrukt */
.afw-calendar td.month-name {
  font-weight: 700;
}

/*                                      */
/* Mobile / narrow view: horizontaal scrollen */
/*                                      */
@media (max-width: 768px) {
  .afw-calendar {
    display: block;
    width: max-content;       /* maak tabel zo breed als nodig */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
  }

  /* verberg dag-afkorting bij smal */
  .afw-calendar small {
    display: none;
  }

  /* Webkit scrollbars */
  .afw-calendar::-webkit-scrollbar {
    height: 6px;
  }
  .afw-calendar::-webkit-scrollbar-track {
    background: transparent;
  }
  .afw-calendar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
    border: 1px solid transparent;
  }
}

.afw-calendar::-webkit-scrollbar-track {
  background: transparent;
}
.afw-calendar::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
  border: 1px solid transparent;
}

/* 6) Optioneel: dag-afkortingen wat kleiner */
.afw-calendar th .bbm-th small,
.afw-calendar td .bbm-td small {
  font-size: 0.75em;
}


.afw-year-nav {
  text-align: center;
  margin-bottom: 2em;
}
.afw-year-btn {
  margin: 0 0.5em;
}
.afw-year-select {
  margin: 0 1em;
}


/* =============================================
   Afwezigheidsplanning: layout & styling tweaks
   =============================================*/

/* Desktop: vaste kolommen zonder scroll */
.afw-calendar {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1.5em;
  overflow-x: hidden;
}

/* Cells centreren en nowrap */
.afw-calendar th,
.afw-calendar td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

/* Eerste kolom (maandnaam) breed en gekleurd */
.afw-calendar th:first-child,
.afw-calendar td:first-child {
  width: 10ch;
  padding-left: 0.5em;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.03);
}

/* Maandnaam vet */
.afw-calendar td.month-name {
  font-weight: 700;
}

/* Margin onder calendar */
.afw-calendar {
  margin-bottom: 2em;
}

/* Jaar-selectie gecentreerd + ruimte eronder */
.afw-year-nav {
  text-align: center;
  margin-bottom: 2em;
}
.afw-year-btn {
  margin: 0 0.5em;
}

/* Dropdown select styling */
.afw-year-select {
  margin: 0 1em;
  font-weight: 700;
font-size:22px;
  color: #2d3748; /* zelfde donkerblauw als dag-nummers */
}

/* Mobile: horizontaal scrollen */
@media (max-width: 768px) {
  .afw-calendar {
    display: block;
    width: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
  }
  .afw-calendar small { display: none; }
  .afw-calendar::-webkit-scrollbar {
    height: 6px;
  }
  .afw-calendar::-webkit-scrollbar-track {
    background: transparent;
  }
  .afw-calendar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
    border: 1px solid transparent;
  }
}


/* Maak de “Voeg toe” knop in de popup roze */
.swal2-popup .swal2-confirm {
  background-color: var(--pink-365) !important;
  border-color:     var(--pink-365) !important;
}

/* Optioneel: hover-state iets donkerder roze */
.swal2-popup .swal2-confirm:hover {
  background-color: #d00a66 !important;
  border-color:     #d00a66 !important;
}




/* ====== Kernel‐overrides met !important ====== */
/* 1) Maandnamen fix (dubbele 'januari'‐bug) */
.afw-calendar th:first-child,
.afw-calendar td:first-child {
  width: 10ch !important;
  background-color: rgba(0,0,0,0.03) !important;
}

/* 2) Select‐highlight kleur */
.afw-select {
  outline: 3px solid #2d3748 !important;    /* donkerblauw */
  outline-offset: -3px !important;
}

/* 3) Dropdown styling */
.afw-year-select {
  font-weight: 700 !important;
  color: #2d3748 !important;
}

/* 4) Modal confirm‐knop in je 365 roze */
.swal2-popup .swal2-confirm {
  background-color: var(--pink-365) !important;
  border-color:     var(--pink-365) !important;
}
.swal2-popup .swal2-confirm:hover {
  background-color: #d00a66 !important;
  border-color:     #d00a66 !important;
}


/* === Jaar-navigatie (vorig jaar / select / volgend jaar) === */
.afw-year-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:0 0 1.25rem 0; /* vervangt inline margin */
  flex-wrap:wrap; /* netter op mobiel */
}

/* Knoppen als donkere pillen, in lijn met je badges */
.afw-year-btn{
  font: inherit;
color:#0b3954;
background:#fff;      /* donkerblauw 365 */
  border:1.5px solid #0b3954;
  border-radius:999px;
  padding:.55rem .9rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(11,57,84,.06), 0 1px 2px rgba(11,57,84,.10);
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
border-color:#dbe7ff;
}
.afw-year-btn:hover{
  background:#f3f7ff;
  transform:translateY(-1px);
}
.afw-year-btn:active{
  transform:translateY(0);
}
.afw-year-btn:focus-visible{
  outline:3px solid #b3e5ff80;     /* lichtblauwe focusring */
  outline-offset:2px;
}

/* Pijltjes zonder extra HTML of icon font */
.afw-year-btn.afw-prev::before{
  content:"◀";
  margin-right:.45rem;
  font-size:.9rem;
}
.afw-year-btn.afw-next::after{
  content:"▶";
  margin-left:.45rem;
  font-size:.9rem;
}

/* Select als “ghost” pill met custom caret */
.afw-year-select{
  font: inherit;
  color:#0b3954;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="%230b3954"><path d="M5.5 7l4.5 4.5L14.5 7"/></svg>') no-repeat right .75rem center/14px,
    #fff;
  border:1.5px solid #dbe7ff;
  border-radius:999px;
  padding:.5rem 2.1rem .5rem .9rem;
  appearance:none;                /* modern browsers */
  -webkit-appearance:none;        /* Safari */
  cursor:pointer;
  box-shadow:0 2px 0 rgba(11,57,84,.04), 0 1px 2px rgba(11,57,84,.08);
}
.afw-year-select:focus-visible{
  outline:3px solid #b3e5ff80;
  outline-offset:2px;
  border-color:#7cc8ff;
}

/* Mobiel: iets compacter */
@media (max-width: 600px){
  .afw-year-select{ padding:.45rem 2rem .45rem .8rem; }
  .afw-year-btn{ padding:.5rem .8rem; }
}

/* Respecteer gebruikers die animatie uit hebben staan */
@media (prefers-reduced-motion: reduce){
  .afw-year-btn{ transition:none; }
}