@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/*
 * Nookivo UI-contract
 * Deze laag wordt als laatste geladen en bewaakt de productbrede basis.
 * Scherm-CSS bepaalt layout; deze laag bepaalt leesbaarheid en bediening.
 */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --ui-text: 15px;
  --ui-text-secondary: 13px;
  --ui-target: 44px;
  --ui-focus: 0 0 0 3px rgba(35, 110, 102, .22);
}

html { font-size: 16px; }
body { font-family: var(--font-sans); font-size: var(--ui-text); }
h1, h2, h3, .jaar-btn, .geb-naam { font-family: var(--font-serif); }

small,
.menu-profiel small,
.menu-label,
.sidebar-item small,
.geb-audio-kop p:last-child,
.geb-audio-groep > strong,
.geb-audio-item small,
.geb-audio-leeg,
.audio-dock small,
.rm-stat-label,
.rm-meta,
.rm-beschrijving,
.rm-detail h3 {
  font-size: var(--ui-text-secondary) !important;
  line-height: 1.4;
}

button,
[role='button'],
summary,
.menu-link,
.sidebar-item,
.filter-chip,
.modal-sluit,
.btn-icoon,
.icon-btn {
  min-block-size: var(--ui-target);
}

button,
.menu-link,
.sidebar-item,
.filter-chip {
  font-size: var(--ui-text-secondary);
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
select,
textarea {
  min-block-size: var(--ui-target);
  font-size: 16px;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 2px;
  box-shadow: var(--ui-focus);
}

.menu-pop button,
.menu-pop .menu-link,
.menu-groep summary,
.menu-groep-inhoud button,
.menu-groep-inhoud .menu-link {
  min-height: var(--ui-target);
  font-size: var(--ui-text-secondary);
}
.menu-profiel-avatar { width: 44px; height: 44px; font-size: 13px; }

.header-notificatie-knop,
.header-profiel-knop,
.sidebar-toggle,
.audio-dock > button,
.geb-audio-item > button,
.geb-audio-verwijder {
  position: relative;
  width: var(--ui-target);
  min-width: var(--ui-target);
  height: var(--ui-target);
  min-height: var(--ui-target);
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.header-notificatie-knop {
  border: 1px solid var(--kleur-rand);
  border-radius: 50%;
  background: var(--kleur-kaart);
  color: var(--kleur-tekst);
  cursor: pointer;
  font-size: 21px;
}
.header-notificatie-knop:hover,
.header-notificatie-knop.notif-open {
  border-color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
}
.header-notificatie-knop .notif-badge { position: absolute; top: -2px; right: -2px; }

.audio-dock {
  grid-template-columns: 44px minmax(120px, 1fr) minmax(100px, 2fr) 44px;
}
.audio-toevoegen-kaart #audio-toevoegen-status {
  min-height: 22px;
  margin: 8px 0;
  font-size: var(--ui-text-secondary) !important;
  line-height: 1.4;
}

.profiel-avatar-kaart {
  margin-bottom: 1rem;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--kleur-rand);
  border-radius: 16px;
  background: var(--kleur-achtergrond);
}

.profiel-avatar-mini {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--kleur-accent-zacht, #e4f2ef);
  color: var(--kleur-accent-donker, #164f48);
  font-size: 20px;
  font-weight: 700;
}

.profiel-avatar-wijzigen {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--kleur-accent-donker);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.menu-profiel-avatar { overflow: hidden; }
.menu-profiel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kalender-kaart {
  width: min(600px, calc(100vw - 24px));
  max-height: min(860px, calc(100dvh - 24px));
  overflow-y: auto;
}

.kalender-inhoud { padding: 4px 24px 24px; }
.kalender-intro { margin-bottom: 18px; }
.kal-zoekbalk { min-height: 48px; }
.kal-maandkop { min-height: 44px; }
.kal-actie-btn { width: 44px; height: 44px; }
.kal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kal-form-grid .meta-veld:first-child,
.kal-notitie-veld { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .kalender-kaart {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }
  .kalender-inhoud { padding: 2px 16px 18px; }
  .kal-formulier { padding: 16px; }
  .kal-form-grid { grid-template-columns: 1fr; gap: 12px; }
  .kal-form-grid .meta-veld,
  .kal-notitie-veld { grid-column: 1; }
  .kal-rij {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
  }
  .kal-acties {
    grid-column: 2;
    justify-content: flex-start;
  }
  .kal-titel,
  .kal-meta-tekst {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.profiel-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-reisdag-datum {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  font-weight: 650;
}

.lb-reisdag-datum[hidden] { display: none; }

.lb-reisdag-titelrij {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-reisdag-titelrij .lb-reisdag-bewerken {
  width: 40px;
  height: 40px;
  min-block-size: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
}

.lb-reisdag-titelrij .lb-reisdag-bewerken[hidden] { display: none; }

.lb-desktop-paneel-toggle { display: none; }

@media (min-width: 700px) {
  .lb-desktop-paneel-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
  }

  .lightbox-overlay.lb-desktop-paneel-dicht .lb-panel { display: none !important; }
  .lightbox-overlay.lb-desktop-paneel-dicht .lb-foto-wrap {
    flex: 1 1 100% !important;
    width: 100%;
    max-width: none;
  }
  .lightbox-overlay.lb-desktop-paneel-dicht .lb-scherm {
    width: min(100%, 1680px);
    max-width: 100%;
  }

  .lb-album-context.is-reisdag.is-daglabel {
    width: fit-content;
    max-width: calc(100vw - 48px);
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
  }

  .lb-album-context.is-reisdag.is-daglabel strong {
    max-width: min(260px, 28vw);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-titelrij {
    grid-column: auto;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-datum,
  .lb-album-context.is-reisdag.is-daglabel .lb-context-locatie,
  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-fototelling {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-titelrij .lb-reisdag-bewerken {
    width: 36px;
    height: 36px;
    min-block-size: 36px;
    flex-basis: 36px;
  }
}

@media (max-width: 700px) {
  .lb-album-context.is-reisdag.is-daglabel {
    right: 10px;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 10px 12px 9px 16px;
    border-radius: 16px;
  }

  .lb-album-context.is-reisdag.is-daglabel strong {
    max-width: none;
    overflow: visible;
    font-size: 13px;
    text-overflow: clip;
    white-space: normal;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-titelrij {
    grid-column: 1 / -1;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-datum {
    grid-column: 1 / -1;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-context-locatie,
  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-fototelling {
    grid-column: auto;
    width: fit-content;
    max-width: none;
    overflow: visible;
    font-size: 11px;
    text-overflow: clip;
    white-space: normal;
  }

  .lb-album-context.is-reisdag.is-daglabel .lb-reisdag-titelrij .lb-reisdag-bewerken {
    width: 36px;
    height: 36px;
    min-block-size: 36px;
    flex-basis: 36px;
  }
}

@media (max-width: 600px) {
  body.app-actief .bottomnav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.app-actief .bn-item {
    width: auto;
    min-width: 0;
    min-height: 52px;
    font-size: 13px;
    line-height: 1.05;
  }
  body.app-actief #bn-gebeurtenissen-btn span {
    min-height: 0;
    font-size: 13px;
    line-height: 1.05;
  }
  .header-notificatie-knop,
  .header-profiel-knop { width: 44px; height: 44px; }
  .notif-dropdown {
    position: fixed !important;
    top: 70px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 86px);
  }
  .audio-dock { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .audio-toevoegen-kaart .audio-form-acties { position: static; }
}