/* Vuexy-inspired light layout (lite) — self-contained */
:root{
  --vx-bg:#f8f8fb;
  --vx-card:#ffffff;
  --vx-border:#ebe9f1;
  --vx-text:#4b4b4b;
  --vx-title:#2c2c2c;
  --vx-muted:#6e6b7b;
  --vx-primary:#7367f0;
  --vx-primary-weak:rgba(115,103,240,.12);
  --vx-shadow: 0 4px 24px rgba(34,41,47,.06);
  --vx-radius: 14px;
}

html,body{height:100%}
body{background:var(--vx-bg); color:var(--vx-text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";}

.vx-wrap{min-height:100vh; display:flex;}
.vx-sidebar{
  width:270px; background:var(--vx-card); border-right:1px solid var(--vx-border);
  position:sticky; top:0; height:100vh; overflow:auto;
}
.vx-brand{
  padding:18px 18px 10px 18px;
  display:flex; align-items:center; gap:10px;
}
.vx-logo{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, #7367f0, #a394ff);
  box-shadow: var(--vx-shadow);
}
.vx-brand h1{margin:0; font-size:18px; font-weight:900; color:var(--vx-title); letter-spacing:.2px}
.vx-brand .sub{margin-top:2px; color:var(--vx-muted); font-size:12px}

.vx-userbox{
  margin:10px 14px 14px 14px; padding:12px 12px;
  border:1px solid var(--vx-border); border-radius: var(--vx-radius);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: #fff;
}
.vx-avatar{
  width:36px; height:36px; border-radius:12px;
  background:var(--vx-primary-weak); display:grid; place-items:center;
  color:var(--vx-primary); font-weight:900;
}
.vx-userbox .name{font-weight:800; color:var(--vx-title); font-size:13px; line-height:1.1}
.vx-userbox .role{color:var(--vx-muted); font-size:12px}

.vx-nav-title{padding:10px 18px 6px 18px; color:var(--vx-muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.vx-link{
  margin:4px 12px; padding:10px 12px; border-radius:12px;
  color:var(--vx-text); text-decoration:none; display:flex; align-items:center; gap:10px;
}
.vx-link svg{width:18px; height:18px; color:var(--vx-muted)}
.vx-link:hover{background: #f6f6ff; color:var(--vx-title)}
.vx-link.active{
  background: var(--vx-primary-weak);
  color:var(--vx-primary);
}
.vx-link.active svg{color:var(--vx-primary)}
.vx-badge{
  margin-left:auto; font-size:11px; padding:3px 8px; border-radius:999px;
  background:#f1f1f8; color:var(--vx-muted);
}

.vx-content{flex:1; padding:18px 18px 28px 18px;}
.vx-topbar{
  background:var(--vx-card); border:1px solid var(--vx-border); border-radius:16px;
  box-shadow: var(--vx-shadow);
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.vx-topbar .title{font-weight:900; color:var(--vx-title)}
.vx-topbar .crumb{color:var(--vx-muted); font-size:12px}
.vx-actions{display:flex; align-items:center; gap:10px}
.vx-search{
  border:1px solid var(--vx-border); border-radius:999px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; background:#fff; min-width:260px;
}
.vx-search input{border:0; outline:0; width:100%; font-size:13px; background:transparent}
.vx-iconbtn{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--vx-border);
  background:#fff; display:grid; place-items:center; cursor:pointer;
}
.vx-iconbtn:hover{background:#fafafe}
.vx-iconbtn svg{width:18px; height:18px; color:var(--vx-muted)}

.vx-card{
  background:var(--vx-card); border:1px solid var(--vx-border); border-radius:16px;
  box-shadow: var(--vx-shadow);
}
.vx-card-pad{padding:14px}
.vx-kpi-label{color:var(--vx-muted); font-size:12px}
.vx-kpi{font-size:26px; font-weight:900; color:var(--vx-title)}

@media (max-width: 992px){
  .vx-sidebar{position:fixed; left:-290px; transition:.2s ease; z-index:1050}
  .vx-sidebar.open{left:0}
  .vx-content{padding:14px}
  .vx-search{display:none}
}

/* Collapsible submenu */
.vx-sub{margin:2px 0 8px 0; padding:0 10px;}
.vx-sublink{margin:2px 12px; padding:9px 12px; border-radius:12px; color:var(--vx-text); text-decoration:none; display:flex; align-items:center; gap:10px; font-size:13px;}
.vx-sublink:hover{background:#f6f6ff;}
.vx-sublink.active{background:var(--vx-primary-weak); color:var(--vx-primary);}
.vx-caret{margin-left:auto; color:var(--vx-muted);}