/* Leerling360 – licht thema bovenop Bootstrap 5.3, vormgeving volgens design/pages */

/* ---------- Kleuren en basis ---------- */
:root {
  /*
   * Kleurenpalet Leerling360 (Leerling360_Kleurenpalet.docx) is leidend. De logokleuren (navy en teal,
   * design/logos) gebruiken we alleen als accent: tellers, meldingen en het logo zelf.
   */

  /* Basiskleuren uit het palet */
  --l360-dark-green: #062f2b;   /* Donkergroen: zijbalk en primaire navigatie */
  --l360-forest: #073b34;       /* Bosgroen: dashboardbanner en donkere secties */
  --l360-jade: #087b60;         /* Jadegroen: actieve tabs, links en accenten */
  --l360-action: #0c886a;       /* Actiegroen: primaire knoppen en acties */
  --l360-bright: #20ad83;       /* Heldergroen: knoppen in donkere banners */
  --l360-mint-light: #78dfbb;   /* Licht mintgroen: tekstaccenten op donkere vlakken */
  --l360-mint: #e5f4ee;         /* Mintgroen: subtiele achtergronden en badges */
  --l360-page: #f5f7f8;         /* Lichtgrijs: pagina-achtergrond */
  --l360-white: #ffffff;        /* Wit: kaarten, formulieren en panelen */
  --l360-text: #102b29;         /* Donkere tekst: koppen en primaire tekst */
  /* Grijsgroen: secundaire tekst en metadata. Palet: #71817e; iets donkerder voor voldoende contrast (4,9:1) */
  --l360-muted: #5f6f6c;
  --l360-border: #e1e9e7;       /* Randgrijs: randen, lijnen en scheidingen */

  /* Statuskleuren uit het palet (tekst / achtergrond) */
  /* Palet: #218261; iets donkerder voor voldoende contrast op de lichte achtergrond (5,5:1) */
  --l360-success: #1b6f53;
  --l360-success-bg: #e8f7ef;
  --l360-warning: #b9821e;
  /* Donkerdere tint van dezelfde waarschuwingskleur voor kleine tekst (voldoende contrast) */
  --l360-warning-text: #8a6116;
  --l360-warning-bg: #fff5dc;
  --l360-error: #b42318;
  --l360-error-bg: #fde7e5;
  --l360-info: #087b60;
  --l360-info-bg: #e4f4ee;

  /* Logokleuren: alleen als accent */
  --l360-navy: #0e2536;
  --l360-teal: #14baa1;

  /* Afgeleid: knoppen, oppervlakken en de zijbalk */
  /* Knoppen met witte tekst in Jadegroen: wit op Actiegroen haalt net geen 4,5:1, op Jadegroen 5,2:1 */
  --l360-primary: var(--l360-jade);
  --l360-primary-rgb: 8, 123, 96;
  --l360-primary-hover: var(--l360-forest);
  --l360-primary-subtle: var(--l360-mint);
  --l360-primary-text: var(--l360-jade);
  --l360-on-primary: var(--l360-white);
  --l360-surface: var(--l360-white);
  --l360-surface-2: var(--l360-page);
  --l360-shadow: 0 5px 22px rgba(6, 47, 43, .05);
  --l360-brand-from: var(--l360-forest);
  --l360-brand-to: var(--l360-jade);
  --l360-sidebar-from: var(--l360-dark-green);
  --l360-sidebar-to: var(--l360-forest);
  --l360-sidebar-text: rgba(255, 255, 255, .78);
  --l360-sidebar-muted: var(--l360-mint-light);
  --l360-sidebar-hover: rgba(255, 255, 255, .07);
  --l360-sidebar-active: var(--l360-jade);

  --bs-body-bg: var(--l360-page);
  --bs-body-color: var(--l360-text);
  --bs-secondary-color: var(--l360-muted);
  --bs-border-color: var(--l360-border);
  --bs-primary: var(--l360-primary);
  --bs-primary-rgb: var(--l360-primary-rgb);
  --bs-link-color: var(--l360-jade);
  --bs-link-color-rgb: 8, 123, 96;
  --bs-link-hover-color: var(--l360-forest);
  --bs-link-hover-color-rgb: 7, 59, 52;
  --bs-focus-ring-color: rgba(var(--l360-primary-rgb), .3);

  /* Bootstrap-statusklassen (text-danger, alert-success, ...) in de paletkleuren */
  --bs-success: var(--l360-success);
  --bs-success-rgb: 27, 111, 83;
  --bs-success-text-emphasis: var(--l360-success);
  --bs-success-bg-subtle: var(--l360-success-bg);
  --bs-success-border-subtle: #bfe3cf;
  --bs-danger: var(--l360-error);
  --bs-danger-rgb: 180, 35, 24;
  --bs-danger-text-emphasis: var(--l360-error);
  --bs-danger-bg-subtle: var(--l360-error-bg);
  --bs-danger-border-subtle: #f5c4bf;
  --bs-warning: var(--l360-warning);
  --bs-warning-rgb: 185, 130, 30;
  --bs-warning-text-emphasis: var(--l360-warning-text);
  --bs-warning-bg-subtle: var(--l360-warning-bg);
  --bs-warning-border-subtle: #f0dca8;
  --bs-info-text-emphasis: var(--l360-info);
  --bs-info-bg-subtle: var(--l360-info-bg);
  --bs-info-border-subtle: #bfe3d5;

  --bs-font-sans-serif: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
}

html {
  font-size: 15px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  letter-spacing: -.015em;
}

/* ---------- Knoppen ---------- */
.btn {
  --bs-btn-border-radius: .625rem;
  font-weight: 600;
}

.btn-primary {
  --bs-btn-color: var(--l360-on-primary);
  --bs-btn-bg: var(--l360-primary);
  --bs-btn-border-color: var(--l360-primary);
  --bs-btn-hover-color: var(--l360-on-primary);
  --bs-btn-hover-bg: var(--l360-primary-hover);
  --bs-btn-hover-border-color: var(--l360-primary-hover);
  --bs-btn-active-color: var(--l360-on-primary);
  --bs-btn-active-bg: var(--l360-primary-hover);
  --bs-btn-active-border-color: var(--l360-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--l360-primary-text);
  --bs-btn-border-color: var(--l360-primary);
  --bs-btn-hover-color: var(--l360-on-primary);
  --bs-btn-hover-bg: var(--l360-primary);
  --bs-btn-hover-border-color: var(--l360-primary);
  --bs-btn-active-color: var(--l360-on-primary);
  --bs-btn-active-bg: var(--l360-primary-hover);
  --bs-btn-active-border-color: var(--l360-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}

/* Lichte knop, zoals "secondary" in het design */
.btn-soft {
  --bs-btn-color: var(--l360-primary-text);
  --bs-btn-bg: var(--l360-primary-subtle);
  --bs-btn-border-color: color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 12%);
  --bs-btn-hover-color: var(--l360-forest);
  --bs-btn-hover-bg: color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 14%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 20%);
  --bs-btn-active-color: var(--l360-forest);
  --bs-btn-active-bg: color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 20%);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}

.btn-ms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background: var(--l360-surface);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--l360-shadow);
}

.btn-ms:hover,
.btn-ms:focus-visible {
  color: var(--bs-body-color);
  background: var(--l360-surface-2);
  border-color: var(--l360-primary);
}

/* Centrale inlogpagina: schoolaccount of ouder */
.login-choice {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.25rem;
}

.login-choice-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.login-choice-hint {
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

.btn-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1rem;
  font-weight: 600;
  /* Zelfde kleuren als .btn-primary, ook bij hover en klikken (Bootstrap maakt de achtergrond anders doorzichtig) */
  --bs-btn-color: var(--l360-on-primary);
  --bs-btn-bg: var(--l360-primary);
  --bs-btn-border-color: var(--l360-primary);
  --bs-btn-hover-color: var(--l360-on-primary);
  --bs-btn-hover-bg: var(--l360-primary-hover);
  --bs-btn-hover-border-color: var(--l360-primary-hover);
  --bs-btn-active-color: var(--l360-on-primary);
  --bs-btn-active-bg: var(--l360-primary-hover);
  --bs-btn-active-border-color: var(--l360-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--bs-secondary-color);
  background: transparent;
  border: 1px solid var(--l360-border);
  border-radius: .375rem;
}

.btn-copy:hover {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.btn-copy svg {
  width: 1rem;
  height: 1rem;
}

.btn-copy .icon-check,
.btn-copy.is-copied .icon-copy {
  display: none;
}

.btn-copy.is-copied .icon-check {
  display: block;
}

/* ---------- Logo en avatar ---------- */
/* Logo's uit design/logos: wit op donker (zijbalk, inlogpagina), donker op licht (mobiel inloggen) */
.brand-logo {
  display: block;
  width: auto;
  height: 2.5rem;
}

.auth-brand-logo {
  display: block;
  width: 13rem;
  max-width: 100%;
  height: auto;
}

.auth-mobile-logo img {
  display: block;
  width: auto;
  height: 2.5rem;
}

.avatar {
  --size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  font-size: calc(var(--size) * .4);
  font-weight: 600;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.avatar-lg {
  --size: 4rem;
}

/* ---------- App-layout: zijbalk + bovenbalk ---------- */
body.app {
  min-height: 100vh;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  --bs-offcanvas-width: 17rem;
  --bs-offcanvas-bg: var(--l360-sidebar-from);
  --bs-offcanvas-color: var(--l360-white);
  display: flex;
  flex-direction: column;
  color: var(--l360-white);
  background-image: linear-gradient(170deg, var(--l360-sidebar-from) 0%, var(--l360-sidebar-from) 55%, var(--l360-sidebar-to) 100%);
}

@media (min-width: 992px) {
  .sidebar.offcanvas-lg {
    position: sticky;
    top: 0;
    flex: 0 0 16.5rem;
    width: 16.5rem;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
  }
}

/* Telefoon en tablet: het uitgeschoven menu scrolt zelf (anders vallen de onderste onderdelen weg op een klein scherm) */
@media (max-width: 991.98px) {
  .sidebar.offcanvas-lg {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar.offcanvas-lg .sidebar-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--l360-sidebar-from);
  }
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.25rem 1rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--l360-white);
  text-decoration: none;
}

.sidebar-brand:hover {
  color: var(--l360-white);
}

.sidebar-close {
  filter: invert(1) grayscale(1) brightness(2);
}

@media (min-width: 992px) {
  .sidebar-close {
    display: none;
  }
}

.sidebar-nav {
  flex: 1;
  padding: 0 .875rem 1rem;
}

.nav-group-title {
  margin: 1.25rem .75rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--l360-sidebar-muted);
}

.nav-group-title:first-child {
  margin-top: .25rem;
}

.side-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .1875rem;
  padding: .5625rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--l360-sidebar-text);
  text-decoration: none;
  border-radius: .625rem;
}

.side-link:hover {
  color: var(--l360-white);
  background: var(--l360-sidebar-hover);
}

.side-link > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-link.active {
  color: var(--l360-white);
  background: var(--l360-sidebar-active);
}

.side-link.active .nav-icon {
  color: var(--l360-mint-light);
}

.side-link.is-soon,
.side-link.is-soon:hover {
  color: var(--l360-sidebar-muted);
  background: transparent;
  cursor: default;
}

.soon-tag {
  flex-shrink: 0;
  margin-left: auto;
  padding: .0625rem .4375rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--l360-sidebar-muted);
  border: 1px solid rgba(120, 223, 187, .3);
  border-radius: 999px;
}

.nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.sidebar-foot {
  padding: 1rem 1.25rem 1.5rem;
  font-size: .75rem;
  color: var(--l360-sidebar-muted);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.app-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 4.25rem;
  padding: .625rem 2rem;
  background: color-mix(in srgb, var(--l360-surface), transparent 5%);
  border-bottom: 1px solid var(--l360-border);
  backdrop-filter: blur(8px);
}

.topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--bs-body-color);
  background: var(--l360-surface-2);
  border: 1px solid var(--l360-border);
  border-radius: .625rem;
}

.topbar-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.breadcrumb-path {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

.breadcrumb-path > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-path b {
  color: var(--bs-body-color);
}

.breadcrumb-path .sep {
  flex-shrink: 0;
  opacity: .5;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.school-pill {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .3125rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--l360-primary-text);
  white-space: nowrap;
  background: var(--l360-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 15%);
  border-radius: .625rem;
}

.school-pill i {
  width: .4375rem;
  height: .4375rem;
  background: var(--l360-primary);
  border-radius: 50%;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 90rem;
  padding: 2rem 2rem 3rem;
}

@media (max-width: 767.98px) {
  .topbar {
    padding-inline: 1rem;
  }

  .app-main {
    padding: 1.25rem 1rem 2.5rem;
  }
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 2rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  border-top: 1px solid var(--l360-border);
}

.app-footer a {
  color: inherit;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem .375rem;
  color: var(--bs-body-color);
  text-align: left;
  background: none;
  border: 0;
  border-radius: .625rem;
}

.user-menu:hover,
.user-menu[aria-expanded=true] {
  background: var(--l360-surface-2);
}

.user-menu .avatar {
  --size: 2.375rem;
  color: var(--l360-mint);
  background: var(--l360-forest);
}

.user-menu-text {
  flex-direction: column;
  line-height: 1.25;
}

.user-menu-name {
  font-size: .875rem;
  font-weight: 600;
}

.user-menu-school {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--l360-surface);
  --bs-dropdown-border-color: var(--l360-border);
  --bs-dropdown-link-active-bg: var(--l360-primary);
  --bs-dropdown-link-active-color: var(--l360-on-primary);
  min-width: 14rem;
  padding: .375rem;
  box-shadow: 0 8px 24px rgba(16, 43, 41, .12);
}

.dropdown-item {
  border-radius: .375rem;
}

/* Menu Delen (verslag): iets onder de knop, ruim en afgerond zoals de keuzelijsten */
.share-menu {
  min-width: 15rem;
  padding: .375rem;
  border-radius: .875rem;
  box-shadow: 0 18px 50px rgba(6, 47, 43, .14);
}

.share-menu form {
  margin: 0;
}

.share-menu .dropdown-item {
  padding: .55rem .75rem;
  border-radius: .5rem;
  font-weight: 500;
}

.share-menu .dropdown-item:hover,
.share-menu .dropdown-item:focus-visible {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.dropdown-header {
  font-size: .8125rem;
  word-break: break-all;
}

/* ---------- Pagina-onderdelen ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.page-header h1 {
  margin-bottom: .375rem;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

.page-header p {
  margin: 0;
  color: var(--bs-secondary-color);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.eyebrow {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.badge-school {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: 999px;
}

.badge-school svg {
  width: .875rem;
  height: .875rem;
}

.card {
  --bs-card-bg: var(--l360-surface);
  --bs-card-border-color: var(--l360-border);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  box-shadow: var(--l360-shadow);
}

.card-label {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.125rem;
}

.section-head h2 {
  margin: 0 0 .125rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.section-head p {
  margin: 0;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.link-more {
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.empty-state {
  padding: 1.25rem;
  font-size: .875rem;
  color: var(--bs-secondary-color);
  text-align: center;
  background: var(--l360-surface-2);
  border: 1px dashed var(--l360-border);
  border-radius: .75rem;
}

.badge-soon {
  align-self: flex-start;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  background: var(--l360-surface-2);
  border: 1px solid var(--l360-border);
  border-radius: 999px;
}

.notice {
  padding: .875rem 1rem;
  font-size: .875rem;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--l360-primary-subtle), var(--l360-primary) 12%);
  border-radius: .75rem;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.profile-head h1 {
  margin-bottom: .25rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.profile-head p {
  margin-bottom: .5rem;
  color: var(--bs-secondary-color);
  word-break: break-all;
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: .875rem 1.5rem;
  margin: 0;
}

.detail-list dt {
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.detail-list dd {
  margin: 0;
  word-break: break-word;
}

@media (max-width: 575.98px) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: .125rem;
  }

  .detail-list dd {
    margin-bottom: .75rem;
  }
}

.id-row {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--l360-border);
}

.id-row:first-of-type {
  padding-top: 0;
}

.id-row:last-of-type {
  border-bottom: 0;
}

.id-label {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.id-value {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.id-value code {
  flex: 1;
  min-width: 0;
  padding: .375rem .5rem;
  font-size: .8125rem;
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
  background: var(--l360-surface-2);
  border: 1px solid var(--l360-border);
  border-radius: .375rem;
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
}

/* ---------- Dashboard ---------- */
.welcome {
  position: relative;
  min-height: 13.75rem;
  margin-bottom: 1.5rem;
  padding: 2rem 2.25rem;
  overflow: hidden;
  color: var(--l360-white);
  background: linear-gradient(115deg, var(--l360-forest) 0%, var(--l360-forest) 50%, color-mix(in srgb, var(--l360-forest), var(--l360-jade) 55%) 100%);
  border-radius: 1.25rem;
  box-shadow: 0 9px 25px rgba(7, 59, 52, .14);
}

/* Decoratieve ring en ster rechtsboven */
.welcome::before {
  position: absolute;
  top: -9.5rem;
  right: -4.5rem;
  width: 28rem;
  height: 28rem;
  content: "";
  border: 3.5rem solid rgba(120, 223, 187, .1);
  border-radius: 50%;
  pointer-events: none;
}

.welcome-mark {
  position: absolute;
  top: 2.75rem;
  right: 3rem;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  background: var(--l360-white);
  border-radius: 1.375rem;
  box-shadow: 0 8px 25px rgba(6, 47, 43, .18);
}

.welcome-mark img {
  width: 3rem;
  height: 3rem;
}

.welcome-date {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--l360-mint-light);
}

.welcome h1 {
  position: relative;
  max-width: 34rem;
  margin: .75rem 0 .75rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.welcome h1 span {
  color: var(--l360-mint-light);
}

.welcome p {
  position: relative;
  max-width: 32rem;
  margin: 0 0 1.375rem;
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}

.welcome .page-actions {
  position: relative;
}

.welcome .btn-primary {
  /* Heldergroen met donkere tekst: wit op Heldergroen is te licht (2,9:1), Donkergroen 5,1:1 */
  --bs-btn-bg: var(--l360-bright);
  --bs-btn-border-color: var(--l360-bright);
  --bs-btn-color: var(--l360-dark-green);
  --bs-btn-hover-bg: var(--l360-mint-light);
  --bs-btn-hover-border-color: var(--l360-mint-light);
  --bs-btn-hover-color: var(--l360-dark-green);
  --bs-btn-active-bg: var(--l360-mint-light);
  --bs-btn-active-color: var(--l360-dark-green);
}

.btn-ghost-light {
  --bs-btn-color: var(--l360-white);
  --bs-btn-bg: rgba(7, 59, 52, .14);
  --bs-btn-border-color: rgba(120, 223, 187, .5);
  --bs-btn-hover-color: var(--l360-white);
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-border-color: rgba(120, 223, 187, .8);
  --bs-btn-active-color: var(--l360-white);
  --bs-btn-active-bg: rgba(255, 255, 255, .14);
}

@media (max-width: 650px) {
  .welcome {
    min-height: 0;
    padding: 1.5rem 1.375rem;
  }

  .welcome h1 {
    font-size: 1.625rem;
  }

  .welcome-mark {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
  }

  .welcome-mark svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat-card {
  position: relative;
  display: block;
  min-height: 8.5rem;
  padding: 1.375rem 1.375rem 1.125rem;
  overflow: hidden;
  color: var(--bs-body-color);
  text-decoration: none;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-radius: 1rem;
  box-shadow: var(--l360-shadow);
}

.stat-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: var(--stat-color, var(--l360-primary));
}

a.stat-card:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--l360-surface), var(--l360-primary) 4%);
}

.stat-card-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.stat-card-value {
  margin: .5rem 0 .125rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.stat-card small {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pupil-row {
  display: flex;
  align-items: center;
  gap: .8125rem;
  margin-bottom: .625rem;
  padding: .875rem 1rem;
  color: var(--bs-body-color);
  text-decoration: none;
  background: var(--l360-surface-2);
  border-left: 3px solid var(--l360-primary);
  border-radius: .6875rem;
}

a.pupil-row:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--l360-surface-2), var(--l360-primary) 6%);
}

.pupil-row:last-child {
  margin-bottom: 0;
}

.pupil-row .details {
  flex: 1;
  min-width: 0;
}

.pupil-row b {
  display: block;
  font-size: .875rem;
}

.pupil-row small {
  display: block;
  overflow: hidden;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pupil-row .go {
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--bs-secondary-color);
}

.initial {
  display: grid;
  place-items: center;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: .6875rem;
}

.shortcut {
  display: flex;
  align-items: center;
  gap: .8125rem;
  width: 100%;
  margin-top: .625rem;
  padding: .8125rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--bs-body-color);
  text-decoration: none;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-radius: .6875rem;
}

.shortcut:first-of-type {
  margin-top: 0;
}

a.shortcut:hover {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--l360-surface), var(--l360-primary) 5%);
}

.shortcut-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.125rem;
  width: 2.125rem;
  height: 2.125rem;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: .625rem;
}

.shortcut-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.shortcut .arrow {
  margin-left: auto;
  font-size: 1.125rem;
  color: var(--bs-secondary-color);
}

.shortcut.is-soon {
  color: var(--bs-secondary-color);
}

.shortcut.is-soon .badge-soon {
  margin-left: auto;
}

/* ---------- Leerlingen ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.toolbar .form-control {
  flex: 1 1 16rem;
}

.toolbar .form-select {
  flex: 0 1 12rem;
}

.pupil-list .pupil-row {
  border-left-color: var(--l360-teal);
}

.pupil-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.pupil-meta .missing {
  color: var(--l360-warning-text);
}

/* ---------- Leerling360 ---------- */
.l360-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.125rem;
  padding: 1.5rem 1.75rem;
  color: var(--l360-white);
  background: linear-gradient(115deg, var(--l360-forest) 0%, var(--l360-forest) 50%, color-mix(in srgb, var(--l360-forest), var(--l360-jade) 55%) 100%);
  border-radius: 1.125rem;
}

.l360-head h1 {
  margin: .25rem 0;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--l360-white);
}

.l360-head p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
}

.l360-head .eyebrow {
  color: var(--l360-mint-light);
}

.l360-head-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Knop "Meer" in de kop van het leerlingdossier (bijlagen, overdracht, ouders, exporteren) */
.btn-head-more {
  padding: .4375rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--l360-white);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .5625rem;
}

.btn-head-more:hover,
.btn-head-more:focus-visible,
.btn-head-more.show {
  color: var(--l360-forest);
  background: var(--l360-white);
  border-color: var(--l360-white);
}

.l360-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.l360-tag {
  padding: .4375rem .75rem;
  font-size: .75rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(120, 223, 187, .45);
  border-radius: .5625rem;
}

.l360-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .875rem;
  margin-bottom: 1.125rem;
}

.l360-metric {
  padding: 1.0625rem;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-radius: .9375rem;
}

.l360-metric small {
  display: block;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.l360-metric strong {
  display: block;
  margin: .3125rem 0 0;
  font-size: 1.5rem;
  color: var(--l360-primary-text);
}

.l360-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}

@media (max-width: 1050px) {
  .l360-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l360-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.l360-section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.l360-locked {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
}

/* ---------- Formulieren en import ---------- */
.form-control,
.form-select {
  background-color: var(--l360-surface);
  border-color: var(--l360-border);
  transition: border-color .15s, box-shadow .15s;
}

.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--l360-border), var(--l360-primary) 35%);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--l360-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--l360-primary-rgb), .15);
}

/* Kalender-icoon in datum- en tijdvelden: rustig, en klikbaar */
.form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  border-radius: .375rem;
  transition: opacity .15s;
}

.form-control::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Keuzelijsten: afgeronde lijst in de huisstijl (Chrome en Edge; andere browsers tonen hun eigen lijst) */
@supports (appearance: base-select) {
  select.form-select:not([multiple]) {
    appearance: base-select;
  }

  select.form-select:not([multiple])::picker-icon {
    display: none;
  }

  select.form-select:not([multiple])::picker(select) {
    appearance: base-select;
    margin-top: .375rem;
    padding: .375rem;
    background: var(--l360-surface);
    border: 1px solid var(--l360-border);
    border-radius: .875rem;
    box-shadow: 0 18px 50px rgba(6, 47, 43, .14);
  }

  select.form-select:not([multiple]) option {
    padding: .5rem .75rem;
    border-radius: .5rem;
  }

  select.form-select:not([multiple]) option:hover,
  select.form-select:not([multiple]) option:focus-visible {
    background: var(--l360-surface-2);
  }

  select.form-select:not([multiple]) option:checked {
    font-weight: 600;
    color: var(--l360-primary-text);
    background: var(--l360-primary-subtle);
  }

  select.form-select:not([multiple]) option::checkmark {
    display: none;
  }
}

.form-card {
  max-width: 44rem;
}

.import-preview td,
.import-preview th {
  font-size: .8125rem;
}

.row-status {
  display: inline-block;
  padding: .0625rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  border-radius: 999px;
}

.row-status--new {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.row-status--update {
  color: var(--l360-info);
  background: var(--l360-info-bg);
}

.row-status--error {
  color: var(--l360-error);
  background: var(--l360-error-bg);
}

/* ---------- Login-layout ---------- */
.auth-shell {
  display: grid;
  min-height: 100vh;
}

@media (min-width: 992px) {
  .auth-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.auth-brand {
  display: none;
}

@media (min-width: 992px) {
  .auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: var(--l360-white);
    background: linear-gradient(160deg, var(--l360-brand-from), var(--l360-brand-to));
  }
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.auth-logo:hover {
  color: inherit;
}

.auth-brand h2 {
  max-width: 20ch;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.auth-points {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: rgba(255, 255, 255, .9);
}

.auth-points svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .125rem;
}

.auth-brand-foot {
  margin: 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
}

.auth-brand-foot a {
  color: inherit;
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: var(--l360-surface);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
}

.auth-mobile-logo {
  margin-bottom: 2.5rem;
  color: var(--bs-body-color);
}

.auth-mobile-foot {
  margin-top: 3rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.auth-mobile-foot a {
  color: inherit;
}

@media (min-width: 992px) {
  .auth-mobile-logo,
  .auth-mobile-foot {
    display: none;
  }
}

.auth-title {
  margin-bottom: .5rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.auth-subtitle {
  margin-bottom: 2rem;
  color: var(--bs-secondary-color);
}

.auth-note {
  display: flex;
  gap: .625rem;
  margin-top: 1.5rem;
  padding: .875rem 1rem;
  font-size: .875rem;
  color: var(--bs-secondary-color);
  background: var(--l360-surface-2);
  border: 1px solid var(--l360-border);
  border-radius: .625rem;
}

.auth-note svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .125rem;
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
}

.status-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.status-icon--warning {
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
}

.status-icon--success {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

/* ---------- Beheer ---------- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  border-bottom: 1px solid var(--l360-border);
}

.subnav-link {
  margin-bottom: -1px;
  padding: .5rem .875rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.subnav-link:hover {
  color: var(--bs-body-color);
}

.subnav-link.active {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-bottom-color: var(--l360-primary);
  border-radius: .625rem .625rem 0 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.25rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

.stat:hover {
  color: var(--bs-body-color);
  border-color: var(--l360-primary);
}

.stat-label {
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.card .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--l360-border);
  margin-bottom: 0;
}

.card .table > :not(caption) > * > * {
  padding: .75rem 1rem;
}

.table thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.row-active > * {
  background: var(--l360-primary-subtle) !important;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filter-bar .form-control {
  flex: 1 1 14rem;
}

.filter-bar .form-select {
  flex: 0 1 12rem;
}

.role-form {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.role-form .form-select {
  min-width: 10rem;
}

.field-error {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  color: var(--bs-form-invalid-color);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem .625rem;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: var(--l360-surface-2);
  border: 1px solid var(--l360-border);
}

.role-docent {
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
  border-color: transparent;
}

.role-mentor,
.role-begeleider {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-color: transparent;
}

.role-zorgcoordinator {
  color: var(--l360-white);
  background: var(--l360-navy);
  border-color: transparent;
}

.role-admin,
.role-bestuur,
.role-platformbeheerder {
  color: var(--l360-on-primary);
  background: var(--l360-primary);
  border-color: transparent;
}

.status-pill {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
}

.status-pill--on {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.status-pill--off {
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
}

/* Lange woorden in koppen (bijv. "Ondersteuningsaanmeldingen") mogen afbreken, zodat niets buiten het scherm valt */
h1, h2, h3, .card-label {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Tabellen op een telefoon: elke rij een kaartje, met het kolomlabel boven de waarde */
@media (max-width: 767.98px) {
  .table-stack thead {
    display: none;
  }

  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }

  .table-stack tr {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--l360-border);
  }

  .table-stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table-stack > :not(caption) > * > td {
    padding: .25rem 0;
    border: 0;
    text-align: left !important;
    white-space: normal;
  }

  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
  }

  .table-stack td:empty,
  .table-stack td.table-stack-actions:not(:has(*)) {
    display: none;
  }

  .table-stack .table-stack-actions {
    padding-top: .5rem;
  }

  .table-stack .role-form {
    flex-wrap: wrap;
  }

  .table-stack .role-form .form-select {
    flex: 1 1 10rem;
    min-width: 0;
  }
}

/* Brede schermen: de eerste kolom (naam) niet laten samenknijpen; liever even zijwaarts scrollen */
@media (min-width: 768px) {
  .table-stack td:first-child {
    min-width: 15rem;
  }
}

/* Gebruikers: aanvinken voor rol geven of (de)activeren in één keer */
.select-all-row {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--l360-border);
}

.user-check,
.user-check-placeholder {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

.bulk-bar button[hidden] {
  display: none;
}

/* Gebruikers: gedeactiveerd blijft zichtbaar, maar gedimd */
.is-deactivated > td:first-child {
  opacity: .65;
}

.min-w-0 {
  min-width: 0;
}

.teacher-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .375rem 1rem;
}

/* Platformbeheerder kijkt mee: altijd zichtbaar bovenaan */
.acting-banner {
  padding-block: .5rem;
  font-size: .875rem;
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
  border-bottom: 1px solid var(--l360-border);
}

.acting-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-inline: 2rem;
}

@media (max-width: 767.98px) {
  .acting-banner-inner {
    padding-inline: 1rem;
  }
}

.btn-acting {
  --bs-btn-color: var(--l360-warning-text);
  --bs-btn-border-color: currentColor;
  --bs-btn-hover-color: var(--l360-warning-bg);
  --bs-btn-hover-bg: var(--l360-warning-text);
  --bs-btn-hover-border-color: var(--l360-warning-text);
}

/* ---------- Fase 2: begeleiding, agenda, taken, adviezen ---------- */
.pre-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.25rem;
  align-items: start;
}

.split-grid--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .split-grid,
  .split-grid--even {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pupil-row.is-selected {
  background: var(--l360-primary-subtle);
  border-left-color: var(--l360-primary-hover);
}

.report-item {
  display: block;
  padding: .875rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
  border-bottom: 1px solid var(--l360-border);
}

.report-item:last-child {
  border-bottom: 0;
}

a.report-item:hover b {
  color: var(--l360-primary-text);
}

.report-item b {
  display: block;
}

.report-item small,
.report-excerpt {
  display: block;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.report-date {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--l360-primary-text);
}

/* Gesprekswerkplek: links eerdere verslagen, rechts het nieuwe */
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
}

.workspace-history {
  position: sticky;
  top: 5.25rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  --bs-card-bg: var(--l360-surface-2);
}

@media (max-width: 991.98px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-history {
    position: static;
    max-height: none;
  }
}

.history-item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.history-item:last-child {
  border-bottom: 0;
}

.history-item summary {
  cursor: pointer;
}

.history-item summary b {
  display: block;
}

.history-item h3 {
  margin: .75rem 0 .25rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bs-secondary-color);
}

.history-item p {
  margin: .5rem 0 0;
  font-size: .875rem;
}

.history-item small {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.form-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.5rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  background: var(--l360-surface);
  border-top: 1px solid var(--l360-border);
  border-radius: 0 0 1rem 1rem;
}

/* Weekagenda */
.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.calendar-wrap {
  position: relative;
  isolation: isolate;
  max-height: 74vh;
  overflow: auto;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-radius: 1rem;
}

.week-grid {
  display: grid;
  grid-template-columns: 4rem repeat(var(--days), minmax(9.5rem, 1fr));
  min-width: 52rem;
}

.week-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .875rem .5rem;
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
  background: var(--l360-surface-2);
  border-right: 1px solid var(--l360-border);
  border-bottom: 1px solid var(--l360-border);
}

.week-head::first-letter {
  text-transform: uppercase;
}

.week-head.today {
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.time-column {
  position: relative;
  background: var(--l360-surface-2);
  border-right: 1px solid var(--l360-border);
}

.time-label {
  position: absolute;
  left: .5rem;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.day-column {
  position: relative;
  border-right: 1px solid var(--l360-border);
}

.day-column.today {
  background: color-mix(in srgb, var(--l360-mint), var(--l360-white) 50%);
}

.time-slot {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  border-top: 1px dotted var(--l360-border);
}

.time-slot.hour {
  border-top: 1px solid var(--l360-border);
}

.time-slot:hover,
.time-slot:focus-visible {
  background: var(--l360-primary-subtle);
  outline: 2px solid var(--l360-primary);
  outline-offset: -2px;
}

.appointment-block {
  position: absolute;
  right: 4px;
  left: 4px;
  z-index: 2;
  overflow: hidden;
  padding: .25rem .375rem;
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--l360-jade);
  text-decoration: none;
  background: var(--l360-mint);
  border: 1px solid color-mix(in srgb, var(--l360-mint), var(--l360-jade) 30%);
  border-left: 4px solid var(--l360-primary);
  border-radius: .625rem;
  box-shadow: 0 1px 3px rgba(16, 43, 41, .07);
}

.appointment-block:hover {
  color: var(--l360-forest);
  background: color-mix(in srgb, var(--l360-mint), var(--l360-jade) 12%);
}

.appointment-block b,
.appointment-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-block.status-uitgevoerd {
  opacity: .7;
}

.appointment-block.status-leerlingafwezig {
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
  border-color: color-mix(in srgb, var(--l360-warning-bg), var(--l360-warning) 45%);
  border-left-color: var(--l360-warning);
}

.appointment-block.status-geannuleerd {
  color: var(--bs-secondary-color);
  text-decoration: line-through;
  background: var(--l360-surface-2);
  border-color: var(--l360-border);
  border-left-color: var(--bs-secondary-color);
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: .8125rem;
  padding: .75rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
  border-bottom: 1px solid var(--l360-border);
}

.agenda-item:last-child {
  border-bottom: 0;
}

.agenda-item b,
.agenda-item small {
  display: block;
}

.agenda-item b {
  font-size: .8125rem;
}

.agenda-item small {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.agenda-time {
  min-width: 3.75rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--l360-primary-text);
}

/* Taken */
.task-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row .details {
  flex: 1;
  min-width: 0;
}

.task-row b,
.task-row small {
  display: block;
}

.task-row small {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.task-row.is-overdue small {
  color: var(--l360-error);
}

.task-row.is-done b {
  color: var(--bs-secondary-color);
  text-decoration: line-through;
}

.task-check {
  display: block;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  background: var(--l360-surface);
  border: 2px solid color-mix(in srgb, var(--l360-border), var(--l360-muted) 40%);
  border-radius: .4375rem;
}

button.task-check:hover {
  background: var(--l360-primary-subtle);
  border-color: var(--l360-primary);
}

.task-check.is-checked {
  position: relative;
  background: var(--l360-primary);
  border-color: var(--l360-primary);
}

/* Vinkje in de afgeronde taak */
.task-check.is-checked::after {
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  content: "";
  border: solid var(--l360-white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Handelingsadviezen en faciliteiten */
.advice-list {
  display: grid;
  gap: 1rem;
}

.advice-card h2 {
  margin: 0 0 .25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.facility-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8125rem 0;
  cursor: pointer;
  border-bottom: 1px solid var(--l360-border);
}

.facility-option .form-check-input {
  flex-shrink: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin-top: .125rem;
}

.facility-option b,
.facility-option small {
  display: block;
}

.facility-option small {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.facility-extra {
  padding: .75rem 0 .75rem 1.9375rem;
  border-bottom: 1px solid var(--l360-border);
}

.facility-list {
  margin: 0 0 .75rem;
  padding-left: 1.125rem;
}

.facility-list li {
  margin: .375rem 0;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

/* Leerling360-regels */
.l360-line {
  padding: .6875rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.l360-line:last-child {
  border-bottom: 0;
}

.l360-line.attention {
  color: var(--l360-warning-text);
}

.lk-pill {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .6875rem;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: .4375rem;
}

.attendance-bar {
  height: .6875rem;
  overflow: hidden;
  background: var(--l360-warning-bg);
  border-radius: 999px;
}

.attendance-bar i {
  display: block;
  height: 100%;
  background: var(--l360-primary);
  border-radius: 999px;
}

.rename-school summary {
  margin-top: .25rem;
  color: var(--l360-primary-text);
  cursor: pointer;
}

/* ---------- Fase 3: plan, inbreng, tijdlijn, terugkeerplan ---------- */
.goal-item {
  padding: .875rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.goal-item:last-child {
  border-bottom: 0;
}

.goal-item.is-archived {
  opacity: .6;
}

.goal-status {
  display: inline-block;
  flex-shrink: 0;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
}

.goal-status--gelijkgebleven {
  color: var(--l360-info);
  background: var(--l360-info-bg);
}

.goal-status--bijstellen {
  color: var(--l360-warning-text);
  background: var(--l360-warning-bg);
}

.goal-status--behaald {
  color: var(--l360-white);
  background: var(--l360-primary);
}

.goal-history {
  margin: .5rem 0 0;
  padding-left: 1rem;
  font-size: .8125rem;
}

.goal-history li {
  margin: .125rem 0;
}

.score-picker {
  display: flex;
  gap: .375rem;
}

.score-picker .btn {
  min-width: 2.5rem;
}

.score-picker .btn-check:checked + .btn {
  color: var(--l360-on-primary);
  background: var(--l360-primary);
  border-color: var(--l360-primary);
}

.score-badge {
  padding: .0625rem .5rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: 999px;
}

/* Zorgtijdlijn */
.timeline-pupils {
  max-height: 20rem;
  overflow-y: auto;
}

.timeline-pupils .form-check {
  padding-block: .1875rem;
}

.timeline {
  position: relative;
  margin-left: .5rem;
  padding-left: 1.625rem;
}

.timeline-event {
  position: relative;
  padding-bottom: 1.375rem;
}

.timeline-event::before {
  position: absolute;
  top: .3125rem;
  left: -1.375rem;
  width: .5625rem;
  height: .5625rem;
  content: "";
  background: var(--l360-primary);
  border-radius: 50%;
}

.timeline-event::after {
  position: absolute;
  top: .9375rem;
  bottom: 0;
  left: -1.125rem;
  width: 1px;
  content: "";
  background: var(--l360-border);
}

.timeline-event:last-child::after {
  display: none;
}

.timeline-event .date {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.timeline-event h3 {
  margin: .25rem 0 0;
  font-size: .9375rem;
  font-weight: 700;
}

.timeline-status {
  display: inline-block;
  margin-left: .25rem;
  padding: .0625rem .4375rem;
  font-size: .6875rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: 999px;
}

.timeline-status.is-absent {
  color: var(--l360-error);
  background: var(--l360-error-bg);
}

/* Terugkeerplan */
.session-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.session-row .details {
  flex: 1;
  min-width: 14rem;
}

.session-row small {
  display: block;
}

.session-actions summary {
  list-style: none;
}

.session-actions summary::-webkit-details-marker {
  display: none;
}

.session-actions[open] {
  flex-basis: 100%;
  max-width: 22rem;
}

/* Fase 4: tickets en leerlingbespreking */
.ticket-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.ticket-new > summary,
.ticket-manage > summary {
  list-style: none;
}

.ticket-new > summary::-webkit-details-marker,
.ticket-manage > summary::-webkit-details-marker {
  display: none;
}

.ticket-new[open] > .card {
  min-width: min(22rem, 100%);
  max-width: 28rem;
}

.ticket-members {
  max-height: 16rem;
  overflow-y: auto;
}

.ticket-layout,
.discussion-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.ticket-chat {
  min-width: 0;
}

.discussion-item {
  display: block;
  padding: .875rem 1rem;
  margin-top: .5rem;
  color: inherit;
  text-decoration: none;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-radius: .8rem;
}

.discussion-item:hover {
  color: inherit;
  border-color: var(--l360-primary);
}

.discussion-item.selected {
  background: var(--l360-primary-subtle);
  border-color: var(--l360-primary);
}

.discussion-item > span,
.discussion-item > small {
  display: block;
  margin-top: .25rem;
}

.discussion-item > small {
  color: var(--bs-secondary-color);
}

.unread-badge {
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .4rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4rem;
  color: var(--l360-on-primary);
  text-align: center;
  background: var(--l360-primary);
  border-radius: 999px;
}

.ticket-messages {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  height: 24rem;
  padding: 1rem 0;
  overflow-y: auto;
}

.ticket-bubble {
  align-self: flex-start;
  max-width: 85%;
  padding: .75rem 1rem;
  overflow-wrap: anywhere;
  background: var(--l360-surface-2);
  border-radius: 1rem;
}

.ticket-bubble.mine {
  align-self: flex-end;
  background: var(--l360-primary-subtle);
}

.ticket-bubble p {
  margin: .375rem 0 0;
  white-space: pre-wrap;
}

.ticket-compose {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
}

.ticket-empty {
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.response-card {
  padding: .875rem 1rem;
  margin-top: .75rem;
  background: var(--l360-surface-2);
  border-radius: .8rem;
}

@media (max-width: 991.98px) {
  .ticket-layout,
  .discussion-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ticket-messages {
    height: 20rem;
  }

  .ticket-compose {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Bladeren door lange lijsten */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.pagination {
  --bs-pagination-color: var(--l360-primary-text);
  --bs-pagination-active-bg: var(--l360-primary);
  --bs-pagination-active-border-color: var(--l360-primary);
  --bs-pagination-hover-color: var(--l360-primary-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--l360-primary-rgb), .25);
  flex-wrap: wrap;
}

/* Bijlagen */
.attachment-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--l360-border);
}

.attachment-row:last-child {
  border-bottom: 0;
}

.attachment-row .details {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--l360-primary-text);
  background: var(--l360-primary-subtle);
  border-radius: .6rem;
}

.attachment-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Meldingen voor nieuwe ticketberichten */
.nav-badge {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .4rem;
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35rem;
  color: var(--l360-navy);
  text-align: center;
  background: var(--l360-teal);
  border-radius: 999px;
}

.l360-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.l360-toast {
  position: relative;
  display: block;
  padding: .85rem 2.5rem .85rem 1rem;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-left: 4px solid var(--l360-teal);
  border-radius: .8rem;
  box-shadow: 0 10px 30px rgba(6, 47, 43, .18);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease;
}

.l360-toast.is-shown {
  opacity: 1;
  transform: none;
}

.l360-toast:hover {
  color: inherit;
  border-color: var(--l360-primary);
}

.l360-toast b,
.l360-toast span {
  display: block;
  overflow-wrap: anywhere;
}

.l360-toast span {
  margin-top: .2rem;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

.l360-toast .btn-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  font-size: .65rem;
}

@media (prefers-reduced-motion: reduce) {
  .l360-toast {
    transition: none;
  }
}

/* Leerlingen: meerdere tegelijk toewijzen */
.select-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: .25rem 0 .75rem;
  font-size: .875rem;
}

.pupil-row .pupil-check {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

.bulk-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-width: 64rem;
  padding: .75rem 1rem;
  margin-top: 1rem;
  background: var(--l360-white);
  border: 1px solid var(--l360-border);
  border-left: 4px solid var(--l360-primary);
  border-radius: .9rem;
  box-shadow: 0 10px 30px rgba(6, 47, 43, .16);
}

.bulk-bar[hidden] {
  display: none;
}

.bulk-bar .form-select {
  width: auto;
  max-width: 14rem;
}

.bulk-count {
  margin-right: .25rem;
  font-weight: 700;
}

/* Ouders: gekoppelde kinderen als kleine labels */
.parent-child {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .125rem .55rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--l360-primary-text);
  text-decoration: none;
  background: var(--l360-primary-subtle);
  border-radius: 999px;
}

/* Vinkjeslijst (kinderen kiezen bij een ouder) */
.pick-list {
  display: grid;
  gap: .15rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: .35rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--l360-surface);
}

.pick-list label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem 0;
  cursor: pointer;
}

.pick-list label[hidden] {
  display: none;
}

.parent-child--blocked {
  text-decoration: line-through;
  opacity: .7;
}

.role-ouder {
  border-style: dashed;
}

/* Te late taak en het rode getal in het menu */
.status-pill--late {
  margin-left: .35rem;
  color: #fff;
  background: var(--l360-error);
}

.nav-badge {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: var(--l360-error);
  border-radius: 999px;
}