:root{
  --vt-navy:#0f1b3d;
  --vt-navy-2:#152552;
  --vt-blue:#2f5eff;
  --vt-blue-dark:#1f42c9;
  --vt-bg:#f4f6fb;
  --vt-card:#ffffff;
  --vt-border:#e7ebf3;
  --vt-text:#1c2333;
  --vt-muted:#6b7488;
  --vt-green:#1aa971;
  --vt-amber:#e0972a;
  --vt-red:#e0433f;
  --vt-sidebar-w:264px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  background:var(--vt-bg);
  color:var(--vt-text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:.925rem;
}
a{text-decoration:none}
.app-shell{display:flex;min-height:100vh}

/* Sidebar */
.vt-sidebar{
  width:var(--vt-sidebar-w);
  background:linear-gradient(180deg,var(--vt-navy) 0%, var(--vt-navy-2) 100%);
  color:#c9d2ea;
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  z-index:1030;
  transition:transform .25s ease;
}
.vt-sidebar .brand{
  display:flex;align-items:center;gap:.6rem;
  padding:1.15rem 1.25rem;
  color:#fff;font-weight:700;font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.vt-sidebar .brand .logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--vt-blue);
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;
}
.vt-nav{flex:1;overflow-y:auto;padding:.75rem .6rem}
.vt-nav .nav-link{
  color:#aab4d4;padding:.55rem .75rem;border-radius:.5rem;
  display:flex;align-items:center;gap:.65rem;font-size:.87rem;font-weight:500;
  margin-bottom:.15rem;
}
.vt-nav .nav-link i{width:18px;text-align:center;font-size:.9rem}
.vt-nav .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.vt-nav .nav-link.active{background:var(--vt-blue);color:#fff}
.vt-nav .nav-section{
  text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:#66709a;
  padding:1rem .75rem .35rem;font-weight:700;
}
.vt-nav .nav-sublink{padding-left:2.3rem;font-size:.83rem}
.vt-nav .nav-group-toggle{
  width:100%;border:0;background:none;text-align:left;cursor:pointer;
  color:#aab4d4;padding:.55rem .75rem;border-radius:.5rem;
  display:flex;align-items:center;gap:.65rem;font-size:.87rem;font-weight:500;
  margin-bottom:.15rem;
}
.vt-nav .nav-group-toggle i.fa-chevron-down{width:auto;font-size:.65rem;margin-left:auto;transition:transform .2s ease;flex:0 0 auto}
.vt-nav .nav-group-toggle i:first-child{width:18px;text-align:center;font-size:.9rem}
.vt-nav .nav-group-toggle:hover{background:rgba(255,255,255,.06);color:#fff}
.vt-nav .nav-group-toggle.active{color:#fff}
.vt-nav .nav-group-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.vt-nav .nav-divider{height:1px;background:rgba(255,255,255,.08);margin:.75rem .75rem}
.vt-sidebar-footer{padding:.9rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.75rem;color:#7583ac}

/* Main area */
.vt-main{flex:1;margin-left:var(--vt-sidebar-w);min-width:0;display:flex;flex-direction:column}
.vt-topbar{
  background:#fff;border-bottom:1px solid var(--vt-border);
  padding:.6rem 1.25rem;display:flex;align-items:center;gap:.85rem;
  position:sticky;top:0;z-index:1020;
}
.vt-topbar .search-box{
  flex:1;max-width:420px;position:relative;
}
.vt-topbar .search-box input{
  border-radius:.6rem;border:1px solid var(--vt-border);background:var(--vt-bg);
  padding:.5rem .75rem .5rem 2.2rem;font-size:.85rem;width:100%;
}
.vt-topbar .search-box i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--vt-muted)}
.vt-content{padding:1.35rem;flex:1}
.page-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.1rem}
.page-title-row h1{font-size:1.35rem;font-weight:700;margin:0}
.page-subtitle{color:var(--vt-muted);font-size:.85rem;margin-top:.15rem}

.icon-btn{
  width:38px;height:38px;border-radius:.6rem;border:1px solid var(--vt-border);
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--vt-text);position:relative;
}
.icon-btn:hover{background:var(--vt-bg)}
.notif-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--vt-red);border:2px solid #fff}

.avatar-circle{
  width:38px;height:38px;border-radius:50%;background:var(--vt-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}

/* Cards */
.vt-card{background:var(--vt-card);border:1px solid var(--vt-border);border-radius:.85rem}
.stat-card{padding:1.1rem 1.2rem;border-radius:.85rem;background:#fff;border:1px solid var(--vt-border);height:100%}
@media (min-width: 1200px){ .stat-card-col{flex:0 0 20%;max-width:20%} }

.chart-box{position:relative;height:240px;width:100%}
.chart-box canvas{position:absolute;top:0;left:0;width:100% !important;height:100% !important}
.stat-card .stat-icon{width:42px;height:42px;border-radius:.65rem;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.stat-card .stat-value{font-size:1.55rem;font-weight:700;margin-top:.5rem}
.stat-card .stat-label{color:var(--vt-muted);font-size:.8rem;margin-top:.1rem}

.badge-status{padding:.28rem .6rem;border-radius:2rem;font-size:.74rem;font-weight:600;white-space:nowrap}

.btn-primary{background:var(--vt-blue);border-color:var(--vt-blue)}
.btn-primary:hover{background:var(--vt-blue-dark);border-color:var(--vt-blue-dark)}
.btn-outline-primary{color:var(--vt-blue);border-color:var(--vt-blue)}
.btn-outline-primary:hover{background:var(--vt-blue);border-color:var(--vt-blue)}
.text-vt-blue{color:var(--vt-blue)}

.table-vt thead th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--vt-muted);
  border-bottom:1px solid var(--vt-border);font-weight:700;background:#fafbfd;
}
.table-vt td{vertical-align:middle;font-size:.85rem}
.table-vt tbody tr:hover{background:#f8faff}

.asset-thumb{width:42px;height:42px;border-radius:.5rem;object-fit:cover;background:#eef1f8}

.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;background:var(--vt-border)}
.timeline-item{position:relative;padding-bottom:1.35rem}
.timeline-item .t-dot{position:absolute;left:-2rem;top:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--vt-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.6rem}
.timeline-item .t-title{font-weight:600;font-size:.87rem}
.timeline-item .t-meta{color:var(--vt-muted);font-size:.76rem}
.timeline-item .t-desc{font-size:.82rem;color:#454e63;margin-top:.15rem}

.card-view-item{border:1px solid var(--vt-border);border-radius:.85rem;background:#fff;padding:1rem;height:100%}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--vt-muted)}
.empty-state i{font-size:2.6rem;opacity:.35;margin-bottom:.75rem}

.wizard-steps{display:flex;gap:.4rem;margin-bottom:1.5rem;flex-wrap:wrap}
.wizard-steps .step{flex:1;min-width:100px;text-align:center;padding:.55rem .3rem;border-radius:.5rem;background:#eef1f8;color:var(--vt-muted);font-size:.76rem;font-weight:600}
.wizard-steps .step.active{background:var(--vt-blue);color:#fff}
.wizard-steps .step.done{background:#e6f6ee;color:var(--vt-green)}

.sidebar-toggle-btn{display:none}

@media (max-width: 991.98px){
  .vt-sidebar{transform:translateX(-100%)}
  .vt-sidebar.open{transform:translateX(0)}
  .vt-main{margin-left:0}
  .sidebar-toggle-btn{display:flex}
  .vt-topbar .search-box{max-width:none}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,20,40,.45);z-index:1025}
  .sidebar-backdrop.show{display:block}
}

.bottom-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:1040;
  background:#fff;border-top:1px solid var(--vt-border);
  padding:.4rem .25rem;justify-content:space-around;
  box-shadow:0 -2px 10px rgba(15,20,40,.06);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--vt-muted);font-size:.65rem;padding:.25rem .4rem}
.bottom-nav a.active{color:var(--vt-blue)}
.bottom-nav a i{font-size:1.05rem}
@media (max-width: 767.98px){
  .bottom-nav{display:flex}
  .vt-content{padding-bottom:4.7rem}
}

.login-wrap{min-height:100vh;display:flex}
.login-side{
  flex:1;background:linear-gradient(160deg,var(--vt-navy),var(--vt-navy-2));
  color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:center;
}
.login-form-side{width:460px;max-width:100%;display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}
@media (max-width:900px){.login-side{display:none}.login-form-side{width:100%}}

.demo-account-btn{
  border:1px solid var(--vt-border);border-radius:.6rem;padding:.55rem .7rem;width:100%;text-align:left;
  background:#fff;font-size:.78rem;display:flex;align-items:center;gap:.55rem;
}
.demo-account-btn:hover{background:var(--vt-bg)}
.demo-account-btn .dot{width:8px;height:8px;border-radius:50%}

.qr-scan-box{
  background:#000;border-radius:1rem;overflow:hidden;position:relative;aspect-ratio:1/1;max-width:420px;margin:0 auto;
}
.qr-scan-box video{width:100%;height:100%;object-fit:cover}
.qr-scan-frame{position:absolute;inset:12%;border:3px solid #2f5eff;border-radius:1rem;box-shadow:0 0 0 999px rgba(0,0,0,.35)}

.form-label{font-size:.82rem;font-weight:600;color:#333c50}
.form-control,.form-select{font-size:.86rem}
.modal-header{border-bottom:1px solid var(--vt-border)}
.modal-footer{border-top:1px solid var(--vt-border)}

.nav-tabs .nav-link{font-size:.83rem;font-weight:600;color:var(--vt-muted)}
.nav-tabs .nav-link.active{color:var(--vt-blue);border-bottom-color:var(--vt-blue)}

.field-row{background:#fafbfd;transition:opacity .15s}
.field-row.dragging{opacity:.4}