/* 84-app.css — de Voxel-appschermen in de vormgeving van dit thema.
   De widgets brengen hun eigen CSS mee (vx:forms.css e.d.); dit bestand
   levert alleen de omlijsting die Elementor eerst gaf. */

.tb-app{
  padding:0 var(--tb-page-pad,60px) 56px;
  max-width:var(--tb-max,1440px);margin:0 auto;
}
.tb-app-hoofd{padding:26px 0 18px;}
.tb-app .tb-app-hoofd h1{
  font-family:var(--tb-serif);font-size:clamp(26px,3vw,36px);font-weight:600;
  line-height:1.15;margin:0;color:var(--tb-ink);
}

.tb-app-body{max-width:720px;}
.tb-app-breed .tb-app-body{max-width:none;}

/* Met dashboardrail: smalle iconenkolom links, inhoud rechts. */
.tb-app-body.heeft-rail{
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:28px;align-items:start;
  max-width:none;
}
.tb-app-rail{
  position:sticky;top:16px;
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);padding:10px 0;
}
.tb-app-inhoud{min-width:0;}
.tb-app-breed .tb-app-inhoud{max-width:none;}
.tb-app-body.heeft-rail .tb-app-inhoud{max-width:820px;}
.tb-app-breed .tb-app-body.heeft-rail .tb-app-inhoud{max-width:none;}

.tb-app-widget + .tb-app-widget{margin-top:22px;}
.tb-app-kop{
  font-family:var(--tb-serif);font-size:21px;font-weight:600;color:var(--tb-ink);
  margin:26px 0 10px;
}
.tb-app-tekst{font-size:15.5px;line-height:1.65;color:var(--tb-body);max-width:66ch;}
.tb-app-tekst p{margin:0 0 14px;}
.tb-app-blok{
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-img);padding:16px 18px;margin:0 0 14px;
}
.tb-app-blok h3{font-size:15px;font-weight:600;color:var(--tb-ink);margin:0 0 6px;}
.tb-app-blok p{margin:0;font-size:14px;color:var(--tb-body);}
.tb-app-lijn{border:0;border-top:1px solid var(--tb-line);margin:26px 0;}
.tb-app-ruimte{height:22px;}

@media (max-width:899px){
  .tb-app{padding-left:20px;padding-right:20px;}
  .tb-app-body.heeft-rail{grid-template-columns:minmax(0,1fr);}
  .tb-app-rail{position:static;display:flex;overflow-x:auto;padding:6px;}
}

.tb-app-poort{font-size:15.5px;line-height:1.6;color:var(--tb-body);margin:0 0 18px;max-width:56ch;}
.tb-app-poort a{color:var(--tb-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tb-accent-line);}

/* ---- dashboardrail ------------------------------------------------------
   Iconenkolom, met het label als tooltip-achtige uitklap bij hover en focus,
   zodat de rail smal blijft maar niet raadselachtig wordt. */
.tb-rail-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.tb-rail-lijst a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:52px;color:var(--tb-muted);text-decoration:none;
}
.tb-rail-lijst a:hover,.tb-rail-lijst a:focus-visible{color:var(--tb-action);}
.tb-rail-lijst a[aria-current="page"]{color:var(--tb-action);}
.tb-rail-lijst a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--tb-action);
}
.tb-rail-icoon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;}
.tb-rail-icoon svg{width:20px;height:20px;fill:currentColor;}
.tb-rail-icoon img{width:20px;height:20px;}
.tb-rail-label{
  position:absolute;left:calc(100% + 8px);white-space:nowrap;
  background:var(--tb-ink);color:#fff;font:500 12.5px/1 var(--tb-sans);
  padding:7px 10px;border-radius:6px;opacity:0;visibility:hidden;
  transition:opacity .12s ease;z-index:20;pointer-events:none;
}
.tb-rail-lijst a:hover .tb-rail-label,
.tb-rail-lijst a:focus-visible .tb-rail-label{opacity:1;visibility:visible;}

@media (max-width:899px){
  .tb-rail-lijst{flex-direction:row;}
  .tb-rail-lijst a{width:52px;}
  .tb-rail-label{display:none;}
}