/* ================================================================
   Heye Pharma — backoffice (beheer.html)
   Zelfde opbouw als de backoffice van Heye Store: donkere kopbalk
   met een gekleurde streep, tabbladen eronder, witte panelen.
   De huiskleur staat bovenaan (donkerrood, zoals de shop).
   ================================================================ */
:root{
  --huis:#9b1c1c; --huis-donker:#7a1515; --huis-licht:#fbefef; --accent-zacht:#f2a7a7; --balk:#b42323;
  --inkt:#1a1a1a; --grijs:#6e6a66; --lijn:#eae5e0; --rand:#d9d3cd;
  --achtergrond:#faf8f6; --wit:#fff;
  --rood:#b3261e; --rood-licht:#fdecea; --geel:#8a5a00; --geel-licht:#fff6dc;
  --groen:#1c6b3a; --groen-licht:#e9f6ee; --blauw:#1d4f91; --blauw-licht:#e9f0fb;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--inkt);
  background:var(--achtergrond);font-size:14px;line-height:1.45}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
button{cursor:pointer}
a{color:var(--huis-donker)}
h2{font-size:18px;margin-bottom:12px}
h3{font-size:15px;margin:16px 0 8px}
.verborgen{display:none !important}
:focus-visible{outline:2px solid var(--huis);outline-offset:2px}

/* ---- demobalk ---- */
.demobalk{background:var(--geel-licht);color:var(--geel);font-size:13px;text-align:center;padding:6px 12px}

/* ---- Snelkoppelingen naar leveranciers ---- */
.levmenu{position:relative}
.levmenu-lijst{position:absolute;right:0;top:calc(100% + 8px);min-width:270px;background:#fff;color:var(--inkt);border:1px solid var(--lijn);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.25);padding:6px;z-index:30}
.levmenu-lijst a,.levmenu-lijst .leeg-link{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--inkt);font-size:14px}
.levmenu-lijst a:hover{background:var(--huis-licht);color:var(--huis-donker)}
.levmenu-lijst a small,.levmenu-lijst .leeg-link small{color:var(--grijs)}
.levmenu-lijst .leeg-link{color:var(--grijs)}
.levmenu-lijst .aanpassen{display:block;width:100%;text-align:left;border:none;border-top:1px solid var(--lijn);background:none;margin-top:4px;padding:9px 11px;font-size:13px;color:var(--huis-donker);cursor:pointer}
.linkrij{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:8px;align-items:center;margin-bottom:8px}
.linkrij input{width:100%;padding:7px 9px;border:1px solid var(--rand);border-radius:7px;font-size:14px}
.linkkop{font-size:12px;color:var(--grijs);font-weight:600;margin-bottom:4px}
@media (max-width:700px){.linkrij{grid-template-columns:1fr 1fr}.linkrij .l-url{grid-column:1 / -1}}

/* ---- kopbalk + tabbladen ---- */
header{position:sticky;top:0;z-index:20;background:var(--inkt);color:#fff;border-top:5px solid var(--balk)}
.kop{display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap}
.kop .titel{font-weight:700;font-size:16px}
.kop .titel span{color:var(--accent-zacht)}
.kop .wie{color:#bbb;font-size:13px}
.kop .ruimte{flex:1}
nav{display:flex;gap:2px;padding:0 14px;background:#2a2a2a;overflow-x:auto}
nav button{background:none;border:none;color:#ccc;padding:10px 14px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
nav button:hover{color:#fff}
nav button.actief{color:#fff;border-bottom-color:var(--balk)}
nav .teller{background:var(--balk);color:#fff;border-radius:9px;font-size:11px;padding:0 6px;margin-left:5px}

/* ---- knoppen ---- */
.knop{border:1px solid var(--huis);background:var(--huis);color:#fff;border-radius:9px;padding:8px 14px;font-weight:600;white-space:nowrap;text-decoration:none;display:inline-block}
.knop:hover{background:var(--huis-donker)}
.knop:disabled{background:var(--lijn);border-color:var(--lijn);color:var(--grijs);cursor:not-allowed}
.knop.licht{background:#fff;color:var(--huis-donker)}
.knop.licht:hover{background:var(--huis-licht)}
.knop.donker{background:transparent;border-color:#666;color:#eee}
.knop.donker:hover{background:#333}
.knop.rood{background:#fff;border-color:var(--rood);color:var(--rood)}
.knop.klein{padding:4px 9px;font-size:12.5px;border-radius:7px}
.knop.ok{background:var(--groen);border-color:var(--groen);color:#fff}

main{padding:20px;max-width:1500px;margin:0 auto}
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:18px}
.uitleg{color:var(--grijs);font-size:13px;margin-bottom:12px}
.hint{color:var(--grijs);font-size:12.5px}

/* ---- aanmelden ---- */
.login{max-width:400px;margin:70px auto;padding:0 16px}
.login .paneel{padding:26px}
.login img{height:64px;width:auto;display:block;margin:0 auto 6px}
.login h1{font-size:20px;text-align:center;margin-bottom:18px}

/* ---- meldingen ---- */
.melding-blok{border-radius:9px;padding:10px 14px;margin-bottom:10px;font-size:13.5px}
.melding-blok.fout{background:var(--rood-licht);color:var(--rood)}
.melding-blok.let{background:var(--geel-licht);color:var(--geel)}
.melding-blok.ok{background:var(--groen-licht);color:var(--groen)}
.melding-blok.info{background:var(--huis-licht);color:var(--inkt)}

/* ---- formulieren ---- */
label.veld{display:block;margin-bottom:10px}
label.veld > span{display:block;font-size:12px;font-weight:600;color:var(--grijs);margin-bottom:3px}
label.veld small{display:block;color:var(--grijs);font-size:11.5px;margin-top:2px}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input:not([type]),select,textarea{
  width:100%;padding:7px 9px;border:1px solid var(--rand);border-radius:7px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--huis)}
input[readonly]{background:var(--achtergrond);color:var(--grijs)}
textarea{resize:vertical}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rij3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.vink{display:flex;gap:8px;align-items:center;margin:4px 0 12px;font-weight:600}
.vink input{width:16px;height:16px;accent-color:var(--huis)}

/* ---- filterbalk + tabellen ---- */
.filterbalk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filterbalk input[type=search]{width:280px}
.filterbalk select{width:auto}
.filterbalk .tel{color:var(--grijs)}
.filterbalk .ruimte{flex:1}
.tweedelig{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
.tabelvak{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--lijn);border-radius:10px;background:#fff}
table{border-collapse:collapse;width:100%}
th{position:sticky;top:0;background:#f3efeb;text-align:left;font-size:12px;color:var(--grijs);padding:7px 8px;font-weight:600;white-space:nowrap;z-index:1}
td{padding:6px 8px;border-top:1px solid var(--lijn);vertical-align:middle}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--inkt)}
th .pijl{color:var(--huis);margin-left:3px}
td.r,th.r{text-align:right;white-space:nowrap}
td.dun{width:1%;white-space:nowrap}
tr.klik{cursor:pointer}
tr.klik:hover td{background:var(--huis-licht)}
tr.klik.gekozen td{background:var(--huis-licht);box-shadow:inset 0 2px 0 var(--huis),inset 0 -2px 0 var(--huis)}
tr.uit td{color:#999}
.mini{width:38px;height:38px;object-fit:contain;border:1px solid var(--lijn);border-radius:6px;background:#fff;display:block}
.geenfoto{width:38px;height:38px;border:1px dashed var(--rand);border-radius:6px;color:var(--grijs);font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1}
.label{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11.5px;background:#f0ece8;color:#555;white-space:nowrap}
.label.rood{background:var(--rood-licht);color:var(--rood)}
.label.geel{background:var(--geel-licht);color:var(--geel)}
.label.groen{background:var(--groen-licht);color:var(--groen)}
.label.blauw{background:var(--blauw-licht);color:var(--blauw)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}

/* ---- bewerkpaneel ---- */
.bewerk{position:sticky;top:110px;max-height:calc(100vh - 125px);overflow:auto}
.bewerk .grotefoto{width:100%;aspect-ratio:4/3;border:1px solid var(--lijn);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}
.bewerk .grotefoto img{max-width:100%;max-height:100%;object-fit:contain}
.bewerk .grotefoto span{color:var(--grijs);font-size:13px}
.knoppenrij{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.voorbeeld{background:var(--achtergrond);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:10px}
.voorbeeld b{color:var(--huis-donker)}

.prijsblok{background:var(--achtergrond);border-radius:10px;padding:10px 10px 8px;margin-bottom:10px}
.prijsblok .veld{margin-bottom:6px}

/* ---- bestellingen ---- */
.bestelling{background:#fff;border:1px solid var(--lijn);border-radius:10px;margin-bottom:8px;overflow:hidden}
.bestelling summary{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:11px 14px;cursor:pointer;list-style:none}
.bestelling summary::-webkit-details-marker{display:none}
.bestelling summary:hover{background:var(--huis-licht)}
.bestelling summary .nr{font-weight:700;min-width:140px}
.bestelling summary .apo{min-width:180px;font-weight:600}
.bestelling summary .bedrag{margin-left:auto;font-weight:700}
.bestelling[open] summary{border-bottom:1px solid var(--lijn)}
.bestelling .detail{padding:12px 14px 14px}
.bestelling .detail table{margin:8px 0}
.status{font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--blauw-licht);color:var(--blauw)}
.status.nieuw{background:var(--geel-licht);color:var(--geel)}
.status.verzonden{background:var(--groen-licht);color:var(--groen)}
.status.geannuleerd{background:var(--rood-licht);color:var(--rood)}
.statusknoppen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ---- tabjes binnen een tabblad (leveranciers) ---- */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.subtabs button{border:1px solid var(--rand);background:#fff;border-radius:20px;padding:5px 14px;font-weight:600}
.subtabs button.actief{background:var(--inkt);border-color:var(--inkt);color:#fff}

/* ---- rechtstreekse leveringen ---- */
.zendkaart{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:14px;margin-bottom:12px}
.zendkop{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.zendkop b{min-width:140px}
.zendadres{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--achtergrond);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.zendkaart table{margin-bottom:10px}
.zendkaart th{position:static}
.zendvelden{display:grid;grid-template-columns:auto 1fr 1fr 160px auto;gap:10px;align-items:end}
.zendvelden .veld{margin:0}
.status.zst-te-bestellen{background:var(--geel-licht);color:var(--geel)}
.status.zst-besteld{background:var(--blauw-licht);color:var(--blauw)}
.status.zst-verzonden,.status.zst-geleverd{background:var(--groen-licht);color:var(--groen)}
.zendinfo{font-size:13px;background:var(--achtergrond);border-radius:8px;padding:8px 10px;margin:8px 0;line-height:1.7}
@media (max-width:900px){.zendvelden{grid-template-columns:1fr 1fr}}

/* ---- kaartjes (instellingen) ---- */
.kaartjes{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.kaartje{border:1px solid var(--lijn);border-radius:12px;padding:16px;background:#fff}
.infobalk-vb{background:var(--inkt);color:#fff;font-size:13px;text-align:center;padding:9px 14px;border-radius:8px;margin:6px 0 4px}
.infobalk-vb strong{color:var(--accent-zacht)}
.infobalk-vb .scheiding{opacity:.45;margin:0 8px}

/* ---- resultaten ---- */
.res-kop{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.res-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.res-tegel{border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;background:#fff}
.res-label{font-size:12px;font-weight:600;color:var(--grijs);text-transform:uppercase;letter-spacing:.3px}
.res-groot{font-size:30px;font-weight:700;line-height:1.15;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.res-klein{font-size:12.5px;color:var(--grijs)}
.res-twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:14px;margin-top:14px}
.res-tabel{width:100%;border-collapse:collapse;font-size:13px}
.res-tabel th{position:static;background:none;border-bottom:1px solid var(--lijn)}
.res-tabel td{border-top:none;border-bottom:1px solid var(--lijn)}
.res-balkcel{width:38%}
.res-balk{display:block;height:9px;border-radius:0 4px 4px 0;background:var(--huis);min-width:2px}

/* ---- venster en melding ---- */
.scherm{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.venster{background:#fff;border-radius:14px;padding:22px;width:820px;max-width:100%;max-height:88vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.venster .knoppenrij{justify-content:flex-end;margin-top:16px}
.venster .tabelvak{max-height:46vh}
.oud{color:var(--grijs);text-decoration:line-through}
.nieuw-w{color:var(--groen);font-weight:600}
.melding{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--inkt);color:#fff;max-width:calc(100% - 32px);
  padding:10px 18px;border-radius:10px;z-index:60;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .2s}
.melding.fout{background:var(--rood)}
.melding.weg-melding{opacity:0;pointer-events:none}

/* ---- afdrukken (bestelbon en pakbon) ---- */
#print{display:none}
@media print{
  body > *{display:none !important}
  body{background:#fff}
  #print{display:block !important;font:10.5pt/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#000}
  .pk-pagina{break-after:page;page-break-after:always}
  .pk-pagina:last-child{break-after:auto;page-break-after:auto}
  .pk-kop{display:flex;justify-content:space-between;gap:20pt;font-size:9pt;color:#333}
  .pk-logo{height:46pt;margin-bottom:4pt}
  .pk-titel{text-align:right;font-size:10pt;color:#000}
  .pk-titel h1{font-size:20pt;margin:0 0 2pt;letter-spacing:.5pt}
  .pk-nr{font-size:13pt}
  .pk-klant{display:grid;grid-template-columns:1fr 1fr;gap:12pt;margin:14pt 0 4pt}
  .pk-klant > div{border:1px solid #999;border-radius:4pt;padding:6pt 8pt}
  .pk-klant small{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.6pt;color:#555;margin-bottom:2pt}
  #print table{width:100%;border-collapse:collapse;margin-top:12pt}
  #print th{position:static;background:none;border-bottom:1.5px solid #000;color:#000;text-align:left;font-size:9pt;padding:3pt 4pt}
  #print td{border-top:1px solid #bbb;padding:4pt;vertical-align:top}
  #print tr{break-inside:avoid;page-break-inside:avoid}
  #print tfoot td{border-top:1.5px solid #000}
  #print .r{text-align:right;white-space:nowrap}
  .pk-lens{font-size:9pt}
  .pk-grijs{color:#666}
  .pk-vink{width:16pt;text-align:center}
  .pk-vakje{display:inline-block;width:10pt;height:10pt;border:1px solid #000}
  #print .pk-totaal{width:auto;margin:8pt 0 0 auto}
  #print .pk-totaal td{border:none;padding:1pt 4pt 1pt 18pt}
  #print .pk-som td{border-top:1.5px solid #000;font-weight:700;font-size:11.5pt;padding-top:3pt}
  .pk-opm{margin-top:10pt}
  .pk-teken{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14pt;margin-top:26pt;font-size:8.5pt;color:#444}
  .pk-teken > div{border-top:1px solid #000;padding-top:3pt;min-height:30pt}
  .pk-voet{margin-top:14pt;font-size:8.5pt;color:#444}
  @page{size:A4;margin:14mm}
}

/* ---- Producten: tabel op volle breedte, bewerkpaneel enkel als er een product open is ---- */
#tab-producten .tweedelig{grid-template-columns:1fr}
#tab-producten .tweedelig > .bewerk{display:none}
#tab-producten .tabelvak{min-width:0}
#tab-producten td.p-code{max-width:150px;overflow:hidden;text-overflow:ellipsis}
#tab-producten td.p-naam{min-width:170px}
#tab-producten td.p-status{min-width:110px}
#tab-producten td.p-status .label{margin-top:3px;display:inline-block}
/* Het bewerkpaneel schuift van rechts over de tabel; de tabel houdt altijd zijn volle breedte */
#tab-producten .tweedelig.met-bewerk > .bewerk{display:block;position:fixed;top:0;right:0;bottom:0;width:min(460px,94vw);max-height:none;
  z-index:40;border-radius:0;border-width:0 0 0 1px;box-shadow:-12px 0 40px rgba(0,0,0,.18);overflow:auto;padding-top:22px}
.bewerk{position:relative}
.sluit-x{position:absolute;top:8px;right:10px;border:none;background:none;font-size:26px;line-height:1;color:var(--grijs);cursor:pointer;padding:0 4px}
.sluit-x:hover{color:var(--inkt)}
#tab-producten .bewerk .grotefoto{aspect-ratio:auto;height:180px}

@media (max-width:1100px){
  .tweedelig{grid-template-columns:1fr}
  .bewerk{position:static;max-height:none}
  .tabelvak{max-height:60vh}
}
@media (max-width:640px){
  main{padding:12px}
  .rij,.rij3{grid-template-columns:1fr}
  .kaartjes,.res-twee{grid-template-columns:1fr}
  .filterbalk input[type=search]{width:100%}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
.lensinfo{display:inline-block;margin-top:3px;font-size:12px;background:#fbefef;color:#7a1515;border-radius:6px;padding:1px 7px}

/* ---- Zichtbaarheid: aanvinken, bulkbalk en aan/uit-knop (update 11) ---- */
.bulkbalk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--huis-licht);border:1px solid var(--huis);border-radius:10px;padding:8px 12px;margin-bottom:12px;position:sticky;top:0;z-index:5}
.bulkbalk .ruimte{flex:1}
tr.aangevinkt td{background:var(--huis-licht)}
td input.p-sel,th input#p-alles{width:16px;height:16px;accent-color:var(--huis);cursor:pointer}
.schakel{border:1px solid var(--lijn);background:#fff;color:var(--grijs);border-radius:999px;padding:2px 10px 2px 22px;font-size:11.5px;font-weight:600;position:relative;cursor:pointer;margin-right:4px}
.schakel::before{content:"";position:absolute;left:7px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#bbb}
.schakel.aan{border-color:var(--groen);color:var(--groen);background:var(--groen-licht)}
.schakel.aan::before{background:var(--groen)}
.schakel:hover{border-color:var(--huis)}
.schakel:disabled{opacity:.5;cursor:wait}
.hint.reden{display:inline-block;margin-top:3px;max-width:220px;white-space:normal}
@media (max-width:700px){.bulkbalk{position:static}}
/* vinkjeskolom blijft zichtbaar als de tabel horizontaal schuift */
#tab-producten .tabelvak th:first-child,#tab-producten .tabelvak td:first-child{position:sticky;left:0;z-index:2;background:#fff}
#tab-producten .tabelvak thead th:first-child{z-index:4;top:0;background:#f3efeb}
#tab-producten tr.aangevinkt td:first-child{background:var(--huis-licht)}