body { font-family: Arial, sans-serif; margin:0; }
.vl-app { display:flex; min-height:100vh; }
.vl-sidebar { width:200px; border-right:1px solid #e6e6e6; background:#fafafa; padding:12px 10px; }
.vl-sidebar__brand { margin-bottom:12px; }
.vl-sidebar__title { font-weight:700; font-size:16px; letter-spacing:0.2px; }

/* Sidebar nav */
.vl-nav { display:flex; flex-direction:column; gap:4px; }
.vl-nav__link,
.vl-nav__groupTitle { font-size:11px; }
.vl-nav__link { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px; text-decoration:none; color:#222; border:1px solid transparent; }
.vl-nav__link:hover { background:#f0f0f0; }
.vl-nav__link.active { background:transparent; color:#111; font-weight:600; position:relative; }
.vl-nav__link.active::before { content:''; position:absolute; left:-10px; top:4px; bottom:4px; width:3px; background:#222; border-radius:3px; }
.vl-nav__group { border:0; padding:0; margin:0; }
.vl-nav__groupTitle { list-style:none; cursor:pointer; padding:5px 8px; border-radius:5px; display:flex; align-items:center; gap:8px; }
.vl-nav__groupTitle:hover { background:#f0f0f0; }
.vl-nav__groupTitle.active { background:transparent; color:#111; font-weight:600; position:relative; }
.vl-nav__groupTitle.active::before { content:''; position:absolute; left:-10px; top:4px; bottom:4px; width:3px; background:#222; border-radius:3px; }
.vl-nav__children { display:flex; flex-direction:column; gap:4px; padding:6px 0 6px 16px; }
.vl-nav__icon { width:16px; height:16px; flex:0 0 16px; opacity:0.9; }
.vl-nav__label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.vl-main { flex:1; padding:18px; }
.vl-topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.vl-topbar__right { font-size:12px; color:#555; }

.card { background:#f7f7f7; padding:12px; border:1px solid #e2e2e2; border-radius:8px; margin: 12px 0; }
label { font-size:12px; color:#444; display:block; margin-bottom:4px; }
input, select, textarea { padding:7px; border:1px solid #ccc; border-radius:6px; }
button { padding:8px 12px; border:1px solid #333; border-radius:6px; background:#fff; cursor:pointer; }
table { width:100%; border-collapse: collapse; margin-top:10px; }
th, td { border-bottom:1px solid #e6e6e6; padding:8px; text-align:left; vertical-align:top; }
th a { color:inherit; text-decoration:none; }
.small { font-size: 12px; color:#555; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#eee; font-size:12px; }
.success { background:#e6ffed; border:1px solid #b7f5c6; padding:10px; border-radius:8px; }
.error { background:#ffecec; border:1px solid #ffb8b8; padding:10px; border-radius:8px; }

/* Filter / toolbar rows */
.bar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.bar > div { min-width:160px; }
.bar .small { margin-top:4px; }

.pager a { margin-right:8px; }

/* Dashboard page styles */
.dash-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dash-title { font-size:20px; font-weight:700; }
.dash-meta { color:#555; font-size:12px; line-height:1.5; }
.dash-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.dash-card { background:#fff; border:1px solid #e6e6ee; border-radius:10px; padding:14px; box-shadow:0 1px 8px rgba(0,0,0,0.06); }
.dash-card-title { margin:0 0 8px 0; font-size:16px; }
.dash-row { display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:13px; flex-wrap:wrap; }
.dash-muted { color:#666; }
.dash-bar { height:10px; background:#eee; border-radius:10px; overflow:hidden; margin-top:8px; }
.dash-bar-fill { height:10px; background:#407a47; width:0%; }
.dash-pill { display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#2b3a8a; font-size:12px; }
.dash-next { margin-top:10px; padding:10px; border-radius:8px; background:#f7f7ff; border:1px solid #e7e7ff; }
.dash-next-label { font-size:12px; color:#555; margin-bottom:4px; }
.dash-next-val { font-size:13px; }
.dash-empty { padding:16px; background:#fff; border:1px dashed #d8d8e5; border-radius:10px; color:#444; }
.dash-hint { margin-top:6px; color:#666; font-size:12px; }
.dash-mt-4 { margin-top:4px; }
.dash-mt-6 { margin-top:6px; }