/* ================================================================
   GuideXpresse — de app-schil: sidebar, vaste balk bovenaan, tabbladen,
   inlogkaart en voettekst. Eén bron voor ERP en service; tot 2026-09-30
   stond dit in erp/css/app.css, en service had een zwarte topbalk.
   Vereist tokens.css en base.css; laden vóór het app-eigen stylesheet,
   zodat een app een regel in zijn eigen context kan aanscherpen.
   Gedrag (menuknop, balkhoogte meten): shared/js/shell.js. De ruimte die de
   inhoud onder de balk vrijhoudt (--list-topbar-h) regelt elke app bij zijn
   eigen paginacontainer: ERP's .page-wide zet de padding met een verkorte
   notatie en zou een gedeelde regel die eerder geladen wordt overschrijven.
   ================================================================ */

/* ── TABBLADEN (klantkaart: Basisgegevens/Financieel/Contactpersonen/Documenten) ── */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--sand-line);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

/* De Opmaak/Code/Voorbeeld-knoppen van de editor (.editor-view-btn) zien er net zo uit, maar staan
   in shared/css/richtext.css: service gebruikt dezelfde editor. Ze hebben bewust een andere klasse
   dan .tab-btn: het top-level tabblad-script selecteert ALLE .tab-btn's op de pagina (ook binnen een
   verborgen modal) en koppelt er zijn eigen click-handler aan (die op dataset.tab leest en de hash
   zet) — met dezelfde klasse zou de geneste toggle daar ongewenst in meeliften. */
.tab-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn--active {
  color: var(--teal-deep);
  border-bottom-color: var(--teal);
}

/* meldingen.php: de tabbladen zijn echte links met hun eigen ?soort= in de URL — elk tabblad is
   daar een eigen pagina, geen verborgen paneel dat JavaScript aan- en uitzet. Ze lenen het uiterlijk
   van .tab-btn; een link heeft alleen zijn onderstreping af te leggen en ruimte nodig voor het
   telbolletje ernaast. */
.tabs a.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

/* ── AUTH (login) ──────────────────────────────── */

.auth-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.auth-card {
  background: var(--bg);
  border: 1px solid var(--sand-line);
  border-radius: calc(var(--radius) * 1.5);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
}

@media (min-width: 480px) {
  .auth-card { padding: 2.5rem; }
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.auth-card h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* ── FOOTER ──────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: 1rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  border-top: 1px solid var(--sand-line);
}

/* ── SIDEBAR-LAYOUT (mobile-first: overlay-drawer, vanaf desktop vaste kolom) ── */

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

.gx-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--teal-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 200;
  overflow-y: auto;
}

.gx-sidebar--open {
  transform: translateX(0);
}

.gx-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-xl);
  margin-bottom: 1.5rem;
}

.gx-sidebar-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}

.gx-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gx-nav-item {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  transition: background 0.12s;
}

.gx-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.gx-nav-item--active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Navigatiegroepen: dezelfde <details>-uitklapper als .settings-nav-drop en .cc-select elders,
   maar met het paneel in de flow in plaats van zwevend — de sidebar is een hoge kolom en heeft de
   ruimte, en een zwevend paneel zou over de rest van het menu heen vallen. */
.gx-nav-groep > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}

.gx-nav-groep > summary::-webkit-details-marker {
  display: none;
}

.gx-nav-groep > summary::after {
  content: '▾';
  margin-left: auto;
}

.gx-nav-groep[open] > summary::after {
  content: '▴';
}

.gx-nav-groep > summary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* De items staan als <a> in het uitklappaneel en zijn dus niet meer de flexkinderen van
   .gx-sidebar-nav; ze moeten hun eigen regel weer vullen. */
.gx-nav-groep .gx-nav-item {
  display: block;
  padding-left: 1.5rem;
}

.gx-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gx-sidebar-footer .gx-nav-item {
  flex: 1;
}

/* Een knop die eruitziet als een menu-item (service: Account opent een venster in plaats van een
   pagina). Alleen de browseropmaak van <button> eraf; de rest komt van .gx-nav-item. */
button.gx-nav-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-toggle {
  position: fixed;
  top: 0.9rem;
  left: 1rem;
  z-index: 210;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--sand-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

.gx-main {
  flex: 1;
  min-width: 0;
  padding-top: 4rem;
}

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

  .gx-sidebar {
    position: sticky;
    transform: none;
    height: 100vh;
  }

  .gx-main {
    padding-top: 0;
  }
}

/* ── STANDAARD OVERZICHTSBALK (materialen.php, media.php, contacten.php) ──
   Vaste balk (100vw) met zoekveld + filter(s) + eventuele "selecteer alle
   resultaten"-knop (via .search-filter-row) en één primaire/secundaire actieknop
   rechts — zelfde offset-patroon als .fin-topbar/.offerte-topbar hieronder. Geen
   paginatitel meer in de balk: de sidebar toont via .gx-nav-item--active al
   welke pagina actief is. */
.list-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  padding: 1.25rem 1.5rem 1.25rem 4.5rem;
  background: #fff;
  border-bottom: 1px solid var(--sand-line);
  box-shadow: 0 4px 14px rgba(28, 43, 45, 0.06);
}

@media (min-width: 900px) {
  .list-topbar {
    /* 240px = sidebarbreedte; + 1.5rem extra lucht zodat het zoekveld niet plakt tegen de rand
       van de groene sidebar. */
    padding-left: calc(240px + 1.5rem);
  }
}

.list-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Alleen een zoekveld en geen acties (manager/customers.php): links uitgelijnd in plaats van
   zwevend in het midden van de balk. */
.list-topbar--links .list-topbar-inner {
  justify-content: flex-start;
}

/* contact_form.php: de tabbladen staan links in de balk en de kaartacties rechts, zonder
   paginatitel. De balk is daarmee precies zo hoog als één rij knoppen. .btn-secondary heeft van
   zichzelf 25px verticale marge — in een balk van één regel moet die eruit, net als bij de
   actieknop van .list-topbar-inner hierboven. */
.list-topbar--kaart {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.list-topbar--kaart .list-topbar-inner {
  justify-content: space-between;
  align-items: flex-end;
}

.list-topbar--kaart .tabs {
  border-bottom: none;
  /* Zakt door de onderrand van de balk heen, zodat de onderstreping van het actieve tabblad
     dáárop valt terwijl de knoppen ernaast wel lucht onder zich houden. */
  margin-bottom: -0.35rem;
  /* Mag krimpen en scrollen; anders duwen zeven tabbladen de acties de balk uit. */
  flex: 1 1 auto;
  min-width: 0;
}

/* ── KLANTBLOK, ACCOUNT ONDERAAN EN TESTWEERGAVE (service + manager) ──
   Tot 2026-10-01 stond dit in service/css/style.css; manager kreeg toen dezelfde sidebar met
   hetzelfde klantblok en dezelfde rolwissel. */

/* Het blok met de klantomgeving. Een streep erboven alleen als er items boven staan — bij een
   klant staat het blok direct onder het logo. */
.gx-klant-blok {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gx-sidebar-nav + .gx-klant-blok {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Zelfde kop als een menugroep in ERP (.gx-nav-groep > summary), maar met de klantnaam. */
.gx-klant-kop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gx-klant-kop span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gx-klant-sluit {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--fs-xl);
  line-height: 1;
}

.gx-klant-sluit:hover {
  color: #fff;
}

/* Account (en in manager de handleiding) staat onderaan, vlak boven lettergrootte en Uitloggen: de
   auto-marge duwt het daarheen. */
.gx-sidebar-onder {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Testweergave van de superuser: onder het logo zolang hij als klant kijkt. */
.gx-testrol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}