/* Busitools - gedeelde schil.
 *
 * Geeft elke tool dezelfde uitstraling als Busiboard: een vaste bovenbalk over
 * de volle breedte, inhoud die het hele scherm gebruikt, en dezelfde diepte in
 * kaarten en knoppen. Deze stijl komt NA de eigen stijl van de tool en raakt
 * enkel de omhulling aan, nooit de werking.
 *
 * Lokaal : D:\AI\Busimatch V2\public_html\busitools\_shared\schil.css
 * Server : /busitools/_shared/schil.css
 */
:root{ --schil-rand: #263149; }

body{
  min-height:100vh;
  background:
    radial-gradient(1100px 520px at 10% -14%, rgba(249,115,22,.14), transparent 62%),
    radial-gradient(900px 460px at 97% 2%,  rgba(168,85,247,.13), transparent 62%),
    var(--bg, #0a0f1f);
  background-attachment: fixed;
}

/* De kolom loopt over de volle breedte. De bovenbalk vult die breedte helemaal,
   de rest van de inhoud staat gecentreerd met een leesbare bovengrens.
   (Percentages worden per element berekend, dus de balk krijgt zijn ruimte via
   padding en niet via een negatieve marge.) */
body > .wrap{
  max-width:none;
  width:100%;
  margin:0;
  padding:0 0 54px;
}

body > .wrap > header{
  position:sticky; top:0; z-index:40;
  margin:0 0 20px;
  padding:12px max(18px, calc((100% - 1400px) / 2));
  background:rgba(10,15,31,.93);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--schil-rand);
  border-radius:0;
}

body > .wrap > *:not(header){
  max-width:1400px;
  width:calc(100% - 36px);
  margin-left:auto;
  margin-right:auto;
}
body > .wrap > header h1{letter-spacing:-.4px}
body > .wrap > header img{box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* kaarten krijgen wat diepte, zoals de panelen op Busiboard */
.card{
  box-shadow:0 10px 30px rgba(0,0,0,.26);
  border-radius:16px;
}

/* knoppen reageren op aanwijzen */
button, .btn{
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
button:hover:not(:disabled), .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.07);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
button:active:not(:disabled){transform:translateY(0)}

/* invoervelden en keuzelijsten in dezelfde stijl */
select, input[type=text], input[type=number], input[type=email], textarea{
  transition:border-color .12s ease, box-shadow .12s ease;
}
select:focus, input:focus, textarea:focus{
  outline:none;
  border-color:var(--or, #f97316);
  box-shadow:0 0 0 3px rgba(249,115,22,.16);
}

/* een rustiger schuifbalk */
*{scrollbar-width:thin; scrollbar-color:#33405e transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#33405e;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* knop terug naar het overzicht, rechtsonder */
#schilTerug{
  position:fixed; right:16px; bottom:16px; z-index:45;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(20,27,46,.95); color:#e5e7eb;
  border:1px solid var(--schil-rand); border-radius:999px;
  padding:9px 16px; font:700 .82rem/1 system-ui, sans-serif;
  text-decoration:none; backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
#schilTerug:hover{border-color:var(--or, #f97316); color:#fff}

@media(max-width:720px){
  body > .wrap > header{padding-top:10px;padding-bottom:10px}
  #schilTerug{right:10px;bottom:10px;padding:8px 13px;font-size:.76rem}
}