/* Koper-ICT Kennisbank — gebruikt de variabelen van het koper-workplace-thema met nette fallbacks. */

.kb-bijlagen { margin: 2rem 0; display: grid; gap: 1.5rem; }
.kb-bijlagen-titel { margin: 0; }

.kb-viewer {
  border: 1px solid var(--kp-border, #d7e3ee);
  border-radius: var(--kp-radius, 14px);
  background: var(--kp-bg-card, rgba(0, 84, 126, .07));
  overflow: hidden;
}
.kb-viewer-kop {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-end;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--kp-border, #d7e3ee);
}
.kb-viewer-naam { font-weight: 600; color: var(--kp-text, inherit); overflow-wrap: anywhere; }
.kb-viewer-acties { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.kb-teller, .kb-zoomlabel { font-size: .85rem; color: var(--kp-text-muted, inherit); min-width: 3.2em; text-align: center; }

.kb-knop {
  display: inline-block; cursor: pointer; font: inherit; line-height: 1.2; text-decoration: none;
  padding: .3rem .7rem; border-radius: 8px;
  border: 1px solid var(--kp-border, #d7e3ee);
  background: transparent; color: var(--kp-text, inherit);
}
.kb-knop:hover, .kb-knop:focus-visible { border-color: var(--kp-primary, #00547e); color: var(--kp-primary, #00547e); }

.kb-viewer-body { position: relative; }
.kb-laden, .kb-fout { margin: 0; padding: 1.2rem; color: var(--kp-text-muted, inherit); }
.kb-fout { color: #b32d2e; }

.kb-scroller {
  max-height: 80vh; overflow: auto; padding: 12px;
  background: rgba(127, 127, 127, .14);
  outline-offset: -2px;
}
.kb-pagina { position: relative; margin: 0 auto 12px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.kb-pagina canvas, .kb-afbeelding canvas { display: block; }
.kb-afbeelding { text-align: center; }
.kb-afbeelding canvas { max-width: 100%; height: auto !important; margin: 0 auto; background: #fff; }

.kb-viewer:fullscreen { background: var(--kp-bg, #fff); display: flex; flex-direction: column; }
.kb-viewer:fullscreen .kb-viewer-body { flex: 1; min-height: 0; }
.kb-viewer:fullscreen .kb-scroller { max-height: calc(100vh - 56px); }

/* Kopiëren uit: niet selecteren, slepen of opslaan via het contextmenu */
.kb-viewer[data-kopieer="0"], .kb-inhoud[data-kopieer="0"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kb-viewer[data-kopieer="0"] canvas { pointer-events: none; }

/* Kopiëren aan: onzichtbare tekstlaag over de pagina (PDF.js) */
.kb-textlayer {
  position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1;
  text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 1;
}
.kb-textlayer :is(span, br) {
  color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0;
}
.kb-textlayer br::selection, .kb-textlayer span::selection { background: rgba(0, 84, 126, .3); color: transparent; }
.kb-textlayer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor, 1) * var(--min-font-size)); }
.kb-textlayer > :not(.markedContent), .kb-textlayer .markedContent span:not(.markedContent) {
  font-size: calc(var(--text-scale-factor) * var(--font-height, 1) * 1px);
}

.kb-printmelding { display: none; }

@media print {
  .kb-viewer[data-download="0"] { display: none !important; }
  .kb-bijlagen[data-download="0"] .kb-printmelding { display: block; }
}

.kb-overig ul { margin: .4rem 0 0; padding-left: 1.2em; }

/* Overzicht */
.kb-zoek { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.kb-zoek input[type="search"] {
  flex: 1 1 240px; padding: .6rem .8rem; border-radius: 8px; font-size: .95rem;
  border: 1px solid var(--kp-border, #d7e3ee);
  background: var(--kp-bg-card, rgba(0, 84, 126, .07));
  color: var(--kp-text, #0f1923);
  -webkit-text-fill-color: var(--kp-text, #0f1923);
  caret-color: var(--kp-text, #0f1923);
}
.kb-zoek input[type="search"]::placeholder {
  color: var(--kp-text-muted, #3d5166);
  -webkit-text-fill-color: var(--kp-text-muted, #3d5166);
  opacity: 1;
}
/* Lichte modus: thema-instellingen (of de OS-voorkeur) mogen de tekstkleur niet overschrijven */
body.kp-theme-light .kb-zoek input[type="search"],
html.kp-theme-light .kb-zoek input[type="search"] {
  color: #0f1923 !important;
  -webkit-text-fill-color: #0f1923 !important;
  caret-color: #0f1923;
  background: #ffffff;
}
body.kp-theme-light .kb-zoek input[type="search"]::placeholder,
html.kp-theme-light .kb-zoek input[type="search"]::placeholder {
  color: #3d5166 !important;
  -webkit-text-fill-color: #3d5166 !important;
}
@media (prefers-color-scheme: light) {
  body:not(.kp-theme-dark):not(.kp-theme-light) .kb-zoek input[type="search"] {
    color: #0f1923 !important;
    -webkit-text-fill-color: #0f1923 !important;
    caret-color: #0f1923;
    background: #ffffff;
  }
  body:not(.kp-theme-dark):not(.kp-theme-light) .kb-zoek input[type="search"]::placeholder {
    color: #3d5166 !important;
    -webkit-text-fill-color: #3d5166 !important;
  }
}
/* Donkere modus: expliciet lichte tekst */
body.kp-theme-dark .kb-zoek input[type="search"],
html.kp-theme-dark .kb-zoek input[type="search"] {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
  caret-color: #f5f7ff;
}
.kb-categorieen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.kb-chip {
  padding: .3rem .8rem; border-radius: 999px; text-decoration: none; font-size: .9rem;
  border: 1px solid var(--kp-border, #d7e3ee); color: var(--kp-text, inherit);
}
.kb-chip:hover, .kb-chip.is-actief { border-color: var(--kp-primary, #00547e); color: var(--kp-primary, #00547e); font-weight: 600; }
.kb-kaart { text-decoration: none; }
.kb-paginering { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.6rem; }
.kb-leeg { color: var(--kp-text-muted, inherit); }

/* ───────── Moderne laag (sinds v1.2.0) — zelfde stijl als chat, helpdesk en beheer ───────── */
.kb-overzicht { --kb-radius: 14px; --kb-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

/* Zoekbalk: pill met focus-ring (tekstkleuren hierboven blijven leidend) */
.kb-zoek input[type="search"] {
  border-radius: 999px; padding: .7rem 1.1rem;
  transition: border-color .15s, box-shadow .15s;
}
.kb-zoek input[type="search"]:focus {
  outline: none;
  border-color: var(--kp-primary, #00547e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary, #00547e) 25%, transparent);
}
.kb-zoek .kp-btn { border-radius: 999px; padding-left: 1.4rem; padding-right: 1.4rem; }

/* Categorie-chips */
.kb-chip { padding: .4rem 1rem; transition: background .15s, border-color .15s, color .15s; }
.kb-chip:hover { background: color-mix(in srgb, var(--kp-primary, #00547e) 10%, transparent); }
.kb-chip.is-actief {
  background: color-mix(in srgb, var(--kp-primary, #00547e) 14%, transparent);
}

/* Kaarten */
.kb-kaart {
  border-radius: var(--kb-radius, 14px);
  box-shadow: var(--kb-shadow, 0 2px 10px rgba(0, 0, 0, .08));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kb-kaart:hover, .kb-kaart:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  border-color: var(--kp-primary, #00547e);
}
.kb-kaart .kp-service-label {
  display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .75rem;
  background: color-mix(in srgb, var(--kp-primary, #00547e) 14%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .kb-kaart, .kb-kaart:hover { transition: none; transform: none; }
}

/* Knoppen (viewer + paginering): pills */
.kb-knop {
  border-radius: 999px; padding: .4rem 1rem; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.kb-knop:hover, .kb-knop:focus-visible {
  background: color-mix(in srgb, var(--kp-primary, #00547e) 10%, transparent);
}
.kb-knop-download {
  background: var(--kp-primary, #00547e); border-color: var(--kp-primary, #00547e); color: #fff;
}
.kb-knop-download:hover, .kb-knop-download:focus-visible {
  background: var(--kp-primary, #00547e); color: #fff; filter: brightness(1.12);
}

/* Paginering */
.kb-paginering span { font-size: .9rem; color: var(--kp-text-muted, inherit); }

/* Viewer als kaart */
.kb-viewer {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
.kb-viewer-kop {
  background: color-mix(in srgb, var(--kp-primary, #00547e) 6%, transparent);
  padding: .7rem 1rem;
}
.kb-pagina { border-radius: 6px; }
.kb-scroller { border-radius: 0 0 16px 16px; }
.kb-bijlagen-titel { font-size: 1.3rem; }
.kb-overig {
  border: 1px solid var(--kp-border, #d7e3ee); border-radius: 14px; padding: 1rem 1.3rem;
  background: var(--kp-bg-card, rgba(0, 84, 126, .05));
}
.kb-overig h3 { margin-top: 0; }
.kb-leeg {
  text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--kp-border, #d7e3ee); border-radius: 14px;
}