/* Back-office-layout - alleen geladen door index.html.
   Zijbalk (menu) links + content rechts. Subtiele blauwtint breekt het wit.
   De hamburger-toggle zit IN de zijbalk-kop; de topbalk (header.css) bevat de
   paginatitel, de zoekbalk en de actie-iconen. */

body { display: block; } /* overschrijft de flex-column uit base.css */

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

/* ---- Zijbalk ------------------------------------------------------------ */
.sidebar {
  flex: 0 0 228px;
  width: 228px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 14px rgba(0, 71, 128, .04); /* subtiele diepte */
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* iOS: de zichtbare hoogte, ook met de Safari-balk in beeld */
  overflow: hidden;
  transition: flex-basis .18s ease, width .18s ease;
}
/* Ingeklapt steekt de nav-tooltip buiten de zijbalk; de sticky zijbalk is een
   eigen stacking context, dus zonder z-index hier valt die tooltip achter
   sticky content (tabelkoppen z 2, mailboxpanelen z 30-40). 60 ligt boven de
   topbar (50) maar onder de modals (80+). */
.layout.is-collapsed .sidebar { flex-basis: 70px; width: 70px; overflow: visible; z-index: 60; }

/* Kop: merk links + hamburger-toggle rechts. Vaste hoogte van 60px = de hoogte
   van de topbar (header.css), zodat de onderlijn van de zijbalk-kop precies
   samenvalt met de onderlijn van de header. Inhoud verticaal gecentreerd. */
.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* flex-shrink: 0 zodat de kop exact 60px blijft, ook als de nav scrollbaar
     wordt (anders verdeelt flexbox de krimp mee over de kop). */
  flex: 0 0 60px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--line);
}
.layout.is-collapsed .sidebar__head { justify-content: center; padding: 0; }
.layout.is-collapsed .sidebar__head .sidebar__brand { display: none; }

/* Merk: "Connect" met daaronder de cursieve ondertitel "Sjofar Backoffice".
   Het merk is een link naar #/overzicht (klik op het logo = naar het startscherm);
   de hash-routing rendert en markeert het menu-item Overzicht. */
.sidebar__brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; }
.sidebar__brand:hover { opacity: .85; }
.sidebar__brand:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: var(--radius-sm); }
.sidebar__brand .app-naam { font-size: 1.8rem; }
/* .app-ondertitel ("Sjofar Backoffice", cursief) komt uit base.css.
   Strak links onder de "K", en exact even breed als "Connect" via een iets
   groter font + gelijkmatige tracking (gemeten tegen de lokale fonts: "Connect"
   1.8rem Poppins-600 = 120,9px; "Sjofar Backoffice" 0.78rem Inter + 1,2px
   letter-spacing komt daar precies op uit). Geen text-align: justify: met maar
   twee woorden gaat alle ruimte naar die ene tussenspatie, wat een lelijk gat
   geeft; tracking verdeelt het juist gelijkmatig over alle letters. */
.sidebar__brand .app-ondertitel {
  white-space: nowrap;
  font-size: .78rem;
  letter-spacing: 1.2px;
}

.sidebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  cursor: pointer;
}
.sidebar__toggle:hover { background: rgba(0, 71, 128, .08); }
.sidebar__toggle svg { width: 22px; height: 22px; }

/* Navigatie */
.sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
/* Ingeklapt blijft de rail verticaal scrollbaar (muiswiel), zodat alle iconen
   bereikbaar zijn op een korte viewport. Horizontaal niet (de iconen passen in de
   rail); de tooltip die naar rechts uitsteekt zou door deze clip worden afgekapt,
   daarom tilt sidebar.js de tooltip van het gehoverde item met position:fixed uit
   de scroll-clip. (overflow-x:visible kan hier niet: dan dwingt CSS overflow-y
   ook naar auto-clip.) */
.layout.is-collapsed .sidebar__nav { overflow-x: hidden; overflow-y: auto; }

/* Schermtoegang (B-90): items van schermen zonder toegang worden via het
   hidden-attribuut verborgen (components/sidebar.js -> pasRechtenToe). De
   display-regels hieronder (flex/block) winnen anders van hidden, dus expliciet
   wegzetten. */
#sidebar-nav .nav-link[hidden],
#sidebar-nav .nav-sublink[hidden],
#sidebar-nav .nav-group[hidden],
#sidebar-nav .nav-section[hidden] { display: none; }

/* Secties van elkaar gescheiden door een dunne lijn + ruimte erboven, zodat
   Operatie/Communicatie/Beheer visueel duidelijk losse blokken zijn. */
.nav-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav-section__label {
  display: block;
  padding: 2px 12px 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.layout.is-collapsed .nav-section__label { display: none; }
/* Ingeklapt: geen labels, dus alleen de scheidingslijn houdt de blokken uit elkaar. */
.layout.is-collapsed .nav-section { margin-top: 8px; padding-top: 8px; }

.nav-link, .nav-parent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  margin: 2px 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .9rem;
  color: var(--ink-900);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover, .nav-parent:hover { background: rgba(0, 71, 128, .07); }
/* De actieve markering vult de rij EN steekt via een gelijk-gekleurde box-shadow
   alleen NAAR BOVEN een paar px buiten de rand uit, zodat de arcering ook de
   teller-.badge dekt die over de bovenrand van het icoon uitsteekt (token
   --badge-uitsteek). Bewust eenzijdig (offset -3px, geen spread): naar onderen
   uitrekken zou door de teller van het item eronder lopen. Geen extra ruimte in
   de layout (geen sprong bij selecteren); de margin van 2px houdt de uitsteek
   vrij van het item erboven. */
.nav-link.is-active,
.nav-parent.is-active {
  background: var(--sidebar-active);
  color: var(--blue-700);
  font-weight: 600;
  box-shadow: 0 -3px 0 0 var(--sidebar-active);
}

/* Menu-iconen op de gedeelde chrome-icoonmaat (tokens.css), gelijk aan de
   actie-iconen in de topbalk; flex-basis = dezelfde maat zodat de plek klopt. */
.nav-link svg, .nav-parent svg { width: var(--icon-chrome); height: var(--icon-chrome); flex: 0 0 var(--icon-chrome); color: var(--muted); }
.nav-link.is-active svg,
.nav-parent.is-active svg { color: var(--blue-700); }

.nav-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* De teller zit OP het icoon (anker .ico-teller in base.css), zowel uit- als
   ingeklapt en identiek aan de topbalk-teller: plek + maat + uitsteek komen daar
   vandaan (token --badge-uitsteek). Hier alleen de ring in de zijbalk-achtergrond
   zodat de teller loskomt van het icoon eronder (de topbalk gebruikt --paper). */
.nav-badge { border: 2px solid var(--sidebar-bg); }
/* Op een actief item matcht de ring de actieve arcering (niet het zijbalk-vlak),
   zodat de teller naadloos in de gemarkeerde rij ligt. */
.nav-link.is-active .nav-badge,
.nav-parent.is-active .nav-badge { border-color: var(--sidebar-active); }
.nav-caret { display: inline-flex; flex: 0 0 auto; transition: transform .15s ease; }
.nav-caret svg { width: 15px; height: 15px; }
.nav-group.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }
/* Navigeerbaar bovenitem (bv. Postvak IN) klapt nooit terug samen: zodra het
   openstaat is er geen fold-actie, dus verbergen we de caret. Ingeklapt blijft
   hij staan als unfold-uitnodiging. */
.nav-group--navigeerbaar.is-open > .nav-parent .nav-caret { display: none; }

.nav-sub { display: none; margin: 1px 0 4px; }
.nav-group.is-open > .nav-sub { display: block; }
.nav-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 22px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
}
.nav-sublink svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.nav-sublink:hover { background: rgba(0, 71, 128, .07); color: var(--ink-900); }
.nav-sublink:hover svg { color: var(--ink-900); }
.nav-sublink.is-active { color: var(--blue-700); font-weight: 600; }
.nav-sublink.is-active svg { color: var(--blue-700); }

/* Ingeklapt: alleen iconen, met tooltip op hover */
.nav-tooltip { display: none; }
.layout.is-collapsed .nav-label,
.layout.is-collapsed .nav-caret,
.layout.is-collapsed .nav-sub { display: none; }
.layout.is-collapsed .nav-link,
.layout.is-collapsed .nav-parent { justify-content: center; padding: 10px 0; gap: 0; }
.layout.is-collapsed .nav-tooltip {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  background: var(--ink-900);
  color: #fff;
  border-radius: 6px;
  font-size: .8rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 60;
}
@media (hover: hover) and (pointer: fine) {
  .layout.is-collapsed .nav-link:hover .nav-tooltip,
  .layout.is-collapsed .nav-parent:hover .nav-tooltip { opacity: 1; }
}

/* Organisatie-logo onderin de zijbalk: logo links, versie rechts, beide met de
   onderkant op één lijn. */
.sidebar__org {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}
.sidebar__org a { display: inline-block; line-height: 0; border-radius: 6px; transition: opacity .15s ease; }
.sidebar__org a:hover { opacity: .82; }
.sidebar__org a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.sidebar__org img { height: 48px; width: auto; max-width: 100%; display: block; }
.layout.is-collapsed .sidebar__org { display: none; }

/* Versieknop naast het logo - klein en ingetogen, in kleine letters. Klikbaar:
   opent de "Over Connect"-modal (appinformatie + hulp/contact). */
.sidebar__versie {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .7rem;
  line-height: 1;
  color: var(--muted);
  text-transform: lowercase;
  cursor: pointer;
}
.sidebar__versie svg { width: 12px; height: 12px; }
.sidebar__versie:hover { color: var(--blue-700); text-decoration: underline; }
.sidebar__versie:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

/* ---- Content ------------------------------------------------------------ */
/* Kolom rechts van de zijbalk: topbalk bovenin, daaronder het scherm (#app). */
.content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  margin: 0;
  /* Vloeiende content-ruimte: krimpt mee op tablet/smal, capt op 32px op desktop. */
  padding: clamp(16px, 3vw, 32px);
}

/* Viewportvullende werkomgevingen (mailbox, agenda): geen content-padding en geen
   paginascroll. De hoogte-keten loopt van de viewport (minus de 60px-topbalk) naar
   de view; panelen daarbinnen scrollen zelf (Outlook-model, besluit B-46). */
#app.app--fullbleed {
  padding: 0;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px); /* iOS: anders valt de onderkant van mail/agenda achter de Safari-balk */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#app.app--fullbleed > * { flex: 1 1 auto; min-height: 0; }

/* ---- Smal scherm (telefoon, < 768px) - minimale mobiel-laag (B-122) --------- */
/* De back-office mikt op desktop + tablet (B-28); dit is de bewust minimale
   telefoon-laag. Kern: de UITGEKLAPTE zijbalk duwt de content niet meer opzij
   (op 390px bleef er ~160px content over) maar ligt er als overlay overheen,
   met een scrim erachter; een tik op de scrim of een navigatiekeuze klapt hem
   weer in (sidebar.js/backoffice.js). De ingeklapte icoonrail (70px) blijft de
   normale stand. Zelfde drawer-patroon als het mappenpaneel van de mailbox. */
.sidebar-scrim { display: none; }

@media (max-width: 767px) {
  /* De INGEKLAPTE zijbalk (icoonrail, 70px) bestaat hier niet: op ~390px is dat
     ~18% van de breedte en de topbalk biedt de dagelijkse wissels (zoeken, mail,
     agenda, taken, account) al. Het volledige menu opent via de hamburger in de
     topbalk als overlay. Amendement binnen B-122, verzoek Harm 05-09-2026. */
  .layout.is-collapsed .sidebar { display: none; }

  .layout:not(.is-collapsed) .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* iOS: de zichtbare hoogte, ook met de Safari-balk in beeld */
    /* Boven de scrim (74) en de topbar (50), onder de modals (80+). */
    z-index: 75;
    box-shadow: 0 0 30px rgba(28, 42, 57, .3);
  }
  .layout:not(.is-collapsed) .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 74;
    background: rgba(28, 42, 57, .45);
  }
}