/* Fysiplan v2 — nieuw uiterlijk voor /v2/app. Alleen licht. Werkt via token-overrides
   op de bestaande app plus een handvol vormcorrecties; v1 op / blijft onaangeroerd. */

html.v2{
  --brand:#2456a6; --brand-700:#1c4487; --brand-50:#edf2fa; --brand-100:#d9e4f5;
  --bg:#f6f2e9; --tray:#efe9dc; --panel:#fffefa;
  --ink:#232019; --text:#3d3a31; --muted:#777162; --soft:#a39c8a;
  --line:#e7e0cf; --line2:#f0ebdd;
  --ring:0 0 0 3px rgba(36,86,166,.18);
  --sh-sm:0 1px 2px rgba(80,64,32,.05);
  --sh:0 6px 22px rgba(80,64,32,.09);
  --sh-lg:0 18px 44px rgba(80,64,32,.15);
  --r:12px; --r-lg:18px;
}
html.v2 body{background:
  radial-gradient(1100px 500px at 85% -10%, rgba(36,86,166,.05), transparent 60%),
  var(--bg)}
html.v2 header.topbar{background:rgba(255,254,250,.94);border-bottom:1px solid var(--line)}
html.v2 header.topbar .mark{border-radius:11px;background:linear-gradient(150deg,#2f66bd,#1c4487)}
html.v2 .btn{border-radius:999px;border-color:var(--line)}
html.v2 .btn:hover{border-color:#cfc6ad}
html.v2 .btn.primary{background:var(--brand);border-color:var(--brand)}
html.v2 .btn.primary:hover{background:var(--brand-700)}
/* Categorieën gebruiken dezelfde rustige chips als beheer en V1. */
html.v2 .chip{border-radius:999px;background:var(--panel)}
html.v2 .chip.on{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700);font-weight:600}
html.v2 .card{border-radius:var(--r-lg)}
html.v2 .card .hd{background:#fbf8f0;color:var(--muted)}
html.v2 .row{border-radius:12px}
html.v2 .row:hover{background:#f7f3e8}
html.v2 .row .thumb{border-radius:12px;background:#fff;border-color:var(--line);object-fit:contain;object-position:center;box-sizing:border-box}
html.v2 #a4 .pic .thumb{object-fit:contain;object-position:center;box-sizing:border-box;display:block;background:#fff;flex-shrink:0}
html.v2 .row .add{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand)}
html.v2 .row .add:hover,html.v2 .row .add.on{background:var(--brand);border-color:var(--brand);color:#fff}
html.v2 input[type=text],html.v2 input.fld,html.v2 select,html.v2 textarea{background:#fffefa}
html.v2 #a4 #prakSelect{border-radius:9px;padding:5px 9px;font-size:11.5px;color:var(--text);
  border-color:var(--line);background:#fffefa;box-shadow:var(--sh-sm)}
html.v2 .modal{border-radius:18px}
html.v2 #a4wrap{background:transparent}

/* v2: pijltjes om oefeningen op de kaart te herordenen (verschijnen bij hover,
   nooit in print). Alleen in de v2-app; v1 laadt deze stylesheet niet. */
html.v2 #a4 .pic .mvrij{position:absolute;bottom:4px;right:4px;display:none;gap:4px;z-index:2}
html.v2 #a4 .pic:hover .mvrij{display:flex}
html.v2 #a4 .pic .mvknop{width:22px;height:22px;border-radius:50%;border:1.5px solid #98a2b3;
  background:#fff;color:#475467;font-size:15px;font-weight:800;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(16,24,40,.25);padding:0}
html.v2 #a4 .pic .mvknop:hover{border-color:var(--brand);color:var(--brand);transform:scale(1.08)}
html.v2 #a4 .pic .mvknop:focus-visible{outline:none;box-shadow:var(--ring)}

/* Eén kaartkeuze voor scherm en PDF. De patiëntkaart achter de QR-code blijft kleur. */
html.v2 .beeldkeuze-v2{margin:0 0 12px;padding:11px;border:1px solid var(--line);
  border-radius:14px;background:#fbf8f0}
html.v2 .beeldkeuze-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
html.v2 .beeldkeuze-kop>span:first-child{display:flex;flex-direction:column;gap:2px}
html.v2 .beeldkeuze-kop b{font-size:12px;color:var(--ink)}
html.v2 .beeldkeuze-kop small{font-size:10.5px;color:var(--muted)}
html.v2 .beeldkeuze-qr{font-size:10px;font-weight:650;color:var(--brand);background:var(--brand-50);
  border:1px solid var(--brand-100);border-radius:999px;padding:4px 7px;white-space:nowrap}
/* De keuze Lijntekeningen/Avatar gebruikt bewust de gedeelde basiscomponent
   uit index.html, zodat V2 visueel exact gelijk blijft aan admin. */

/* Alleen het compacte categorieblok scrollt; de oefeningen krijgen de rest. */
html.v2 #filters{flex:0 0 auto;flex-wrap:wrap;max-height:72px;overflow-y:auto;overflow-x:hidden;
  align-content:flex-start;margin:0 0 8px;padding:2px 3px 4px 0;scrollbar-gutter:stable;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.v2 .col-controls .bd{overflow:hidden}
html.v2 .col-controls #list{flex:1 1 0;min-height:0;height:auto;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.v2 .filters .chip{flex:initial;white-space:normal}
html.v2 .row .nm{min-width:0;overflow-wrap:anywhere}

/* praktijklogo op de kaart: hoort bij het praktijkprofiel, print mee op elke kaart */
@media screen{
  html.v2 #a4 .a4hd{flex:0 0 auto;min-height:150px}
}
html.v2 #a4 .prak #prakLogo{max-height:38px;max-width:170px;object-fit:contain;object-position:left bottom;margin-bottom:5px}
html.v2 #logoBtn{margin-top:5px;font-size:10.5px;color:var(--muted);background:transparent;
  border:1px dashed var(--line);border-radius:999px;padding:2px 9px;cursor:pointer;font-family:inherit}
html.v2 #logoBtn:hover{color:var(--brand);border-color:var(--brand-100)}

/* QR-blok in de kaartkop: staat er standaard op zodra de kaart een cliëntnaam heeft */
html.v2 #a4 .qrblok{flex-direction:column;align-items:center;gap:3px;align-self:flex-start;flex:0 0 auto;position:relative}
html.v2 #a4 .qrblok .qrx{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--sh-sm)}
html.v2 #a4 .qrblok .qrx:hover{color:#c94f36;border-color:#e4b8ac}
html.v2 #a4 .qrblok svg{width:96px;height:96px}
html.v2 #a4 .qrblok small{font-size:8.5px;color:#667085;text-align:center;max-width:104px;line-height:1.3}

/* werkbalk: sjablonen/kaarten/wis als één gegroepeerd segment, print apart als primaire actie */
html.v2 header.topbar #sjabBtn{border-radius:999px 0 0 999px;margin-right:0;border-right:none}
html.v2 header.topbar #kaartenBtn{border-radius:0;margin:0;border-right:none}
html.v2 header.topbar #clearBtn{border-radius:0 999px 999px 0;margin-left:0}
html.v2 header.topbar #sjabBtn:hover,html.v2 header.topbar #kaartenBtn:hover,html.v2 header.topbar #clearBtn:hover{
  background:#f6f2e6;border-color:var(--line)}
html.v2 header.topbar #printBtn{margin-left:10px}

/* zoekveld als verzorgde pil met focusring */
html.v2 #search{border-radius:999px;padding:9px 16px;border-color:var(--line);background:#fffefa;box-shadow:var(--sh-sm)}
html.v2 #search:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* lijstrijen: zachter, met een lichte lift bij aanwijzen */
html.v2 .row{border:1px solid transparent;transition:background .12s,border-color .12s,transform .12s}
html.v2 .row:hover{background:#fbf7ec;border-color:var(--line2);transform:translateY(-1px)}

/* paneelkoppen in kleinkapitaal-stijl */
html.v2 .card .hd{letter-spacing:.08em;font-size:11.5px}

/* smalle, rustige schuifbalk in de oefeningenlijst */
html.v2 .list::-webkit-scrollbar{width:8px}
html.v2 .list::-webkit-scrollbar-thumb{background:#ddd4bd;border-radius:99px}
html.v2 .list::-webkit-scrollbar-track{background:transparent}

/* lege kaart: vriendelijke hint als zwevend chipje. De dekkende achtergrond en
   z-index voorkomen dat de rasterlijnen van de lege A4 dwars door de tekst lopen
   (dat oogde als doorgestreepte tekst) en de max-breedte houdt hem op het vel. */
html.v2 #emptyA4{width:max-content;max-width:86%;margin:0 auto;position:relative;z-index:1;
  text-align:center;color:var(--muted);font-size:13.5px;line-height:1.45;
  background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;
  padding:9px 20px !important}
html.v2 #emptyA4::before{content:"←";display:inline-block;margin-right:8px;color:var(--brand);font-weight:700}

/* v2-badge naast het logo */
html.v2 .v2badge{background:linear-gradient(150deg,#2f66bd,#1c4487);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 9px;border-radius:999px;
  margin-left:8px;align-self:center}

/* ---- mobiel en smalle tablet: de app blijft bruikbaar op één kolom ---- */
@media screen and (max-width:920px){
  html.v2 header.topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  html.v2 header.topbar .brand{margin-right:auto}
  html.v2 header.topbar .menu,html.v2 header.topbar .spacer{display:none}
  html.v2 header.topbar .btn{padding:8px 11px;font-size:13px}
  html.v2 .wrap{grid-template-columns:1fr;padding:10px;gap:10px}
  /* oefeningenlijst: compact blok boven de kaart, met eigen scroll */
  html.v2 .col-controls{position:static;height:clamp(480px,70svh,640px);max-height:none}
  html.v2 .col-controls .bd{overflow:hidden}
  html.v2 .col-controls .list{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.v2 .row{gap:7px;padding:7px 5px}
  html.v2 .row .thumb{width:48px !important;height:48px !important;flex-basis:48px}
  html.v2 .row .fav{width:32px;height:32px}
  html.v2 .row .add{width:36px;height:36px;font-size:20px}
  /* de A4 behoudt zijn echte maat en schuift horizontaal — zo blijft de print exact gelijk */
  html.v2 #a4wrap{overflow-x:auto;padding:10px;-webkit-overflow-scrolling:touch}
  html.v2 .modal{width:min(420px,94vw);padding:18px}
}
@media (max-width:520px){
  html.v2 header.topbar .btn{flex:1 1 calc(50% - 8px)}
  html.v2 header.topbar .btn.primary{flex-basis:100%}
}

/* AI-kaartassistent: het voorstel als verzorgde kaartjes met doseringchips */
html.v2 .ai-plan{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:8px 0}
html.v2 .ai-plan-note{flex:1 1 100%;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:2px}
html.v2 .ai-denken{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;padding:14px 4px}
html.v2 .ai-denken i{width:7px;height:7px;border-radius:99px;background:var(--brand);animation:aiblink 1.2s infinite}
html.v2 .ai-denken i:nth-child(2){animation-delay:.2s}
html.v2 .ai-denken i:nth-child(3){animation-delay:.4s;margin-right:6px}
@keyframes aiblink{0%,80%,100%{opacity:.25}40%{opacity:1}}
html.v2 .ai-toel{font-size:12.5px;line-height:1.55;background:var(--brand-50);border:1px solid var(--brand-100);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;color:var(--text)}
html.v2 .ai-waarschuwing{font-size:12px;line-height:1.5;background:#fff8e8;border:1px solid #f2d28c;
  border-radius:12px;padding:9px 11px;margin-bottom:8px;color:#704d00}
html.v2 .ai-waarschuwing b{display:block;margin-bottom:2px;color:#5c3e00}
html.v2 .ai-oef{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:6px;cursor:pointer;background:#fffdf6;transition:border-color .12s,background .12s}
html.v2 .ai-oef:hover{border-color:var(--brand-100);background:var(--brand-50)}
html.v2 .ai-oef input{margin-top:3px;accent-color:var(--brand)}
html.v2 .ai-dos{display:inline-block;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-50);
  border:1px solid var(--brand-100);border-radius:999px;padding:3px 9px;margin:5px 4px 0 0}
html.v2 .ai-waarom{display:block;color:var(--muted);font-size:11.5px;margin-top:4px;line-height:1.45}
/* markering dat een voorgestelde oefening een instructievideo meekrijgt */
html.v2 .ai-vid{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  color:#2e7d43;background:#eaf5ec;border:1px solid #cfe6d5;border-radius:999px;
  padding:2px 8px 2px 6px;margin-left:8px;vertical-align:2px;text-transform:uppercase;letter-spacing:.03em}
html.v2 .ai-vid svg{width:11px;height:11px}

/* vaste veiligheidsregel onderaan elke kaart (alleen v2): print mee op papier */
html.v2 #a4::after{content:"Neem pijn serieus: stop bij toenemende pijn en overleg met je fysiotherapeut.";
  position:absolute;left:0;right:0;bottom:4px;text-align:center;
  font-size:9px;color:#9a937f;pointer-events:none}

/* ---- nieuwe printvarianten (alleen v2) ---- */
@media print{
  /* De schermcontainer mag in print nooit een eigen scrollvlak worden. De
     mobiele overflow-regel is screen-only; deze extra grendel voorkomt dat
     browser-/systeemscrollbalken rechts of onder op de A4 terechtkomen. */
  html.v2 #a4wrap{overflow:visible!important;scrollbar-width:none!important}
  html.v2 #a4wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

  /* Groot lettertype: beter leesbaar voor oudere patienten */
  html.v2.print-groot #a4 table.mon{font-size:11px}
  html.v2.print-groot #a4 table.mon input{font-size:11.5px;height:22px}
  html.v2.print-groot #a4 .client input,
  html.v2.print-groot #a4 .boxes textarea{font-size:12px}
  html.v2.print-groot #a4 table.mon th.exh{font-size:10px}

  /* Compacte kaart: kleinere plaatjes zodat het invulgrid meer ruimte krijgt */
  html.v2.print-compact #a4 .pic img{width:62px !important;height:62px !important}
  html.v2.print-compact #a4 table.mon thead tr:nth-child(2) .pic{min-height:0}

  /* praktijklogo compact meeprinten in de kaartkop */
  html.v2 #a4 .prak #prakLogo{max-height:10mm;max-width:45mm;margin-bottom:1.5mm}

  /* QR-code op de geprinte kaart: groot genoeg om vlot te scannen */
  html.v2 #a4 .qrblok svg{width:21mm;height:21mm}
  html.v2 #a4 .qrblok small{font-size:6.5pt;max-width:24mm}

  /* veiligheidsregel klein en rustig onderaan het papier */
  html.v2 #a4::after{bottom:1mm;font-size:6.5pt;color:#666}
}

/* Compacte beeldkeuze naast Help, niet boven de oefenbibliotheek. */
html.v2 .topbar .menu{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.v2 .topbar #beeldKeuze{margin:0;padding:0;border:0;background:none;width:auto}
html.v2 .topbar #beeldKeuze .beeldkeuze-kop{display:none}
html.v2 .topbar #beeldKeuze .beeldsegment button{padding:5px 9px;font-size:12px}
@media print{.shw-legenda{font-size:8px!important}}

/* telefoon en smalle schermen: het A4-werkblad kan opzij vegen, maar niets wees daarop;
   deze hint staat alleen op het scherm en print nooit mee */
@media screen and (max-width:1160px){
  html.v2 #a4wrap::before{content:'Veeg opzij om het hele blad te zien';display:block;
    font:600 12px/1.4 -apple-system,'Segoe UI',sans-serif;color:#98a2b3;padding:0 0 8px 2px}
}