:root {
  --onvwp-navy: #0E1B52;
  --onvwp-biru-tua: #1B3C8C;
  --onvwp-biru-utama: #1B75BB;
  --onvwp-biru-muda: #5FB8E8;
  --onvwp-biru-pucat: #EAF4FB;
  --onvwp-oranye: #F58220;

  --onvwp-primary: #1B75BB;
  --onvwp-secondary: #0E1B52;
  --onvwp-info: #5FB8E8;
  --onvwp-success: #22A06B;
  --onvwp-warning: #F5A623;
  --onvwp-danger: #DC3545;

  --onvwp-primary-hover: #155E96;
  --onvwp-secondary-hover: #0A1440;
  --onvwp-info-hover: #3FA3D9;
  --onvwp-success-hover: #1B7F55;
  --onvwp-warning-hover: #D98C0F;
  --onvwp-danger-hover: #B02A37;

  --onvwp-primary-light: #EAF4FB;
  --onvwp-secondary-light: #E7EAF4;
  --onvwp-info-light: #EFF8FD;
  --onvwp-success-light: #E8F6F0;
  --onvwp-warning-light: #FEF3E0;
  --onvwp-danger-light: #FBEAEC;

  --onvwp-on-primary: #FFFFFF;
  --onvwp-on-secondary: #FFFFFF;
  --onvwp-on-info: #0E1B52;
  --onvwp-on-success: #FFFFFF;
  --onvwp-on-warning: #4A2C00;
  --onvwp-on-danger: #FFFFFF;
}

.onvwp-gradient-background {
  background: var(--onvwp-navy);
  color: #fff;
}

/* ==========================================================================
   BASE / RESET
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #3f4254;
  background-color: #f5f8fa;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 117, 187, 0.2) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(27, 117, 187, 0.2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 117, 187, 0.4);
}
::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* ==========================================================================
   UTILITY CLASSES
   (spacing scale: 1 step = 0.25rem / 4px, matches sizes actually used)
   ========================================================================== */

:root {
  --onvwp-space-0: 0;
  --onvwp-space-1: 0.25rem;
  --onvwp-space-2: 0.5rem;
  --onvwp-space-3: 0.75rem;
  --onvwp-space-4: 1rem;
  --onvwp-space-5: 1.25rem;
  --onvwp-space-6: 1.5rem;
}

.onvwp-d-flex { display: flex; }
.onvwp-d-none { display: none; }
.onvwp-d-block { display: block; }
.onvwp-d-inline-flex { display: inline-flex; }

.onvwp-flex-root { display: flex; }
.onvwp-flex-column { flex-direction: column; }
.onvwp-flex-row { flex-direction: row; }
.onvwp-flex-column-fluid { flex: 1 0 auto; }
.onvwp-flex-row-fluid { flex: 1 1 auto; min-width: 0; }
.onvwp-flex-column-auto { flex: 0 0 auto; }
.onvwp-flex-grow-1 { flex-grow: 1; }
.onvwp-flex-shrink-0 { flex-shrink: 0; }
.onvwp-flex-stack { display: flex; align-items: center; justify-content: space-between; }
.onvwp-flex-center { display: flex; align-items: center; justify-content: center; }
.onvwp-flex-wrap { flex-wrap: wrap; }

.onvwp-align-items-center { align-items: center; }
.onvwp-align-items-stretch { align-items: stretch; }
.onvwp-align-items-start { align-items: flex-start; }
.onvwp-align-items-end { align-items: flex-end; }
.onvwp-justify-content-center { justify-content: center; }
.onvwp-justify-content-between { justify-content: space-between; }
.onvwp-justify-content-start { justify-content: flex-start; }
.onvwp-justify-content-end { justify-content: flex-end; }

.onvwp-gap-1 { gap: var(--onvwp-space-1); }
.onvwp-gap-2 { gap: var(--onvwp-space-2); }
.onvwp-gap-3 { gap: var(--onvwp-space-3); }

.onvwp-overflow-hidden { overflow: hidden; }
.onvwp-cursor-pointer { cursor: pointer; }
.onvwp-text-nowrap { white-space: nowrap; }
.onvwp-text-uppercase { text-transform: uppercase; }
.onvwp-text-center { text-align: center; }

.onvwp-position-relative { position: relative; }
.onvwp-position-absolute { position: absolute; }
.onvwp-position-fixed { position: fixed; }
.onvwp-top-0 { top: 0; }
.onvwp-top-50 { top: 50%; }
.onvwp-start-0 { left: 0; }
.onvwp-start-50 { left: 50%; }
.onvwp-start-100 { left: 100%; }
.onvwp-end-0 { right: 0; }
.onvwp-bottom-0 { bottom: 0; }
.onvwp-translate-middle { transform: translate(-50%, -50%); }

.onvwp-rounded { border-radius: 6px; }
.onvwp-rounded-0 { border-radius: 0; }
.onvwp-rounded-top-0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.onvwp-border { border: 1px solid #e4e6ef; }
.onvwp-border-0 { border: 0; }

.onvwp-bg-body { background-color: #ffffff; }
.onvwp-bg-success { background-color: var(--onvwp-success); }

.onvwp-w-100 { width: 100%; }
.onvwp-h-100 { height: 100%; }
.onvwp-w-6px { width: 6px; }
.onvwp-h-6px { height: 6px; }
.onvwp-w-10px { width: 10px; }
.onvwp-h-10px { height: 10px; }
.onvwp-w-20px { width: 20px; }
.onvwp-h-20px { height: 20px; }
.onvwp-w-25px { width: 25px; }
.onvwp-h-25px { height: 25px; }
.onvwp-w-30px { width: 30px; }
.onvwp-h-30px { height: 30px; }
.onvwp-w-35px { width: 35px; }
.onvwp-h-35px { height: 35px; }
.onvwp-w-40px { width: 40px; }
.onvwp-h-40px { height: 40px; }
.onvwp-w-50px { width: 50px; }
.onvwp-h-50px { height: 50px; }
.onvwp-w-175px { width: 175px; }
.onvwp-w-275px { width: 275px; }

.onvwp-fs-1 { font-size: 26px; }
.onvwp-fs-2 { font-size: 22px; }
.onvwp-fs-3 { font-size: 19px; }
.onvwp-fs-4 { font-size: 17px; }
.onvwp-fs-5 { font-size: 15px; }
.onvwp-fs-6 { font-size: 14px; }
.onvwp-fs-7 { font-size: 13px; }
.onvwp-fs-8 { font-size: 12px; }
.onvwp-fs-base { font-size: 14px; }
.onvwp-fw-bold { font-weight: 700; }
.onvwp-fw-semibold { font-weight: 600; }
.onvwp-fw-medium { font-weight: 500; }
.onvwp-lh-1 { line-height: 1; }

.onvwp-text-dark { color: #181c32; }
.onvwp-text-muted { color: #a1a5b7; }
.onvwp-text-gray-700 { color: #5e6278; }
.onvwp-text-gray-800 { color: #3f4254; }
.onvwp-text-gray-900 { color: #181c32; }
.onvwp-text-hover-primary:hover { color: var(--onvwp-primary); }
.onvwp-link-success { color: var(--onvwp-success); text-decoration: none; }
.onvwp-link-success:hover { text-decoration: underline; }

.onvwp-order-1 { order: 1; }
.onvwp-order-2 { order: 2; }

@media (min-width: 992px) {
  .onvwp-d-lg-none { display: none; }
  .onvwp-flex-lg-grow-0 { flex-grow: 0; }
  .onvwp-flex-lg-grow-1 { flex-grow: 1; }
  .onvwp-me-lg-3 { margin-right: var(--onvwp-space-3); }
  .onvwp-ms-lg-3 { margin-left: var(--onvwp-space-3); }
  .onvwp-mt-lg-0 { margin-top: 0; }
  .onvwp-my-lg-0 { margin-top: 0; margin-bottom: 0; }
  .onvwp-px-lg-0 { padding-left: 0; padding-right: 0; }
  .onvwp-py-lg-0 { padding-top: 0; padding-bottom: 0; }
}

@media (min-width: 768px) {
  .onvwp-flex-md-row { flex-direction: row; }
  .onvwp-flex-md-stack { align-items: center; justify-content: space-between; }
  .onvwp-order-md-1 { order: 1; }
  .onvwp-w-md-40px { width: 40px; }
  .onvwp-h-md-40px { height: 40px; }
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.onvwp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.onvwp-badge-sm {
  padding: 2px 7px;
  font-size: 10px;
}

.onvwp-badge-circle {
  padding: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.onvwp-badge-primary { background: var(--onvwp-primary-light); color: var(--onvwp-primary); }
.onvwp-badge-secondary { background: var(--onvwp-secondary-light); color: var(--onvwp-secondary); }
.onvwp-badge-info { background: var(--onvwp-info-light); color: var(--onvwp-info-hover); }
.onvwp-badge-success { background: var(--onvwp-success-light); color: var(--onvwp-success); }
.onvwp-badge-warning { background: var(--onvwp-warning-light); color: var(--onvwp-warning-hover); }
.onvwp-badge-danger { background: var(--onvwp-danger-light); color: var(--onvwp-danger); }

.onvwp-badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}
.onvwp-badge-outline-primary { color: var(--onvwp-primary); }
.onvwp-badge-outline-secondary { color: var(--onvwp-secondary); }
.onvwp-badge-outline-info { color: var(--onvwp-info-hover); }
.onvwp-badge-outline-success { color: var(--onvwp-success); }
.onvwp-badge-outline-warning { color: var(--onvwp-warning-hover); }
.onvwp-badge-outline-danger { color: var(--onvwp-danger); }

/* ==========================================================================
   ALERTS
   ========================================================================== */

.onvwp-alert {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.onvwp-alert-dismissible {
  position: relative;
  padding-right: 40px;
}

.onvwp-alert-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
}
.onvwp-alert-close:hover { opacity: 1; }

.onvwp-alert-primary { background: var(--onvwp-primary-light); color: var(--onvwp-primary); }
.onvwp-alert-secondary { background: var(--onvwp-secondary-light); color: var(--onvwp-secondary); }
.onvwp-alert-info { background: var(--onvwp-info-light); color: var(--onvwp-info-hover); }
.onvwp-alert-success { background: var(--onvwp-success-light); color: var(--onvwp-success); }
.onvwp-alert-warning { background: var(--onvwp-warning-light); color: var(--onvwp-warning-hover); }
.onvwp-alert-danger { background: var(--onvwp-danger-light); color: var(--onvwp-danger); }

/* ==========================================================================
   TABLES
   ========================================================================== */

.onvwp-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e4e8f0;
  font-size: 14px;
}

.onvwp-table th {
  text-align: left;
  font-weight: 600;
  color: #8a8fa3;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  background-color: #eef1f6;
  border-bottom: 1px solid #eff2f5;
}

.onvwp-table td {
  padding: 10px 12px;
  vertical-align: middle;
  color: #3f4254;
}

.onvwp-table-sm th,
.onvwp-table-sm td {
  padding: 7px 10px;
}

.onvwp-table-row-dashed tbody tr {
  border-bottom: 1px dashed #d7dce5;
}

.onvwp-table-row-dashed tbody tr:last-child {
  border-bottom: 0;
}

.onvwp-table th,
.onvwp-table td {
  border-right: 1px solid #eef1f6;
}
.onvwp-table th:last-child,
.onvwp-table td:last-child {
  border-right: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.onvwp-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #7e8299;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}
.onvwp-btn.onvwp-btn-icon:not([class*="onvwp-btn-primary"]):not([class*="onvwp-btn-secondary"]):not([class*="onvwp-btn-info"]):not([class*="onvwp-btn-success"]):not([class*="onvwp-btn-warning"]):not([class*="onvwp-btn-danger"]):hover {
  background: #f5f8fa;
  color: var(--onvwp-primary);
}

.onvwp-btn:disabled,
.onvwp-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

.onvwp-btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  gap: 5px;
}

.onvwp-btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
  gap: 5px;
}

.onvwp-btn-lg {
  padding: 13px 26px;
  font-size: 16px;
  border-radius: 10px;
  gap: 10px;
}

.onvwp-btn-rounded {
  border-radius: 999px;
}

.onvwp-btn-block {
  display: flex;
  width: 100%;
}

.onvwp-btn-icon {
  padding: 10px;
  width: 40px;
  height: 40px;
  gap: 0;
}

.onvwp-btn-icon.onvwp-btn-xs {
  padding: 5px;
  width: 26px;
  height: 26px;
}

.onvwp-btn-icon.onvwp-btn-sm {
  padding: 7px;
  width: 32px;
  height: 32px;
}

.onvwp-btn-icon.onvwp-btn-lg {
  padding: 13px;
  width: 50px;
  height: 50px;
}

.onvwp-btn-icon svg,
.onvwp-btn-icon i {
  width: 1em;
  height: 1em;
  font-size: 20px;
  line-height: 1;
}
.onvwp-btn-icon.onvwp-btn-sm svg,
.onvwp-btn-icon.onvwp-btn-sm i {
  font-size: 16px;
}
.onvwp-btn-icon.onvwp-btn-lg svg,
.onvwp-btn-icon.onvwp-btn-lg i {
  font-size: 24px;
}

/* row-action icon buttons (view/edit/delete etc in list rows) — visible outline even at rest */
.onvwp-btn-icon-soft {
  background: #ffffff;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.onvwp-btn-icon-soft:hover:not(:disabled) {
  opacity: 1;
  box-shadow: 0 2px 6px 0 rgba(24, 28, 50, 0.1);
}

/* ---- SVG (social login) ---- */

.onvwp-btn-svg {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #dfe3ea;
  color: var(--onvwp-navy);
  text-decoration: none;
}

.onvwp-btn-svg:hover:not(:disabled) {
  background-color: #f7f9fc;
  border-color: #cdd4de;
}

.onvwp-btn-svg img,
.onvwp-btn-svg svg {
  width: 18px;
  height: 18px;
}

.onvwp-btn-svg-google:hover:not(:disabled) {
  border-color: #4285F4;
}

.onvwp-btn-svg-github {
  background-color: #24292F;
  border-color: #24292F;
  color: #ffffff;
}

.onvwp-btn-svg-github:hover:not(:disabled) {
  background-color: #1B1F23;
  border-color: #1B1F23;
}

.onvwp-btn-svg-facebook {
  background-color: #1877F2;
  border-color: #1877F2;
  color: #ffffff;
}

.onvwp-btn-svg-facebook:hover:not(:disabled) {
  background-color: #1461C9;
  border-color: #1461C9;
}

.onvwp-btn-primary {
  background-color: var(--onvwp-primary);
  border-color: var(--onvwp-primary);
  color: var(--onvwp-on-primary);
}

.onvwp-btn-primary:hover:not(:disabled) {
  background-color: var(--onvwp-primary-hover);
  border-color: var(--onvwp-primary-hover);
}

.onvwp-btn-secondary {
  background-color: var(--onvwp-secondary);
  border-color: var(--onvwp-secondary);
  color: var(--onvwp-on-secondary);
}

.onvwp-btn-secondary:hover:not(:disabled) {
  background-color: var(--onvwp-secondary-hover);
  border-color: var(--onvwp-secondary-hover);
}

.onvwp-btn-info {
  background-color: var(--onvwp-info);
  border-color: var(--onvwp-info);
  color: var(--onvwp-on-info);
}

.onvwp-btn-info:hover:not(:disabled) {
  background-color: var(--onvwp-info-hover);
  border-color: var(--onvwp-info-hover);
}

.onvwp-btn-success {
  background-color: var(--onvwp-success);
  border-color: var(--onvwp-success);
  color: var(--onvwp-on-success);
}

.onvwp-btn-success:hover:not(:disabled) {
  background-color: var(--onvwp-success-hover);
  border-color: var(--onvwp-success-hover);
}

.onvwp-btn-warning {
  background-color: var(--onvwp-warning);
  border-color: var(--onvwp-warning);
  color: var(--onvwp-on-warning);
}

.onvwp-btn-warning:hover:not(:disabled) {
  background-color: var(--onvwp-warning-hover);
  border-color: var(--onvwp-warning-hover);
}

.onvwp-btn-danger {
  background-color: var(--onvwp-danger);
  border-color: var(--onvwp-danger);
  color: var(--onvwp-on-danger);
}

.onvwp-btn-danger:hover:not(:disabled) {
  background-color: var(--onvwp-danger-hover);
  border-color: var(--onvwp-danger-hover);
}

.onvwp-btn-outline-primary {
  background-color: transparent;
  border-color: var(--onvwp-primary);
  color: var(--onvwp-primary);
}

.onvwp-btn-outline-primary:hover:not(:disabled) {
  background-color: var(--onvwp-primary);
  color: var(--onvwp-on-primary);
}

.onvwp-btn-outline-secondary {
  background-color: transparent;
  border-color: var(--onvwp-secondary);
  color: var(--onvwp-secondary);
}

.onvwp-btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--onvwp-secondary);
  color: var(--onvwp-on-secondary);
}

.onvwp-btn-outline-info {
  background-color: transparent;
  border-color: var(--onvwp-info);
  color: var(--onvwp-info-hover);
}

.onvwp-btn-outline-info:hover:not(:disabled) {
  background-color: var(--onvwp-info);
  color: var(--onvwp-on-info);
}

.onvwp-btn-outline-success {
  background-color: transparent;
  border-color: var(--onvwp-success);
  color: var(--onvwp-success);
}

.onvwp-btn-outline-success:hover:not(:disabled) {
  background-color: var(--onvwp-success);
  color: var(--onvwp-on-success);
}

.onvwp-btn-outline-warning {
  background-color: transparent;
  border-color: var(--onvwp-warning);
  color: var(--onvwp-warning-hover);
}

.onvwp-btn-outline-warning:hover:not(:disabled) {
  background-color: var(--onvwp-warning);
  color: var(--onvwp-on-warning);
}

.onvwp-btn-outline-danger {
  background-color: transparent;
  border-color: var(--onvwp-danger);
  color: var(--onvwp-danger);
}

.onvwp-btn-outline-danger:hover:not(:disabled) {
  background-color: var(--onvwp-danger);
  color: var(--onvwp-on-danger);
}

.onvwp-btn-soft-primary {
  background-color: var(--onvwp-primary-light);
  border-color: transparent;
  color: var(--onvwp-primary);
}

.onvwp-btn-soft-primary:hover:not(:disabled) {
  background-color: var(--onvwp-primary);
  color: var(--onvwp-on-primary);
}

.onvwp-btn-soft-secondary {
  background-color: var(--onvwp-secondary-light);
  border-color: transparent;
  color: var(--onvwp-secondary);
}

.onvwp-btn-soft-secondary:hover:not(:disabled) {
  background-color: var(--onvwp-secondary);
  color: var(--onvwp-on-secondary);
}

.onvwp-btn-soft-info {
  background-color: var(--onvwp-info-light);
  border-color: transparent;
  color: var(--onvwp-info-hover);
}

.onvwp-btn-soft-info:hover:not(:disabled) {
  background-color: var(--onvwp-info);
  color: var(--onvwp-on-info);
}

.onvwp-btn-soft-success {
  background-color: var(--onvwp-success-light);
  border-color: transparent;
  color: var(--onvwp-success);
}

.onvwp-btn-soft-success:hover:not(:disabled) {
  background-color: var(--onvwp-success);
  color: var(--onvwp-on-success);
}

.onvwp-btn-soft-warning {
  background-color: var(--onvwp-warning-light);
  border-color: transparent;
  color: var(--onvwp-warning-hover);
}

.onvwp-btn-soft-warning:hover:not(:disabled) {
  background-color: var(--onvwp-warning);
  color: var(--onvwp-on-warning);
}

.onvwp-btn-soft-danger {
  background-color: var(--onvwp-danger-light);
  border-color: transparent;
  color: var(--onvwp-danger);
}

.onvwp-btn-soft-danger:hover:not(:disabled) {
  background-color: var(--onvwp-danger);
  color: var(--onvwp-on-danger);
}

.swal2-popup .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid var(--onvwp-primary);
  background-color: var(--onvwp-primary);
  color: var(--onvwp-on-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.swal2-popup .btn.btn-primary:hover {
  background-color: var(--onvwp-primary-hover);
  border-color: var(--onvwp-primary-hover);
}

/* ==========================================================================
   GRID (12-column, matches Bootstrap breakpoints: sm 576, md 768, lg 992)
   ========================================================================== */

.onvwp-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}
.onvwp-row > [class*="onvwp-col-"] {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.onvwp-col { flex: 1 0 0%; }

.onvwp-col-1 { width: 8.3333%; }
.onvwp-col-2 { width: 16.6667%; }
.onvwp-col-3 { width: 25%; }
.onvwp-col-4 { width: 33.3333%; }
.onvwp-col-5 { width: 41.6667%; }
.onvwp-col-6 { width: 50%; }
.onvwp-col-7 { width: 58.3333%; }
.onvwp-col-8 { width: 66.6667%; }
.onvwp-col-9 { width: 75%; }
.onvwp-col-10 { width: 83.3333%; }
.onvwp-col-11 { width: 91.6667%; }
.onvwp-col-12 { width: 100%; }

@media (min-width: 576px) {
  .onvwp-col-sm-1 { width: 8.3333%; }
  .onvwp-col-sm-2 { width: 16.6667%; }
  .onvwp-col-sm-3 { width: 25%; }
  .onvwp-col-sm-4 { width: 33.3333%; }
  .onvwp-col-sm-5 { width: 41.6667%; }
  .onvwp-col-sm-6 { width: 50%; }
  .onvwp-col-sm-7 { width: 58.3333%; }
  .onvwp-col-sm-8 { width: 66.6667%; }
  .onvwp-col-sm-9 { width: 75%; }
  .onvwp-col-sm-10 { width: 83.3333%; }
  .onvwp-col-sm-11 { width: 91.6667%; }
  .onvwp-col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .onvwp-col-md-1 { width: 8.3333%; }
  .onvwp-col-md-2 { width: 16.6667%; }
  .onvwp-col-md-3 { width: 25%; }
  .onvwp-col-md-4 { width: 33.3333%; }
  .onvwp-col-md-5 { width: 41.6667%; }
  .onvwp-col-md-6 { width: 50%; }
  .onvwp-col-md-7 { width: 58.3333%; }
  .onvwp-col-md-8 { width: 66.6667%; }
  .onvwp-col-md-9 { width: 75%; }
  .onvwp-col-md-10 { width: 83.3333%; }
  .onvwp-col-md-11 { width: 91.6667%; }
  .onvwp-col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .onvwp-col-lg-1 { width: 8.3333%; }
  .onvwp-col-lg-2 { width: 16.6667%; }
  .onvwp-col-lg-3 { width: 25%; }
  .onvwp-col-lg-4 { width: 33.3333%; }
  .onvwp-col-lg-5 { width: 41.6667%; }
  .onvwp-col-lg-6 { width: 50%; }
  .onvwp-col-lg-7 { width: 58.3333%; }
  .onvwp-col-lg-8 { width: 66.6667%; }
  .onvwp-col-lg-9 { width: 75%; }
  .onvwp-col-lg-10 { width: 83.3333%; }
  .onvwp-col-lg-11 { width: 91.6667%; }
  .onvwp-col-lg-12 { width: 100%; }
}

/* page toolbar (title + breadcrumb), used by most in-app pages */
.onvwp-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.onvwp-page-heading {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #181c32;
}
.onvwp-breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  gap: 6px;
  font-size: 13px;
}
.onvwp-breadcrumb a { color: #a1a5b7; text-decoration: none; }
.onvwp-breadcrumb a:hover { color: var(--onvwp-primary); }

.onvwp-card-icon { font-size: 22px; color: var(--onvwp-primary); margin-right: 8px; }

/* Stat cards (dashboard summary widgets) — single soft-tint background, white icon badge */
.onvwp-stat-card {
  position: relative;
  overflow: hidden;
  background: var(--onvwp-primary-light);
  border: 1px solid var(--onvwp-biru-muda);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 130px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.onvwp-stat-card:hover {
  border-color: var(--onvwp-primary);
}
.onvwp-stat-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.onvwp-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px 0 rgba(24, 28, 50, 0.04);
}
.onvwp-stat-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5065;
}
.onvwp-stat-value {
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: 700;
  color: #181c32;
  line-height: 1;
}


.onvwp-card {
  background: #ffffff;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.05);
}

.onvwp-list-item {
  width: 100%;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onvwp-list-item:hover {
  border-color: var(--onvwp-biru-muda);
  box-shadow: 0 2px 8px 0 rgba(24, 28, 50, 0.05);
}

.onvwp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 14px 24px;
  border-bottom: 1px solid #eff2f5;
}

.onvwp-card-title { margin: 0; font-size: 16px; font-weight: 700; color: #181c32; }
.onvwp-card-toolbar { display: flex; align-items: center; gap: 8px; }
.onvwp-card-body { padding: 24px; }
.onvwp-card-footer { padding: 14px 24px; border-top: 1px solid #eff2f5; }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.onvwp-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3f4254;
}

.onvwp-form-control,
.onvwp-form-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  font-size: 14px;
  color: #181c32;
  background-color: #ffffff;
  border: 1px solid #e4e6ef;
  border-radius: 7px;
  outline: none;
  transition: border-color 0.15s ease;
}

.onvwp-form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237e8299' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
}

.onvwp-form-control:focus,
.onvwp-form-select:focus { border-color: var(--onvwp-primary); }
.onvwp-form-control-sm { padding: 6px 10px; font-size: 13px; }
.onvwp-form-control-xs { padding: 4px 8px; font-size: 12px; }
select.onvwp-form-control-sm { padding-right: 30px; }
select.onvwp-form-control-xs { padding-right: 26px; background-position: right 8px center; }

.onvwp-form-control.onvwp-is-valid { border-color: var(--onvwp-success); }
.onvwp-form-control.onvwp-is-invalid { border-color: var(--onvwp-danger); }

.onvwp-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.onvwp-input-group .onvwp-form-control { flex: 1 1 auto; min-width: 0; }
.onvwp-input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #f5f8fa;
  border: 1px solid #e4e6ef;
  color: #7e8299;
  font-size: 14px;
}
.onvwp-input-group-text:first-child { border-right: 0; border-radius: 7px 0 0 7px; }
.onvwp-input-group-text:last-child { border-left: 0; border-radius: 0 7px 7px 0; }

/* ==========================================================================
   UPLOAD DROPZONE
   ========================================================================== */
.onvwp-upload-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed #e4e6ef;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
  overflow: hidden;
}
.onvwp-upload-dropzone:hover,
.onvwp-upload-dropzone.onvwp-upload-dropzone--dragover {
  border-color: var(--onvwp-primary);
  background-color: var(--onvwp-primary-light);
}
.onvwp-upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.onvwp-upload-dropzone-icon {
  font-size: 28px;
  color: #a1a5b7;
}
.onvwp-upload-dropzone:hover .onvwp-upload-dropzone-icon,
.onvwp-upload-dropzone.onvwp-upload-dropzone--dragover .onvwp-upload-dropzone-icon {
  color: var(--onvwp-primary);
}
.onvwp-upload-dropzone-text {
  font-size: 13px;
  color: #7e8299;
}
.onvwp-upload-dropzone-text strong {
  color: var(--onvwp-primary);
  font-weight: 600;
}
.onvwp-upload-dropzone-hint {
  font-size: 11px;
  color: #a1a5b7;
}
.onvwp-upload-dropzone-preview {
  max-height: 120px;
  border-radius: 6px;
  display: none;
}
.onvwp-upload-dropzone.onvwp-upload-dropzone--has-image .onvwp-upload-dropzone-preview {
  display: block;
}
.onvwp-upload-dropzone.onvwp-upload-dropzone--has-image .onvwp-upload-dropzone-icon,
.onvwp-upload-dropzone.onvwp-upload-dropzone--has-image .onvwp-upload-dropzone-text,
.onvwp-upload-dropzone.onvwp-upload-dropzone--has-image .onvwp-upload-dropzone-hint {
  display: none;
}

.onvwp-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.onvwp-form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--onvwp-primary);
  cursor: pointer;
}
.onvwp-form-check-label { font-size: 14px; color: #3f4254; cursor: pointer; }

.onvwp-form-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.onvwp-form-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.onvwp-form-switch-track {
  position: absolute;
  inset: 0;
  background: #e4e6ef;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.onvwp-form-switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.onvwp-form-switch input:checked ~ .onvwp-form-switch-track {
  background: var(--onvwp-success);
}
.onvwp-form-switch input:checked ~ .onvwp-form-switch-track::before {
  transform: translateX(14px);
}

.onvwp-invalid-feedback {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: var(--onvwp-danger);
}
.onvwp-form-control.onvwp-is-invalid ~ .onvwp-invalid-feedback,
.onvwp-is-invalid + .onvwp-invalid-feedback {
  display: block;
}

.onvwp-progress {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: #eff2f5;
  overflow: hidden;
}
.onvwp-progress-bar {
  height: 100%;
  background: var(--onvwp-primary);
  transition: width 0.2s ease;
}

/* ==========================================================================
   SPINNER
   ========================================================================== */

.onvwp-spinner-border {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: onvwp-spin 0.7s linear infinite;
}
.onvwp-spinner-border-sm { width: 12px; height: 12px; border-width: 2px; }

/* ==========================================================================
   APP SHELL / LAYOUT
   ========================================================================== */

:root {
  --onvwp-header-height: 65px;
  --onvwp-sidebar-width: 265px;
  --onvwp-sidebar-collapsed-width: 75px;
  --onvwp-footer-height: 40px;
}

.onvwp-app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.onvwp-app-page {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.onvwp-app-wrapper {
  display: flex;
  flex: 1 1 auto;
  padding-top: var(--onvwp-header-height);
}

.onvwp-app-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--onvwp-header-height) + 0px) 24px calc(var(--onvwp-footer-height) + 16px);
  margin-left: var(--onvwp-sidebar-width);
  transition: margin-left 0.2s ease;
}

body.onvwp-sidebar--collapsed .onvwp-app-main {
  margin-left: var(--onvwp-sidebar-collapsed-width);
}
body.onvwp-sidebar--collapsed .onvwp-header {
  left: var(--onvwp-sidebar-collapsed-width);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.onvwp-header {
  position: fixed;
  top: 0;
  left: var(--onvwp-sidebar-width);
  right: 0;
  height: var(--onvwp-header-height);
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-bottom: 1px solid #eff2f5;
  z-index: 116;
  transition: left 0.2s ease;
}

.onvwp-header-container {
  background: #000072;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 24px;
  color: #ffffff;
}
.onvwp-header-container .onvwp-btn.onvwp-btn-icon:not([class*="onvwp-btn-primary"]):not([class*="onvwp-btn-secondary"]):not([class*="onvwp-btn-info"]):not([class*="onvwp-btn-success"]):not([class*="onvwp-btn-warning"]):not([class*="onvwp-btn-danger"]) {
  color: #ffffff;
}
.onvwp-header-container .onvwp-btn.onvwp-btn-icon:not([class*="onvwp-btn-primary"]):not([class*="onvwp-btn-secondary"]):not([class*="onvwp-btn-info"]):not([class*="onvwp-btn-success"]):not([class*="onvwp-btn-warning"]):not([class*="onvwp-btn-danger"]):hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.onvwp-header-container #logo_text_mobile {
  color: #ffffff;
}

.onvwp-header-menu-toggle {
  display: none;
}

.onvwp-navbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.onvwp-navbar-item { position: relative; }

.onvwp-symbol {
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.onvwp-symbol img { width: 100%; height: 100%; object-fit: cover; }

.onvwp-separator { height: 1px; background: #eff2f5; margin: 8px 0; }

.onvwp-theme-light-show { display: none; }
.onvwp-theme-dark-show { display: none; }
[data-theme="light"] .onvwp-theme-light-show { display: inline-flex; }
[data-theme="dark"] .onvwp-theme-dark-show { display: inline-flex; }

.onvwp-menu-content { display: flex; align-items: center; }

@media (max-width: 991px) {
  .onvwp-header { left: 0; }
  .onvwp-app-main { margin-left: 0; }
  .onvwp-header-menu-toggle { display: inline-flex; }
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.onvwp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--onvwp-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--onvwp-navy);
  color: #ffffff;
  z-index: 117;
  transition: width 0.2s ease;
}

body.onvwp-sidebar--collapsed .onvwp-sidebar {
  width: var(--onvwp-sidebar-collapsed-width);
}

.onvwp-sidebar-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--onvwp-header-height);
  padding: 0 24px;
  flex-shrink: 0;
}

.onvwp-sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--onvwp-biru-utama);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  z-index: 106;
}

.onvwp-sidebar-close-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
}
body.onvwp-sidebar--collapsed .onvwp-sidebar-toggle svg,
body.onvwp-sidebar--collapsed .onvwp-sidebar-toggle i {
  transform: rotate(180deg);
}

.onvwp-sidebar-menu-wrapper {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}
.onvwp-sidebar-menu-wrapper::-webkit-scrollbar { width: 4px; }
.onvwp-sidebar-menu-wrapper::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.onvwp-sidebar-menu-wrapper { scrollbar-width: thin; }

.onvwp-menu { display: flex; flex-direction: column; padding: 0 12px; margin: 0; list-style: none; }
.onvwp-menu-item { display: flex; flex-direction: column; }
.onvwp-menu-heading {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
}

.onvwp-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.onvwp-menu-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.onvwp-menu-link.onvwp-active { background: var(--onvwp-biru-utama); color: #fff; }

.onvwp-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 16px; flex-shrink: 0; }
.onvwp-menu-icon i { font-size: 20px !important; }
.onvwp-menu-link { font-size: 12px; }
.onvwp-menu-title { flex: 1 1 auto; }
.onvwp-menu-arrow {
  transition: transform 0.15s ease;
  font-size: 12px;
}
.onvwp-menu-item.onvwp-show > .onvwp-menu-link .onvwp-menu-arrow { transform: rotate(90deg); }

.onvwp-menu-sub {
  list-style: none;
  margin: 2px 0 2px 30px;
  padding: 0;
  display: none;
}
.onvwp-menu-item.onvwp-show > .onvwp-menu-sub { display: flex; flex-direction: column; gap: 2px; }
.onvwp-menu-sub .onvwp-menu-link { padding: 7px 12px; font-size: 13px; }
.onvwp-menu-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

body.onvwp-sidebar--collapsed .onvwp-menu-title,
body.onvwp-sidebar--collapsed .onvwp-menu-arrow,
body.onvwp-sidebar--collapsed .onvwp-menu-heading,
body.onvwp-sidebar--collapsed .onvwp-sidebar-logo-text {
  display: none;
}

body.onvwp-sidebar--collapsed .onvwp-sidebar-logo-text-sm {
  display: block !important;
}

body.onvwp-sidebar--collapsed .onvwp-sidebar-logo {
  padding: 0;
  justify-content: center;
}

@media (max-width: 991px) {
  .onvwp-sidebar {
    width: 100%;
    left: -100%;
  }
  .onvwp-sidebar.onvwp-drawer--show {
    left: 0;
  }
  .onvwp-sidebar-toggle {
    display: none;
  }
  .onvwp-sidebar-close-mobile {
    display: inline-flex;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.onvwp-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--onvwp-footer-height);
  padding: 0 24px;
  background: #000000;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  z-index: 110;
}
.onvwp-footer a { color: rgba(255, 255, 255, 0.65); text-decoration: none; }
.onvwp-footer a:hover { color: #ffffff; }
.onvwp-footer .onvwp-menu { flex-direction: row; }

/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.onvwp-dropdown { position: relative; display: inline-flex; }

.onvwp-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15);
  padding: 8px;
  z-index: 110;
  display: none;
}
.onvwp-dropdown-menu.onvwp-dropdown--placement-start { right: auto; left: 0; }
.onvwp-dropdown.onvwp-show > .onvwp-dropdown-menu,
.onvwp-dropdown-menu.onvwp-show { display: block; }

.onvwp-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #3f4254;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.onvwp-dropdown-item:hover { background: #f5f8fa; color: var(--onvwp-primary); }

/* ==========================================================================
   DRAWER / OFFCANVAS
   ========================================================================== */

.onvwp-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 225px;
  background: #ffffff;
  z-index: 120;
  box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15);
  transition: transform 0.25s ease;
}
.onvwp-drawer--start { left: 0; transform: translateX(-100%); }
.onvwp-drawer--end { right: 0; transform: translateX(100%); }
.onvwp-drawer.onvwp-drawer--show { transform: translateX(0); }

.onvwp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 115;
  display: none;
}
.onvwp-drawer-overlay.onvwp-drawer--show { display: block; }

/* ==========================================================================
   MODAL
   ========================================================================== */

.onvwp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
}
.onvwp-modal-backdrop.onvwp-show { display: block; }

.onvwp-modal {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: none;
  overflow-y: auto;
  padding: 40px 16px;
}
.onvwp-modal.onvwp-show { display: flex; align-items: flex-start; justify-content: center; }

.onvwp-modal-dialog {
  width: 100%;
  max-width: 500px;
  margin: auto;
}
.onvwp-modal-dialog.onvwp-modal-lg { max-width: 800px; }

.onvwp-modal-content {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.onvwp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eff2f5;
}
.onvwp-modal-title { margin: 0; font-size: 16px; font-weight: 700; }
.onvwp-modal-close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  color: #a1a5b7;
  line-height: 1;
}
.onvwp-modal-close:hover { color: #181c32; }
.onvwp-modal-body { padding: 20px; }
.onvwp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #eff2f5;
}

/* ==========================================================================
   COLLAPSE / ACCORDION
   ========================================================================== */

.onvwp-collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}
.onvwp-collapse.onvwp-show {
  height: auto;
}

/* ==========================================================================
   Login Page
   ========================================================================== */

.onvwp-login-body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #ffffff;
}

.onvwp-login-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.onvwp-login-hero {
  position: relative;
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  color: #ffffff;
}

.onvwp-login-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.onvwp-login-hero-top,
.onvwp-login-hero-bottom {
  position: relative;
  z-index: 1;
}

.onvwp-login-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
}

.onvwp-login-logo::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--onvwp-biru-muda);
}

.onvwp-login-logo-text {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
}

.onvwp-login-hero-tagline {
  margin: 0 0 20px;
  max-width: 500px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.onvwp-login-hero-meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

.onvwp-login-hero-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}

.onvwp-login-form-panel {
  flex: 0 1 35%;
  min-width: 400px;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background-color: #ffffff;
}

.onvwp-login-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 16px;
  padding: 48px 40px;
}

.onvwp-login-card-header {
  margin-bottom: 32px;
}

.onvwp-login-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  color: var(--onvwp-navy);
}

.onvwp-login-subtitle {
  margin: 0;
  font-size: 15px;
  color: #6b7789;
}

.onvwp-login-field {
  margin-bottom: 20px;
}

.onvwp-login-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--onvwp-navy);
}

.onvwp-login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--onvwp-navy);
  background-color: #ffffff;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.onvwp-login-input::placeholder {
  color: #8b96a8;
}

.onvwp-login-input:focus {
  border-color: var(--onvwp-biru-muda);
}

.onvwp-login-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.onvwp-login-input-group .onvwp-login-input {
  padding-right: 46px;
}

.onvwp-login-toggle-password {
  position: absolute;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8b96a8;
  font-size: 18px;
  user-select: none;
}

.onvwp-login-toggle-password:hover {
  color: var(--onvwp-biru-utama);
}

.onvwp-login-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  font-size: 14px;
}

.onvwp-login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4a5568;
  cursor: pointer;
}

.onvwp-login-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--onvwp-primary);
  cursor: pointer;
}

.onvwp-login-link {
  color: var(--onvwp-biru-utama);
  text-decoration: none;
  font-weight: 600;
}

.onvwp-login-link:hover {
  text-decoration: underline;
}

.onvwp-login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: onvwp-spin 0.7s linear infinite;
}

@keyframes onvwp-spin {
  to {
    transform: rotate(360deg);
  }
}

.onvwp-login-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  color: #a0aab8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.onvwp-login-separator::before,
.onvwp-login-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6e9ef;
}

.onvwp-login-terms {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: #8b96a8;
}

@media (max-width: 992px) {
  .onvwp-login-wrapper {
    flex-direction: column;
  }

  .onvwp-login-hero {
    padding: 32px 24px 80px;
  }

  .onvwp-login-form-panel {
    padding: 24px 16px 48px;
  }

  .onvwp-login-card {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   SPACING UTILITIES (margin / padding, sides t/b/s(=left)/e(=right)/x/y, steps 0-6)
   Kept last in the cascade so utility classes win over component defaults
   (e.g. .onvwp-py-3 overriding .onvwp-card-body) at equal specificity.
   ========================================================================== */
.onvwp-m-0 { margin: var(--onvwp-space-0); }
.onvwp-my-0 { margin-top: var(--onvwp-space-0); margin-bottom: var(--onvwp-space-0); }
.onvwp-my-2 { margin-top: var(--onvwp-space-2); margin-bottom: var(--onvwp-space-2); }
.onvwp-my-5 { margin-top: var(--onvwp-space-5); margin-bottom: var(--onvwp-space-5); }
.onvwp-mt-5 { margin-top: var(--onvwp-space-5); }
.onvwp-mb-0 { margin-bottom: var(--onvwp-space-0); }
.onvwp-mb-1 { margin-bottom: var(--onvwp-space-1); }
.onvwp-mb-2 { margin-bottom: var(--onvwp-space-2); }
.onvwp-mb-3 { margin-bottom: var(--onvwp-space-3); }
.onvwp-mb-4 { margin-bottom: var(--onvwp-space-4); }
.onvwp-mb-5 { margin-bottom: var(--onvwp-space-5); }
.onvwp-mb-6 { margin-bottom: var(--onvwp-space-6); }
.onvwp-mt-1 { margin-top: var(--onvwp-space-1); }
.onvwp-mt-2 { margin-top: var(--onvwp-space-2); }
.onvwp-mt-3 { margin-top: var(--onvwp-space-3); }
.onvwp-mt-4 { margin-top: var(--onvwp-space-4); }
.onvwp-pb-1 { padding-bottom: var(--onvwp-space-1); }
.onvwp-pb-2 { padding-bottom: var(--onvwp-space-2); }
.onvwp-pb-3 { padding-bottom: var(--onvwp-space-3); }
.onvwp-py-5 { padding-top: var(--onvwp-space-5); padding-bottom: var(--onvwp-space-5); }
.onvwp-py-6 { padding-top: var(--onvwp-space-6); padding-bottom: var(--onvwp-space-6); }
.onvwp-px-1 { padding-left: var(--onvwp-space-1); padding-right: var(--onvwp-space-1); }
.onvwp-ms-0 { margin-left: var(--onvwp-space-0); }
.onvwp-ms-1 { margin-left: var(--onvwp-space-1); }
.onvwp-ms-2 { margin-left: var(--onvwp-space-2); }
.onvwp-me-0 { margin-right: var(--onvwp-space-0); }
.onvwp-me-1 { margin-right: var(--onvwp-space-1); }
.onvwp-me-2 { margin-right: var(--onvwp-space-2); }
.onvwp-me-3 { margin-right: var(--onvwp-space-3); }
.onvwp-me-5 { margin-right: var(--onvwp-space-5); }
.onvwp-me-n2 { margin-right: -0.5rem; }
.onvwp-me-n3 { margin-right: -0.75rem; }
.onvwp-me-n5 { margin-right: -1.25rem; }
.onvwp-me-n6 { margin-right: -1.5rem; }

.onvwp-p-0 { padding: var(--onvwp-space-0); }
.onvwp-p-1 { padding: var(--onvwp-space-1); }
.onvwp-p-2 { padding: var(--onvwp-space-2); }
.onvwp-p-3 { padding: var(--onvwp-space-3); }
.onvwp-p-4 { padding: var(--onvwp-space-4); }
.onvwp-p-5 { padding: var(--onvwp-space-5); }
.onvwp-p-6 { padding: var(--onvwp-space-6); }
.onvwp-px-0 { padding-left: var(--onvwp-space-0); padding-right: var(--onvwp-space-0); }
.onvwp-px-2 { padding-left: var(--onvwp-space-2); padding-right: var(--onvwp-space-2); }
.onvwp-px-3 { padding-left: var(--onvwp-space-3); padding-right: var(--onvwp-space-3); }
.onvwp-px-4 { padding-left: var(--onvwp-space-4); padding-right: var(--onvwp-space-4); }
.onvwp-px-5 { padding-left: var(--onvwp-space-5); padding-right: var(--onvwp-space-5); }
.onvwp-px-6 { padding-left: var(--onvwp-space-6); padding-right: var(--onvwp-space-6); }
.onvwp-py-1 { padding-top: var(--onvwp-space-1); padding-bottom: var(--onvwp-space-1); }
.onvwp-py-2 { padding-top: var(--onvwp-space-2); padding-bottom: var(--onvwp-space-2); }
.onvwp-py-3 { padding-top: var(--onvwp-space-3); padding-bottom: var(--onvwp-space-3); }
.onvwp-py-4 { padding-top: var(--onvwp-space-4); padding-bottom: var(--onvwp-space-4); }
.onvwp-pt-2 { padding-top: var(--onvwp-space-2); }
.onvwp-pt-4 { padding-top: var(--onvwp-space-4); }
.onvwp-pt-5 { padding-top: var(--onvwp-space-5); }
.onvwp-pb-6 { padding-bottom: var(--onvwp-space-6); }
.onvwp-pe-5 { padding-right: var(--onvwp-space-5); }