@font-face{
    font-family:"Luach";
    src:url("fonts/NotoSans-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

@font-face{
    font-family:"Luach";
    src:url("fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}

:root{
  --wit:#fbfbfb;
  --zwart:#0a0a0a;
  --oranje:#f09200;
  --blauw:#2071b6;
  --groen:#95c11f;
  --rood:#e0020c;
  --geel:#f7d117;
  --rand:#d9d9d9;
  --schaduw:0 10px 25px rgba(10,10,10,.12);
}

*{box-sizing:border-box}

html,
body{
    overscroll-behavior-x:none;
}

body{
    margin:0;
    font-family:"Luach",system-ui,sans-serif;
    background:linear-gradient(135deg,var(--wit),#fff7df);
    color:var(--zwart);
    overscroll-behavior-x:none;
}



a{color:inherit}

/* Bovenbalk */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:38px;
  display:flex;
  align-items:center;
  background:#fff;
  color:var(--zwart);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}

.brand{
  height:28px;
  margin:5px 0 5px 6px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blauw);
  color:#fff;
  border-radius:8px;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:none;
}

.page-title{
  display:none;
}

/* Hoofdnavigatie */
.icon-nav{
  display:flex;
  gap:4px;
  align-items:center;
  margin-left:8px;
}

.icon-nav .mini{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:#fff;
  color:var(--blauw);
  box-shadow:none;
  text-decoration:none!important;
}

.icon-nav .mini.active{
    background:var(--blauw);
    color:#fff;
}

body.supervisor-mode .icon-nav .supervisor-app-settings-nav{
    color:var(--rood);
}

body.supervisor-mode .icon-nav .supervisor-app-settings-nav.active{
    background:var(--rood);
    color:#fff;
}

.nav-svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}



/* Algemene layout */
.page{
  padding:10px 22px 22px;
}

.card{
  max-width:980px;
  margin:0 auto 22px;
  background:white;
  border-radius:24px;
  padding:22px;
  box-shadow:var(--schaduw);
  border:3px solid var(--blauw);
}

.card > h1{
  display:none;
}

.admin-shell{
  max-width:1040px;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

.admin-panel{
  background:#fff;
  border:3px solid var(--blauw);
  border-radius:28px;
  padding:18px;
  box-shadow:var(--schaduw);
}
.admin-panel h2{
  margin-top:0;
  color:var(--zwart);
}

/*
 * Supervisorweergave.
 *
 * Alleen de grote buitenranden van de pagina-inhoud
 * worden rood. De normale blauwe huisstijlaccenten,
 * navigatie, iconen en tabelkoppen blijven blauw.
 */

body.supervisor-mode .card:not(.admin-shell),
body.supervisor-mode .admin-panel,
body.supervisor-mode .table-wrap{
  border-color:var(--rood);
}

.login-card{max-width:440px}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.field{
  display:grid;
  gap:6px;
  margin:10px 0;
}

.field input,
.field select,
.field textarea,
.password-wrapper input{
  padding:7px 10px;
  border:2px solid var(--rand);
  border-radius:10px;
  font:inherit;
}

.password-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.password-wrapper input{
  width:100%;
  padding-right:42px;
}

.password-toggle{
  position:absolute;
  right:8px;
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border:0;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--blauw);
  display:flex;
  align-items:center;
  justify-content:center;
}

.button,
button{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  background:var(--oranje);
  color:#111;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}

.danger{background:var(--rood)!important;color:white!important}
.success:not(.save-toast){background:var(--groen)!important}
.blue{background:var(--blauw)!important;color:white!important}
.yellow{background:var(--geel)!important}
.muted{opacity:.75}

.error{
  background:#ffe0e0;
  padding:10px;
  border-radius:10px;
}

.notice{
  background:#eaf6ff;
  padding:10px;
  border-radius:10px;
}

.list{
  border:2px solid var(--rand);
  border-radius:14px;
  overflow:hidden;
}

.list a,
.list div{
  display:block;
  padding:10px 12px;
  border-bottom:1px solid var(--rand);
  text-decoration:none;
}

.list a:hover{background:var(--geel)}

/* Mini-knoppen */
.mini,
.user-tool{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:1rem;
  line-height:1;
  font-weight:900;
  text-decoration:none!important;
  box-shadow:none;
  border:0;
  margin:0;
}

.mini.disabled,
.user-tool.disabled,
.tree-toolbar .mini.disabled{
  opacity:.35;
  pointer-events:none;
  filter:saturate(.65);
}

.mobile-edit-tool{
  display:none!important;
}

/* Agenda actieknoppen in bovenbalk */
.agenda-topbar{
  position:fixed;
  top:4px;
  right:14px;
  z-index:120;
  display:flex;
  gap:6px;
  align-items:center;
  margin:0;
  padding:0;
  background:transparent;
}

.agenda-topbar .mini{
  width:28px;
  height:28px;
  min-width:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.agenda-topbar .mini.orange{
  background:var(--oranje);
  color:#111;
}

.agenda-topbar .mini.yellow{
  background:var(--geel);
  color:#111;
}

.agenda-topbar .mini.success{
  background:var(--groen);
  color:#111;
}

.agenda-topbar .mini.danger{
  background:var(--rood);
  color:white;
}

/* Agenda tabel */
.table-wrap{
  overflow:auto;
  max-height:72vh;
  max-width:100%;
  width:max-content;
  overscroll-behavior-x:contain;

  background:#fff;

  border:3px solid var(--blauw);
  border-radius:8px;

  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.schedule{
  border-collapse:separate;
  border-spacing:0;
  border-radius:8px;
  min-width:900px;
  width:max-content;
  table-layout:auto;
}

.schedule th,
.schedule td{
  border-right:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
  min-width:auto;
  width:auto;
  white-space:nowrap;
  text-align:center;
  vertical-align:top;
  background:white;
  font-size:.82rem;
  padding:2px 4px;
  line-height:1.2;
  height:24px;
  box-sizing:border-box;
}

.schedule .team-divider{
  border-left:3px solid var(--blauw)!important;
}

.schedule thead th{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--blauw);
  color:white;
  padding:4px 6px;
  height:28px;
}

.schedule thead th{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--blauw);
  color:white;
  padding:4px 6px;
  height:28px;
}

.schedule thead tr:nth-child(2) th{
  position:sticky;
  top:28px;
  z-index:40;
  background:var(--groen);
  color:#fff;
}

.schedule .date-col{
  position:sticky;
  left:0;
  z-index:50;
  min-width:120px;
  background:#fff;
  color:var(--zwart);
  font-weight:900;
  border-right:2px solid var(--blauw)!important;
}

.schedule thead .date-col{
  z-index:70;
  border-right:2px solid var(--blauw)!important;
}

.schedule thead tr:first-child .date-col{
  top:0;
  background:var(--blauw);
  color:#fff;
}

.schedule thead tr:nth-child(2) .date-col{
  top:28px;
  z-index:90;
  background:#fff;
  color:var(--zwart);
}

.date-weekday{
  display:block;
  color:var(--blauw);
  font-weight:700;
  font-size:.82rem;
  line-height:1.15;
}

.date-date{
  display:block;
  margin-top:1px;
  color:#666;
  font-weight:600;
  font-size:.74rem;
  line-height:1.1;
}

.schedule td{
  position:relative;
}

.schedule td.mine,
.schedule td.conflict{
  background:white!important;
  color:var(--zwart)!important;
}

.name-pill{
  display:block;
  width:max-content;
  max-width:100%;
  margin:1px auto;
  padding:1px 4px;
  border-radius:5px;
  line-height:1.15;
}

.assignment-entry{
  white-space:nowrap;
}

.mine-name{
  background:#fff4a8;
  color:var(--zwart);
}

.conflict-name{
  background:#ffc9c9!important;
  color:var(--zwart)!important;
}

.assignment-warnings{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-left:5px;
    vertical-align:middle;
}

.assignment-warning{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:15px;
    height:15px;
    flex:0 0 15px;

    line-height:1;

    cursor:help;
    user-select:none;
}

.assignment-warning svg{
    display:block;
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;
}

.assignment-warning.unavailable{
    color:var(--rood);
}

.assignment-warning.conflict{
    color:var(--oranje);
}

.agenda-legend{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 18px;

    margin-top:8px;
    padding:7px 9px;

    color:#666;
    font-size:.76rem;
    line-height:1.3;
}

.agenda-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.agenda-legend .assignment-warning{
    cursor:default;
}

.assignment-entry{
    display:flex;
    align-items:center;
}

.assignment-entry .entry-label{
    display:inline-block;
}

.guest{
  color:var(--rood);
  font-weight:400;
}

.note-entry{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:1px auto;

  background:#ffe3b8;
  color:var(--zwart);
  border:0;
}

.note-entry .entry-label{
  display:block;

  width:auto;
  min-width:0;
  max-width:none;

  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;

  hyphens:manual;
  -webkit-hyphens:manual;
  -ms-hyphens:manual;

  font-style:normal;
  text-align:left;
}

.agenda-note-line{
  display:block;
  width:max-content;
  max-width:none;

  white-space:nowrap;
}

/* Persoonlijke volgorde van teams in de agenda */
.agenda-team-header{
  position:sticky;
}

.agenda-team-drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:0;
  max-width:100%;

  padding:2px 6px;
  border-radius:6px;

  cursor:grab;
  user-select:none;
  touch-action:none;

  transition:
      background .15s ease,
      opacity .15s ease,
      box-shadow .15s ease;
}

.agenda-team-drag-handle::before{
  content:"⋮⋮";

  margin-right:5px;

  color:rgba(255,255,255,.75);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:-3px;
  line-height:1;
}

.agenda-team-drag-handle:hover{
  background:rgba(255,255,255,.14);
}

.agenda-team-drag-handle:active{
  cursor:grabbing;
}

.agenda-team-is-dragging{
  opacity:.55;
}

.agenda-team-is-dragging
.agenda-team-drag-handle{
  cursor:grabbing;
}

.agenda-team-drop-before{
  box-shadow:
      inset 4px 0 0 var(--geel)!important;
}

.agenda-team-drop-after{
  box-shadow:
      inset -4px 0 0 var(--geel)!important;
}

@media(max-width:720px){
  .agenda-team-drag-handle{
    min-height:24px;
    padding:3px 7px;
  }

  .agenda-team-drag-handle::before{
    margin-right:6px;
    font-size:.78rem;
  }
}

/* Slepen en kopiëren van namen in de agenda */
.agenda-person-drop-target{
  background:#eaf6ff!important;
  box-shadow:
    inset 0 0 0 2px var(--blauw);
}

.agenda-person-is-dragging{
  opacity:.45;
}

.private-note-entry{
  background:#edf8e6;
  color:var(--zwart);
  border:1px dashed rgba(149,193,31,.65);
}

.private-note-entry .entry-label{
  font-style:italic;
}

.note-entry .remove,
.private-note-entry .remove{
  font-style:normal!important;
}

.remove,
.plus{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  line-height:1!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  font:inherit!important;
}

.remove{
  display:inline!important;
  margin-left:6px;
  color:var(--rood)!important;
  font-weight:900;
  cursor:pointer;
  vertical-align:baseline;
  position:static!important;
}

.plus{
  display:block;
  margin:1px auto 0;
  color:var(--blauw)!important;
  font-weight:900;
  font-size:1em;
  text-align:center;
  cursor:pointer;
}

.person-picker-popup{
  display:none;
  position:absolute;
  left:50%;
  top:22px;
  transform:translateX(-50%);
  z-index:250;

  width:240px;
  padding:8px;

  background:#fff;
  border:2px solid var(--blauw);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.person-picker-popup.open{
  display:block;
}

.person-search{
  width:100%;
  margin-bottom:8px;
  padding:6px 8px;

  border:2px solid var(--rand);
  border-radius:8px;

  font:inherit;
}

.person-picker-list{
  display:grid;
  gap:2px;
  max-height:220px;
  overflow-y:auto;
}

.person-option{
  display:flex;
  justify-content:space-between;
  align-items:center;

  width:100%;
  padding:7px 8px;

  border:0;
  border-radius:8px;

  background:#fff;
  color:var(--zwart);

  text-align:left;
  font:inherit;
  cursor:pointer;
  box-shadow:none;
}

.person-option:hover{
  background:#eaf6ff;
}

.person-option.unavailable{
  color:var(--rood);
}

.person-option.unavailable .person-option-name{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
}

.person-option-status{
  font-size:.72rem;
  font-weight:700;
  color:var(--rood);
}

.guest-option{
  color:var(--rood);
}

.note-option{
  font-style:italic;
  background:#edf8e6;
}

.person-plus.is-hidden{
  display:none!important;
}

.hidden-week{
  display:none!important;
}

/* Zondagen subtiel markeren in de agenda */
.schedule tbody tr.sunday-row td{
  background:#f4f9fd;
}

.schedule tbody tr.sunday-row .date-col{
  background:#f4f9fd;
}

.week-toggle{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin-right:4px;
  color:var(--blauw);
  font-weight:900;
  cursor:pointer;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  line-height:1!important;
}

.week-toggle:hover{
  background:transparent!important;
  color:var(--groen);
  transform:none!important;
}

#agendaForm.is-saving::after{
  content:"Bezig met verwerken...";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  font-size:1.4rem;
  font-weight:900;
  color:var(--blauw);
}

/* Beheerpagina */
.date-list{
  max-height:300px;
  overflow:auto;
  border:2px solid var(--rand);
  padding:10px;
  border-radius:12px;
  background:#fff;
}

.date-list label{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:6px;
  align-items:center;
  padding:2px 0;
}

.date-full,
.date-day{
  font-weight:700;
  color:var(--blauw);
}

.tree-toolbar{
  display:flex;
  gap:6px;
  margin:0 0 8px;
  align-items:center;
}

.tree-list{
  border:2px solid var(--rand);
  border-radius:12px;
  padding:8px 10px;
  background:#fff;
  max-height:520px;
  overflow:auto;
}

.tree-line{
  padding:4px 8px;
  border-radius:7px;
  cursor:pointer;
  user-select:none;
  margin:1px 0;
}

.tree-line:hover{
  background:#fff4c6;
}

.tree-line.selected{
  background:#eaf4ff;
  outline:1px solid rgba(32,113,182,.22);
}

.tree-team{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:900;
}

.tree-task{
  margin-left:24px;
  font-weight:500;
}

.tree-task::before{
  content:'↳ ';
  color:var(--blauw);
}

.collapse-toggle{
  border:0;
  background:transparent!important;
  color:var(--groen);
  font-size:1rem;
  font-weight:900;
  width:18px;
  min-width:18px;
  height:18px;
  padding:0!important;
  line-height:1;
  box-shadow:none!important;
  cursor:pointer;
  border-radius:5px;
}

.collapse-toggle:hover{
  background:rgba(149,193,31,.15)!important;
}

.collapsed-task{
  display:none!important;
}

.tree-text{
  display:inline-block;
}

/* Gebruikersbeheer */
.users-card{
  max-width:980px;
}

.page-section-header{
  margin-bottom:18px;
  padding:14px 18px;
}

.section-title-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.section-title-row h2{
  margin:0;
  color:var(--zwart);
  font-size:1.5rem;
  font-weight:800;
  line-height:1.2;
}

.section-title-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--blauw);
  color:#fff;
}

.section-title-icon .luach-icon,
.section-title-icon .nav-svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.user-admin-grid{align-items:start}
.users-left,.users-right{min-width:0}

.compact-field{
  margin:0 0 6px;
}

.app-settings-icon{
    background:var(--rood);
}

.compact-field select{
  padding:7px 10px;
  border-radius:10px;
}

.user-toolbar{
  display:flex;
  gap:6px;
  align-items:center;
  margin:6px 0 8px;
  background:white;
  z-index:20;
}

.sticky-user-toolbar{
  position:sticky;
  top:46px;
  padding:4px 0;
}

.user-toolbar .button,
.user-toolbar button,
.user-toolbar a{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
}

.compact-list{
  border:2px solid var(--rand);
  border-radius:12px;
  overflow:auto;
  max-height:520px;
  padding:6px;
  background:white;
}

.compact-list .user-list-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  margin:1px 0;
  border:0;
  border-radius:7px;
  text-decoration:none;
  line-height:1.25;
}

.user-avatar{
    width:20px;
    height:20px;
    flex:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--blauw);
    color:#fff;

    font-size:.68rem;
    font-weight:900;

    line-height:1;
}

.user-name{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.compact-list .user-list-item:hover{
  background:#fff4c6;
}

.compact-list .user-list-item.selected{
  background:#eaf4ff;
  outline:1px solid rgba(32,113,182,.22);
}

.compact-user-form{
  display:grid;
  gap:6px;
}

.compact-user-form input:not([type="checkbox"]){
  width:100%;
  padding:7px 10px;
  border:2px solid var(--rand);
  border-radius:10px;
  font:inherit;
}

.password-reset-form{
  margin-top:10px;
}

.small-reset{
  padding:7px 10px;
  border-radius:10px;
  font-size:.9rem;
}

.team-checkbox-grid{
  display:grid;
  gap:12px;
  margin-top:12px;
  font-size:.95rem;
}

.team-role-block{
  display:grid;
  gap:8px;
}

.team-role-options{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-role-block{
  margin-top:8px;
  padding-top:12px;
  border-top:2px solid var(--rand);
}

.team-check-name{
  display:block;
  width:100%;
  margin:14px 0 8px;
  padding:6px 10px;
  background:#eaf6ff;
  color:var(--blauw);
  font-weight:900;
  border-radius:8px;
  clear:both;
}

.team-check-label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:22px;
  white-space:nowrap;
}

.team-check-label input[type="checkbox"]{
  order:-1;
}

.team-checkbox-grid input[type="checkbox"]{
  width:16px;
  height:16px;
}

.admin-spacer{
  margin-top:8px;
}


/* Accountpagina */
.account-card{
  max-width:520px;
}

.account-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.account-header h2{
  margin:0;
}

.account-header p{
  margin:4px 0 0;
}


.addressbook-header{
    display:block;
}

.addressbook-title-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.addressbook-title-row h2{
    margin:0;
}


.account-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;

  border-radius:50%;

  background:var(--blauw);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.25rem;
  font-weight:900;
}


.account-avatar svg{
    width:18px;
    height:18px;
    color:#fff;
    stroke:#fff;
}


.account-form h2{
  margin:18px 0 8px;
}

.account-team-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.account-team-pill{
  background:#eaf6ff;
  color:var(--blauw);
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
}

.account-team-pill span{
  opacity:.75;
  font-weight:700;
  margin-left:6px;
}

.account-newsletter,
.account-addressbook-toggle{
  margin-top:10px;
}

.addressbook-address-fields{
  display:none;
  gap:6px;
}

.addressbook-address-fields.is-visible{
  display:grid;
}

.address-row{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:6px;
}

.account-save{
  justify-self:end;
  margin-top:12px;
}


/* Adresboek */
.addressbook-page{
  max-width:680px;
}

.addressbook-search{
    position:sticky;
    top:46px;
    z-index:30;

    margin-bottom:18px;
    padding:0 0 10px;

    background:#fff;
}

.addressbook-search-main{
    position:relative;
}

.addressbook-search-icon{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);

    color:var(--blauw);
    font-size:1.15rem;
    font-weight:900;

    pointer-events:none;
}

.addressbook-search input[type="search"]{
    width:100%;
    padding:11px 14px 11px 42px;

    border:2px solid var(--rand);
    border-radius:14px;

    background:#fff;
    font:inherit;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.addressbook-search input:focus{
    outline:none;
    border-color:rgba(32,113,182,.55);
    box-shadow:0 0 0 4px rgba(32,113,182,.10);
}

.addressbook-list{
  display:grid;
  gap:12px;

  max-height:calc(100dvh - 210px);
  overflow:auto;
  padding-right:4px;
}

.addressbook-letter{
    position:sticky;
    top:0;
    z-index:5;

    margin:10px 0 -2px;
    padding:4px 10px;

    color:var(--blauw);
    font-size:.9rem;
    font-weight:900;

    background:#eaf6ff;
    border-radius:8px;
}

.addressbook-card{
    display:block;

    padding:14px;

    border:2px solid var(--rand);
    border-radius:18px;

    background:#fff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.addressbook-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(10,10,10,.10);
}

.addressbook-avatar{
    display:none;
}

.addressbook-info h3{
    margin:2px 0 10px;

    color:var(--blauw);

    font-size:1.18rem;
    font-weight:800;
}

.addressbook-detail{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:7px;
    align-items:center;

    margin:10px 0;

    line-height:1.4;
    font-size:.96rem;
}

.addressbook-detail-icon{
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;

    color:var(--blauw);
    flex-shrink:0;
}



.luach-icon{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.addressbook-birthday.today .luach-icon{
    width:23px;
    height:23px;
}

.addressbook-link{
  text-decoration:none;
}

.addressbook-link:hover span:last-child{
  text-decoration:underline;
}

.addressbook-birthday{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--rand);

    color:#666;
    font-size:.92rem;
}

.addressbook-birthday.today{
    padding:10px 12px 10px 0;

    border-top:0;
    border-radius:10px;

    background:#fff8ec;
}

.birthday-inner{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:8px;
    align-items:center;
}

.birthday-text{
    display:flex;
    align-items:center;
    gap:12px;

    margin-left:-6px;

    color:var(--zwart);
    font-weight:700;
    line-height:1.2;
}

.birthday-badge{
    display:inline-flex;
    align-items:center;

    margin-left:0;
    padding:5px 12px;


    border-radius:999px;

    background:var(--oranje);
    color:#fff;

    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.addressbook-birthday.today .addressbook-detail-icon{
    color:var(--oranje);
}

.addressbook-birthday .addressbook-detail-icon{
    color:var(--blauw);
}

.addressbook-birthday.today .addressbook-detail-icon{
    background:transparent;
    color:var(--oranje);
}



.addressbook-card.birthday-today{
    border-color:var(--oranje);

    box-shadow:
        0 0 0 2px rgba(240,146,0,.12),
        0 8px 18px rgba(240,146,0,.10);
}

/* Homepagina */
.home-card{
  max-width:460px;
  margin:0 auto 22px;
  border-radius:28px;
}

.luach-home{
  display:flex;
  flex-direction:column;
  text-align:center;
  min-height:calc(100dvh - 76px);
  margin-bottom:0!important;
}

.home-welcome{
  font-size:1.15rem;
  font-weight:700;
  margin:10px 0;
}

.home-luach-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:10px 28px;
  margin:8px auto;
  background:var(--blauw);
  color:#fff;
  border-radius:14px;
  font-size:clamp(2.4rem, 16vw, 5rem);
  font-weight:800;
  line-height:1;
}



.home-dashboard-block{
  width:100%;
  max-width:416px;
  margin:14px auto 0;
  padding:14px;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--rand);
  text-align:left;
}

.home-dashboard-block h2{
  margin:0;
  color:var(--blauw);
  font-size:1.18rem;
}

.home-dashboard-subtitle{
  margin:2px 0 12px!important;
  color:#666;
  font-size:.88rem;
  font-style:italic;
}

.home-dashboard-date{
  margin:12px 0 5px;
  color:var(--blauw);
  font-weight:900;
}

.home-dashboard-list{
  margin:0;
  padding-left:18px;
}

.home-dashboard-list li{
  margin:3px 0;
}

.home-dashboard-list span{
  color:#666;
  margin-left:4px;
}

.home-dashboard-empty{
  margin:0!important;
  color:#666;
}

/* Openstaand beschikbaarheidsverzoek op het dashboard */
.home-availability-request-block{
  border-color:var(--oranje);
  background:#fffaf2;
}

.home-availability-request-list{
  display:grid;
  gap:8px;
}

.home-availability-request{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:
    "team action"
    "period action";
  gap:3px 12px;
  align-items:center;

  min-width:0;
  padding:11px 12px;

  border:1px solid rgba(240,146,0,.35);
  border-radius:12px;

  background:#fff;
  color:var(--zwart);

  text-decoration:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.home-availability-request:hover{
  border-color:var(--oranje);
  box-shadow:0 6px 14px rgba(240,146,0,.12);
  transform:translateY(-2px);
}

.home-availability-request-team{
  grid-area:team;

  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--blauw);
  font-weight:900;
}

.home-availability-request-period{
  grid-area:period;

  min-width:0;

  color:#666;
  font-size:.84rem;
  font-weight:700;
  line-height:1.3;
}

.home-availability-request-action{
  grid-area:action;

  display:inline-flex;
  align-items:center;
  gap:5px;

  color:var(--oranje);
  font-size:.84rem;
  font-weight:900;
  white-space:nowrap;
}

.home-availability-request-action span{
  font-size:1.3rem;
  line-height:1;
}

.home-birthday-congrats{
  margin:8px 0 12px!important;
  padding:10px 12px;
  border-radius:12px;
  background:#fff1dc;
  color:var(--oranje);
  font-weight:900;
  text-align:center;
}

.home-birthday-mode{
  border-color:var(--oranje);
  box-shadow:
    0 0 0 2px rgba(240,146,0,.12),
    0 10px 25px rgba(240,146,0,.12);
}

.home-birthday-mode::before{
  content:"✦ ✧ ✦";
  color:var(--oranje);
  font-size:1.2rem;
  letter-spacing:.35em;
}

/* Oude navigatie uitgeschakeld */
.nav,
.hamburger{
  display:none!important;
}

/* Responsive */
@media(max-width:720px){
  .grid2{
    grid-template-columns:1fr;
  }


.addressbook-card{
    padding:12px;
}

.addressbook-avatar{
    display:none;
}

  .page{
    padding:8px 10px 8px!important;
  }

  .card{
    padding:14px;
    border-radius:18px;
  }


  .admin-shell{
    padding:0;
  }

  .admin-panel{
    border-radius:22px;
    padding:14px;
  }

  .home-card{
    max-width:460px;
  }

  .home-card.luach-home{
    min-height:calc(100dvh - 64px)!important;
    padding-bottom:10px!important;
  }
.team-checkbox-grid{
    display:grid;
    gap:14px;
}

.team-role-options{
    display:grid;
    gap:8px;
}

.team-check-name{
    display:block;
    width:100%;
    margin:0 0 8px;
    padding:8px 10px;
    background:#eaf6ff;
    color:var(--blauw);
    font-weight:900;
    border-radius:8px;
}

.team-check-label{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    width:100%;
    margin:0;
    font-size:.92rem;
    font-weight:800;
}

.team-check-label input[type="checkbox"]{
    appearance:none;
    width:42px;
    height:24px;
    border-radius:999px;
    background:var(--rand);
    position:relative;
    flex:0 0 auto;
    cursor:pointer;
}

.team-check-label input[type="checkbox"]::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    top:3px;
    left:3px;
    border-radius:50%;
    background:#fff;
    transition:.18s;
}

.team-check-label input[type="checkbox"]:checked{
    background:var(--blauw);
}

.team-check-label input[type="checkbox"]:checked::after{
    left:21px;
}
  .brand{
    padding:0 8px;
  }

  .agenda-topbar{
    right:8px;
  }

  .table-wrap{
    max-height:calc(72dvh - 48px);
  }
  .mobile-edit-tool{
    display:inline-flex!important;
  }
}

.account-password-btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:8px 12px;
  background:var(--blauw);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
}

.password-key-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.preference-options{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.field-required-warning{
  border-color:var(--oranje)!important;
  background:#fff4df!important;
}

.save-toast{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    height:4px;

    background:#fff;

    opacity:0;
    pointer-events:none;

    z-index:9999;

    overflow:hidden;
}

.save-toast::after{
    content:"";
    display:block;

    width:0;
    height:100%;

    background:var(--blauw);
}

.save-toast.show{
    opacity:1;
}

.save-toast.show::after{
    animation:saveLineFill 1.35s ease-out forwards;
}

.save-toast.error::after{
    background:var(--rood);
}

@keyframes saveLineFill{
    0%{
        width:0;
    }

    72%{
        width:100%;
        opacity:1;
    }

    100%{
        width:100%;
        opacity:0;
    }
}

.addressbook-phone-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.addressbook-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;
    border-radius:50%;

    background:#eef8ea;
    color:var(--groen);

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.addressbook-whatsapp .luach-icon{
    width:17px;
    height:17px;
}

.addressbook-whatsapp:hover{
    background:var(--groen);
    color:#fff;
    transform:scale(1.08);
}

.addressbook-email-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.addressbook-copy{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;
    padding:0;

    border-radius:50%;

    background:#eaf6ff;
    color:var(--blauw);

    box-shadow:none;
    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.addressbook-copy .luach-icon{
    width:17px;
    height:17px;
}

.addressbook-copy:hover{
    background:var(--blauw);
    color:#fff;
    transform:scale(1.08);
}

.addressbook-copy.copied{
    background:var(--groen);
    color:#fff;
}

.addressbook-vcard{
    color:var(--blauw);
    font-weight:800;
}

.addressbook-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.addressbook-name-row h3{
    flex:1;
    margin:0;
    min-width:0;
}

.addressbook-avatar{
    width:24px;
    height:24px;
    flex:0 0 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--blauw);
    color:#fff;

    font-size:.58rem;
    font-weight:900;

    box-shadow:none;
}

.addressbook-contact-add{
    margin-left:auto;
}

.addressbook-contact-add{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;
    border-radius:50%;

    background:#eaf6ff;
    color:var(--blauw);

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.addressbook-contact-add .luach-icon{
    width:18px;
    height:18px;
}

.addressbook-contact-add:hover{
    background:var(--blauw);
    color:#fff;
    transform:scale(1.08);
}

.addressbook-family{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--rand);
}

.addressbook-family-title{
    margin-bottom:8px;
    color:#666;
    font-size:.82rem;
    font-weight:800;
}

.addressbook-family-list{
    display:grid;
    gap:6px;
    justify-items:start;
}

.addressbook-family-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:5px 9px;
    border-radius:999px;

    background:#eaf6ff;
    color:var(--blauw);

    font-size:.82rem;
    font-weight:800;
    text-decoration:none;

    transition:.18s;
}

.addressbook-family-chip .luach-icon{
    width:18px;
    height:18px;
}

.addressbook-family-chip:hover{
    background:#d7ebff;
}

.addressbook-family-chip.current{
    background:var(--blauw);
    color:#fff;
}

.addressbook-family-chip.birthday{
    background:#fff1dc;
    color:var(--oranje);
}

.addressbook-family-chip.current.birthday{
    background:var(--oranje);
    color:#fff;
}

.addressbook-info,
.addressbook-detail,
.addressbook-detail span,
.addressbook-email-row,
.addressbook-phone-row,
.addressbook-family-list{
    min-width:0;
}

.addressbook-link,
.addressbook-family-chip{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.addressbook-family-chip{
    white-space:normal;
}

.address-auto-fill::placeholder{
    color:rgba(10,10,10,.35);
}

.address-auto-fill.is-looking-up::placeholder{
    color:rgba(32,113,182,.65);
}

.address-lookup-wrap{
    position:relative;
}

.address-lookup-spinner{
    display:none;
    position:absolute;
    right:10px;
    top:50%;
    width:16px;
    height:16px;
    margin-top:-8px;
    border:2px solid rgba(32,113,182,.18);
    border-top-color:var(--blauw);
    border-radius:50%;
    animation:addressLookupSpin .7s linear infinite;
    pointer-events:none;
}

.address-lookup-wrap.is-looking-up .address-lookup-spinner{
    display:block;
}

.address-lookup-wrap.is-looking-up input{
    padding-right:34px;
}

@keyframes addressLookupSpin{
    to{
        transform:rotate(360deg);
    }
}

.rotate-phone-message{
    display:none;
}

@media(max-width:720px) and (orientation:portrait){
    body:not(.force-rotated-agenda) .agenda-page form{
        display:none;
    }

    body:not(.force-rotated-agenda) .rotate-phone-message{
        min-height:calc(100dvh - 58px);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        text-align:center;
        padding:24px;
        color:var(--blauw);
    }

    .rotate-phone-message strong{
        font-size:1.8rem;
        font-weight:900;
    }

    .rotate-phone-message span{
        color:var(--zwart);
        opacity:.75;
        font-weight:700;
    }
}

.rotate-phone-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:6px;

    border-radius:50%;
    background:#eaf6ff;
}

.rotate-phone-icon svg{
    width:38px;
    height:38px;

    fill:none;
    stroke:var(--blauw);
    stroke-width:2.7;
    stroke-linecap:round;
    stroke-linejoin:round;

    transform:rotate(-90deg);
    transform-origin:center;
}

.user-filter-options{
    display:grid;
    gap:7px;
    margin-top:8px;
    margin-bottom:18px;
    font-size:.92rem;
}

.user-filter-options input,
.user-filter-options select,
.user-filter-options button,
.user-filter-options a{
    font:inherit;
}

.filter-check-row{
    display:grid;
    grid-template-columns:92px 52px 52px;
    align-items:center;
    gap:2px;
    min-height:24px;
}

.filter-check-row span{
    color:var(--zwart);
    font-weight:400;
}

.filter-check-row label{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    margin:0;
    color:var(--zwart);
    font-weight:400;
}

.filter-check-row input[type="checkbox"]{
    margin:0;
    width:14px;
    height:14px;
}

.filter-age-row{
    display:grid;
    grid-template-columns:auto 48px auto 48px;
    align-items:center;
    justify-content:start;
    gap:6px;
    color:var(--zwart);
    font-weight:400;
}

.filter-age-row input{
    width:48px;
    padding:4px 5px!important;
    text-align:center;
    border:2px solid var(--rand);
    border-radius:8px;
}

.filter-action-row{
    display:flex;
    gap:6px;
    margin-top:8px;
    margin-bottom:16px;
    padding-bottom:4px;
}

.filter-action-row .mini{
    width:28px;
    height:28px;
    min-width:28px;
}

.filter-action-row{
    display:flex;
    gap:6px;
    margin-top:8px;
    margin-bottom:14px;
}

.city-filter-details{
    border:1px solid var(--rand);
    border-radius:8px;
    padding:6px 8px;
}

.city-filter-details summary{
    cursor:pointer;
    font-weight:400;
}

.city-filter-list{
    display:grid;
    gap:4px;
    margin-top:8px;
}

.city-filter-list label{
    display:flex;
    align-items:center;
    gap:6px;
    font:inherit;
}

.city-filter-list input[type="checkbox"]{
    margin:0;
    width:14px;
    height:14px;
}

.addressbook-search > .city-filter-details > summary{
    display:flex;
    align-items:center;
    gap:8px;
}

.addressbook-search > .city-filter-details > summary::after{
    content:"";
    display:none;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--oranje);
}

.addressbook-search:has(input[name="city_filter[]"]:checked) > .city-filter-details > summary::after,
.addressbook-search:has(input[name="age_from"][value]:not([value=""])) > .city-filter-details > summary::after,
.addressbook-search:has(input[name="age_to"][value]:not([value=""])) > .city-filter-details > summary::after{
    display:inline-block;
}

.addressbook-filter-actions,
.filter-action-row{
    display:flex;
    gap:6px;
    margin-top:8px;
    margin-bottom:14px;
}

.addressbook-filter-actions .mini,
.filter-action-row .mini{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    padding:0!important;
    border-radius:8px!important;
}

.addressbook-filter-actions .luach-icon,
.addressbook-filter-actions .nav-svg,
.filter-action-row .luach-icon,
.filter-action-row .nav-svg{
    width:18px;
    height:18px;
}

.beheer-section-title{
    margin:14px 0 8px;
    color:var(--blauw);
}

.beheer-export-field{
    margin:0!important;
    gap:4px;
}

.beheer-general-title{
    margin-top:28px!important;
}

.admin-panel .tree-toolbar{
    margin-top:4px;
}


.beheer-export-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto;
    gap:10px;
    align-items:center;
    max-width:520px;
    min-width:0;
}

.beheer-export-grid .field{
    min-width:0;
}

.beheer-export-grid input[type="date"]{
    width:100%;
    min-width:0;
}

.beheer-export-button{
    align-self:end;
    margin-bottom:8px;
}


/* Verjaardagskalender */
.birthday-page{
    max-width:680px;
}

.birthday-calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.birthday-title-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.birthday-calendar-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}

.birthday-calendar-header h2{
    margin:2px 0 0;
    color:var(--blauw);
    font-size:.98rem;
    font-weight:700;
}

.birthday-calendar-list{
    display:grid;
    gap:12px;
}

.birthday-calendar-card{
    display:grid;
    grid-template-columns:68px 1fr auto;
    gap:12px;
    align-items:flex-start;
    padding:12px;
    border:2px solid var(--rand);
    border-radius:18px;
    background:#fff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.birthday-calendar-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(10,10,10,.10);
}

.birthday-calendar-card.today{
    border-color:var(--oranje);
    background:#fff8ec;
    box-shadow:0 0 0 2px rgba(240,146,0,.12);
}

.birthday-calendar-date{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:58px;
    border-radius:14px;
    background:#eaf6ff;
    color:var(--blauw);
}

.birthday-calendar-card.today .birthday-calendar-date{
    background:var(--oranje);
    color:#fff;
}

.birthday-calendar-date span{
    font-size:1.45rem;
    font-weight:900;
    line-height:1;
}

.birthday-calendar-date small{
    margin-top:3px;
    font-size:.72rem;
    font-weight:800;
}

.birthday-calendar-person{
    display:grid;
    gap:3px;
}

.birthday-calendar-person strong{
    color:var(--blauw);
    font-size:1.05rem;
}

.birthday-calendar-person span{
    color:#666;
    font-size:.92rem;
    font-weight:700;
}

.birthday-calendar-cake{
    font-size:1.6rem;
}

.birthday-empty{
    margin:0;
    padding:14px;
    border-radius:14px;
    background:#eaf6ff;
}

.birthday-calendar-person{
    display:grid;
    gap:8px;
}

.birthday-calendar-person-row{
    display:grid;
    gap:2px;
    padding:4px 6px;
    margin-left:-6px;
    border-radius:10px;
    text-decoration:none;
    transition:background .18s ease, transform .18s ease;
}

.birthday-calendar-person-row:hover{
    background:#eaf6ff;
    transform:translateX(3px);
}

.birthday-title-block{
    min-width:0;
    text-align:left;
}

.birthday-title-block h2{
    margin:2px 0 0;
    color:var(--blauw);
    font-size:.98rem;
    font-weight:700;
}

.birthday-page-title{
    color:var(--zwart);
    font-size:1.5rem;
    font-weight:800;
    line-height:1.2;
}

.birthday-cake-icon{
    width:20px;
    height:20px;
    margin-left:6px;
    color:var(--oranje);
    vertical-align:middle;
}

.birthday-home-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:4px;
    color:var(--oranje);
}

.birthday-home-icon .luach-icon{
    width:24px;
    height:24px;
}

.supervisor-mode-label{
    margin-left:14px;

    color:var(--rood);

    font-size:.85rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;

    user-select:none;
}

.home-top-logout{
    margin-left:auto;
    margin-right:8px;
}

.home-top-logout .nav-svg{
    width:20px;
    height:20px;
}

.filter-submit-btn.disabled,
.filter-clear-btn.disabled{
    opacity:.35;
    filter:saturate(.65);
    pointer-events:none;
    cursor:default;
}

button.filter-submit-btn.disabled{
    pointer-events:none;
}

.filter-details > summary{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    list-style:none;
    font-weight:800;
    color:var(--blauw);
}

.filter-details > summary::-webkit-details-marker{
    display:none;
}

.filter-details > summary::before{
    content:"▶";
    color:var(--blauw);
    font-size:.72rem;
    transition:transform .18s ease;
    transform-origin:center;
}

.filter-details[open] > summary::before{
    transform:rotate(90deg);
}

.filter-details.has-active-filter > summary::after{
    content:"";
    width:8px;
    height:8px;
    margin-left:2px;
    border-radius:50%;
    background:var(--oranje);
}

.user-list-item.is-editing{
    background:#fff8ec!important;
    outline:1px solid rgba(240,146,0,.22);
}

.user-list-item.new-user-temporary{
    background:#fff1dc!important;
}

.filter-sort-line{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
    gap:12px;
    margin:6px 0 8px;
}

.filter-sort-line .filter-details,
.filter-sort-line .sort-details{
    margin:0!important;
}

.sort-details{
    justify-self:end;
    text-align:right;
    font-size:1rem;
}

.sort-details[open]{
    min-width:155px;
}

.sort-options{
    display:grid;
    gap:7px;
    margin-top:8px;
    justify-items:end;
    font-size:.92rem;
}

.sort-options select{
    width:145px;
    padding:5px 7px;
    border:1px solid var(--rand);
    border-radius:8px;
    font:inherit;
}

.filter-details > summary,
.sort-details > summary{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    list-style:none;
    font-weight:800;
    color:var(--blauw);
}

.sort-details > summary{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
}

.filter-details > summary::-webkit-details-marker,
.sort-details > summary::-webkit-details-marker{
    display:none;
}

.filter-details > summary::before,
.sort-details > summary::before{
    content:"▶";
    color:var(--blauw);
    font-size:.72rem;
    transition:transform .18s ease;
    transform-origin:center;
}

.sort-details > summary::before{
    order:2;
    margin-left:0;
    transform:scaleX(-1);
}

.filter-details[open] > summary::before,
.sort-details[open] > summary::before{
    transform:scaleX(-1) rotate(90deg);
}

.has-active-filter > summary::after,
.has-active-sort > summary::after{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--oranje);
}

.addressbook-card{
    overflow:hidden;
}

.addressbook-card .addressbook-detail,
.addressbook-card .addressbook-birthday,
.addressbook-card .addressbook-family{
    max-height:300px;
    opacity:1;
    transform:translateY(0);
    overflow:hidden;
    transition:
        max-height .32s ease,
        opacity .24s ease,
        transform .24s ease,
        margin .24s ease,
        padding .24s ease;
}

.addressbook-card.is-collapsed .addressbook-detail,
.addressbook-card.is-collapsed .addressbook-birthday,
.addressbook-card.is-collapsed .addressbook-family{
    max-height:0;
    opacity:0;
    transform:translateY(-8px);
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
    pointer-events:none;
}

.addressbook-card-toggle{
    width:28px;
    height:28px;
    min-width:28px;
    padding:0!important;
    border:0;
    border-radius:50%;
    box-shadow:none!important;
    background:var(--rood)!important;
    color:#fff;
    font-size:.72rem;
    font-weight:900;
    line-height:1;
    transition:background .2s ease, transform .22s ease;
}

.addressbook-card.is-collapsed .addressbook-card-toggle{
    background:var(--groen)!important;
}

.addressbook-card-toggle .toggle-up{
    display:inline;
}

.addressbook-card-toggle .toggle-down{
    display:none;
}

.addressbook-card.is-collapsed .addressbook-card-toggle .toggle-up{
    display:none;
}

.addressbook-card.is-collapsed .addressbook-card-toggle .toggle-down{
    display:inline;
}

.addressbook-card-summary{
    color:#666;
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
}

.addressbook-card:not(.is-collapsed) .addressbook-card-summary{
    display:none;
}

.addressbook-card.is-collapsed .addressbook-name-row{
    margin-bottom:0;
}

.addressbook-name-row{
    cursor:pointer;
}

/* Extra Luach animaties */
.filter-details[open] .user-filter-options,
.sort-details[open] .sort-options{
    animation:luachFoldOpen .22s ease-out;
}

@keyframes luachFoldOpen{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:translateY(0); }
}

.compact-list .user-list-item{
    transition:background .18s ease, transform .18s ease;
}

.compact-list .user-list-item:hover{
    transform:translateX(3px);
}

/* Vloeiende blauwe navigatie-bubbel */
.luach-nav{
    position:sticky;
    overflow:hidden;
    isolation:isolate;
}

.luach-nav-bubble{
    position:absolute;
    left:var(--luach-nav-left, 6px);
    top:var(--luach-nav-top, 5px);
    width:var(--luach-nav-width, 58px);
    height:var(--luach-nav-height, 28px);
    border-radius:8px;
    background:var(--blauw);
    z-index:0;
    pointer-events:none;
    transition:
        left .25s ease,
        top .25s ease,
        width .25s ease,
        height .25s ease;
}

.luach-nav.no-nav-transition .luach-nav-bubble{
    transition:none!important;
}

.luach-nav .brand,
.luach-nav .icon-nav,
.luach-nav .mini,
.luach-nav .home-top-logout{
    position:relative;
    z-index:1;
}

.luach-nav .brand{
    background:transparent!important;
    color:#fff!important;
}

.luach-nav .mini{
    background:transparent!important;
    color:var(--blauw)!important;
}

.luach-nav .mini.active{
    color:#fff!important;
}

/* Coördinatorenpagina */
.coordinator-page{
    max-width:760px;
}

.coordinator-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.coordinator-header h2{
    margin:0;
    color:var(--zwart);
}

.coordinator-header p{
    margin:4px 0 0;
    color:#666;
}

.coordinator-team-select{
    margin-bottom:16px;
}

.coordinator-team-select .field{
    margin:0;
}

.coordinator-team-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin:4px 0 14px;
    padding-bottom:10px;

    border-bottom:2px solid var(--rand);
}

.coordinator-team-title h3{
    margin:0;
    color:var(--blauw);
    font-size:1.25rem;
}

.coordinator-team-title span{
    color:#666;
    font-size:.9rem;
    font-weight:700;
}

.coordinator-add-form{
    margin-bottom:14px;
}

.coordinator-add-form .field{
    margin:0;
}

.coordinator-add-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 30px;
    gap:8px;
    align-items:start;
}

.coordinator-user-picker{
    position:relative;
    min-width:0;
}

.coordinator-user-search{
    width:100%;
    min-width:0;
    padding:7px 10px;

    border:2px solid var(--rand);
    border-radius:10px;

    background:#fff;
    color:var(--zwart);
    font:inherit;
}

.coordinator-user-search:focus{
    outline:none;
    border-color:rgba(32,113,182,.55);
    box-shadow:0 0 0 4px rgba(32,113,182,.10);
}

.coordinator-user-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 5px);
    z-index:80;

    max-height:220px;
    overflow-y:auto;
    overscroll-behavior:contain;

    padding:5px;

    border:2px solid var(--rand);
    border-radius:12px;

    background:#fff;
    box-shadow:0 10px 24px rgba(10,10,10,.16);
}

.coordinator-user-results[hidden]{
    display:none!important;
}

.coordinator-user-option{
    width:100%;
    min-height:38px;
    padding:8px 10px;

    display:flex;
    align-items:center;

    border:0;
    border-radius:8px;

    background:#fff;
    color:var(--zwart);
    box-shadow:none;

    font:inherit;
    text-align:left;
    cursor:pointer;
}

.coordinator-user-option[hidden]{
    display:none!important;
}

.coordinator-user-option:hover,
.coordinator-user-option.is-active{
    background:#eaf6ff;
    color:var(--blauw);
    transform:none;
}

.coordinator-user-option-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.coordinator-user-no-results{
    padding:10px;

    color:#666;
    font-size:.9rem;
    text-align:center;
}

@media(max-width:720px){


    .coordinator-user-results{
        max-height:42dvh;
    }

    .coordinator-user-option{
        min-height:44px;
        padding:10px 12px;
    }
}

.coordinator-member-list{
    display:grid;
    gap:7px;
}

.coordinator-member{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
    padding:8px 10px;

    border:1px solid var(--rand);
    border-radius:12px;

    background:#fff;
}

.coordinator-member-info{
    display:grid;
    gap:2px;
    min-width:0;
    flex:1;
}

.coordinator-member-info strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--blauw);
}

.coordinator-member-info span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#666;
    font-size:.82rem;
}

.coordinator-member-block{
    display:grid;
    min-width:0;
}

.coordinator-member-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex:0 0 auto;
}

.coordinator-member-actions form{
    display:flex;
    margin:0;
}

.coordinator-member-actions .mini{
    flex:0 0 28px;
}

.coordinator-member-actions .mini .luach-icon{
    width:17px;
    height:17px;
}

.coordinator-role-badge{
    display:inline-flex;
    align-items:center;

    padding:4px 8px;
    border-radius:999px;

    background:#eaf6ff;
    color:var(--blauw);

    font-size:.76rem;
    font-weight:800;
}

.coordinator-permission-note{
    margin:0 0 14px;
    padding:10px 12px;

    border-radius:10px;

    background:#fff4df;
    color:#666;

    font-size:.9rem;
}

.coordinator-availability-panel{
    margin-top:20px;
    padding:16px;

    border:2px solid var(--rand);
    border-radius:18px;

    background:#fff;
}

.coordinator-availability-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;

    margin-bottom:14px;
}

.coordinator-availability-header h3{
    margin:0;
    color:var(--blauw);
    font-size:1.18rem;
}

.coordinator-availability-header p{
    margin:4px 0 0;
    color:#666;
    line-height:1.4;
}

.availability-request-form{
    display:grid;
    gap:14px;
}

.availability-date-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.availability-date-grid .field{
    margin:0;
}

.availability-date-grid input[type="date"]{
    width:100%;
    min-width:0;
}

.availability-request-button{
    justify-self:start;
    box-shadow:none;
}

.availability-request-card{
    display:grid;
    gap:14px;

    padding:14px;

    border-radius:14px;

    background:#f8fbfd;
    border:1px solid #d8e7f2;
}

.availability-request-period{
    display:grid;
    gap:3px;
}

.availability-request-period strong{
    color:var(--zwart);
    font-size:1rem;
}

.availability-request-period span{
    color:#666;
    font-size:.86rem;
}

.availability-request-progress{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.availability-progress-item{
    display:grid;
    gap:2px;

    min-width:0;
    padding:10px 8px;

    border-radius:12px;

    text-align:center;
}

.availability-progress-item strong{
    font-size:1.35rem;
    line-height:1;
}

.availability-progress-item span{
    font-size:.78rem;
    font-weight:700;
}

.availability-progress-item.completed{
    background:#eef8ea;
    color:#567b18;
}

.availability-progress-item.pending{
    background:#fff4df;
    color:#9a5c00;
}

.availability-progress-item.total{
    background:#eaf6ff;
    color:var(--blauw);
}

.availability-member-status-list{
    display:grid;
    gap:7px;
}

.availability-member-status{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
    padding:8px 10px;

    border:1px solid var(--rand);
    border-radius:12px;

    background:#fff;
}

.availability-member-status-info{
    display:grid;
    gap:2px;
    min-width:0;
    flex:1;
}

.availability-member-status-info strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--blauw);
}

.availability-member-status-info span{
    font-size:.82rem;
    font-weight:700;
}

.availability-member-completed{
    color:#567b18;
}

.availability-member-pending{
    color:#9a5c00;
}

.availability-member-status-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;
    flex:0 0 22px;
}

.availability-member-status-icon svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.availability-member-status-icon.completed{
    color:var(--groen);
}

.availability-member-status-icon.pending{
    color:var(--oranje);
}

.availability-results{
    display:grid;
    gap:22px;
}

.availability-results h4{
    margin:0;
    font-size:1rem;
}

.availability-date-overview,
.availability-member-overview{
    display:grid;
    gap:10px;
}

.availability-date-list{
    display:grid;
    gap:8px;
}

.availability-date-item{
    display:grid;
    gap:7px;

    padding:10px 12px;

    border:1px solid var(--rand);
    border-radius:12px;

    background:#fff;
}

.availability-date-title{
    color:var(--blauw);
}

.availability-date-members{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
}

.availability-date-member{
    display:inline-flex;
    align-items:center;
    gap:5px;

    font-size:.88rem;
    font-weight:700;
}

.availability-date-member svg,
.availability-person-date-list svg{
    width:15px;
    height:15px;
    flex:0 0 15px;

    fill:none;
    stroke:var(--rood);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.availability-member-entry{
    display:block;
    min-width:0;

    border:1px solid var(--rand);
    border-radius:12px;

    background:#fff;
    overflow:hidden;
}

.availability-member-entry .availability-member-status{
    border:0;
    border-radius:0;
}

details.availability-member-entry > summary{
    cursor:pointer;
    list-style:none;
}

details.availability-member-entry > summary::-webkit-details-marker{
    display:none;
}

details.availability-member-entry > summary::marker{
    display:none;
    content:"";
}

.availability-member-chevron{
    width:8px;
    height:8px;
    flex:0 0 8px;

    margin-left:2px;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:rotate(45deg);
    transition:transform .15s ease;
}

details[open] .availability-member-chevron{
    transform:rotate(225deg);
}

.availability-member-details{
    display:grid;
    gap:8px;

    margin:0 10px 10px;
    padding:10px 12px;

    border-radius:10px;

    background:var(--wit);
}

.availability-member-details[hidden]{
    display:none!important;
}

.coordinator-member-availability{
    margin-top:7px;
    border:1px solid var(--rand);
}

.coordinator-availability-empty{
    margin:0;
    color:#666;
    font-size:.78rem;
    font-weight:400;
    line-height:1.35;
}

.availability-member-details > strong{
    font-size:.88rem;
}

.availability-person-date-list{
    display:grid;
    gap:6px;
}

.availability-person-date-list > span{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:.88rem;
    font-weight:700;
}

.availability-member-date-row{
    display:grid!important;
    grid-template-columns:10px 90px minmax(0, 1fr);
    align-items:center;
    gap:7px!important;
}

.availability-status-dot{
    display:block!important;
    width:9px;
    height:9px;
    flex:0 0 9px;

    border-radius:50%;
}

.availability-member-date-row.available .availability-status-dot{
    background:var(--groen);
}

.availability-member-date-row.unavailable .availability-status-dot{
    background:var(--rood);
}

.availability-member-date-row.pending .availability-status-dot{
    background:transparent;
}

.availability-member-date{
    display:block!important;
    color:var(--zwart);
    font-weight:700;
}

.availability-member-status-text{
    font-size:.88rem;
    font-weight:800;
}

.availability-member-date-row.available
.availability-member-status-text{
    color:#567b18;
}

.availability-member-date-row.unavailable
.availability-member-status-text{
    color:var(--rood);
}

.availability-member-date-row.pending
.availability-member-status-text{
    color:var(--oranje);
}

.availability-no-objections{
    margin:0;
    color:#666;
    font-size:.90rem;
    font-weight:400;
    line-height:1.4;
}

@media(max-width:720px){


  .admin-shell,

  .admin-shell .grid2,

  .admin-panel,

  .tree-list,

  .export-form,

  .beheer-export-grid{

    width:100%;

    max-width:100%;

    min-width:0;

  }

  .beheer-export-grid{

    grid-template-columns:1fr;

  }

  .beheer-export-button{

    justify-self:end;

    align-self:auto;

    margin-bottom:0;

  }

  .admin-panel{

    overflow:hidden;

  }

  .tree-list{

    overflow-x:hidden;

  }

  .tree-line,

  .tree-text{

    max-width:100%;

  }

  .tree-text{

    overflow-wrap:anywhere;

  }


  .addressbook-title-row .account-avatar,
  .coordinator-header .account-avatar,
  .account-header .account-avatar,
  .birthday-title-row .account-avatar,
  .section-title-icon{
    display:none!important;
  }

  .addressbook-title-row,
  .coordinator-header,
  .account-header,
  .birthday-title-row,
  .section-title-row{
    gap:0;
  }

  .coordinator-header p{
    display:none;
  }


    .coordinator-page{
        padding:14px;
    }

    .coordinator-header{
        align-items:flex-start;
    }

    .coordinator-team-title{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .coordinator-member{
        align-items:center;
    }

    .coordinator-role-badge{
        font-size:.7rem;
    }

    .coordinator-availability-panel{
        padding:14px;
    }

    .coordinator-availability-header{
        margin-bottom:12px;
    }

    .coordinator-availability-header p{
        display:none;
    }

    .availability-date-grid{
        grid-template-columns:1fr;
    }

    .availability-request-button{
        width:100%;
        justify-content:center;
    }

    .availability-request-progress{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:5px;
    }

    .availability-progress-item{
        padding:9px 4px;
    }

    .availability-progress-item strong{
        font-size:1.2rem;
    }

    .availability-progress-item span{
        font-size:.7rem;
    }
}
.foreign-address-toggle{
    margin:8px 0 4px;
}

.foreign-country-field{
    display:none;
}

.foreign-country-field.is-visible{
    display:block;
}

.foreign-country-field input{
    width:100%;
    padding:7px 10px;
    border:2px solid var(--rand);
    border-radius:10px;
    font:inherit;
}

/* Pagina Mijn beschikbaarheid */
.availability-page{
    max-width:680px;
}

.availability-page-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.availability-page-header h2{
    margin:0;
    color:var(--zwart);
}

.availability-page-header p{
    margin:4px 0 0;
    color:#666;
    line-height:1.4;
}

.availability-request-select{
    margin-bottom:16px;
}

.availability-request-select .field{
    margin:0;
}

.availability-request-select select{
    width:100%;
    min-width:0;
}

.availability-period-card{
    display:grid;
    gap:4px;

    margin-bottom:16px;
    padding:14px;

    border:1px solid #d8e7f2;
    border-radius:14px;

    background:#f8fbfd;
}

.availability-period-card strong{
    color:var(--blauw);
    font-size:1.08rem;
}

.availability-period-card span{
    color:var(--zwart);
    font-weight:800;
}

.availability-period-card small{
    margin-top:4px;
    color:#666;
    line-height:1.4;
}

.availability-form{
    display:grid;
    gap:16px;
}

.availability-date-list{
    display:grid;
    gap:8px;
}

.availability-date-option{
    display:grid;
    grid-template-columns:42px auto minmax(0,1fr);
    gap:10px;
    align-items:start;

    min-width:0;
    padding:10px 12px;

    border:2px solid var(--rand);
    border-radius:14px;

    background:#fff;
    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.availability-date-option:hover{
    transform:translateY(-2px);
    border-color:rgba(32,113,182,.45);
    box-shadow:0 6px 14px rgba(10,10,10,.08);
}

.availability-date-option input[type="checkbox"]{
    appearance:none;

    width:42px;
    height:24px;
    margin:0;

    border-radius:999px;

    background:var(--groen);
    position:relative;
    cursor:pointer;

    transition:background .18s ease;
}

.availability-date-option input[type="checkbox"]::after{
    content:"";

    position:absolute;
    top:3px;
    left:21px;

    width:18px;
    height:18px;

    border-radius:50%;
    background:#fff;

    transition:left .18s ease;
}

.availability-date-option input[type="checkbox"]:checked{
    background:var(--rood);
}

.availability-date-option input[type="checkbox"]:checked::after{
    left:3px;
}

.availability-date-option strong{
    min-width:0;

    color:var(--zwart);
    font-size:.96rem;
    line-height:1.3;
}

.availability-date-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:105px;
    padding:5px 9px;

    border-radius:999px;

    background:#eef8ea;
    color:#567b18;

    font-size:.75rem;
    font-weight:900;
    text-align:center;
}

.availability-status-available{
    display:inline;
}

.availability-status-unavailable{
    display:none;
}

.availability-date-option.is-unavailable{
    border-color:rgba(224,2,12,.35);
    background:#fff5f5;
}

.availability-date-option.is-unavailable .availability-date-status{
    background:#ffe0e0;
    color:var(--rood);
}

.availability-date-option.is-unavailable .availability-status-available{
    display:none;
}

.availability-date-option.is-unavailable .availability-status-unavailable{
    display:inline;
}

.availability-date-option.is-unavailable strong{
    color:#666;
    text-decoration:line-through;
    text-decoration-thickness:1.5px;
}

.availability-save-button{
    justify-self:end;
    box-shadow:none;
}

.availability-save-button.disabled,
.availability-save-button:disabled{
    opacity:.5;
    pointer-events:none;
}

@media(max-width:720px){
    .availability-page{
        padding:14px;
    }

    .availability-page-header{
        align-items:flex-start;
        gap:0;
        margin-bottom:16px;
    }

    .availability-page-header .account-avatar{
        display:none!important;
    }

    .availability-page-header p{
        display:none;
    }

    .availability-date-option{
        grid-template-columns:42px 1fr;
        gap:8px 10px;
        padding:10px;
    }

    .availability-date-status{
        justify-self:start;
        min-width:0;
    }

        .availability-date-content{
        grid-column:1 / -1;
        padding-left:2px;
    }

    .availability-date-option strong{
        padding-left:0;
    }

    .availability-save-button{
        width:100%;
        justify-self:stretch;
        justify-content:center;
    }
}


.availability-date-content{

    display:block;

    min-width:0;

}

.availability-date-content strong{

    display:flex;

    align-items:center;

    gap:7px;

}

.availability-history-dot{

    display:inline-block;

    flex:0 0 auto;

    width:9px;

    height:9px;

    border-radius:50%;

    background:var(--oranje);

    box-shadow:0 0 0 2px rgba(240,146,0,.16);

}

.availability-history-explanation{

    display:flex;

    align-items:center;

    gap:7px;

}

.availability-date-remark{
    display:block;
    margin-top:4px;
    color:#666;
    font-size:.86rem;
    font-style:italic;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
}

.availability-date-option.is-unavailable .availability-date-remark{
    color:#777;
}


.availability-close-form{
    display:flex;
    justify-content:flex-end;

    margin-top:18px;
    padding-top:16px;

    border-top:1px solid var(--rand);
}

.availability-close-button{
    width:auto;
}

/* Datums selecteren in de wizard Beschikbaarheid opvragen */
.availability-request-form .availability-date-option{
    display:block;
    min-width:0;

    margin-bottom:10px;
    padding:10px 12px;

    border:2px solid var(--rand);
    border-radius:14px;

    background:#fff;
    cursor:default;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.availability-request-form .availability-date-option:hover{
    transform:none;
    border-color:rgba(32,113,182,.45);
    box-shadow:0 4px 12px rgba(10,10,10,.07);
}

.availability-request-form .checkbox-wrapper{
    display:flex;
    align-items:center;
    min-width:0;
}

.availability-request-form .checkbox-wrapper .input{
    position:absolute;

    width:1px;
    height:1px;
    margin:-1px;
    padding:0;

    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;
    border:0;

    appearance:none;
}

.availability-request-form .checkbox-wrapper label{
    display:inline-block;
}

.availability-request-form .checkbox-wrapper .checkbox{
    position:relative;
    top:0;

    width:24px;
    height:24px;
    flex:0 0 24px;

    border:1px solid #c8ccd4;
    border-radius:4.8px;

    background:#fff;
    vertical-align:middle;

    transition:
        background .1s ease,
        border-color .1s ease;

    cursor:pointer;
}

.availability-request-form .checkbox-wrapper .checkbox::after{
    content:"";

    position:absolute;
    top:1px;
    left:8px;

    width:7px;
    height:16px;

    opacity:0;
    transform:rotate(45deg) scale(0);

    border-right:2px solid #fff;
    border-bottom:2px solid #fff;

    transition:all .3s ease;
    transition-delay:.15s;
}

.availability-request-form .checkbox-wrapper .label{
    min-width:0;
    margin-left:10px;

    color:var(--zwart);
    font-size:.96rem;
    font-weight:700;
    line-height:1.35;

    vertical-align:middle;
    cursor:pointer;
}

.availability-request-form .checkbox-wrapper .availability-date-text{
    white-space:nowrap;
}

.availability-request-form .checkbox-wrapper .input:checked ~ .checkbox{
    border-color:transparent;
    background:var(--blauw);
    animation:jelly .6s ease;
}

.availability-request-form .checkbox-wrapper .input:checked ~ .checkbox::after{
    opacity:1;
    transform:rotate(45deg) scale(1);
}

.availability-request-form .checkbox-wrapper .input:focus-visible ~ .checkbox{
    outline:3px solid rgba(32,113,182,.22);
    outline-offset:2px;
}

.availability-request-form .availability-remark{
    display:none;
    margin:9px 0 0 34px;
}

.availability-request-form .availability-remarks-editor{
    display:grid;
    gap:5px;

    width:100%;
    max-width:420px;
}

.availability-request-form .availability-remark-list{
    display:grid;
    justify-items:start;
    gap:2px;
}

.availability-request-form .availability-remark-entry{
    margin:0;
}

.availability-request-form .availability-remark-input{
    display:block;

    width:100%;
    min-height:38px;
    height:38px;
    padding:7px 10px;

    border:2px solid var(--rand);
    border-radius:10px;

    background:#fff;
    color:var(--zwart);
    font:inherit;
    line-height:1.35;

    resize:none;
    overflow:hidden;
}

.availability-request-form .availability-remark-input:focus{
    outline:none;
    border-color:rgba(32,113,182,.55);
    box-shadow:0 0 0 4px rgba(32,113,182,.10);
}

@keyframes jelly{
    from{
        transform:scale(1, 1);
    }

    30%{
        transform:scale(1.25, .75);
    }

    40%{
        transform:scale(.75, 1.25);
    }

    50%{
        transform:scale(1.15, .85);
    }

    65%{
        transform:scale(.95, 1.05);
    }

    75%{
        transform:scale(1.05, .95);
    }

    to{
        transform:scale(1, 1);
    }
}

@media(max-width:720px){
    .availability-request-form .availability-date-option{
        display:block;
        padding:9px 10px;
    }

    .availability-request-form .checkbox-wrapper .availability-date-text{
        white-space:normal;
    }

    .availability-request-form .availability-remark{
        margin-left:34px;
    }
}

.availability-review-section {
    margin-top: 24px;
}

.availability-review-section:first-child {
    margin-top: 0;
}

.availability-review-dates {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.review-date-label {
    font-weight: 600;
}

.review-remark {
    margin-top: 2px;
    margin-left: 18px;
    font-style: italic;
}

.review-members {
    margin: 0;
    padding-left: 22px;
}


/* Contactpersonen op de beheerpagina */
.beheer-contact-section{
    margin-top:24px;
    padding-top:20px;
    border-top:2px solid var(--rand);
}

.beheer-contact-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.beheer-contact-heading h3{
    margin:0;
    color:var(--blauw);
    font-size:1.18rem;
}

.beheer-contact-heading > span{
    color:#666;
    font-size:.82rem;
    font-weight:700;
}

.contact-domain-list{
    display:grid;
    gap:4px;

    max-height:220px;
    overflow-y:auto;

    margin-bottom:14px;
    padding:5px;

    border:2px solid var(--rand);
    border-radius:12px;

    background:#fff;
}

.contact-domain-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    min-width:0;
    padding:7px 9px;

    border-radius:8px;

    color:var(--zwart);
    text-decoration:none;

    transition:
        background .18s ease,
        transform .18s ease;
}

.contact-domain-item:hover{
    background:#fff4c6;
    transform:translateX(3px);
}

.contact-domain-item.selected{
    background:#eaf4ff;
    outline:1px solid rgba(32,113,182,.22);
}

.contact-domain-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.contact-domain-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:24px;
    height:22px;
    padding:0 7px;

    border-radius:999px;

    background:var(--geel);
    color:var(--zwart);

    font-size:.75rem;
    font-weight:900;
}

.contact-domain-empty{
    margin:8px 0 14px;
    color:#666;
    font-size:.9rem;
}

.contact-domain-users-form{
    display:grid;
    gap:10px;
}

.contact-domain-users-heading{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.contact-domain-users-heading strong{
    color:var(--zwart);
}

.contact-domain-users-heading span{
    display:inline-flex;
    align-items:center;

    padding:3px 8px;

    border-radius:999px;

    background:var(--geel);
    color:var(--zwart);

    font-size:.8rem;
    font-weight:800;
}

.contact-domain-user-list{
    display:grid;
    gap:4px;

    max-height:310px;
    overflow-y:auto;

    padding:6px;

    border:2px solid var(--rand);
    border-radius:12px;

    background:#fff;
}

.contact-domain-user{
    display:flex;
    align-items:center;
    gap:9px;

    min-width:0;
    padding:7px 8px;

    border-radius:8px;

    cursor:pointer;
}

.contact-domain-user:hover{
    background:#fff4c6;
}

.contact-domain-user input[type="checkbox"]{
    width:16px;
    height:16px;
    flex:0 0 16px;
    margin:0;
}

.contact-domain-user-info{
    display:grid;
    gap:1px;
    min-width:0;
}

.contact-domain-user-info strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--blauw);
    font-size:.9rem;
}

.contact-domain-user-info small{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#666;
    font-size:.76rem;
}

.contact-domain-save-row{
    display:flex;
    justify-content:flex-end;
}

@media(max-width:720px){
    .beheer-contact-section{
        margin-top:20px;
        padding-top:16px;
    }

    .contact-domain-user-list{
        max-height:42dvh;
    }

    .contact-domain-user{
        min-height:42px;
    }
}


/* Contactpersonen in het adresboek */
.addressbook-contact-filter{
    display:flex;
    align-items:center;
    gap:7px;

    min-height:24px;

    color:var(--zwart);
    font-size:.92rem;
    font-weight:400;

    cursor:pointer;
}

.addressbook-contact-filter input[type="checkbox"]{
    width:14px;
    height:14px;
    margin:0;
}

.addressbook-filter-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.addressbook-active-contact-filter{
    display:flex;
    align-items:center;
    gap:6px;

    width:max-content;
    max-width:100%;

    margin-top:6px;
    margin-bottom:8px;
}

.addressbook-active-contact-filter > span,
.contact-domain-badge{
    display:inline-flex;
    align-items:center;

    width:max-content;
    max-width:100%;

    padding:3px 8px;

    border-radius:6px;

    background:var(--geel);
    color:var(--zwart);

    font-size:.78rem;
    font-weight:800;
    line-height:1.3;

    white-space:normal;
    overflow-wrap:anywhere;
}

.addressbook-active-contact-filter a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;
    min-width:20px;

    padding:0;

    border-radius:50%;

    background:var(--rood);
    color:#fff;

    font-size:.9rem;
    font-weight:900;
    line-height:1;

    text-decoration:none;
}

.addressbook-name-content{
    display:grid;
    gap:5px;
    flex:1;
    min-width:0;
}

.addressbook-name-content h3{
    margin:0;
}

.addressbook-contact-summary{
    display:grid;
    justify-items:start;
    gap:4px;
}

.addressbook-contact-domains{
    display:grid;
    justify-items:start;
    gap:5px;

    margin:6px 0 12px;
    padding-left:29px;
}

.addressbook-card .addressbook-contact-domains{
    max-height:300px;
    opacity:1;
    transform:translateY(0);
    overflow:hidden;

    transition:
        max-height .32s ease,
        opacity .24s ease,
        transform .24s ease,
        margin .24s ease,
        padding .24s ease;
}

.addressbook-card.is-collapsed .addressbook-contact-domains{
    max-height:0;
    opacity:0;
    transform:translateY(-8px);

    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;

    pointer-events:none;
}

.addressbook-card-summary{
    flex:0 0 auto;
}

@media(max-width:720px){
    .addressbook-name-row{
        align-items:flex-start;
    }

    .addressbook-contact-summary{
        margin-top:1px;
    }

    .addressbook-contact-domains{
        padding-left:0;
    }

    /*
     * Namen, gasten en persoonlijke notities in de agenda
     * altijd onder elkaar plaatsen.
     */
    .schedule td[data-agenda-person-cell="1"]
    > .assignment-entry{
        display:flex!important;
        float:none!important;
        clear:both!important;

        width:max-content;
        max-width:100%;

        margin:1px auto!important;
    }

    /*
     * Iedere naam krijgt zijn eigen volledige regel.
     */
    .schedule td[data-agenda-person-cell="1"]
    > .assignment-entry + .assignment-entry{
        margin-top:2px!important;
    }

    /*
     * Opmerkingen ook op een telefoon volgens de door
     * JavaScript gemaakte regels weergeven.
     */
    .schedule
    td[data-agenda-note-cell="1"]
    .note-entry{
        display:flex!important;
        float:none!important;
        clear:both!important;

        width:max-content;
        max-width:none;

        margin:1px auto!important;
    }

    .schedule
    td[data-agenda-note-cell="1"]
    .note-entry
    .entry-label{
        display:block!important;

        width:auto!important;
        min-width:0!important;
        max-width:none!important;

        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;

        hyphens:manual!important;
        -webkit-hyphens:manual!important;
    }

    .schedule
    td[data-agenda-note-cell="1"]
    .agenda-note-line{
        display:block!important;

        width:max-content!important;
        min-width:0!important;
        max-width:none!important;

        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
    }
}

@media(max-width:720px){
    .supervisor-mode-label{
        display:none;
    }
}

/* PWA-installatie op het dashboard */
.home-install-app-block{
    border-color:var(--groen);
    background:#f8fced;
    padding:0;
    overflow:hidden;
}

.home-install-app-block[hidden]{
    display:none!important;
}

.home-install-app-button{
    width:100%;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    padding:13px 14px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--zwart);
    box-shadow:none;
    text-align:left;
}

.home-install-app-button:hover{
    background:rgba(149,193,31,.10);
    transform:none;
}

.home-install-app-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--groen);
    color:#fff;
}

.home-install-app-icon .luach-icon{
    width:21px;
    height:21px;
}

.home-install-app-text{
    display:grid;
    gap:2px;
    min-width:0;
}

.home-install-app-text strong{
    color:var(--blauw);
    font-size:1rem;
}

.home-install-app-text small{
    color:#666;
    font-size:.82rem;
    font-weight:700;
}

.home-install-app-arrow{
    color:var(--groen);
    font-size:1.7rem;
    font-weight:900;
    line-height:1;
}

.home-install-ios-help{
    margin:0 14px 13px 56px;
    padding:9px 10px;
    border-radius:9px;
    background:#fff;
    color:#666;
    font-size:.82rem;
    line-height:1.4;
}