/* [THEMA] De kleuren van deze hub als tokens. Ze staan op precies de waarden
   die hier eerst hard per regel stonden, dus zonder gekozen thema verandert er
   niets. Het themablok onderaan deze pagina kan ze overschrijven, zodat de
   tools meegaan met de rest van je omgeving (productwens 13-08-2026).

   De pin blijft nodig: deze pagina is licht ontworpen terwijl BASE_CSS --text
   in dark mode op lichtgrijs zet -- zonder vastzetten wordt alles wat zijn
   kleur erft onleesbaar op een dark-mode-browser. */
:root{
  --to-vlak:#ffffff; --to-vlak-2:#eef4fd; --to-papier:#f5f9ff;
  --to-tekst:#0f172a; --to-tekst-2:#334155;
  --to-gedempt:#475569; --to-gedempt-2:#94a3b8;
  --to-lijn:#e5e9f0; --to-lijn-2:#cbd5e1;
  --to-merk:#1e5a9e; --to-op-merk:#ffffff;
}

/* ============ PDF-tools (publieke kant, licht op de aurora) ============ */
/* Deze pagina's zijn LICHT ontworpen (witte kaarten, donkere tekst), maar
   BASE_CSS zet --text in dark mode op lichtgrijs. Alles wat zijn kleur
   erft werd daardoor onleesbaar op een dark-mode-browser (melding: de
   verzoekbalk onderaan /tools). Kleur en color-scheme hier vastzetten. */
html{ color-scheme:light; }
body{ font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      color:var(--to-tekst); }
.pt-shell{ max-width:1060px; margin:1.6rem auto 4rem; padding:0 1rem; }
.pt-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:1.2rem; }
.pt-back{ display:inline-flex; align-items:center; gap:6px; color:var(--to-gedempt); text-decoration:none;
  font-size:.9rem; font-weight:500; }
.pt-back:hover{ color:var(--to-tekst); }
.pt-h1{ font-family:'Fraunces',Georgia,serif; font-size:1.7rem; color:var(--to-tekst); margin:0; font-weight:600; letter-spacing:-.02em; }
.pt-privacy{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.78rem;
  font-weight:600; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:999px; padding:5px 12px; }
.pt-sub{ color:var(--to-gedempt); font-size:.95rem; margin:.2rem 0 1.6rem; max-width:640px; line-height:1.55; }

/* Hub-grid */
.pt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.pt-tool-card{ display:flex; flex-direction:column; gap:8px; background:var(--to-vlak); border:1px solid var(--to-lijn);
  border-radius:14px; padding:18px 18px 16px; text-decoration:none; color:var(--to-tekst);
  box-shadow:0 8px 24px -18px rgba(15,23,42,.28); transition:transform .12s, box-shadow .12s, border-color .12s; }
.pt-tool-card:hover{ transform:translateY(-2px); border-color:var(--to-lijn-2); box-shadow:0 14px 34px -18px rgba(30,90,158,.35); }
.pt-tool-ic{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--to-vlak-2); color:var(--to-merk); }
.pt-tool-card h3{ margin:2px 0 0; font-size:1.02rem; font-weight:600; }
.pt-tool-card p{ margin:0; color:var(--to-gedempt); font-size:.84rem; line-height:1.45; }
/* Hero: de PDF-editor prominent bovenaan.
   Exact dezelfde opbouw als de Video- en Beeld-editor (.pt-editor-hero met
   .peh-*), alleen in het PDF-blauw. Hij had hiervoor een eigen variant met de
   badge op een losse regel, een kop van 1,5rem en de knop ONDER de tekst; dat
   maakte de balk een stuk hoger en loger dan de andere twee. Wijk je hier af,
   wijk dan in alle drie af — anders lopen ze weer uit elkaar. */
.pt-editor-hero{ display:flex; align-items:center; gap:18px; margin:0 0 18px; padding:20px 22px; border-radius:16px; text-decoration:none; color:var(--to-vlak); background:linear-gradient(120deg,#2b6fbf,var(--to-merk)); box-shadow:0 16px 40px -20px rgba(30,90,158,.7); transition:transform .12s, box-shadow .12s; }
.pt-editor-hero:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -20px rgba(30,90,158,.82); }
.pt-editor-hero .peh-ic{ flex-shrink:0; width:52px; height:52px; border-radius:13px; background:rgba(255,255,255,.15); display:grid; place-items:center; color:var(--to-vlak); }
.pt-editor-hero .peh-ic svg{ width:26px; height:26px; }
.pt-editor-hero .peh-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pt-editor-hero .peh-title{ font-size:1.12rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.pt-editor-hero .peh-badge{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--to-vlak); color:var(--to-merk); padding:2px 8px; border-radius:999px; }
.pt-editor-hero .peh-desc{ font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.9); }
.pt-editor-hero .peh-desc strong{ color:var(--to-vlak); font-weight:700; }
.pt-editor-hero .peh-cta{ flex-shrink:0; font-weight:600; font-size:.9rem; background:rgba(255,255,255,.16); padding:9px 16px; border-radius:10px; white-space:nowrap; }
@media (max-width:640px){ .pt-editor-hero{ flex-wrap:wrap; } .pt-editor-hero .peh-cta{ width:100%; text-align:center; } }

/* Tool-pagina: kaart + dropzone */
.pt-card{ background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:16px; padding:1.4rem 1.5rem;
  box-shadow:0 14px 40px -24px rgba(15,23,42,.35); color:var(--to-tekst); }
.pt-drop{ border:2px dashed #c3d2e6; border-radius:14px; background:#f8fafd; padding:44px 20px;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.pt-drop:hover, .pt-drop.over{ border-color:var(--to-merk); background:var(--to-vlak-2); }
.pt-drop .big{ font-size:1.05rem; font-weight:600; color:var(--to-tekst); margin:10px 0 4px; }
.pt-drop .small{ color:var(--to-gedempt); font-size:.85rem; }
.pt-drop svg{ color:var(--to-merk); }
.pt-hidden{ display:none !important; }
.pt-status{ margin-top:12px; font-size:.88rem; color:var(--to-gedempt); min-height:1.2em; }
.pt-status.err{ color:#b91c1c; }
.pt-status.ok{ color:#047857; }
.pt-note{ font-size:.8rem; color:var(--to-gedempt-2); margin-top:10px; line-height:1.5; }
.pt-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0; }
.pt-label{ font-size:.86rem; font-weight:600; color:var(--to-tekst-2); }
.pt-input, .pt-select{ padding:9px 11px; border:1px solid var(--to-lijn-2); border-radius:8px; font:inherit;
  font-size:.9rem; color:var(--to-tekst); background:var(--to-vlak); }
.pt-input:focus, .pt-select:focus{ outline:none; border-color:var(--to-merk); box-shadow:0 0 0 3px rgba(30,90,158,.14); }
.pt-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9px;
  border:1px solid transparent; cursor:pointer; font:inherit; font-size:.92rem; font-weight:600;
  text-decoration:none; transition:background .12s, border-color .12s, opacity .12s; }
.pt-btn.primary{ background:#1e3a8a; color:var(--to-vlak); }
.pt-btn.primary:hover{ background:#1e40af; }
.pt-btn.primary:disabled{ opacity:.5; cursor:default; }
.pt-btn.ghost{ background:var(--to-vlak); color:var(--to-tekst-2); border-color:var(--to-lijn-2); }
.pt-btn.ghost:hover{ background:#f8fafc; color:var(--to-tekst); }
.pt-btn.icon{ padding:9px 11px; }
.pt-progress{ height:8px; border-radius:99px; background:#e8eef7; overflow:hidden; margin-top:12px; display:none; }
.pt-progress i{ display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--to-merk),#3d72c9); transition:width .15s; }
.pt-filelist{ margin:12px 0 0; display:flex; flex-direction:column; gap:8px; }
.pt-file{ display:flex; align-items:center; gap:10px; border:1px solid var(--to-lijn); border-radius:10px;
  padding:9px 12px; font-size:.88rem; background:#fbfcfe; cursor:pointer; }
.pt-file.sel{ background:#eaf1fb; box-shadow:inset 3px 0 0 var(--to-merk); border-color:#bcd3ee; }
.pt-file .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.pt-file .sz{ color:var(--to-gedempt-2); white-space:nowrap; font-size:.8rem; }
.pt-file button{ border:1px solid var(--to-lijn-2); background:var(--to-vlak); border-radius:7px; padding:4px 9px;
  cursor:pointer; font-size:.8rem; color:var(--to-tekst-2); }
.pt-file button:hover{ background:#f1f5f9; }

/* ============ Workspace (organiseren) — SmallPDF-achtige viewer ============ */
.pt-ws-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px;
  background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px; margin-bottom:14px;
  box-shadow:0 8px 24px -18px rgba(15,23,42,.28); position:sticky; top:8px; z-index:20; }
.pt-seg{ display:inline-flex; border:1px solid var(--to-lijn-2); border-radius:9px; overflow:hidden; }
.pt-seg button{ border:none; background:var(--to-vlak); padding:8px 14px; font:inherit; font-size:.86rem;
  font-weight:600; color:var(--to-gedempt); cursor:pointer; }
.pt-seg button.active{ background:#1e3a8a; color:var(--to-vlak); }
.pt-ws-bar .sep{ width:1px; height:24px; background:var(--to-lijn); }
.pt-ws-bar .spacer{ flex:1; }
.pt-tbtn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--to-lijn-2); background:var(--to-vlak);
  border-radius:9px; padding:8px 12px; font:inherit; font-size:.85rem; font-weight:600; color:var(--to-tekst-2); cursor:pointer; }
.pt-tbtn:hover{ background:#f1f5f9; }
.pt-tbtn:disabled{ opacity:.4; cursor:default; }
.pt-selall{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--to-tekst-2);
  cursor:pointer; user-select:none; padding:0 4px; }
.pt-selall input{ width:15px; height:15px; accent-color:#1e3a8a; cursor:pointer; }
.pt-ws-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.pt-cell{ position:relative; background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px;
  padding:10px 10px 8px; text-align:center; cursor:grab; transition:border-color .12s, box-shadow .12s; }
.pt-cell:active{ cursor:grabbing; }
.pt-cell.sel{ border-color:var(--to-merk); box-shadow:0 0 0 3px rgba(30,90,158,.18); }
.pt-cell.dragover{ border-color:#1e3a8a; border-style:dashed; }
/* Invoegbalk: laat zien WAAR de pagina landt, links of rechts van deze tegel.
   Er was alleen een stippelrand, dus je moest maar gokken (melding 31-07-2026). */
.pt-cell.drop-voor::before, .pt-cell.drop-na::after{
  content:""; position:absolute; top:4px; bottom:4px; width:4px; border-radius:3px;
  background:#1e3a8a; box-shadow:0 0 0 2px rgba(255,255,255,.9); z-index:3;
  pointer-events:none;
}
.pt-cell.drop-voor::before{ left:-8px; }
.pt-cell.drop-na::after{ right:-8px; }
/* De hele tegel is klikbaar om te selecteren; het vakje blijft ook werken. */
.pt-cell.sel .cb{ accent-color:var(--to-merk); }
.pt-cell .cv{ height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pt-cell canvas{ max-width:100%; max-height:150px; box-shadow:0 1px 6px rgba(15,23,42,.18); background:var(--to-vlak); transition:transform .15s; }
.pt-cell .cb{ position:absolute; top:8px; left:8px; width:17px; height:17px; accent-color:#1e3a8a; cursor:pointer; }
.pt-cell .nm{ margin-top:8px; font-size:.78rem; font-weight:600; color:var(--to-tekst);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-cell .meta{ font-size:.72rem; color:var(--to-gedempt-2); margin-top:2px; }
.pt-addcell{ border:2px dashed #c3d2e6; border-radius:12px; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; min-height:190px; color:var(--to-merk); cursor:pointer;
  font-size:.85rem; font-weight:600; background:#f8fafd; }
.pt-addcell:hover{ background:var(--to-vlak-2); border-color:var(--to-merk); }
.pt-count-pill{ font-size:.78rem; color:var(--to-gedempt); background:#eef2f8; border-radius:999px; padding:3px 10px; }

@media (max-width:640px){
  .pt-h1{ font-size:1.35rem; }
  .pt-privacy{ display:none; }
  .pt-ws-grid{ grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); }
  .pt-cell .cv{ height:120px; }
  .pt-cell canvas{ max-height:120px; }
}