/* UI-057 deel 2: basis - appschil, navigatie, knoppen, meldingen. */
:root{--hrw-primary:#3762ea;--hrw-green:#1f6547;--hrw-dark:#132a21;--hrw-soft:#eaf3ee}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
.navbar-menu{background:var(--hrw-dark)!important}
.navbar-brand-box{background:transparent!important}
.logo{color:#fff!important;text-decoration:none;font-size:18px;font-weight:800;letter-spacing:.03em}
.logo small{font-size:11px;font-weight:500;opacity:.7}
.logo-sm{font-size:13px}
.sidebar-scroll{height:calc(100vh - 150px);overflow:auto;padding:8px 0}
.navbar-menu .navbar-nav .nav-link.active{background:rgba(255,255,255,.12);color:#fff}
.navbar-menu .navbar-nav .nav-link:hover{color:#fff}
.sidebar-footer{position:absolute;bottom:0;left:0;right:0;padding:18px 24px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);display:flex;flex-direction:column}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20b26b;margin-right:4px}
.page-content{min-height:100vh}
.card{box-shadow:0 2px 8px rgba(20,45,34,.05)}
.nowrap{white-space:nowrap}
.text-hrw{color:var(--hrw-green)!important}
.bg-hrw-subtle{background:var(--hrw-soft)!important}
.btn-hrw{background:var(--hrw-primary);border-color:var(--hrw-primary);color:#fff}
.btn-hrw:hover{background:#274fcf;border-color:#274fcf;color:#fff}
.place-items-center{place-items:center}
.app-notifications{position:fixed;top:84px;right:24px;z-index:1090;display:grid;gap:10px;width:min(390px,calc(100vw - 32px))}
.app-notification{display:grid;grid-template-columns:28px 1fr 20px;align-items:start;gap:10px;padding:14px 15px;border:1px solid transparent;border-left-width:4px;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(19,42,33,.16);opacity:0;transform:translateY(-8px);transition:.2s ease}
.app-notification.show{opacity:1;transform:none}
.app-notification>i{font-size:22px}
.app-notification strong,.app-notification span{display:block}
.app-notification strong{margin-bottom:2px}
.app-notification-success{border-color:#2dcb73;background:#f0fbf5;color:#17643c}
.app-notification-info{border-color:#438eff;background:#f2f7ff;color:#245792}
.app-notification-warning{border-color:#f7b84b;background:#fff9ee;color:#805914}
.app-notification-danger{border-color:#ff6c6c;background:#fff3f3;color:#8b2929}
.app-notification .btn-close{font-size:10px}
@media(max-width:575.98px){.app-notifications{top:70px;right:16px}}
@media(max-width:767.98px){.sidebar-footer{display:none}.sidebar-scroll{height:calc(100vh - 70px)}}
/* Gedeelde horizontale applicatieschil en vaste pagina-actiebalk. */
.hrw-topbar-brand{display:flex;align-items:center;gap:11px;color:var(--tb-body-color);text-decoration:none}
.hrw-topbar-brand:hover{color:var(--hrw-green)}
.hrw-topbar-brand strong,.hrw-topbar-brand small{display:block;line-height:1.2}
.hrw-topbar-brand small{color:var(--tb-secondary-color);font-size:11px;font-weight:500}
.hrw-brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#c1272d;color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em}
.hrw-page-command-bar{position:relative;top:auto;z-index:auto;margin:calc(var(--tb-grid-gutter-width) * -.5) calc(var(--tb-grid-gutter-width) * -.5) var(--tb-grid-gutter-width);padding:14px calc(var(--tb-grid-gutter-width) * .5);border-bottom:1px solid var(--tb-border-color);background:transparent}
.hrw-page-context{min-width:0}
.hrw-page-context h4{text-transform:none}
.hrw-page-actions{flex:0 0 auto}
.hrw-page-actions>.d-flex{flex-wrap:wrap;justify-content:flex-end}
html[data-layout=horizontal] .app-notifications{top:134px}
@media(max-width:991px){
  html[data-layout=horizontal] .app-notifications{top:84px}
}
@media(max-width:575.98px){
  .hrw-page-command-bar{align-items:stretch!important}
  .hrw-page-actions{width:100%;margin-top:10px}
  .hrw-page-actions>.d-flex{justify-content:flex-start}
  html[data-layout=horizontal] .app-notifications{top:70px}
}
/* Eén gedeelde meldingszone: maximaal drie meldingen, zonder overlap. */
.app-notifications{
  align-content:start;
  max-height:calc(100vh - 158px);
  overflow-y:auto;
  padding:2px;
  pointer-events:none;
  overscroll-behavior:contain;
}
.app-notification{
  position:relative;
  width:100%;
  margin:0;
  pointer-events:auto;
}
@media(max-width:991px){
  .app-notifications{max-height:calc(100vh - 108px)}
}
@media(max-width:575.98px){
  .app-notifications{
    left:16px;
    right:16px;
    width:auto;
    max-height:calc(100vh - 86px);
  }
}
/* Vastgestelde primaire actiekleur en gedeeld overzichtspatroon. */
.btn-hrw{background:var(--hrw-primary);border-color:var(--hrw-primary);color:#fff}
.btn-hrw:hover{background:#274fcf;border-color:#274fcf;color:#fff}
.btn-hrw:focus-visible{outline:3px solid rgba(55,98,234,.35);outline-offset:2px}
@font-face {
  font-family: "HRW Kalam";
  src: url("fonts/Kalam-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}