/* Handleidingen-pagina -- bovenop serviceformulier.css (zelfde kleuren en
   zoeker). Alleen wat deze pagina extra heeft. */
/* #sf-app.hd-app, niet .hd-app: de id-regel uit serviceformulier.css (620px)
   woog anders zwaarder en hield de hele pagina smal. */
#sf-app.hd-app { max-width: 960px; }
#hd-device-head .sf-device-card-name { flex: 1; min-width: 0; }
#hd-docs-state { margin: 4px 0 0; }
.hd-doc-section { margin-top: 16px; }
.hd-doc-section-title { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--sf-text-sub); }
.hd-doc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-doc-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: #fff;
  color: var(--sf-text); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.hd-doc-btn:hover { border-color: var(--sf-blue); background: var(--sf-blue-tint); }
.hd-doc-btn:focus-visible { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 3px var(--sf-blue-tint-strong); }
.hd-doc-btn--active { border-color: var(--sf-blue); background: var(--sf-blue-tint-strong); color: var(--sf-blue-dark); }
.hd-doc-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sf-blue); }
.hd-doc-btn-type { font-size: 11px; font-weight: 600; color: var(--sf-text-sub); border: 1px solid var(--sf-border); border-radius: 4px; padding: 0 4px; }
#hd-viewer { margin-top: 18px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; background: #fff; }
#hd-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--sf-border); background: var(--sf-surface); }
#hd-viewer-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hd-viewer-open-link { color: var(--sf-blue); font-size: 13px; text-decoration: none; white-space: nowrap; }
#hd-viewer-open-link:hover { text-decoration: underline; }
#hd-viewer-frame-wrap { position: relative; background: #525659; min-height: 480px; }
html.sf-embedded #hd-viewer-frame-wrap { min-height: 320px; }
/* Laadstatus over het hele documentvak: kaartje met spinner, tekst +
   percentage, een voortgangsbalk en de grootte. */
#hd-doc-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(245, 246, 248, 0.92); cursor: progress;
}
#hd-doc-loading.hd-doc-loading--error { cursor: default; }
#hd-doc-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 240px; max-width: 80%;
  padding: 20px 24px; background: #fff; border: 1px solid var(--sf-border); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(47, 57, 65, 0.12); text-align: center;
}
#hd-doc-loading-text, #hd-doc-error-text { margin: 0; font-weight: 600; font-size: 15px; color: var(--sf-text); }
#hd-doc-error-text { color: var(--sf-danger); }
#hd-doc-loading-size { margin: 0; font-size: 13px; color: var(--sf-text-sub); min-height: 1em; }
.hd-doc-loading-spinner { width: 32px; height: 32px; color: var(--sf-blue); animation: hd-spin 0.8s linear infinite; }
@keyframes hd-spin { to { transform: rotate(360deg); } }
#hd-doc-loading-track { width: 100%; height: 6px; border-radius: 999px; background: var(--sf-blue-tint-strong); overflow: hidden; position: relative; }
#hd-doc-loading-bar { height: 100%; width: 0; background: var(--sf-blue); border-radius: 999px; transition: width 160ms ease-out; }
.hd-doc-loading-track--indeterminate #hd-doc-loading-bar { position: absolute; width: 35% !important; animation: hd-indeterminate 1.1s ease-in-out infinite; }
@keyframes hd-indeterminate { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hd-doc-loading-spinner, .hd-doc-loading-track--indeterminate #hd-doc-loading-bar { animation: none; }
}
#hd-viewer-frame { display: block; width: 100%; height: calc(100vh - 64px); min-height: 480px; border: 0; background: #fff; }
/* Document open: de pagina mag de hele schermbreedte gebruiken. */
#sf-app.hd-app--viewing { max-width: none; }
/* Ingesloten: GEEN vh -- de iframe-hoogte volgt de inhoud, dus 100vh zou
   met elke hoogtemelding meegroeien (een lus). Vaste hoogte; voor groter is
   er de knop Volledig scherm. */
html.sf-embedded #hd-viewer-frame { height: 1000px; }
#hd-viewer-fullscreen-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px;
  color: var(--sf-blue); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; border-radius: 6px;
}
#hd-viewer-fullscreen-btn[hidden] { display: none; }
#hd-viewer-fullscreen-btn:hover { background: var(--sf-blue-tint); }
#hd-viewer-fullscreen-btn svg { width: 16px; height: 16px; }
/* Volledig scherm: balk boven, document vult de rest. */
#hd-viewer:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; margin: 0; }
#hd-viewer:fullscreen #hd-viewer-frame-wrap { flex: 1; min-height: 0; overflow: auto; }
#hd-viewer:fullscreen #hd-viewer-frame { height: 100%; min-height: 0; }
#hd-viewer:fullscreen #hd-viewer-image { width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
#hd-viewer-image { display: block; width: 100%; height: auto; background: #fff; }
/* Document open (NIET ingesloten): de hele pagina past in het venster en
   scrolt niet -- kop, apparaat en knoppen houden hun hoogte, de viewer
   krijgt precies de rest (flex-keten met min-height:0 op elke schakel,
   anders duwt de inhoud de kolom alsnog langer dan het venster). 100dvh
   i.p.v. 100vh: op een telefoon telt 100vh de adresbalk niet mee.
   Ingesloten geldt dit bewust niet: daar volgt de iframe-hoogte de inhoud,
   en een vensterhoogte zou met elke hoogtemelding meegroeien. */
/* Bewust GEEN overflow:hidden: past alles, dan is er vanzelf niets te
   scrollen; op een heel klein scherm (veel knoppen, lage telefoon) houdt de
   viewer zijn min-height en mag de pagina dan wél scrollen -- afknippen zou
   het document onbereikbaar maken. */
html.hd-viewing:not(.sf-embedded), html.hd-viewing:not(.sf-embedded) body { height: 100%; }
html.hd-viewing:not(.sf-embedded) #sf-app {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-bottom: 16px;
}
html.hd-viewing:not(.sf-embedded) #sf-header { flex-shrink: 0; }
html.hd-viewing:not(.sf-embedded) #sf-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.hd-viewing:not(.sf-embedded) #hd-device-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.hd-viewing:not(.sf-embedded) #hd-device-panel > :not(#hd-viewer) { flex-shrink: 0; }
html.hd-viewing:not(.sf-embedded) #hd-viewer { flex: 1; min-height: 280px; display: flex; flex-direction: column; }
html.hd-viewing:not(.sf-embedded) #hd-viewer-bar { flex-shrink: 0; }
html.hd-viewing:not(.sf-embedded) #hd-viewer-frame-wrap { flex: 1; min-height: 0; display: flex; }
html.hd-viewing:not(.sf-embedded) #hd-viewer-frame { flex: 1; height: auto; min-height: 0; }
/* Een exploded view als afbeelding: hele tekening in beeld (contain). */
html.hd-viewing:not(.sf-embedded) #hd-viewer-image { flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* Smal scherm: de titel krijgt een eigen regel, anders kromp 'ie tot niets
   en viel "Openen in nieuw tabblad" buiten de balk. */
@media (max-width: 560px) { #hd-viewer-title { flex-basis: 100%; } }
/* Kaartlink in het serviceformulier staat in serviceformulier.css. */