html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f5f6fa;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}

/* ---------- HEADER ---------- */
.fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #153052;
  color: #fff;
  display: flex;
  align-items: center;
  z-index: 40;
  border-bottom: 1.5px solid #1976d2;
  padding: 0 0.8em;
  border-radius: 0 !important;
}

.fixed-header .menu-btn {
  flex: 0 0 46px;
  margin-right: 8px;
  font-size: 1.4em;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
}

.fixed-header .book-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.13em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-header .search-wrap {
  flex: 0 0 10px;
  max-width: 220px;
  margin-left: 10px;
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
}

.fixed-header .search-input {
  width: 100%;
  font-size: 1em;
  border-radius: 0 !important;
  background: #fff;
  color: #1a222f;
  border: 1.5px solid #1976d2;
  outline: none;
  padding: 5px 8px;
}

.fixed-header .search-results {
  position: absolute;
  top: 32px; left: 0; right: 0;
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px #0002;
  z-index: 50;
  max-height: 160px;
  overflow-y: auto;
  border-radius: 0 !important;
}
.fixed-header .search-results a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: #153052;
  font-size: 1em;
  border-bottom: 1px solid #e3eaf6;
}
.fixed-header .search-results a:hover {
  background: #e3eaf6;
  color: #1976d2;
}

/* ---------- MAIN CONTENT ---------- */
#main-content {
  position: fixed;
  top: 56px;
  bottom: 60px;
  left: 0;
  right: 0;
  overflow-y: auto;
  background: #f9fbff;
  padding-bottom: 1em;
}

.boek-content, .w3-content {
  max-width: 900px;
  margin: 0 auto;
}

.boek-content {
  padding-left: 38px !important;  /* Of 2.5em of 40px, naar smaak */
}
@media (max-width:600px) {
  .boek-content {
    padding-left: 14px !important;
  }
}


img, .boek-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  position: fixed;
  left: 0; top: 56px; bottom: 60px;
  width: 220px;
  background: #fff;
  border-right: 1.5px solid #1976d2;
  box-shadow: 2px 0 10px #0002;
  z-index: 1100;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  padding-top: 8px;
  transition: left .2s;
  border-radius: 0 !important;
}


.sidebar.open { display: flex; }
.sidebar h4 {
  margin: 10px 12px 4px 12px;
  color: #1976d2;
  font-size: 1.11em;
  font-weight: 600;
  letter-spacing: .5px;
}
.sidebar a {
  padding: 9px 18px;
  color: #222;
  text-decoration: none;
  background: none;
  font-size: 1.01em;
  border-left: 3px solid transparent;
  transition: background .13s, border-left .13s;
  cursor: pointer;
  border-radius: 0 !important;
}
.sidebar a.active, .sidebar a:focus {
  background: #e3eaf6;
  border-left: 3px solid #1976d2;
  color: #153052;
  font-weight: 600;
}
.sidebar a:hover {
  background: #f0f6ff;
}

/* ---------- NAVIGATIEBALKEN ---------- */
.main-navbar, .detail-navbar, .fixed-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: #153052;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 40;
  border-top: 1.5px solid #1976d2;
  border-radius: 0 !important;
  box-shadow: 0 -2px 16px #0001;
}

.main-navbar .w3-button, 
.detail-navbar .w3-button, 
.fixed-footer .footer-nav-btn {
  border-radius: 0 !important;
  background: none;
  border: none;
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  width: 56px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s;
}
.main-navbar .w3-button.w3-blue, 
.main-navbar .w3-button:active,
.detail-navbar .w3-button:active,
.detail-navbar .w3-button:focus {
  background: #2867b2 !important;
  color: #fff !important;
}
.main-navbar .w3-button[disabled], 
.detail-navbar .w3-button[disabled], 
.fixed-footer .footer-nav-btn[disabled] {
  color: #7ea0cc;
  background: none;
  opacity: 0.5;
  pointer-events: none;
}

.footer-center-icons {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.footer-pagenum {
  color: #fff;
  min-width: 60px;
  text-align: center;
  font-size: 1.13em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ---------- BOEKENPLANK CARDS ---------- */
.boek-tile-card {
  background: #fff;
  border: 1px solid #e3eaf6;
  transition: box-shadow .17s;
  box-shadow: 0 2px 10px #dbe7fa;
  border-radius: 0 !important;
  margin-bottom: 20px;
}
.boek-tile-card:hover {
  box-shadow: 0 8px 24px #1976d250;
  border-color: #90caf9;
}
.boek-tile-title {
  font-weight: 600;
  color: #1976d2;
  font-size: 1.07em;
  margin-top:8px;
  margin-bottom: 5px;
}
.boekcover {
  height: 120px;
  width: 90px;
  object-fit: contain;
  margin-bottom: 8px;
  border-radius: 0 !important;
}

/* ---------- MODALS/ZOOM ICON ---------- */
.image-wrap {
  position: relative;
  display: inline-block;
  cursor: zoom-in;
}
.zoom-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.5em;
  color: rgba(21, 48, 82, 0.7);
  pointer-events: none;
}

/* ---------- MEDIA QUERIES ---------- */
@media (max-width: 700px) {
  .fixed-header { height:44px; padding:0 0.3em; }
  #main-content { top:44px; bottom:48px; }
  .main-navbar, .detail-navbar, .fixed-footer { height:48px;}
  .main-navbar .w3-button, .detail-navbar .w3-button, .footer-nav-btn { font-size: 1.22em; width:38px; }
  .footer-center-icons { gap: 12px; }
  .footer-pagenum { min-width:36px; font-size: 0.95em; }
  #sidebar { width: 68vw; }
  .boekcover { height:85px; width:60px;}
  .boek-tile-title { font-size: 0.95em; }
}


@media (max-width: 460px) {
  .fixed-header .book-title { font-size: 0.97em; }
  .fixed-header .search-wrap { flex-basis: 70px; max-width: 80px; }
  .sidebar { width: 99vw;}
}

/* --------- MISC --------- */
.w3-card, .w3-sidebar, .w3-bar, .w3-modal-content {
  border-radius: 0 !important;
}

/* --------- STICKY NOTES --------- */
.notes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.note-card {
  background: #fffbe6 !important;
  border: 1.5px solid #f7e271;
  box-shadow: 0 6px 20px #fae36b33;
  border-radius: 0 !important;
  min-height: 130px;
  padding: 14px 12px 10px 12px;
  word-break: break-word;
  position: relative;
  transition: box-shadow 0.15s;
}
.note-card:hover {
  box-shadow: 0 12px 28px #e8b80244;
}
body.darkmode .note-card {
  background: #33321e !important;
  border-color: #d6b932;
  color: #f7e271;
}

/* --------- DARKMODE --------- */
body.darkmode {
  background: #1b2530 !important;
  color: #e6e6e6;
}
body.darkmode .w3-card,
body.darkmode .boek-content,
body.darkmode #main-content {
  background: #232d3a !important;
  color: #e6e6e6;
}
body.darkmode .w3-input,
body.darkmode input, 
body.darkmode textarea, 
body.darkmode select {
  background: #222a33 !important;
  color: #e6e6e6 !important;
}
body.darkmode .w3-button, 
body.darkmode .w3-bar .w3-bar-item,
body.darkmode .main-navbar, 
body.darkmode .detail-navbar, 
body.darkmode .fixed-footer {
  background: #273448 !important;
  color: #e6e6e6 !important;
}
body.darkmode mark {
  background: #7c6b00;
  color: #fff;
}
body.darkmode .w3-blue, body.darkmode .main-navbar .w3-button.w3-blue {
  background: #204063 !important;
}
body.darkmode .w3-text-blue { color: #facc15 !important; }
body.darkmode .w3-border { border-color: #444 !important; }
body.darkmode .w3-card { box-shadow: 0 2px 18px #0006 !important; }
body.darkmode .boek-tile-card { background: #2a3241 !important; }
body.darkmode .boek-tile-title { color: #facc15; }
body.darkmode .search-input { background: #181e24 !important; }


.fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 54px;
  background: #204063;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  box-shadow: 0 3px 12px #0002;
  padding: 0;
  border-bottom: 1px solid #24406330;
}
.fixed-header .menu-btn, 
.fixed-header .search-wrap {
  flex: 0 0 54px;   /* altijd dezelfde breedte als headerhoogte! */
  min-width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.fixed-header .book-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.18em;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.version-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #000;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
  opacity: .9;
}
.toaster-container { position: fixed; right: 16px; bottom: 35px; z-index:9999; }
.toaster { min-width: 220px; margin-bottom: 8px; background: #fff; }
.toaster.success { border-left: 4px solid #27ae60; }
.toaster.error   { border-left: 4px solid #c0392b; }
.toaster.info    { border-left: 4px solid #2980b9; }


/* SimplePdfViewer shell */
.spv{position:relative;display:flex;flex-direction:column;height:100%;}
.spv__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);z-index:5}
.spv__wheel{width:42px;height:42px;border-radius:50%;border:4px solid #ddd;border-top-color:#3f51b5;animation:spvspin 1s linear infinite}
@keyframes spvspin{to{transform:rotate(360deg)}}

.spv__stage{flex:1;min-height:60vh;overflow:hidden;background:#f7f9fb;position:relative}
.spv__canvas{display:block;transform-origin:0 0;will-change:transform}
.spv--drag .spv__canvas{cursor:grabbing}

.spv__toolbar{display:flex;gap:.5rem;align-items:center;padding:.5rem;border:1px solid #ddd;border-top:none;background:#fff}
.spv__toolbar .spv__spacer{flex:1}

.spv__sidetoggle{position:absolute;left:.5rem;top:.5rem;z-index:3;border:0;background:#fff;padding:.35rem .5rem;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.1);cursor:pointer}
.spv__sidebar{position:absolute;left:0;top:0;bottom:0;width:240px;max-width:75vw;background:#fff;border-right:1px solid #ddd;transform:translateX(-100%);transition:transform .2s;z-index:4;display:flex;flex-direction:column}
.spv--sidebar-open .spv__sidebar{transform:translateX(0)}
.spv--sidebar-open .spv__sidetoggle{display:none}
.spv__sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid #eee}
.spv__thumbs{overflow:auto;padding:.5rem;display:grid;grid-template-columns:1fr;gap:.5rem}
.spv__thumb{display:flex;flex-direction:column;gap:.25rem;align-items:center;border:0;background:transparent;cursor:pointer}
.spv__thumb-img{background:#f3f3f3;border:1px solid #ddd;border-radius:4px;padding:4px}
.spv__thumb--active .spv__thumb-img{outline:2px solid #3f51b5}
.spv__thumb-label{font:12px/1 system-ui,Arial,sans-serif;color:#666}

/* Forceer dat de overlay echt verdwijnt als 'hidden' staat */
.spv__overlay[hidden] { display: none !important; }

/* --- SimplePdfViewer sidebar: volledig uit beeld als dicht --- */
.spv__sidebar,
.spv__sidetoggle { box-sizing: border-box; }

/* standaard: dicht (we gebruiken translateX iets verder dan 100%) */
.spv__sidebar{
  position:absolute; left:0; top:0; bottom:0;
  width:240px; max-width:75vw;
  background:#fff; border-right:1px solid #ddd;
  transform: translate3d(calc(-100% - 12px), 0, 0); /* extra marge = geen “randje” meer */
  transition: transform .22s ease;
  will-change: transform;
  backface-visibility: hidden;

  /* dicht: niet klikbaar, niet focusbaar */
  pointer-events: none;
  visibility: hidden;
}

/* open: in beeld, klikbaar */
.spv--sidebar-open .spv__sidebar{
  transform: translate3d(0,0,0);
  pointer-events: auto;
  visibility: visible;
}

/* toggle-knop blijft zichtbaar als dicht; verberg bij open (zoals je had) */
.spv__sidetoggle{
  position:absolute; left:.5rem; top:.5rem; z-index:3;
  border:0; background:#fff; padding:.35rem .5rem; border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.1); cursor:pointer;
  visibility: hidden
}

.spv--sidebar-open .spv__sidetoggle{ display:none }

/* minimale safety tegen frameworks die 'hidden' overrulen */
.spv__overlay[hidden]{ display:none !important; }

/* Hoogtes van je header/footer (pas aan als jouw UI hoger/lager is) */
:root{
  --header-h: 56px;
  --footer-h: 64px;
}
/* Mobiel kan footer wat hoger zijn */
@media (max-width:640px){
  :root{ --footer-h: 72px; }
}

/* PDF host container: nooit over de footer heen */
.spv-host{
  /* gebruik dynamic viewport height zodat mobiel-URL bar goed meedoet */
  height: calc(100dvh - var(--header-h) - var(--footer-h) - 16px);
  min-height: 60vh;
  overflow: hidden;
}

/* Zorg dat de overlay echt weg is als 'hidden' staat */
.spv__overlay[hidden]{ display:none !important; }

/* Sidebar echt volledig buiten beeld als dicht (geen randje) */
.spv__sidebar{ transform: translate3d(calc(-100% - 12px),0,0); pointer-events:none; visibility:hidden; }
.spv--sidebar-open .spv__sidebar{ transform: translate3d(0,0,0); pointer-events:auto; visibility:visible; }
/* Hoogtes van je header/footer (pas aan als jouw UI hoger/lager is) */
:root{
  --header-h: 56px;
  --footer-h: 64px;
}
/* Mobiel kan footer wat hoger zijn */
@media (max-width:640px){
  :root{ --footer-h: 72px; }
}

/* PDF host container: nooit over de footer heen */
.spv-host{
  /* gebruik dynamic viewport height zodat mobiel-URL bar goed meedoet */
  height: calc(100dvh - var(--header-h) - var(--footer-h) - 16px);
  min-height: 60vh;
  overflow: hidden;
}

.onzichtbaar{
visibility: hidden;
}

/* Zorg dat de overlay echt weg is als 'hidden' staat */
.spv__overlay[hidden]{ display:none !important; }

/* Sidebar echt volledig buiten beeld als dicht (geen randje) */
.spv__sidebar{ transform: translate3d(calc(-100% - 12px),0,0); pointer-events:none; visibility:hidden; }
.spv--sidebar-open .spv__sidebar{ transform: translate3d(0,0,0); pointer-events:auto; visibility:visible; }

:root{ --header-h:56px; --footer-h:72px; }
.spv-host{ height:calc(100dvh - var(--header-h) - var(--footer-h) - 16px); min-height:60vh; overflow:hidden; }
.spv__overlay[hidden]{ display:none !important; }
.spv__sidebar{ transform:translate3d(calc(-100% - 12px),0,0); pointer-events:none; visibility:hidden; }
.spv--sidebar-open .spv__sidebar{ transform:translate3d(0,0,0); pointer-events:auto; visibility:visible; }

.spv__stage{ min-height: 200px; }
/* en zorg dat de host niet display:none krijgt tijdens de eerste render */