/* VEGAS — design tokens di atas MatDash. Palet diambil dari logo VEGA. */
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(../fonts/poppins/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fonts/poppins/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(../fonts/poppins/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(../fonts/poppins/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(../fonts/poppins/poppins-latin-700-normal.woff2) format("woff2")}

:root,[data-bs-theme=light]{
  --vg-navy:#0D2A52; --vg-blue:#0B63E5; --vg-blue-deep:#0845B8; --vg-teal:#12D2BF; --vg-ink:#1A2335; --vg-mute:#6B7A90; --vg-surface:#F3F6FA; --vg-line:#E2E8F1;
  --vg-ribbon:linear-gradient(135deg,#0B6FF0 0%,#0A56D0 45%,#0E9FC0 70%,#12D2BF 100%);
  --bs-primary:#0B63E5; --bs-primary-rgb:11,99,229; --bs-primary-bg-subtle:#E6F0FD; --bs-primary-text-emphasis:#0845B8;
  --bs-link-color:#0B63E5; --bs-link-hover-color:#0845B8; --bs-link-color-rgb:11,99,229;
  --bs-font-sans-serif:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-color:#1A2335; --bs-heading-color:#0D2A52; --bs-body-bg:#fff;
}
html body{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;background:var(--vg-surface)}
html body .btn,html body .form-control,html body .form-select,html body .dropdown-menu,html body .table{font-family:inherit}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--bs-font-sans-serif);color:var(--vg-navy);letter-spacing:-.01em}
.btn-primary{--bs-btn-bg:#0B63E5;--bs-btn-border-color:#0B63E5;--bs-btn-hover-bg:#0845B8;--bs-btn-hover-border-color:#0845B8;--bs-btn-active-bg:#0845B8;--bs-btn-disabled-bg:#0B63E5}
.btn-outline-primary{--bs-btn-color:#0B63E5;--bs-btn-border-color:#0B63E5;--bs-btn-hover-bg:#0B63E5;--bs-btn-hover-border-color:#0B63E5}
.text-primary{color:#0B63E5!important}.bg-primary{background-color:#0B63E5!important}
.form-control:focus,.form-select:focus{border-color:#0B63E5;box-shadow:0 0 0 .2rem rgba(11,99,229,.15)}
:focus-visible{outline:2px solid var(--vg-teal);outline-offset:2px}

/* Sidebar */
.left-sidebar .brand-logo{min-height:78px;padding:0 20px}
.left-sidebar .brand-logo img.vg-brand{height:34px;width:auto}
.left-sidebar .brand-logo img.vg-brand-mini{height:32px;display:none}
body[data-sidebartype=mini-sidebar] .left-sidebar:not(:hover) .vg-brand{display:none}
body[data-sidebartype=mini-sidebar] .left-sidebar:not(:hover) .vg-brand-mini{display:block}
.sidebar-nav ul .sidebar-item .sidebar-link{font-size:.875rem}
.sidebar-nav ul .sidebar-item .sidebar-link.active{background:var(--bs-primary-bg-subtle)!important;color:var(--vg-blue-deep)!important;position:relative}
.sidebar-nav ul .sidebar-item .sidebar-link.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--vg-ribbon)}
.sidebar-nav .nav-small-cap{font-size:.7rem;letter-spacing:.02em;color:var(--vg-mute)}
.sidebar-link i.ti{font-size:1.25rem}
.topbar{background:rgba(243,246,250,.9);backdrop-filter:blur(6px)}

/* Page */
.vg-page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.vg-page-head h3{margin:0;font-weight:600}
.vg-crumb{font-size:.8rem;color:var(--vg-mute)}
.card{border:1px solid var(--vg-line);box-shadow:none;border-radius:14px}
.card .card-header{background:transparent;border-bottom:1px solid var(--vg-line);padding:14px 20px;font-weight:600;color:var(--vg-navy)}
.table>:not(caption)>*>*{padding:.7rem .75rem;vertical-align:middle}
.table thead th{font-size:.75rem;font-weight:600;color:var(--vg-mute);background:#F8FAFD;border-bottom:1px solid var(--vg-line);white-space:nowrap}
.vg-badge{font-weight:500;font-size:.72rem;padding:.35em .7em;border-radius:6px}
.vg-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.vg-kpi{padding:18px 20px}
.vg-kpi .lbl{font-size:.78rem;color:var(--vg-mute)}
.vg-kpi .val{font-size:1.5rem;font-weight:600;color:var(--vg-navy);line-height:1.2;font-variant-numeric:tabular-nums}
.vg-kpi .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem}
.vg-hero{background:var(--vg-navy);color:#fff;border-radius:16px;padding:24px 26px;position:relative;overflow:hidden;border:0}
.vg-hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:260px;background:var(--vg-ribbon);transform:skewX(-28deg);opacity:.9;border-radius:40px}
.vg-hero>*{position:relative;z-index:1}
.vg-hero h2,.vg-hero h4{color:#fff}
.vg-hero .muted{color:#A9BAD3}
.vg-timeline{list-style:none;padding:0;margin:0}
.vg-timeline li{position:relative;padding:0 0 14px 20px;border-left:2px solid var(--vg-line);margin-left:6px}
.vg-timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--vg-blue)}
.vg-empty{padding:40px 20px;text-align:center;color:var(--vg-mute)}
.vg-qr-stage{background:#fff;border-radius:18px;padding:18px;display:inline-block;border:1px solid var(--vg-line)}
.vg-qr-stage canvas,.vg-qr-stage img,.vg-qr-stage svg{display:block;width:min(360px,80vw);height:auto}
.vg-qr-bar{height:4px;background:var(--vg-line);border-radius:4px;overflow:hidden;margin-top:12px}
.vg-qr-bar span{display:block;height:100%;background:var(--vg-ribbon);transition:width 1s linear}
.nav-tabs .nav-link{font-weight:500;color:var(--vg-mute)}
.nav-tabs .nav-link.active{color:var(--vg-blue)}

/* Auth */
.vg-auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(900px 500px at 110% -10%,rgba(18,210,191,.18),transparent 60%),
  radial-gradient(800px 600px at -20% 110%,rgba(11,99,229,.14),transparent 60%),var(--vg-surface)}
.vg-auth-card{width:100%;max-width:440px;border-radius:20px}
.vg-auth-logo{height:120px;width:auto;display:block;margin:0 auto 18px}

/* Print */
@media print{.left-sidebar,.topbar,.no-print,.btn{display:none!important}.body-wrapper{margin:0!important;padding:0!important}body{background:#fff}.card{border:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Layout sidebar VEGAS (menggantikan breakpoint MatDash 1300px) =====
   ≥992px : sidebar selalu tampil, konten bergeser; tombol ☰ = mode mini (ikon saja)
   <992px : sidebar tersembunyi, tombol ☰ membuka laci + latar gelap di atas konten */
html body #main-wrapper .left-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0;height:100vh!important;width:260px!important;z-index:1040!important;background:#fff;border-right:1px solid var(--vg-line);transition:left .22s ease,width .22s ease;display:flex;flex-direction:column}
html body #main-wrapper .left-sidebar>div{display:flex;flex-direction:column;height:100%;min-height:0}
html body #main-wrapper .left-sidebar .scroll-sidebar{flex:1 1 auto;min-height:0;height:auto!important;overflow-y:auto;padding:0 12px}
html body #main-wrapper .page-wrapper{margin-left:260px!important;width:auto!important;min-height:100vh;transition:margin-left .22s ease}
html body #main-wrapper .topbar{position:sticky!important;top:0!important;left:auto!important;width:auto!important;z-index:1030!important;padding:0 24px!important;background:rgba(243,246,250,.92)!important;backdrop-filter:blur(8px);border-bottom:1px solid transparent}
html body #main-wrapper .topbar .navbar{min-height:64px}
html body #main-wrapper .body-wrapper{margin:0!important;padding:20px 24px 40px!important}
html body #main-wrapper .body-wrapper>.container-fluid{max-width:none;padding:0}
html body #main-wrapper .dark-transparent{display:none}
html body #main-wrapper .fixed-profile{flex:none}

@media (min-width:992px){
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar{width:80px!important}
  body[data-sidebartype=mini-sidebar] #main-wrapper .page-wrapper{margin-left:80px!important}
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:not(:hover) .hide-menu,
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:not(:hover) .nav-small-cap span,
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:not(:hover) .has-arrow::after,
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:not(:hover) .first-level{display:none!important}
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:not(:hover) .fixed-profile{padding:8px!important;margin:12px 8px!important}
  body[data-sidebartype=mini-sidebar] #main-wrapper .left-sidebar:hover{width:260px!important;box-shadow:8px 0 30px rgba(13,42,82,.12)}
  html body #main-wrapper .left-sidebar .sidebartoggler.d-xl-none{display:none!important}
}
@media (max-width:991.98px){
  html body #main-wrapper .left-sidebar{left:-280px!important;box-shadow:none}
  html body #main-wrapper.show-sidebar .left-sidebar{left:0!important;box-shadow:8px 0 30px rgba(13,42,82,.18)}
  html body #main-wrapper .page-wrapper{margin-left:0!important}
  html body #main-wrapper.show-sidebar .dark-transparent{display:block;position:fixed;inset:0;background:rgba(13,42,82,.45);z-index:1035}
  html body #main-wrapper .topbar{padding:0 12px!important}
  html body #main-wrapper .body-wrapper{padding:16px 12px 32px!important}
  html body #main-wrapper .left-sidebar .sidebartoggler{display:block!important}
  body.vg-lock{overflow:hidden}
}

/* ===== Perbaikan proporsi layout ===== */
html body #main-wrapper{display:block!important}
html body #main-wrapper .page-wrapper{display:block;flex:none}
html body #main-wrapper .body-wrapper>.container-fluid{width:100%;max-width:1680px;margin:0 auto}
/* Sidebar: satu scrollbar tipis */
html body #main-wrapper .left-sidebar .scroll-sidebar{scrollbar-width:thin;scrollbar-color:#C9D3E0 transparent}
html body #main-wrapper .left-sidebar .scroll-sidebar::-webkit-scrollbar{width:6px}
html body #main-wrapper .left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb{background:#C9D3E0;border-radius:6px}
/* Menu: aktif = latar lembut, parent grup terbuka tidak diblok warna */
.sidebar-nav ul .sidebar-item .sidebar-link{border-radius:10px;margin:2px 0;padding:10px 14px;color:#3A4A63;gap:12px}
.sidebar-nav ul .sidebar-item .sidebar-link:hover{background:#F1F5FB;color:var(--vg-blue-deep)}
.sidebar-nav ul .sidebar-item.selected>.sidebar-link:not(.active),.sidebar-nav ul .sidebar-item.selected>.sidebar-link.has-arrow{background:transparent!important;color:var(--vg-navy)!important;font-weight:600}
.sidebar-nav ul .sidebar-item.selected>.sidebar-link.has-arrow::after{border-color:var(--vg-navy)!important}
.sidebar-nav ul .sidebar-item>.sidebar-link.active,.sidebar-nav ul .sidebar-item .first-level .sidebar-item>.sidebar-link.active{background:var(--bs-primary-bg-subtle)!important;color:var(--vg-blue-deep)!important;font-weight:600}
.sidebar-nav ul .sidebar-item .first-level{padding-left:10px}
.sidebar-nav ul .sidebar-item .first-level .sidebar-link{padding:8px 14px 8px 32px;font-size:.84rem}
.sidebar-nav ul .sidebar-item .first-level .sidebar-link .icon-small{width:6px;height:6px;border-radius:50%;background:#B4C0D0;flex:none}
.sidebar-nav ul .sidebar-item .first-level .sidebar-link.active .icon-small{background:var(--vg-blue)!important}
.sidebar-nav ul .sidebar-item .first-level .sidebar-link.active::before{display:none}
.sidebar-nav .nav-small-cap{padding:14px 14px 4px;margin:0}
.sidebar-nav .nav-small-cap .nav-small-cap-icon{display:none}
/* Tombol & komponen konsisten */
.btn{font-weight:500;border-radius:10px;padding:.5rem 1rem;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-sm{padding:.3rem .6rem;border-radius:8px;font-size:.8rem}
.btn-light{--bs-btn-bg:#EEF2F7;--bs-btn-border-color:#EEF2F7;--bs-btn-hover-bg:#E2E8F1;--bs-btn-hover-border-color:#E2E8F1;--bs-btn-color:#1A2335}
.form-control,.form-select{border-radius:10px;border-color:var(--vg-line);min-height:42px;font-size:.9rem}
.form-control-sm,.form-select-sm{min-height:34px;font-size:.82rem;border-radius:8px}
.input-group-text{border-color:var(--vg-line);background:#F8FAFD}
.vg-page-head{margin-bottom:18px;align-items:center}
.vg-page-head h3{font-size:1.5rem}
.card{margin-bottom:20px}
.card-body.border-bottom form.row{align-items:center}
.table>:not(caption)>*>*{padding:.75rem 1rem}
.table td{font-size:.875rem}
.table tbody tr:last-child td{border-bottom:0}
.table-hover>tbody>tr:hover>*{--bs-table-hover-bg:#F8FAFD}
.vg-empty{padding:48px 20px;font-size:.9rem}
.badge.text-bg-light,.badge.bg-light{background:#EEF2F7!important}
.nav-tabs{border-bottom:1px solid var(--vg-line)}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;padding:.7rem 1rem}
.nav-tabs .nav-link.active{background:transparent;border-bottom-color:var(--vg-blue)}
.dropdown-menu{border:1px solid var(--vg-line);border-radius:12px;box-shadow:0 10px 30px rgba(13,42,82,.10)}
.vg-matrix{font-size:.75rem}
.vg-matrix>:not(caption)>*>*{padding:.45rem .5rem}
.vg-matrix th:first-child,.vg-matrix td:first-child{position:sticky;left:0;background:#fff;z-index:1;min-width:170px}
.vg-matrix thead th:first-child{background:#F8FAFD}
.vg-matrix label{display:inline-flex;align-items:center;gap:2px;margin:0 3px}
.table td .text-muted.small,.table td .small.text-muted{line-height:1.35}
.table td.text-nowrap .btn+.btn,.table td.text-nowrap form+.btn,.table td.text-nowrap .btn+form{margin-left:4px}
/* Pengaturan logo */
.vg-logo-item{border:1px solid var(--vg-line);border-radius:12px;padding:16px;background:#fff}
.vg-logo-preview{height:140px;border-radius:10px;display:grid;place-items:center;padding:14px;
  background-color:#fff;background-image:linear-gradient(45deg,#EEF2F7 25%,transparent 25%),linear-gradient(-45deg,#EEF2F7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#EEF2F7 75%),linear-gradient(-45deg,transparent 75%,#EEF2F7 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.vg-logo-preview img{max-width:100%;max-height:112px;object-fit:contain}
.vg-logo-preview.is-square img{width:96px;height:96px}

html body #main-wrapper .left-sidebar .scroll-sidebar{scroll-behavior:auto!important;overscroll-behavior:contain}