/* Busitools - app-schil in de stijl van Busiboard.
 *
 * Voor tools die het hele scherm gebruiken: een vaste balk bovenaan, een
 * lichte werkvloer in het midden en zwevende panelen die je met zes puntjes
 * kunt verslepen.
 *
 * Lokaal : D:\AI\Busimatch V2\public_html\busitools\_shared\app.css
 * Server : /busitools/_shared/app.css
 */
:root{--bg:#0d1220;--paneel:#141b2e;--paneel2:#1c2540;--rand:#2a3555;--tx:#e8ecf4;--mut:#8b96ad;
--or:#f97316;--bl:#3b82f6;--gr:#10b981;--pa:#a855f7;--rd:#ef4444;--am:#f59e0b}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body.bmapp{overflow:hidden;background:var(--bg);color:var(--tx);
font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}

/* ---------- werkvloer ---------- */
/* De grijs-witte ruitjes achter het doek.
   Vier tools hadden dit al in hun eigen bestand staan; nu staat het hier, zodat
   elke tool het krijgt. De ruitjes doen twee dingen tegelijk: een doorzichtig
   ontwerp is meteen te herkennen als doorzichtig, en een wit doek springt eruit
   in plaats van weg te vallen tegen een egale lichte vloer. Dezelfde kleuren en
   dezelfde maat als de vier die het al hadden, zodat daar niets verspringt. */
/* RUIMTE VOOR DE ADVERTENTIERAILS.
   Deze twee waarden staan op NUL en blijven nul zolang er geen reclame is.
   Alleen reclame.js zet ze, en die zet ze alleen voor een gast of een
   Free-lid op een breed scherm. Voor wie betaalt verandert er dus letterlijk
   niets aan deze opmaak: geen gereserveerde ruimte, geen lege kolom, geen
   gat. Dat is de reden dat het variabelen zijn en geen vaste marges. */
:root{--bmAdL:0px;--bmAdR:0px}

#bmVloer{position:fixed;left:var(--bmAdL,0px);right:var(--bmAdR,0px);top:56px;bottom:0;overflow:auto;
background:
  linear-gradient(45deg,#e6e9ef 25%,transparent 25%,transparent 75%,#e6e9ef 75%),
  linear-gradient(45deg,#e6e9ef 25%,transparent 25%,transparent 75%,#e6e9ef 75%),#f7f8fb;
background-size:22px 22px;background-position:0 0,11px 11px;
display:flex;align-items:center;justify-content:center;padding:30px}

/* Een donkere werkvloer (bijvoorbeeld bij lichtbakken of gravures) krijgt
   dezelfde ruitjes, maar dan in het donker: een egaal vlak zou een zwart
   ontwerp helemaal doen verdwijnen. */
#bmVloer.donker{background:
  linear-gradient(45deg,#182238 25%,transparent 25%,transparent 75%,#182238 75%),
  linear-gradient(45deg,#182238 25%,transparent 25%,transparent 75%,#182238 75%),#10182b;
background-size:22px 22px;background-position:0 0,11px 11px}

/* ---------- bovenbalk ---------- */
#bmTop{position:fixed;left:0;right:0;top:0;height:56px;display:flex;align-items:center;gap:10px;
padding:0 12px;background:linear-gradient(180deg,rgba(13,18,32,.97),rgba(13,18,32,.86));
border-bottom:1px solid var(--rand);backdrop-filter:blur(10px);z-index:30}
#bmTop .merk{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.3px;flex:none}
#bmTop .merk img{width:28px;height:28px;border-radius:8px}
#bmTop .merk span{background:linear-gradient(90deg,#f97316,#a855f7);-webkit-background-clip:text;
background-clip:text;color:transparent;font-size:1.05rem}
#bmTop .titel{color:var(--mut);font-size:.86rem;font-weight:600;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
#bmTop .rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.bmPil{font-size:.68rem;font-weight:900;padding:4px 11px;border-radius:999px;text-transform:uppercase;
letter-spacing:.5px;white-space:nowrap}
.bmPil.proef{background:var(--am);color:#2a1a02}
.bmPil.actief{background:var(--gr);color:#04220f}

.bmKnop{background:var(--paneel2);color:var(--tx);border:1px solid var(--rand);border-radius:10px;
padding:8px 12px;font-weight:700;font-size:.83rem;cursor:pointer;display:inline-flex;
align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.bmKnop:hover{border-color:var(--or)}
.bmKnop.pri{background:linear-gradient(90deg,#f97316,#fb923c);border-color:transparent;color:#1a0f04}
.bmKnop.gr{background:var(--gr);border-color:transparent;color:#04220f}
.bmKnop:disabled{opacity:.4;cursor:not-allowed}
select.bmKnop{padding:8px 10px}

/* ---------- zes puntjes om te verslepen ---------- */
.bmGrip{display:grid;gap:3px;cursor:grab;padding:5px;border-radius:8px;flex:none;
justify-content:center;align-content:center;touch-action:none}
.bmGrip:hover{background:var(--paneel2)}
.bmGrip:active{cursor:grabbing}
.bmGrip i{width:4px;height:4px;border-radius:50%;background:#6b7794;display:block}
.bmGrip:hover i{background:var(--or)}
.bmGrip.staand{grid-template-columns:repeat(3,4px);grid-template-rows:repeat(2,4px)}
.bmGrip.liggend{grid-template-columns:repeat(2,4px);grid-template-rows:repeat(3,4px)}
.bmLos{transform:none !important}

/* ---------- zwevende panelen ---------- */
.bmRail{position:fixed;left:calc(var(--bmAdL,0px) + 12px);top:50%;transform:translateY(-50%);z-index:25;
background:rgba(20,27,46,.95);border:1px solid var(--rand);border-radius:16px;padding:8px;
display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.bmTl{width:42px;height:42px;border:0;border-radius:11px;background:transparent;color:#c7d0e2;
font-size:1.15rem;font-weight:800;cursor:pointer;display:grid;place-items:center;
transition:background .12s,color .12s}
.bmTl:hover{background:var(--paneel2);color:#fff}
.bmTl.aan{background:linear-gradient(135deg,#f97316,#fb923c);color:#1a0f04;box-shadow:0 4px 14px rgba(249,115,22,.4)}
.bmTl:disabled{opacity:.25;cursor:not-allowed}
.bmScheid{height:1px;background:var(--rand);margin:4px 2px}

.bmZij{position:fixed;right:calc(var(--bmAdR,0px) + 12px);top:70px;width:310px;max-height:calc(100vh - 92px);z-index:25;
background:rgba(20,27,46,.97);border:1px solid var(--rand);border-radius:16px;
backdrop-filter:blur(10px);box-shadow:0 14px 44px rgba(0,0,0,.5);display:flex;flex-direction:column}
.bmZij .kop{display:flex;align-items:center;gap:6px;padding:6px 8px 0}
.bmZij .tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--rand);flex-wrap:wrap}
.bmZij .tabs button{background:transparent;border:1px solid transparent;color:var(--mut);
border-radius:9px;padding:5px 8px;font-size:.73rem;font-weight:800;cursor:pointer;white-space:nowrap}
.bmZij .tabs button.aan{background:var(--paneel2);border-color:var(--or);color:var(--tx)}
/* min-height:0 IS HIER NIET OPTIONEEL. Een flex-kind met flex:1 krimpt niet
   onder zijn eigen inhoud zolang min-height op auto staat. Daardoor hield
   .bmZij zich niet aan zijn max-height en puilde het paneel uit: gemeten op
   360x640 was het 516 px hoog terwijl max-height 52vh (333 px) voorschreef,
   en de onderste knoppen stonden buiten het paneel. Met min-height:0 scrollt
   .vak zoals bedoeld en blijft alles binnen het paneel bereikbaar. */
.bmZij .vak{padding:12px;overflow-y:auto;flex:1;min-height:0}
.bmZij h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin:14px 0 7px}
.bmZij h3:first-child{margin-top:0}

.bmOnder{position:fixed;left:calc(50% + (var(--bmAdL,0px) - var(--bmAdR,0px)) / 2);bottom:16px;transform:translateX(-50%);z-index:25;display:flex;
align-items:center;gap:10px;background:rgba(20,27,46,.95);border:1px solid var(--rand);
border-radius:14px;padding:8px 12px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* ---------- velden in de panelen ---------- */
.bmVeld{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--mut);margin-bottom:9px}
.bmVeld input,.bmVeld select{width:100%;background:#0d1220;color:var(--tx);border:1px solid var(--rand);
border-radius:9px;padding:8px 10px;font-size:.86rem}
.bmVeld input:focus,.bmVeld select:focus{outline:none;border-color:var(--or)}
.bmRij{display:flex;gap:8px}
.bmRij>*{flex:1;min-width:0}
.bmChk{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--tx);cursor:pointer;margin-bottom:9px}
.bmKeuzes{display:flex;flex-wrap:wrap;gap:6px}
.bmKeuzes button{background:var(--paneel2);border:1px solid var(--rand);color:var(--tx);
border-radius:9px;padding:6px 10px;font-size:.78rem;font-weight:700;cursor:pointer}
.bmKeuzes button.aan{border-color:var(--or);background:#f9731622}
.bmKaart{background:var(--paneel2);border:2px solid transparent;border-radius:12px;padding:10px;
cursor:pointer;margin-bottom:7px}
.bmKaart.aan{border-color:var(--or)}
.bmKaart b{display:block;font-size:.88rem}
.bmKaart span{color:var(--mut);font-size:.75rem;display:block;margin-top:2px}
.bmKaart i{color:var(--gr);font-style:normal;font-weight:800;font-size:.79rem}
.bmTabel{width:100%;border-collapse:collapse;font-size:.82rem}
.bmTabel td{padding:5px 3px;border-bottom:1px solid var(--rand)}
.bmTabel td:last-child{text-align:right;white-space:nowrap}
.bmTabel input{width:78px;background:#0d1220;border:1px solid var(--rand);border-radius:8px;
color:var(--tx);padding:4px 7px;text-align:right;font-size:.8rem}
.bmTot{font-size:1.05rem;font-weight:900;color:var(--gr)}
.bmMelding{border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:.8rem;font-weight:700}
.bmMelding.rood{background:#ef444422;border:1px solid var(--rd);color:#fca5a5}
.bmMelding.oranje{background:#f59e0b22;border:1px solid var(--am);color:#fcd34d}
.bmMelding.groen{background:#10b98122;border:1px solid #10b98155;color:#6ee7b7}
.bmMelding.blauw{background:#3b82f622;border:1px solid #3b82f655;color:#93c5fd}

/* ---------- overlay voor de winkel ---------- */
#bmOverlay{position:fixed;inset:0;z-index:60;background:rgba(6,10,20,.86);backdrop-filter:blur(6px);
overflow-y:auto;display:none}
#bmOverlay.open{display:block}
#bmOverlay .binnen{max-width:960px;margin:0 auto;padding:20px 16px 70px;position:relative}
#bmOverlay .sluit{position:sticky;top:10px;float:right;z-index:2}
/* de winkelmodule zet hier haar eigen kaarten in */
#bmOverlay .card{background:var(--paneel);border:1px solid #f9731655;border-radius:16px;
padding:16px;margin-top:16px}
#bmOverlay .card h2{color:var(--or);font-size:1.05rem;font-weight:800;margin-bottom:10px}
#bmOverlay .btns{display:flex;gap:10px;flex-wrap:wrap}
#bmOverlay button,#bmOverlay .btn{border:0;border-radius:999px;padding:10px 18px;font-weight:800;
cursor:pointer;font-size:.9rem;color:#fff;background:var(--bl);display:inline-flex;align-items:center;gap:8px}
#bmOverlay .b-or{background:var(--or)} #bmOverlay .b-gr{background:var(--gr)} #bmOverlay .b-gy{background:#475569}
#bmOverlay input,#bmOverlay select,#bmOverlay textarea{background:#0d1220;color:var(--tx);
border:1px solid var(--rand);border-radius:9px;padding:9px 11px;font-size:.9rem}
#bmOverlay table.q{width:100%;border-collapse:collapse;font-size:.88rem}
#bmOverlay table.q td{padding:6px 4px;border-bottom:1px solid var(--rand)}
#bmOverlay table.q td:last-child{text-align:right}
#bmOverlay .badge{display:inline-flex;align-items:center;gap:6px;background:#10b98122;color:#34d399;
border:1px solid #10b98155;border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:700}

@media(max-width:820px){
  .bmZij{right:6px;left:6px;width:auto;top:64px;max-height:52vh}
  .bmRail{left:6px;padding:5px;gap:2px} .bmTl{width:36px;height:36px;font-size:1rem}
  #bmTop .titel{display:none}
  #bmVloer{padding:12px}
}

/* ---------- kwaliteitsstrookje (kwaliteit.js) ----------
   Staat in de lege middenruimte van de bovenbalk. Neemt geen werkvloer af en
   verdwijnt op smalle schermen, waar de balk zelf al krap staat. */
#bmKwal{
  display:flex; align-items:center; gap:14px;
  margin:0 auto; padding:0 14px;
  min-width:0; overflow:hidden;
  font:500 .72rem/1.4 system-ui, sans-serif;
  color:#aab4c9; white-space:nowrap;
}
#bmKwal .bmKwalKop{
  font-weight:800; font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--or, #f97316); flex:none;
}
#bmKwal .bmKwalPunt{ display:inline-flex; align-items:center; gap:5px; cursor:help; flex:none; }
#bmKwal .bmKwalPunt::before{
  content:""; flex:none; width:4px; height:8px;
  border:solid var(--or, #f97316); border-width:0 2px 2px 0;
  transform:rotate(45deg); margin-top:-3px;
}
#bmKwal[dir="rtl"] .bmKwalPunt::before{ border-width:2px 0 0 2px; transform:rotate(-45deg); }

/* onder 1180px wordt de bovenbalk te krap: dan liever niets dan gedrang */
@media(max-width:1180px){ #bmKwal{ display:none; } }