/* ARGMS v2.29.2 - omkeerbare designproef voor hoofdmenu en header */

body.argms-design-v21164{
  --design-nav-width21164:258px;
  --design-header-height21164:76px;
  --design-navy21164:#11213c;
  --design-navy-deep21164:#0d1a30;
  --design-navy-soft21164:#182e50;
  --design-blue21164:#3478ea;
  --design-header-text21164:#1c2a40;
  --design-header-muted21164:#718096;
  background:#f4f6f9;
}

body.argms-design-v21164 #app.app:not(.hidden){
  display:grid;
  grid-template-columns:var(--design-nav-width21164) minmax(0,1fr);
  grid-template-rows:var(--design-header-height21164) minmax(calc(100vh - var(--design-header-height21164)),auto);
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}

body.argms-design-v21164 .topbar{
  grid-column:1/-1;
  grid-row:1;
  display:flex;
  height:var(--design-header-height21164);
  min-width:0;
  gap:14px;
  padding:0 20px 0 0;
  color:var(--design-header-text21164);
  background:#fff;
  border-bottom:1px solid #e1e6ed;
  box-shadow:0 4px 18px rgba(25,42,68,.07);
}

body.argms-design-v21164 .topbar .brand{
  align-self:stretch;
  flex:0 0 var(--design-nav-width21164);
  min-width:0;
  height:var(--design-header-height21164);
  gap:11px;
  padding:0 16px;
  color:#fff;
  background:linear-gradient(150deg,var(--design-navy-deep21164),var(--design-navy-soft21164));
  transition:flex-basis .2s ease,padding .2s ease;
}

body.argms-design-v21164 .brand-logo{
  width:46px;
  height:42px;
  flex:0 0 46px;
  overflow:hidden;
  padding:7px;
  border-radius:11px;
  background:#fff;
  box-shadow:0 7px 18px rgba(0,0,0,.2);
}

body.argms-design-v21164 .brand img{
  width:100%;
  height:100%;
  object-fit:contain;
}

body.argms-design-v21164 .brand-title{
  overflow:hidden;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.argms-design-v21164 .brand-sub{
  overflow:hidden;
  margin-top:3px;
  color:#aebed5;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.argms-design-v21164 .design-nav-toggle21164{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border:1px solid #dce3ec;
  border-radius:10px;
  color:#526178;
  background:#fff;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}

body.argms-design-v21164 .design-nav-toggle21164:hover{
  color:#245fbd;
  border-color:#c7d5e7;
  background:#f4f7fb;
}

body.argms-design-v21164 .design-nav-toggle21164 svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}

body.argms-design-v21164 .global-search{
  max-width:660px;
  margin-left:4px;
}

body.argms-design-v21164 .global-search::before{
  top:8px;
  color:#77869b;
}

body.argms-design-v21164 .global-search input{
  height:42px;
  border:1px solid #dce3ec;
  border-radius:11px;
  color:#223048;
  background:#f7f9fc;
  box-shadow:none;
}

body.argms-design-v21164 .global-search input::placeholder{color:#7a879a}
body.argms-design-v21164 .global-search input:hover{border-color:#cbd5e2;background:#fff}

body.argms-design-v21164 .top-actions{
  flex:0 0 auto;
  gap:8px;
}

.design-preview-toggle21164{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  gap:8px;
  border:1px solid #cfd9e7;
  border-radius:10px;
  padding:0 12px;
  color:#425269;
  background:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.design-preview-toggle21164:hover{
  color:#245fbd;
  border-color:#aebfd5;
  background:#f5f8fc;
}

.design-preview-toggle21164 .design-preview-dot21164{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2fa477;
  box-shadow:0 0 0 4px rgba(47,164,119,.12);
}

.design-preview-toggle21164[aria-pressed="false"] .design-preview-dot21164{
  background:#8996a8;
  box-shadow:0 0 0 4px rgba(137,150,168,.12);
}

body.argms-design-v21164 .icon-btn{
  width:40px;
  height:40px;
  border:1px solid #dce3ec;
  border-radius:10px;
  color:#526178;
  background:#fff;
}

body.argms-design-v21164 .icon-btn:hover{
  color:#245fbd;
  border-color:#c7d5e7;
  background:#f4f7fb;
}

body.argms-design-v21164 .user-chip{
  min-height:44px;
  border:0;
  border-radius:11px;
  padding:4px 7px 4px 5px;
  color:#233149;
  background:transparent;
}

body.argms-design-v21164 .user-chip:hover{background:#f2f5f9}
body.argms-design-v21164 .user-chip #headerUserRole{color:#758399!important}
body.argms-design-v21164 .user-caret{color:#718096}
body.argms-design-v21164 .avatar{border-radius:10px;background:#deebff;color:#1d5fbf}
body.argms-design-v21164 .user-menu{top:52px;border-radius:13px;border-color:#dfe5ed;box-shadow:0 20px 55px rgba(20,35,56,.2)}

body.argms-design-v21164 .layout{display:contents!important}

body.argms-design-v21164 .sidebar{
  grid-column:1;
  grid-row:2;
  display:block!important;
  position:sticky;
  top:var(--design-header-height21164)!important;
  z-index:24;
  width:auto;
  height:calc(100vh - var(--design-header-height21164))!important;
  padding:12px 10px 24px!important;
  overflow-x:hidden;
  overflow-y:auto;
  color:#d1dceb;
  background:linear-gradient(180deg,var(--design-navy21164),#132746)!important;
  border-right:0!important;
  scrollbar-color:#405474 transparent;
}

body.argms-design-v21164 .sidebar .nav-group,
body.argms-design-v21164 .sidebar .finance-side-label2114{
  overflow:hidden;
  margin:15px 10px 6px!important;
  color:#8296b2!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.argms-design-v21164 .sidebar .nav-group:first-child{margin-top:3px!important}

body.argms-design-v21164 .sidebar .nav-item,
body.argms-design-v21164 .sidebar .finance-side-link2114{
  min-height:39px!important;
  margin:2px 0!important;
  padding:0 11px!important;
  border-radius:9px!important;
  color:#c6d2e3!important;
  font-size:13px!important;
  font-weight:500!important;
  white-space:nowrap;
}

body.argms-design-v21164 .sidebar .nav-item:hover,
body.argms-design-v21164 .sidebar .finance-side-link2114:hover{
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
  transform:none!important;
}

body.argms-design-v21164 .sidebar .nav-item.active,
body.argms-design-v21164 .sidebar .finance-side-link2114.active{
  color:#fff!important;
  background:rgba(70,135,236,.22)!important;
  box-shadow:inset 3px 0 0 #6ca2f5!important;
}

body.argms-design-v21164 .sidebar .nav-item.active::before{display:none!important}
body.argms-design-v21164 .sidebar .nav-icon,
body.argms-design-v21164 .sidebar .finance-side-icon2114{
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  margin:0 10px 0 0!important;
  color:#95a9c4!important;
}
body.argms-design-v21164 .sidebar .nav-item.active .nav-icon,
body.argms-design-v21164 .sidebar .finance-side-link2114.active .nav-icon{color:#9cc0fa!important}

body.argms-design-v21164 .main{
  grid-column:2;
  grid-row:2;
  width:100%;
  max-width:1760px;
  min-width:0;
  margin:0 auto;
  padding:27px 30px 50px;
  background:#f4f6f9;
}

body.argms-design-v21164 .page-title{color:#18253a;font-size:26px;font-weight:700}
body.argms-design-v21164 .page-sub{color:#718096}
body.argms-design-v21164 .card,
body.argms-design-v21164 .widget{border-color:#dfe5ed;box-shadow:0 8px 24px rgba(28,43,65,.055)}

.design-nav-backdrop21164{display:none}

body.argms-design-v21164.argms-sidebar-collapsed{
  --design-nav-width21164:76px;
}

body.argms-design-v21164.argms-sidebar-collapsed .topbar .brand{
  justify-content:center;
  padding:0;
}

body.argms-design-v21164.argms-sidebar-collapsed .brand-logo,
body.argms-design-v21164.argms-sidebar-collapsed .brand>div:last-child{display:none}

body.argms-design-v21164.argms-sidebar-collapsed .topbar .brand::before{
  content:"A";
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:#3478ea;
  box-shadow:0 8px 18px rgba(34,99,204,.35);
  font-size:17px;
  font-weight:700;
}

body.argms-design-v21164.argms-sidebar-collapsed .sidebar .nav-group,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .finance-side-label2114,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .nav-label21164,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .finance-side-link2114>span:last-child,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .sidebar-license21158{display:none!important}

body.argms-design-v21164.argms-sidebar-collapsed .sidebar .nav-item,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .finance-side-link2114{
  justify-content:center!important;
  padding:0!important;
}

body.argms-design-v21164.argms-sidebar-collapsed .sidebar .nav-icon,
body.argms-design-v21164.argms-sidebar-collapsed .sidebar .finance-side-icon2114{margin:0!important}

@media(max-width:1120px){
  body.argms-design-v21164 .design-preview-toggle21164 .design-preview-label21164{display:none}
  body.argms-design-v21164 .design-preview-toggle21164{width:40px;justify-content:center;padding:0}
  body.argms-design-v21164 .global-search{max-width:none}
}

@media(max-width:900px){
  body.argms-design-v21164{
    --design-nav-width21164:244px;
    --design-header-height21164:68px;
  }
  body.argms-design-v21164 #app.app:not(.hidden){
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--design-header-height21164) auto;
  }
  body.argms-design-v21164 .topbar{grid-column:1;gap:9px;padding:0 12px}
  body.argms-design-v21164 .topbar .brand{flex:0 0 auto;width:auto;height:auto;padding:0;background:transparent}
  body.argms-design-v21164 .brand-logo{display:grid;width:40px;height:40px;flex-basis:40px;padding:5px;border:1px solid #dce3ec;box-shadow:none}
  body.argms-design-v21164 .brand>div:last-child{display:none}
  body.argms-design-v21164 .design-nav-toggle21164{order:-1}
  body.argms-design-v21164 .global-search{display:block;min-width:0;margin:0}
  body.argms-design-v21164 .global-search input{padding-right:8px}
  body.argms-design-v21164 .top-actions{margin-left:0}
  body.argms-design-v21164 .design-preview-toggle21164,
  body.argms-design-v21164 .user-chip>div:not(.avatar),
  body.argms-design-v21164 .user-caret{display:none}
  body.argms-design-v21164 .sidebar{
    position:fixed!important;
    top:var(--design-header-height21164)!important;
    left:0;
    bottom:0;
    z-index:64;
    width:244px;
    height:calc(100vh - var(--design-header-height21164))!important;
    transform:translateX(-102%);
    transition:transform .2s ease;
    box-shadow:12px 0 32px rgba(8,18,34,.25);
  }
  body.argms-design-v21164.argms-mobile-nav-open .sidebar{transform:translateX(0)}
  body.argms-design-v21164 .main{grid-column:1;grid-row:2;padding:22px 18px 40px}
  body.argms-design-v21164 .design-nav-backdrop21164{
    position:fixed;
    inset:var(--design-header-height21164) 0 0;
    z-index:63;
    border:0;
    background:rgba(11,24,44,.38);
    cursor:pointer;
  }
  body.argms-design-v21164.argms-mobile-nav-open .design-nav-backdrop21164{display:block}
}

@media(max-width:620px){
  body.argms-design-v21164 .global-search{display:none}
  body.argms-design-v21164 .top-actions{margin-left:auto}
  body.argms-design-v21164 .main{padding:18px 13px 34px}
  body.argms-design-v21164 .page-title{font-size:23px}
}

@media(prefers-reduced-motion:reduce){
  body.argms-design-v21164 #app.app:not(.hidden),
  body.argms-design-v21164 .topbar .brand,
  body.argms-design-v21164 .sidebar{transition:none}
}