/* Base */
.od-body { margin:0; background:#eef1f5; }
.od-wrapper{display:flex;min-height:100vh;background:#eef1f5}

/* Sidebar */
.od-sidebar{
  width:280px;
  background:#1f2937;
  color:#e5e7eb;
  padding:18px 16px;
}
.od-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.od-logo-img{width:36px;height:36px;border-radius:6px}
.od-title{font-weight:800;line-height:1}
.od-subtitle{font-size:12px;opacity:.85;margin-top:4px}

/* Periode */
.od-range-box{margin-top:12px}
.od-range-label{font-size:12px;opacity:.8;margin-bottom:6px}
.od-range-input{
  background:#111827!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#e5e7eb!important;
}

/* Nav */
.od-nav{display:flex;flex-direction:column;gap:6px}
.od-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:#cbd5e1;
  text-decoration:none;
  font-weight:700;
}
.od-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.od-nav-item.active{background:#e11d48;color:#fff}

.od-nav-icon{
  width:18px;
  display:inline-flex;
  justify-content:center;
  opacity:.95;
}
.od-nav-label{flex:1}
.od-nav-caret{opacity:.75;font-size:12px}

/* Children collapse (custom) */
.od-nav-children{
  display:none;
  margin:6px 0 10px 0;
  padding-left:6px;
}
.od-nav-children.is-open{ display:block; }

.od-nav-parent[aria-expanded="true"] .od-nav-caret{ transform:rotate(180deg); }
.od-nav-parent[aria-expanded="false"] .od-nav-caret{ transform:rotate(0deg); }

.od-nav-subitem{
  display:block;
  padding:9px 12px 9px 28px;
  border-radius:10px;
  color:#cbd5e1;
  text-decoration:none;
  font-weight:700;
  position:relative;
}
.od-nav-subitem::before{
  content:"•";
  position:absolute;
  left:14px;
  top:9px;
  opacity:.55;
}
.od-nav-subitem:hover{background:rgba(255,255,255,.06);color:#fff}
.od-nav-subitem.active{background:rgba(225,29,72,.2);color:#fff}

/* Separator */
.od-nav-sep{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:12px 0;
}

/* Main */
.od-main{flex:1;display:flex;flex-direction:column;min-width:0}

/* Topbar */
.od-topbar-dark{
  height:64px;
  background:#111827;
  color:#fff;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.od-topbar-left{display:flex;gap:10px;align-items:center}
.od-topbar-title{font-weight:900;font-size:20px}
.od-topbar-sub{opacity:.75;font-weight:700}

/* Burger */
.od-burger{
  width:38px;height:38px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:0 10px;
  margin-right:6px;
}
.od-burger span{
  height:2px;
  width:100%;
  background:#fff;
  opacity:.9;
  border-radius:2px;
}

/* Content */
.od-content{padding:20px}
.od-section-title{
  font-weight:900;
  font-size:16px;
  margin:8px 0 14px;
}
.od-section-date{font-size:12px;color:#6b7280;font-weight:700;margin-left:8px}

/* Panel */
.od-panel{
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.od-panel-soft{
  background:#f7f7f8;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}

/* Pastikan gutter Bootstrap terasa */
.od-panel .row{ --bs-gutter-x: 18px; --bs-gutter-y: 18px; }

/* Metric cards */
.od-metric-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:18px 18px;
  color:#fff;
  height:140px;
  background:linear-gradient(135deg,#6d28d9,#9333ea);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.od-metric-wide{ height:160px; }

.od-metric-label{font-weight:800;opacity:.95}
.od-metric-value{font-size:44px;font-weight:900;line-height:1;margin:0}

/* watermark icon */
.od-metric-icon{
  position:absolute;
  right:16px;
  top:14px;
  font-size:76px;
  opacity:.18;
}

/* Footer note */
.od-footer-note{
  color:#6b7280;
  font-size:12px;
  margin-top:14px;
}

/* Collapse sidebar */
body.od-sidebar-collapsed .od-sidebar{ width:70px; padding:18px 10px; }
body.od-sidebar-collapsed .od-title,
body.od-sidebar-collapsed .od-subtitle,
body.od-sidebar-collapsed .od-range-box,
body.od-sidebar-collapsed .od-nav-label,
body.od-sidebar-collapsed .od-nav-caret,
body.od-sidebar-collapsed .od-nav-children,
body.od-sidebar-collapsed .od-nav-sep{
  display:none !important;
}


.od-brand-link{
  display:flex;
  gap:12px;
  align-items:center;
  color:#e5e7eb;
  text-decoration:none;
}
.od-brand-link:hover{ color:#fff; text-decoration:none; }

.od-brand-text{ display:flex; flex-direction:column; line-height:1.1; }