/*
 * Workrlab — App layout styles
 * Sidebar, topbar, pagina layout voor ingelogde pagina's
 *
 * Vereist: workrlab.css
 */

/* ─────────────────────────────────────────
   App layout
───────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--slate-100);
  /* Boven/rechts/onder evenveel lucht als de zwevende sidebar links geeft
     (12px) — anders staat de topbar hard tegen de schermrand terwijl de
     sidebar ernaast duidelijk "zweeft", en oogt het niet bij elkaar horend. */
  padding: 12px 12px 12px 0;
}

.app-main {
  margin-left: 92px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────
   Sidebar
   Zwevend paneel met ronde hoeken, los van de schermrand. Staat standaard
   smal (icon-rail, 64px) en schuift naar volle breedte (232px) na een klik
   op het pijl-knopje op de rand — geen hover-triggers meer, zodat hij niet
   per ongeluk opent tijdens normaal muisgebruik. De klik-stand wordt via
   localStorage onthouden (zie het script onderaan sidebar.html).
───────────────────────────────────────── */

.sidebar {
  position: fixed;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 64px;
  height: auto;
  background: var(--slate-900);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  /* Boven de topbar — die heeft ook var(--z-sticky), en bij een gelijke
     z-index wint het element dat later in de DOM staat (de topbar, niet
     de sidebar), waardoor de topbar/impersonatie-banner anders over de
     opengeklapte sidebar heen tekent. */
  z-index: var(--z-modal);
  box-shadow: 0 12px 32px rgba(2, 6, 23, .28), 0 2px 8px rgba(2, 6, 23, .16);
  transition: width .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}

.sidebar.is-expanded {
  width: 232px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, .4), 0 4px 12px rgba(2, 6, 23, .2);
}

/* Alle inhoud zit in dit binnenpaneel, niet direct in .sidebar — zo kan
   .sidebar zelf zónder overflow:hidden staan en hangt de collapse-knop
   (die welbewust half over de rand steekt) niet vast. Dit binnenpaneel
   knipt de content wél netjes af op de ronde hoeken (border-radius: inherit). */
.sidebar-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
}

/* Toggle-knop — hangt half over de rechterrand, verticaal gecentreerd, en
   verschuift mee met de rand omdat hij relatief aan .sidebar gepositioneerd
   is i.p.v. aan de viewport. */
.sidebar-collapse-btn {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: 0 2px 8px rgba(2, 6, 23, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  z-index: 1;
  transition: left .2s cubic-bezier(.4, 0, .2, 1), color .15s, border-color .15s;
}

.sidebar-collapse-btn:hover {
  color: var(--slate-700);
  border-color: var(--slate-300);
}

.sidebar-collapse-btn i.lni {
  font-size: 11px;
  transition: transform .2s ease;
}

.sidebar.is-expanded .sidebar-collapse-btn i.lni {
  transform: rotate(180deg);
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--duration) var(--ease);
}

.sidebar-logo:hover {
  opacity: .85;
}

.sidebar-logo-icon {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.sidebar-logo-mark {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar.is-expanded .sidebar-logo-mark { display: none; }

/* Full logo (logo_white.png) variant — verborgen in de smalle rail-stand,
   zichtbaar zodra de sidebar on hover openschuift */
.sidebar-logo-full {
  display: none;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.sidebar.is-expanded .sidebar-logo-full { display: flex; }

.sidebar-logo-img {
  width: 140px;
  height: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar-logo-tagline {
  font-size: 9px;
  color: var(--slate-500);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
}

.sidebar-section {
  margin-bottom: 4px;
}

.sidebar-section-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 10px 5px;
  white-space: nowrap;
}

.sidebar:not(.is-expanded) .sidebar-section-label { display: none; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration) var(--ease);
  margin-bottom: 1px;
  cursor: pointer;
}

/* Rail-stand: icoon gecentreerd, labeltekst weg (font-size:0 laat de
   tekstnode inkrimpen tot niets; het icoon-element zet zijn eigen
   font-size expliciet terug, dus dat blijft zichtbaar) */
.sidebar:not(.is-expanded) .sidebar-link {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  font-size: 0;
}

.sidebar-link svg,
.sidebar-link i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  flex-shrink: 0;
  opacity: .7;
  line-height: 1;
  transition: opacity var(--duration) var(--ease);
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--slate-100);
}

.sidebar-link:hover svg,
.sidebar-link:hover i.lni {
  opacity: 1;
}

.sidebar-link.active {
  background: rgba(14, 165, 233, .14);
  color: var(--sky-400);
}

.sidebar-link.active svg,
.sidebar-link.active i.lni {
  opacity: 1;
  color: var(--sky-400);
}

.sidebar-link .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 7px;
}

.sidebar-link-sub {
  padding-left: 35px;
  font-size: 12px;
  color: var(--slate-500);
}
.sidebar-link-sub i.lni {
  font-size: 13px;
  width: 13px;
  height: 13px;
}

/* Footer */
.sidebar-footer {
  padding: 10px 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar:not(.is-expanded) #sidebar-cv-usage {
  display: none;
}

/* Tenant badge */
.sidebar-tenant {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 8px;
}

.sidebar:not(.is-expanded) .sidebar-tenant { display: none; }

.sidebar-tenant-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
}

.sidebar-tenant-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-tenant-url {
  font-size: 10px;
  color: var(--slate-600);
  margin-top: 1px;
}

/* User + uitlog rij */
.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease);
}

.sidebar-user-row:hover {
  background: rgba(255, 255, 255, .04);
}

/* Rail-stand: alleen de avatar tonen, naam/rol en instellingen/uitloggen
   pas zichtbaar zodra de sidebar via de klik-knop opengeklapt wordt */
.sidebar:not(.is-expanded) .sidebar-user-row {
  justify-content: center;
  padding: 7px 0;
}

.sidebar:not(.is-expanded) .sidebar-user-info,
.sidebar:not(.is-expanded) .sidebar-logout-btn {
  display: none;
}

/* De uitlog-knop in .sidebar-user-row zit in een <form> — verbergen van
   alleen de knop (regel hierboven) laat de lege <form> zelf nog wel als
   flex-item meetellen, met de flex-gap ernaast: dat duwde de avatar 4-5px
   uit het midden. Het hele formulier moet dus mee verborgen worden. */
.sidebar:not(.is-expanded) .sidebar-user-row form {
  display: none;
}

/* Los uitlog-knopje boven de avatar, alleen in de rail-stand — het
   uitlog-knopje in .sidebar-user-row is daar net verborgen (regel
   hierboven), dus zonder dit is uitloggen alleen bereikbaar na eerst
   uit te klappen. Hogere specificiteit dan de regel hierboven om 'm
   binnen dit ene wrapper-element weer te tonen. */
.sidebar-logout-rail {
  display: none;
  justify-content: center;
  padding: 0 0 4px;
}

.sidebar:not(.is-expanded) .sidebar-logout-rail {
  display: flex;
}

.sidebar:not(.is-expanded) .sidebar-logout-rail .sidebar-logout-btn {
  display: flex;
  /* Ronde 'avatar'-vorm, zelfde formaat als de echte avatar eronder */
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}

.sidebar:not(.is-expanded) .sidebar-logout-rail .sidebar-logout-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--slate-300);
}

/* Rolbadge op de avatar — alleen zichtbaar in de rail-stand, waar de rol
   verder nergens als tekst te zien is (uitgeklapt staat de rol al als
   tekst onder de naam, dan zou de badge overbodig zijn). */
.sidebar-role-badge {
  display: none;
}

.sidebar:not(.is-expanded) .sidebar-role-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--slate-900);
  font-size: 7.5px;
}

.sidebar-role-badge-admin      { background: var(--slate-200); color: var(--slate-600); }
.sidebar-role-badge-manager    { background: #fef3c7; color: #b45309; }
.sidebar-role-badge-consultant { background: #e0e7ff; color: #4f46e5; }
.sidebar-role-badge-recruiter  { background: #ede9fe; color: #7c3aed; }
.sidebar-role-badge-sales      { background: #dcfce7; color: #16a34a; }
.sidebar-role-badge-viewer     { background: var(--slate-200); color: var(--slate-600); }
.sidebar-role-badge-platform-admin {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-email {
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-600);
  padding: 4px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  transition: color var(--duration) var(--ease);
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  color: var(--slate-500);
}

/* ─────────────────────────────────────────
   Topbar
───────────────────────────────────────── */

.topbar {
  /* Alleen de sticky-positionering — .topbar-surface erbinnen is het
     eigenlijke glazen paneel. Negatieve marges laten 'm ontsnappen aan
     .app-layout's padding-top/-right, zodat de topbar (i.t.t. de zwevende
     sidebar) vlak tegen de boven- en rechterrand aan zit, edge-to-edge —
     anders is er boven de topbar een kier waar scrollende content (zoals
     de impersonatie-balk) nog even onvervaagd zichtbaar is vóór hij achter
     de sticky topbar verdwijnt. */
  position: sticky;
  top: 0;
  margin: -12px -12px 0 0;
  z-index: var(--z-sticky);
  flex-shrink: 0;
}

/* Frosted-glass paneel — zelfde grijstint als de standaard achtergrond
   (i.p.v. wit), licht doorschijnend met een blur, zodat content er bij het
   scrollen zichtbaar (maar vervaagd) onderdoor schuift i.p.v. hard verdwijnt
   achter een ondoorzichtig vlak. */
.topbar-surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hoog genoeg voor titel + subtitel zonder dat ze op elkaar geplakt zitten. */
  height: 64px;
  padding: 0 28px;
  background: rgba(241, 245, 249, .75);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(226, 232, 240, .6);
  /* Rechts iets meer padding dan links: .topbar strekt zich met een
     negatieve margin 12px verder naar rechts uit dan zijn eigen inhoud
     ooit deed (zie .topbar), dus dit compenseert dat zodat de knoppen
     ongeveer op dezelfde plek blijven staan t.o.v. de content eronder. */
  padding: 0 40px 0 28px;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.topbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0;
}

.topbar-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─────────────────────────────────────────
   Pagina inhoud
───────────────────────────────────────── */

.page-alerts {
  padding: 16px 28px 0;
}

.page-content {
  padding: 24px 28px 40px;
  flex: 1;
}

/* ─────────────────────────────────────────
   App-footer — onderaan de pagina-inhoud. Geen sticky, gewoon het einde
   van de content. Zelfde edge-to-edge frosted-glass behandeling als de
   topbar (zelfde negative-margin-truc om .app-layout's padding te
   ontsnappen) — geen ronde hoeken, geen rand.
───────────────────────────────────────── */

.app-footer {
  margin: 32px -12px 0 0;
  padding: 16px 40px 16px 28px;
  background: rgba(241, 245, 249, .75);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.app-footer-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.app-footer-logo img {
  height: 18px;
  opacity: .8;
  display: block;
}

.app-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.app-footer-links a {
  font-size: 11px;
  color: var(--slate-500);
  text-decoration: none;
  transition: color .15s;
}

.app-footer-links a:hover {
  color: var(--slate-800);
}

.app-footer-copy {
  font-size: 11px;
  color: var(--slate-500);
  margin: 0;
}

@media (max-width: 640px) {
  .app-footer {
    justify-content: flex-start;
    margin: 24px 0 0;
    padding: 14px;
    background: var(--slate-50);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Pagina header met titel + acties */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.page-header-text {}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-description {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.5;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   Stat grid
───────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* ─────────────────────────────────────────
   Content secties
───────────────────────────────────────── */

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.content-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.content-grid-wide {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.sidebar-badge {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}

/* Smalle rail: de badge wordt een klein rond label dat aan de rechterbovenhoek
   van het icoon hangt en naar rechts uitsteekt, zodat het icoon zelf vrij blijft. */
.sidebar:not(.is-expanded) .sidebar-link { position: relative; }
.sidebar:not(.is-expanded) .sidebar-badge {
  position: absolute;
  top: 1px;
  left: calc(50% + 5px);
  right: auto;
  margin: 0;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 2px var(--slate-900);
}
.sidebar:not(.is-expanded) .sidebar-link.active .sidebar-badge { background: #6366f1; color: #fff; }

.sidebar-link.active .sidebar-badge {
  background: rgba(255,255,255,.25);
  color: white;
}

/* ─────────────────────────────────────────
   Hamburger toggle knop
───────────────────────────────────────── */

.sidebar-toggle-btn {
  display: none; /* verborgen op desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease);
  flex-shrink: 0;
  margin-right: 4px;
}
.sidebar-toggle-btn:hover { background: var(--slate-100); }

.sidebar-toggle-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--slate-600);
  border-radius: 2px;
  transition: transform .22s ease, opacity .16s ease;
  transform-origin: center;
}

/* Geanimeerd naar × wanneer open */
.sidebar-toggle-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-toggle-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sidebar-toggle-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────
   Sidebar backdrop (mobile overlay)
───────────────────────────────────────── */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 290;
  opacity: 0;
  pointer-events: none;          /* onzichtbaar → klikken gaan erdoorheen */
  transition: opacity .28s ease;
}
.sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;           /* zichtbaar → klikken sluiten sidebar */
}

/* Scroll-lock wanneer sidebar open */
body.sidebar-is-open { overflow: hidden; }

/* ─────────────────────────────────────────
   Responsive — ≤ 1024px (tablet landscape)
───────────────────────────────────────── */

@media (max-width: 1024px) {
  .content-grid-3    { grid-template-columns: 1fr 1fr; }
  .content-grid-wide { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   Responsive — ≤ 768px (tablet portrait + mobile)
───────────────────────────────────────── */

@media (max-width: 768px) {

  /* Sidebar: schuift van links uit — op mobiel altijd edge-to-edge op volle
     breedte/hoogte met alle labels zichtbaar (het zwevende rail-paneel van
     desktop is hier niet bruikbaar, geen hover/klein-scherm-ruimte voor).
     Selectors hebben hier bewust evenveel of meer klasse-gewicht als de
     desktop ".sidebar:not(.is-expanded) …" rail-regels, anders verliest
     deze block die specificiteitsstrijd. */
  .sidebar,
  .sidebar.is-expanded {
    top: 0;
    left: 0;
    bottom: auto;
    width: 232px;
    height: 100vh;
    border-radius: 0;
    transform: translateX(-232px);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 300; /* boven topbar */
    box-shadow: none;
  }
  .sidebar.open,
  .sidebar.open.is-expanded {
    transform: translateX(0);
  }

  /* Geen klik-toggle rail op mobiel — de sidebar is hier altijd open óf
     volledig off-canvas, geen tussenstand. */
  .sidebar-collapse-btn { display: none; }

  .sidebar.open .sidebar-logo-mark { display: none; }
  .sidebar.open .sidebar-logo-full { display: flex; }
  .sidebar.open .sidebar-section-label { display: block; }
  .sidebar.open .sidebar-badge {
    display: inline-block;
    position: static;
    min-width: 20px;
    height: auto;
    line-height: normal;
    padding: 1px 7px;
    font-size: 10px;
    margin-left: auto;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    box-shadow: none;
  }
  .sidebar.open #sidebar-cv-usage { display: block; }
  .sidebar.open .sidebar-tenant { display: flex; }
  .sidebar.open .sidebar-user-info { display: block; }
  .sidebar.open .sidebar-logout-btn { display: flex; }
  .sidebar.open .sidebar-user-row form { display: block; }
  .sidebar.open .sidebar-logout-rail { display: none; }
  .sidebar.open .sidebar-link {
    justify-content: flex-start;
    gap: 9px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .sidebar.open .sidebar-user-row { justify-content: flex-start; padding: 7px 10px; }

  /* Backdrop actief op mobile */
  .sidebar-backdrop { display: block; }

  /* Main vult volle breedte — geen zwevende marge, dat is een desktop-only
     effect dat hoort bij de rail-sidebar */
  .app-layout { padding: 0; }
  .app-main { margin-left: 0; }

  /* Hamburger zichtbaar */
  .sidebar-toggle-btn { display: flex; }

  /* Topbar compacter — geen negatieve marge meer nodig (.app-layout heeft
     op mobiel toch al geen padding om aan te ontsnappen) en geen glaseffect,
     dat is een desktop-only effect dat hoort bij de zwevende layout. Op
     mobiel gewoon een effen, volledig leesbare balk. */
  .topbar { top: 0; margin: 0; }
  .topbar-surface {
    padding: 0 14px;
    gap: 0;
    border-radius: 0;
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--slate-200);
  }
  .topbar-title { font-size: 14px; }

  /* Page padding */
  .page-content { padding: 16px 16px 32px; }
  .page-alerts  { padding: 12px 16px 0; }

  /* Grids → single column */
  .content-grid,
  .content-grid-3 { grid-template-columns: 1fr; }

  /* Page header verticaal stapelen */
  .page-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  .page-header-actions { width: 100%; }

  /* Stat grid kleinere minimum */
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }
}

/* ─────────────────────────────────────────
   Responsive — ≤ 640px (kleine telefoons)
───────────────────────────────────────── */

@media (max-width: 640px) {
  .topbar-surface { padding: 0 12px; height: 52px; }
  .page-content   { padding: 12px 12px 28px; }
  .stat-grid      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topbar-actions { gap: 6px; }

  /* Topbar-actions: verberg labels, houd iconen */
  .topbar-actions .btn-text { display: none; }
}

/* ─────────────────────────────────────────
   Safe-area-inset — notch-telefoons (iPhone)
───────────────────────────────────────── */

@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    .topbar-surface {
      padding-left:  max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    .sidebar {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .page-content {
      padding-bottom: max(32px, calc(28px + env(safe-area-inset-bottom)));
    }
  }
}

/* ─────────────────────────────────────────
   Multi-select filter dropdowns (.al-*)
───────────────────────────────────────── */

.al-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  background: white; border: 1.5px solid var(--slate-200);
  border-radius: 9px; font-size: 13px; font-weight: 500;
  color: var(--slate-600); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}
.al-filter-btn:hover { border-color: var(--slate-300); }
.al-filter-btn.active { border-color: #6366f1; color: #4f46e5; background: #f5f3ff; }
.al-filter-btn .al-badge {
  min-width: 18px; height: 18px; border-radius: 99px;
  background: #6366f1; color: white;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.al-filter-btn .al-caret { font-size: 9px; color: var(--slate-400); transition: transform .15s; }
.al-filter-btn.open .al-caret { transform: rotate(180deg); }

.al-dropdown {
  position: fixed; z-index: 9999;
  background: white; border: 1.5px solid var(--slate-200);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 8px 0; min-width: 180px; max-height: 280px;
  overflow-y: auto;
}
.al-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; margin: 0 4px; font-size: 13px; color: var(--slate-700);
  cursor: pointer; transition: background .1s; user-select: none;
  border-radius: 7px;
}
.al-dropdown-item:hover { background: var(--slate-50); }
.al-dropdown-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: #6366f1; flex-shrink: 0; pointer-events: none; }
.al-dropdown-item.checked { background: #ede9fe; color: #4f46e5; font-weight: 600; }
.al-dropdown-item.checked:hover { background: #ddd6fe; }
.al-dropdown-divider { height: 1px; background: var(--slate-100); margin: 6px 0; }
.al-dropdown-clear {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; font-size: 12px; color: var(--slate-500);
  background: none; border: none; cursor: pointer;
}
.al-dropdown-clear:hover { color: #4f46e5; }