:root{
  --meos-blue:#0a4f87;
  --meos-blue-dark:#084573;
  --meos-bg:#f3f6fb;
  --meos-card:#ffffff;
  --meos-border:#e6edf6;
  --meos-text:#0f172a;
  --meos-muted:#6b7280;
  --meos-sidebar:#ffffff;
  --meos-sidebar-border:#e9eef6;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--meos-text);
  background:var(--meos-bg);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-style: normal;
}

/* Layout */
.meos-app{ min-height:100vh; }

.meos-sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:260px;
  background:var(--meos-sidebar);
  border-right:1px solid var(--meos-sidebar-border);
  padding:14px 12px;
  overflow:auto;
}

.meos-sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 8px 16px;
}
.meos-sidebar-brand img{
  width:175px;
  height:auto;
  object-fit:contain;
}

.meos-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 4px;
}

.meos-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#1f2937;
  font-weight:600;
  font-size:.92rem;
}
.meos-nav-item i{
  width:22px;
  text-align:center;
  font-size:1rem;
  color:#1e3a8a;
  opacity:.85;
}
.meos-nav-item:hover{
  background:#f4f7fd;
}
.meos-nav-item.active{
  background:#eef5ff;
  color:#0b3f73;
}
.meos-nav-item.active i{
  color:#0b3f73;
  opacity:1;
}

.meos-nav-section{
  margin-top:12px;
  padding:10px 10px 4px;
  font-size:.70rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
  font-weight:800;
}

.meos-main{
  margin-left:260px;
  min-height:100vh;
}

/* Responsive */
@media (max-width: 992px){
  .meos-sidebar{ position:static; width:auto; border-right:none; }
  .meos-main{ margin-left:0; }
}

/* Profiel */
.meos-user{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:.92rem;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}

.meos-user {
  background: transparent;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}


.meos-user:focus {
  box-shadow: none;
}

.dropdown-menu {
  border-radius: 10px;
  padding: 6px;
}

.meos-hero-inner{
  padding-top:10px;
}