:root{
  --fx-orange:#f97316;
  --fx-orange-soft:#fff7ed;
  --fx-ink:#10192b;
  --fx-muted:#667085;
  --fx-line:#e4e8ee;
  --fx-bg:#f4f6f8;
  --fx-card:#fff;
  --fx-side:210px;
}

*{box-sizing:border-box}

body{
  margin:0!important;
  background:var(--fx-bg)!important;
  color:var(--fx-ink)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

/* oude losse header verbergen */
body>header{
  display:none!important;
}

.fx-management-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--fx-side) minmax(0,1fr);
  grid-template-rows:auto 1fr;
}

.fx-management-top{
  grid-column:1/-1;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:8px 18px;
  background:#fff;
  border-bottom:1px solid var(--fx-line);
}

.fx-management-logo{
  width:155px;
  flex:0 0 155px;
}

.fx-management-logo img{
  display:block;
  width:100%;
  height:auto;
}

.fx-management-context{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.fx-management-context-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #fed7aa;
  border-radius:11px;
  background:#fff7ed;
  color:#f97316;
  font-size:11px;
  font-weight:900;
}

.fx-management-context-copy{
  min-width:0;
}

.fx-management-context-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
}

.fx-management-context-copy span{
  display:block;
  margin-top:3px;
  color:var(--fx-muted);
  font-size:11px;
}

.fx-management-top-spacer{
  flex:1;
}

.fx-management-back{
  border:1px solid #d8dee7;
  border-radius:10px;
  padding:10px 14px;
  background:#fff;
  color:var(--fx-ink);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.fx-management-side{
  grid-column:1;
  grid-row:2;
  min-height:calc(100vh - 76px);
  padding:8px 10px 20px;
  background:#fff;
  border-right:1px solid var(--fx-line);
}

.fx-management-home{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 8px 10px;
  margin-bottom:5px;
  border-bottom:1px solid var(--fx-line);
  color:#344054;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.fx-management-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.fx-management-nav a{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:9px;
  color:#344054;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.fx-management-nav a:hover{
  background:#fff7ed;
}

.fx-management-nav a.active{
  background:var(--fx-orange-soft);
  color:#f97316;
}

.fx-management-nav .sep{
  height:1px;
  margin:7px 4px;
  background:var(--fx-line);
}

.fx-management-content{
  grid-column:2;
  grid-row:2;
  min-width:0;
  padding:26px 28px 60px;
}

/* bestaande main wordt content, niet opnieuw gecentreerd */
.fx-management-content>main{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.fx-management-content .eyebrow{
  color:var(--fx-orange)!important;
}

.fx-management-content h1{
  margin-top:6px!important;
  font-size:34px!important;
  letter-spacing:-.025em;
}

.fx-management-content .card,
.fx-management-content .scroll{
  border-color:var(--fx-line)!important;
  box-shadow:0 5px 18px rgba(16,24,40,.035);
}

.fx-management-content .button{
  background:var(--fx-orange)!important;
}

@media(max-width:800px){
  .fx-management-shell{
    display:block;
  }

  .fx-management-top{
    min-height:66px;
    padding:7px 12px;
  }

  .fx-management-logo{
    width:130px;
    flex-basis:130px;
  }

  .fx-management-context{
    display:none;
  }

  .fx-management-side{
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--fx-line);
    overflow-x:auto;
  }

  .fx-management-nav{
    flex-direction:row;
    width:max-content;
  }

  .fx-management-nav .sep{
    width:1px;
    height:30px;
  }

  .fx-management-content{
    padding:20px 14px 45px;
  }
}


/* Fenix uniforme beheer-shell v3 */
.fx-management-top{
  min-height:86px;
  padding:10px 20px;
}

.fx-management-logo{
  width:165px;
  flex-basis:165px;
}

.fx-management-context{
  padding-left:14px;
  border-left:1px solid var(--fx-line);
}

.fx-management-back{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:12px;
  transition:.16s ease;
}

.fx-management-back:hover{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#f97316;
}

.fx-management-side{
  min-height:calc(100vh - 86px);
  padding:12px 12px 24px;
}

.fx-management-nav a{
  min-height:46px;
  border-radius:11px;
  padding:10px 13px;
  font-size:13px;
}

.fx-management-nav a.active{
  position:relative;
  background:#fff1e7!important;
  color:#f97316!important;
}

.fx-management-nav a.active:before{
  content:"";
  position:absolute;
  left:-12px;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:#f97316;
}

.fx-management-content{
  padding:28px 30px 70px;
}

.fx-management-content .fenix-management-hero{
  margin-bottom:24px;
}

@media(max-width:800px){
  .fx-management-top{
    min-height:68px;
  }

  .fx-management-side{
    min-height:0;
  }
}