.btn-hero-primary {
  background: linear-gradient(135deg, #0369a1 0%, #025f8f 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.24px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.18) !important;
  transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  text-shadow: none !important;
}
html:not(.dark-theme) .btn-hero-primary {
  background: linear-gradient(135deg, #0b7fc4 0%, #075f9b 100%) !important;
  color: #ffffff !important;
}
html:not(.dark-theme) .btn-hero-primary:hover {
  background: linear-gradient(135deg, #086fb0 0%, #064d7f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(8, 89, 142, 0.28) !important;
}
.btn-hero-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.22) !important;
  color: #ffffff !important;
}
.btn-hero-emerald {
  background: linear-gradient(135deg, #059669 0%, #0d8f66 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.24px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.18) !important;
  transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  text-shadow: none !important;
}
html:not(.dark-theme) .btn-hero-emerald {
  background: linear-gradient(135deg, #10b981 0%, #0e8d63 100%) !important;
  color: #ffffff !important;
}
html:not(.dark-theme) .btn-hero-emerald:hover {
  background: linear-gradient(135deg, #0ea76d 0%, #0c734f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(12, 104, 71, 0.28) !important;
}
.btn-hero-emerald:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.22) !important;
  color: #ffffff !important;
}
.btn-hero-ghost {
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.14s ease !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  -webkit-font-smoothing: antialiased !important;
}
.module-hero-subtitle {
  font-size: 14px;
  margin: 0;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.module-breadcrumb {
  font-size: 13px;
  color: #475569;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
/* Ensure clear readable text on hero buttons in dark theme as well */
html.dark-theme .btn-hero-primary,
html.dark-theme .btn-hero-emerald {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}
/* Remove heavy text shadows that can blur text over gradients */
.btn-hero-primary,
.btn-hero-emerald,
.btn-hero-ghost {
  text-shadow: none !important;
}
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  /* Responsive tweaks for admin modules and compact action buttons */
  @media (max-width: 768px) {
    .module-hero-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .module-hero-actions {
      margin-top: 0.75rem;
      width: 100%;
      display: flex;
      gap: 0.5rem;
    }
    .module-hero-actions .btn {
      flex: 1 1 auto;
    }
    .module-table-wrapper {
      padding: 0.5rem;
    }
    .btn-action {
      padding: 6px 8px !important;
      border-radius: 6px !important;
    }
    .btn-action .fa,
    .btn-action .fas,
    .btn-action .far {
      font-size: 12px !important;
    }
  }

  /* Ensure tables can scroll horizontally on very small screens */
  .module-table-wrapper .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.select2 {
  width: 100% !important;
}
.has-error .select2-selection {
  border: 1px solid #dd4b39;
}
.has-success .select2-selection {
  border: 1px solid #00a65a;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 9999;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & FONT SYSTEM (Crisp, Neat & Balanced Medium Sizes)
   ========================================================================== */
body,
html {
  font-family:
    "Plus Jakarta Sans",
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wrapper,
.content-wrapper,
.main-sidebar,
.sidebar {
  font-family:
    "Plus Jakarta Sans",
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

/* Balanced Heading Sizes - Medium, Proportionate & Clear */
h1,
.h1 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #0f172a;
}

h2,
.h2 {
  font-size: 1.35rem !important; /* 21.6px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #0f172a;
}

h3,
.h3 {
  font-size: 1.2rem !important; /* 19.2px */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1e293b;
}

h4,
.h4 {
  font-size: 1.05rem !important; /* 16.8px */
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: #1e293b;
}

h5,
.h5 {
  font-size: 0.95rem !important; /* 15.2px */
  font-weight: 600 !important;
  color: #334155;
}

h6,
.h6 {
  font-size: 0.85rem !important; /* 13.6px */
  font-weight: 600 !important;
  color: #475569;
}

.content-header > h1 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0;
  color: #0f172a;
}

.content-header > h1 small {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #64748b;
  margin-left: 8px;
}

.content-header .breadcrumb {
  font-size: 12.5px !important;
  font-weight: 500;
}

.box-title {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

/* Sidebar & Menu Typography */
.sidebar-menu > li > a {
  font-size: 13.5px !important;
  font-weight: 500;
}

.sidebar-menu .treeview-menu > li > a {
  font-size: 13px !important;
}

.sidebar-menu li.header {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Tables, DataTables & Forms Typography */
.table {
  font-size: 14px;
}

.table th {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
}

.table td {
  font-size: 14px !important;
  vertical-align: middle;
}

.form-control {
  font-size: 14px !important;
  line-height: 1.5;
}

.btn {
  font-size: 13.5px !important;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.btn-lg {
  font-size: 15px !important;
}

.btn-sm {
  font-size: 12.5px !important;
}

.badge,
.label {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   EXAM SHEET & QUESTIONS TYPOGRAPHY (Clear, Readable, Medium-Sized "Soal")
   ========================================================================== */

/* Soal Text Container */
.soal-content,
.step .soal-content,
.step > div:not(.funkyradio):not(.text-center) {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.soal-content p,
.step p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  margin-bottom: 8px;
}

.soal-content img,
.step img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 0;
}

/* Soal Options (Pilihan Ganda A, B, C, D, E) */
.funkyradio {
  margin-top: 15px;
}

.funkyradio div {
  clear: both;
  overflow: hidden;
  margin-bottom: 12px;
}

.funkyradio label {
  width: 100%;
  min-height: 52px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #334155;
  padding: 13px 18px 13px 58px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  margin-top: 0;
  user-select: none;
  -webkit-user-select: none;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio label:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
  color: #1d4ed8;
  transform: translateX(3px);
}

.funkyradio label:before,
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  display: none !important;
}

.funkyradio .huruf_opsi,
.huruf_opsi {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 46px;
  background: #f1f5f9;
  color: #475569;
  border-right: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  border-radius: 6px 0 0 6px;
  margin: 0 !important;
  transition: all 0.2s ease;
}

.funkyradio label p {
  margin: 0;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: inherit;
  width: 100%;
  word-break: break-word;
}

/* Checked States */
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label,
.funkyradio-success input[type="radio"]:checked ~ label {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15) !important;
}

.funkyradio input[type="radio"]:checked ~ label .huruf_opsi,
.funkyradio input[type="checkbox"]:checked ~ label .huruf_opsi,
.funkyradio-success input[type="radio"]:checked ~ label .huruf_opsi {
  background: #10b981 !important;
  color: #ffffff !important;
  border-right-color: #10b981 !important;
}

.funkyradio-primary input[type="radio"]:checked ~ label {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
}

.funkyradio-primary input[type="radio"]:checked ~ label .huruf_opsi {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-right-color: #3b82f6 !important;
}

.funkyradio-warning input[type="radio"]:checked ~ label {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

.funkyradio-warning input[type="radio"]:checked ~ label .huruf_opsi {
  background: #f59e0b !important;
  color: #ffffff !important;
  border-right-color: #f59e0b !important;
}

/* Dark Theme overrides for Exam Sheet Questions & Options */
html.dark-theme .soal-content,
body.dark-theme .soal-content,
html.dark-theme .step .soal-content,
body.dark-theme .step .soal-content,
html.dark-theme .step > div:not(.funkyradio):not(.text-center),
body.dark-theme .step > div:not(.funkyradio):not(.text-center) {
  background: #1e293b !important;
  border-color: #334155 !important;
  border-left-color: #38bdf8 !important;
  color: #ffffff !important;
}

html.dark-theme .soal-content p,
body.dark-theme .soal-content p,
html.dark-theme .soal-content span,
body.dark-theme .soal-content span,
html.dark-theme .step p,
body.dark-theme .step p {
  color: #ffffff !important;
}

html.dark-theme .funkyradio label,
body.dark-theme .funkyradio label {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .funkyradio label:hover,
body.dark-theme .funkyradio label:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

html.dark-theme .funkyradio .huruf_opsi,
body.dark-theme .funkyradio .huruf_opsi {
  background: #334155 !important;
  color: #ffffff !important;
  border-right-color: #475569 !important;
}

html.dark-theme .funkyradio input[type="radio"]:checked ~ label,
body.dark-theme .funkyradio input[type="radio"]:checked ~ label {
  background: #064e3b !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

html.dark-theme .funkyradio input[type="radio"]:checked ~ label .huruf_opsi,
body.dark-theme .funkyradio input[type="radio"]:checked ~ label .huruf_opsi {
  background: #10b981 !important;
  color: #ffffff !important;
  border-right-color: #10b981 !important;
}

html.dark-theme .funkyradio input[type="radio"]:checked ~ label p,
body.dark-theme .funkyradio input[type="radio"]:checked ~ label p {
  color: #ffffff !important;
}

/* Question Navigation Grid (#tampil_jawaban) */
#tampil_jawaban {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 15px !important;
}

.btn_soal {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  min-width: 48px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn_soal:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Exam Action Buttons */
.box-footer .action.back,
.box-footer .ragu_ragu,
.box-footer .action.next,
.box-footer .selesai {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   GLOBAL INVISIBLE SCROLLBAR (Smooth Scrolling without Visual Scrollbars)
   ========================================================================== */
/* WebKit browsers (Chrome, Safari, Edge Chromium, Opera, Android, iOS) */
*::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
  display: none !important;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: transparent !important;
  display: none !important;
}

*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: none !important;
  display: none !important;
}

/* Firefox, IE and Edge legacy */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-x: hidden !important;
}

.content-wrapper,
.main-sidebar,
.sidebar,
.box-body,
.table-responsive,
.dashboard-simpel,
.custom-scrollbar,
div,
section,
main,
article,
aside,
ul,
nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   PREMIUM HEADER & NAVBAR STYLING (Pixel-Perfect Logo & Alignment)
   ========================================================================== */
.main-header {
  position: relative !important;
  z-index: 1030 !important;
}

.skin-purple .main-header .navbar,
.skin-blue .main-header .navbar,
.main-header .navbar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  min-height: 50px;
  margin-left: 230px;
  transition: margin-left 0.3s ease-in-out;
}

/* Logo - Fixed width, vertically centered, zero wrap/overflow glitch */
.skin-purple .main-header .logo,
.skin-blue .main-header .logo,
.main-header .logo {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 10px !important;
  width: 230px !important;
  overflow: hidden !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center !important;
  display: block !important;
  float: left !important;
  transition:
    width 0.3s ease-in-out,
    background-color 0.3s ease !important;
}

.skin-purple .main-header .logo:hover,
.skin-blue .main-header .logo:hover,
.main-header .logo:hover {
  background: #1e293b !important;
}

.main-header .logo .logo-lg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  line-height: 1 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35px !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.main-header .logo .logo-lg i {
  color: #38bdf8 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.main-header .logo .logo-lg .logo-text {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.main-header .logo .logo-mini {
  display: none !important;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center !important;
}

.main-header .logo .logo-mini i {
  font-size: 18px !important;
  color: #38bdf8 !important;
  line-height: 50px !important;
}

/* Sidebar Collapse state for Logo */
.sidebar-collapse .main-header .logo {
  width: 50px !important;
  padding: 0 !important;
}

.sidebar-collapse .main-header .logo .logo-lg {
  display: none !important;
}

.sidebar-collapse .main-header .logo .logo-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
}

.sidebar-collapse .main-header .navbar {
  margin-left: 50px !important;
}

.main-header .sidebar-toggle {
  color: #94a3b8 !important;
  padding: 15px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 20px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.main-header .sidebar-toggle::before {
  display: none !important;
  content: "" !important;
}

.main-header .sidebar-toggle i {
  font-size: 16px !important;
  color: #94a3b8 !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

.main-header .sidebar-toggle:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.main-header .sidebar-toggle:hover i {
  color: #38bdf8 !important;
}

.navbar-nav > li > a {
  color: #cbd5e1 !important;
  transition: all 0.2s ease;
}

.navbar-nav > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   PREMIUM SIDEBAR STYLING
   ========================================================================== */
.skin-purple .main-sidebar,
.skin-blue .main-sidebar,
.main-sidebar {
  background: #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  width: 230px;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar {
  padding-bottom: 30px;
}

.sidebar-menu {
  margin-top: 5px;
}

.sidebar-menu > li > a {
  border-radius: 10px !important;
  margin: 3px 12px !important;
  padding: 11px 16px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
  border-left: none !important;
  transform: none !important;
}

.sidebar-menu > li > a i {
  width: 20px !important;
  text-align: center !important;
  font-size: 15px !important;
  color: #64748b;
  transform: none !important;
  transition: color 0.2s ease !important;
}

.sidebar-menu > li > a i.sidebar-exam-icon {
  color: #38bdf8;
}

.sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f8fafc !important;
  transform: none !important;
}

.sidebar-menu > li:hover > a i {
  color: #38bdf8 !important;
  transform: none !important;
}

.sidebar-menu > li.active > a {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  transform: none !important;
}

.sidebar-menu > li.active > a i {
  color: #ffffff !important;
  transform: none !important;
}

.sidebar-menu > li.active > a i.sidebar-exam-icon {
  color: #ffffff !important;
}

/* Treeview Submenu */
.sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px;
  margin: 4px 12px !important;
  padding: 6px 0 !important;
}

.sidebar-menu .treeview-menu > li > a {
  padding: 9px 15px 9px 24px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.18) !important;
  font-weight: 600 !important;
}

.sidebar-menu .treeview-menu > li.active > a i {
  color: #38bdf8 !important;
}

/* ==========================================================================
   PREMIUM FOOTER STYLING
   ========================================================================== */
.main-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  padding: 15px 24px !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
  transition: margin-left 0.3s ease-in-out;
}

.main-footer a {
  color: #0284c7 !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.main-footer a:hover {
  color: #0369a1 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   SIDEBAR USER CARD STYLING
   ========================================================================== */
.sidebar-user-card {
  transition: all 0.3s ease-in-out;
}

/* Override old AdminLTE .user-panel defaults that might leak through */
.sidebar .user-panel {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.sidebar .user-panel .pull-left.image img {
  max-width: none !important;
}

.sidebar .user-panel .pull-left.info {
  position: static !important;
  padding: 0 !important;
  left: auto !important;
}

.sidebar .user-panel .pull-left.info p {
  color: #f8fafc !important;
}

.sidebar .user-panel .pull-left.info a {
  color: #94a3b8 !important;
}

/* ==========================================================================
   SIDEBAR INVISIBLE SCROLLBAR (Tetap bisa scroll, scrollbar disembunyikan)
   ========================================================================== */
.sidebar,
.sidebar-menu,
.main-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
}

.sidebar::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar,
.main-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSED (MINI) OVERRIDES - DESKTOP ONLY (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
  /* 1. Global sidebar transition */
  .main-sidebar,
  .main-header .logo {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .content-wrapper,
  .main-footer,
  .main-header .navbar {
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* 2. Reset width and margins */
  body.sidebar-mini.sidebar-collapse .main-sidebar,
  body.sidebar-collapse .main-sidebar,
  body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar,
  body.sidebar-collapse .main-sidebar .sidebar {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: 1040 !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header .navbar,
  body.sidebar-collapse .main-header .navbar,
  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-mini.sidebar-collapse .main-footer,
  body.sidebar-collapse .main-footer {
    margin-left: 60px !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header .logo,
  body.sidebar-collapse .main-header .logo {
    width: 60px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg,
  body.sidebar-collapse .main-header .logo .logo-lg {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini,
  body.sidebar-collapse .main-header .logo .logo-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 50px !important;
    line-height: 50px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. User Card in Collapsed Mode */
  body.sidebar-mini.sidebar-collapse .sidebar-user-card,
  body.sidebar-collapse .sidebar-user-card {
    margin: 10px 6px !important;
    padding: 8px 0 !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-user-card > div,
  body.sidebar-collapse .sidebar-user-card > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-user-card > div > div:last-child,
  body.sidebar-collapse .sidebar-user-card > div > div:last-child {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-user-card img,
  body.sidebar-collapse .sidebar-user-card img {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-user-card span[title="Online"],
  body.sidebar-collapse .sidebar-user-card span[title="Online"] {
    display: none !important;
  }

  /* 4. Section Headers in Collapsed Mode */
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.header,
  body.sidebar-collapse .sidebar-menu > li.header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
  }

  /* 5. Menu Items in Collapsed Mode */
  body.sidebar-mini.sidebar-collapse .sidebar-menu,
  body.sidebar-collapse .sidebar-menu {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li,
  body.sidebar-collapse .sidebar-menu > li,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview,
  body.sidebar-collapse .sidebar-menu > li.treeview {
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a,
  body.sidebar-collapse .sidebar-menu > li > a,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview > a,
  body.sidebar-collapse .sidebar-menu > li.treeview > a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 10px !important;
    text-align: center !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    color: #94a3b8 !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a i:first-child,
  body.sidebar-collapse .sidebar-menu > li > a i:first-child,
  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > a
    i:first-child,
  body.sidebar-collapse .sidebar-menu > li.treeview > a i:first-child {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a,
  body.sidebar-collapse .sidebar-menu > li.active > a,
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview.active > a,
  body.sidebar-collapse .sidebar-menu > li.treeview.active > a {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
  }

  /* 6. Spans & Arrows in Desktop Collapsed Mode */
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
  body.sidebar-collapse .sidebar-menu > li > a > span,
  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li
    > a
    .pull-right-container,
  body.sidebar-collapse .sidebar-menu > li > a .pull-right-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* 7. Tooltip Flyout for Single Menu Items */
  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview)
    > a::after,
  body.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview)
    > a::after {
    content: attr(data-label) !important;
    position: absolute !important;
    left: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-6px) !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 999999 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.2s ease !important;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview):hover
    > a::after,
  body.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview):hover
    > a::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview)
    > a::after,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li:not(.header):not(.treeview)
    > a::after {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }

  /* 8. Desktop Hover Flyout Panel for Treeview (Sistem Akademik & Relasi Data) */
  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview,
  body.sidebar-collapse .sidebar-menu > li.treeview {
    overflow: visible !important;
  }

  body.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview::after,
  body.sidebar-collapse .sidebar-menu > li.treeview::after {
    content: "";
    position: absolute;
    left: 36px;
    top: 0;
    width: 25px;
    height: 100%;
    z-index: 999998;
    display: block;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu,
  body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu {
    position: absolute !important;
    left: 54px !important;
    top: -4px !important;
    min-width: 220px !important;
    max-width: 280px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 8px !important;
    z-index: 999999 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    pointer-events: none !important;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s !important;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview:hover
    > .treeview-menu,
  body.sidebar-collapse .sidebar-menu > li.treeview:hover > .treeview-menu,
  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview.menu-open
    > .treeview-menu,
  body.sidebar-collapse .sidebar-menu > li.treeview.menu-open > .treeview-menu,
  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview.flyout-open
    > .treeview-menu,
  body.sidebar-collapse
    .sidebar-menu
    > li.treeview.flyout-open
    > .treeview-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu::before,
  body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu::before {
    content: attr(data-flyout-title);
    display: block;
    padding: 6px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li,
  body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a,
  body.sidebar-collapse .sidebar-menu > li.treeview > .treeview-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
  }

  body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a
    i,
  body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a
    i {
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 13px !important;
    display: inline-block !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Treeview Flyout Themes (Dark Mode) */
  html.dark-theme
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu,
  html.dark-theme
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
  }

  html.dark-theme
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu::before,
  html.dark-theme
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu::before {
    color: #94a3b8 !important;
    border-bottom: 1px solid #1e293b !important;
  }

  html.dark-theme
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a,
  html.dark-theme
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a {
    color: #cbd5e1 !important;
  }

  html.dark-theme
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a:hover,
  html.dark-theme
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #38bdf8 !important;
  }

  html.dark-theme
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li.active
    > a,
  html.dark-theme
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li.active
    > a {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  /* Treeview Flyout Themes (Light Mode) */
  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.06) !important;
  }

  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu::before,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu::before {
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a {
    color: #0f172a !important;
  }

  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a:hover,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li
    > a:hover {
    background: #f1f5f9 !important;
    color: #0284c7 !important;
  }

  html:not(.dark-theme)
    body.sidebar-mini.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li.active
    > a,
  html:not(.dark-theme)
    body.sidebar-collapse
    .sidebar-menu
    > li.treeview
    > .treeview-menu
    > li.active
    > a {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
  }
}

/* ==========================================================================
   RESPONSIVE OPTIMIZATION (Smartphones, Tablets, Laptops & Desktop)
   ========================================================================== */

/* Mobile header & drawer branding defaults */
.mobile-header-brand {
  display: none !important;
}

.mobile-sidebar-header {
  display: none !important;
}

/* Sidebar backdrop: always hidden by default, only shown via body.sidebar-open */
.sidebar-backdrop {
  display: none !important;
  pointer-events: none !important;
}

/* Mobile Devices (< 768px — All Smartphones: iPhone, Samsung, Xiaomi, Oppo, Vivo, etc.) */
@media (max-width: 767px) {
  .mobile-sidebar-header {
    display: flex !important;
  }

  /* Header: Sleek single-row mobile topbar */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    width: 100% !important;
  }

  .main-header .logo,
  header.main-header > a.logo,
  .skin-purple .main-header .logo,
  .skin-blue .main-header .logo,
  .main-header > .logo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -99999px !important;
  }

  .main-header .navbar,
  .skin-purple .main-header .navbar,
  .skin-blue .main-header .navbar {
    margin-left: 0 !important;
    width: 100% !important;
    float: none !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .main-header .sidebar-toggle {
    padding: 10px 12px !important;
    font-size: 18px !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }

  /* Centered Mobile Brand Logo */
  .mobile-header-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 0 6px !important;
  }

  .mobile-header-brand:hover,
  .mobile-header-brand:focus {
    color: #ffffff !important;
    text-decoration: none !important;
  }

  .mobile-header-brand i {
    color: #38bdf8 !important;
    font-size: 15px !important;
  }

  .mobile-header-brand .brand-name {
    display: inline-block !important;
    line-height: 1 !important;
  }

  .main-header .navbar-custom-menu {
    float: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .main-header .navbar-custom-menu .navbar-nav > li > a {
    padding: 8px 6px !important;
  }

  .theme-toggle-item {
    margin-right: 2px !important;
  }

  .theme-toggle-btn {
    padding: 4px !important;
  }

  .theme-toggle-track {
    width: 46px !important;
    height: 25px !important;
  }

  .theme-toggle-thumb {
    width: 19px !important;
    height: 19px !important;
  }

  html.dark-theme .theme-toggle-thumb,
  body.dark-theme .theme-toggle-thumb,
  .theme-toggle-btn.is-dark .theme-toggle-thumb {
    transform: translateX(21px) !important;
  }

  .main-header .dropdown-menu {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
    width: 290px !important;
  }

  /* Sidebar Drawer on Mobile (< 768px) - Smooth Touch Scrollable, Flush at Top */
  .main-sidebar {
    transform: translateX(-100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    padding-top: 0 !important; /* Eliminate AdminLTE 50px top padding gap */
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1050 !important;
    width: 260px !important;
    max-width: 82vw !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #0f172a !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .main-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .main-sidebar .sidebar {
    padding-top: 0 !important; /* Flush at top */
    min-height: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 70px !important; /* Safe area padding so last menu items are never cut off */
  }

  .mobile-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #090e17 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  .sidebar-open .main-sidebar {
    transform: translateX(0) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.45) !important;
  }

  /* Mobile Sidebar Menu Items - Full Width, Labels Visible, Accordion Active */
  .main-sidebar .sidebar-menu {
    padding: 8px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .main-sidebar .sidebar-menu > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  .main-sidebar .sidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 3px 12px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    text-align: left !important;
    position: relative !important;
    background: transparent !important;
    transform: none !important;
  }

  .main-sidebar .sidebar-menu > li > a > span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .main-sidebar .sidebar-menu > li > a i:first-child {
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    float: none !important;
  }

  .main-sidebar .sidebar-menu > li > a .pull-right-container {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    margin-left: auto !important;
    float: right !important;
    width: auto !important;
    height: auto !important;
  }

  .main-sidebar .sidebar-menu > li > a .pull-right-container i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    font-size: 13px !important;
    transition: transform 0.2s ease !important;
  }

  .main-sidebar
    .sidebar-menu
    > li.menu-open
    > a
    .pull-right-container
    i.fa-angle-left {
    transform: rotate(-90deg) !important;
  }

  .main-sidebar .sidebar-menu > li.treeview > .treeview-menu {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin: 4px 12px 6px 24px !important;
    padding: 4px 0 !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .main-sidebar .sidebar-menu > li.treeview.menu-open > .treeview-menu {
    display: block !important;
  }

  .main-sidebar .sidebar-menu > li.treeview > .treeview-menu::before,
  .main-sidebar .sidebar-menu > li.treeview::after {
    display: none !important;
  }

  .main-sidebar .sidebar-menu > li.treeview > .treeview-menu > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  .main-sidebar .sidebar-menu > li.treeview > .treeview-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    margin: 2px 4px !important;
    width: auto !important;
    height: auto !important;
  }

  .main-sidebar .sidebar-menu > li.treeview > .treeview-menu > li > a i {
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
    display: inline-block !important;
    text-align: center !important;
  }

  .main-sidebar .sidebar-user-card > div > div:last-child {
    display: block !important;
  }

  .main-sidebar .sidebar-menu > li.header {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    padding: 12px 20px 6px !important;
  }

  /* Mobile Drawer Theme Overrides */
  html:not(.dark-theme) .main-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
  }

  html:not(.dark-theme) .mobile-sidebar-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html:not(.dark-theme) .mobile-sidebar-header span {
    color: #0f172a !important;
  }

  html:not(.dark-theme) .mobile-sidebar-header .sidebar-toggle {
    color: #475569 !important;
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
  }

  html:not(.dark-theme)
    .main-sidebar
    .sidebar-menu
    > li.treeview
    > .treeview-menu {
    background: #f1f5f9 !important;
  }

  html.dark-theme .main-sidebar {
    background: #080c14 !important;
    border-right: 1px solid #1e293b !important;
  }

  html.dark-theme .mobile-sidebar-header {
    background: #080c14 !important;
    border-bottom: 1px solid #1e293b !important;
  }

  html.dark-theme .mobile-sidebar-header span {
    color: #ffffff !important;
  }

  html.dark-theme .mobile-sidebar-header .sidebar-toggle {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  html.dark-theme .main-sidebar .sidebar-menu > li.treeview > .treeview-menu {
    background: rgba(255, 255, 255, 0.04) !important;
  }

  /* Full Screen Backdrop Overlay on Mobile when Sidebar is Open (Tapping closes drawer) */
  .sidebar-backdrop {
    display: none !important;
    pointer-events: none !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1045 !important;
    cursor: pointer !important;
    animation: fadeInBackdrop 0.2s ease forwards !important;
  }

  @keyframes fadeInBackdrop {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Content area: no left margin */
  .content-wrapper {
    margin-left: 0 !important;
    padding: 12px 10px !important;
    background: #f8fafc !important;
  }

  /* Content Header: Clean Title, Hide bulky redundant breadcrumb on mobile */
  .content-header {
    padding: 12px 6px 6px !important;
  }

  .content-header > h1 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
  }

  .content-header > h1 > small {
    font-size: 12px !important;
    color: #64748b !important;
    display: inline-block !important;
    margin-left: 6px !important;
  }

  .content-header > .breadcrumb {
    display: none !important; /* Hide redundant AdminLTE breadcrumb box on mobile for clean modern look */
  }

  /* Footer on mobile */
  .main-footer {
    margin-left: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    font-size: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Dashboard stat boxes stack vertically */
  .row > [class*="col-lg-"],
  .row > [class*="col-md-"] {
    margin-bottom: 12px;
  }

  .info-box {
    min-height: auto !important;
    border-radius: 14px !important;
  }

  .info-box-icon {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    font-size: 26px !important;
    border-radius: 12px !important;
  }

  .info-box-content {
    padding: 8px 12px !important;
  }

  /* Tables responsive */
  .table-responsive {
    border: none !important;
    margin-bottom: 15px;
    border-radius: 12px !important;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* Exam sheet on mobile */
  .box-body {
    padding: 14px 12px !important;
  }

  .soal-content,
  .step .soal-content {
    padding: 14px 14px !important;
    font-size: 15px !important;
  }

  .funkyradio label {
    padding: 10px 12px 10px 50px !important;
    font-size: 14px !important;
  }

  .funkyradio .huruf_opsi,
  .huruf_opsi {
    width: 40px !important;
    font-size: 14px !important;
  }

  /* Question navigation grid */
  #tampil_jawaban {
    gap: 6px !important;
    padding: 10px !important;
  }

  .btn_soal {
    min-width: 38px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  /* Exam action buttons */
  .box-footer .action.back,
  .box-footer .ragu_ragu,
  .box-footer .action.next,
  .box-footer .selesai {
    font-size: 13px !important;
    padding: 7px 12px !important;
  }

  /* Sidebar user card on mobile drawer */
  .sidebar-user-card {
    margin: 12px 10px 14px !important;
    padding: 14px 12px !important;
  }

  .sidebar-user-card img {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Tablet Devices (768px to 991px — iPad, Galaxy Tab) */
@media (min-width: 768px) and (max-width: 991px) {
  .content-wrapper {
    padding: 16px !important;
  }

  .main-header .logo .logo-lg {
    font-size: 13px !important;
  }

  .sidebar-user-card {
    padding: 14px 12px !important;
  }

  .sidebar-menu > li > a {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .sidebar-menu .treeview-menu > li > a {
    font-size: 12.5px !important;
    padding: 8px 14px 8px 22px !important;
  }
}

/* Large Screens & Desktop (>= 992px — Laptops & Monitors) */
@media (min-width: 992px) {
  .content-wrapper {
    padding: 20px 24px !important;
  }
}

/* ==========================================================================
   USER MENU DROPDOWN FOOTER BUTTONS (High Contrast & Pixel-Perfect)
   ========================================================================== */
.navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu .user-footer {
  background: #f8fafc !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
}

html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer {
  background: #0f172a !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child {
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action,
html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #f8fafc !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action:hover,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action:hover,
html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action
  i,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child
  i,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-profile-action
  span,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:first-child
  span {
  color: inherit !important;
}

html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header {
  background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important;
}

html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  p,
html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  small,
html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  .badge {
  color: #f8fafc !important;
}

html:not(.dark-theme)
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  p,
html:not(.dark-theme)
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  small,
html:not(.dark-theme)
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  .badge {
  color: #ffffff !important;
}

html:not(.dark-theme)
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-logout-action,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  #logout,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:last-child {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
  transition: all 0.2s ease !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-logout-action
  *,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  #logout
  * {
  color: #ffffff !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  .btn-logout-action:hover,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  #logout:hover,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  a:last-child:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.45) !important;
}

/* Keep profile details and actions inside the viewport for long user data. */
.navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu {
  width: min(280px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box !important;
}

.navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu .user-header p,
.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  small {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-header
  small {
  line-height: 1.5 !important;
}

.navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu .user-footer {
  flex-wrap: wrap !important;
}

.navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > .dropdown-menu
  .user-footer
  > a {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  white-space: normal !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 360px) {
  .navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu .user-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .navbar-custom-menu
    .navbar-nav
    > li.user-menu
    > .dropdown-menu
    .user-footer
    > a {
    width: 100% !important;
    flex-basis: auto !important;
  }
}

/* ==========================================================================
   TAILWIND CSS SWEETALERT2 DESIGN SYSTEM (Clean, Native & Glitch-Free)
   ========================================================================== */

/* 1. Backdrop Overlay (Tailwind slate-900/65) */
.swal2-container {
  background: rgba(15, 23, 42, 0.65) !important;
  z-index: 100000 !important;
  padding: 16px !important;
}

/* 2. Modal Card (Tailwind rounded-2xl, shadow-2xl, border-slate-100) */
.swal2-popup,
.swal2-modal {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px 24px 24px !important;
  width: 400px !important;
  max-width: 90vw !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  border: 1px solid #f1f5f9 !important;
  font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    sans-serif !important;
}

/* 3. Title (Tailwind text-lg font-bold text-slate-900) */
.swal2-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin: 12px 0 6px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* 4. Text Content (Tailwind text-sm text-slate-500) */
.swal2-content,
#swal2-content {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Icons — Enhance colors only, preserve SweetAlert2 internal show/hide */
.swal2-icon.swal2-question {
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
}

.swal2-icon.swal2-success {
  border-color: #10b981 !important;
  color: #059669 !important;
}

.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}

.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #d97706 !important;
}

.swal2-icon.swal2-info {
  border-color: #38bdf8 !important;
  color: #0284c7 !important;
}

/* 6. Actions Container */
.swal2-actions,
.swal2-buttonswrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100% !important;
  padding: 0 !important;
}

/* 7. Action Buttons (Tailwind rounded-xl, font-semibold) */
.swal2-styled.swal2-confirm,
.swal2-confirm {
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-confirm:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

.swal2-styled.swal2-cancel,
.swal2-cancel {
  border-radius: 10px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.swal2-styled.swal2-cancel:hover,
.swal2-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   DARK MODE / LIGHT MODE TOGGLE BUTTON & THEME ENGINE (Tailwind Slate System)
   ========================================================================== */

/* 1. Global Smooth Theme Transitions */
html,
body,
.content-wrapper,
.wrapper,
.main-header,
.main-header .navbar,
.main-sidebar,
.main-footer,
.box,
.box-header,
.box-body,
.box-footer,
.glass-panel,
.info-box,
.table,
.table td,
.table th,
.form-control,
.sidebar-user-card,
.dropdown-menu,
.modal-content {
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Modern Navbar Toggle Switch Button */
.theme-toggle-item {
  display: flex !important;
  align-items: center !important;
  padding: 0 4px !important;
}

.theme-toggle-btn {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  cursor: pointer !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.theme-toggle-track {
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 2px;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle-btn:hover .theme-toggle-track {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
}

.theme-toggle-thumb {
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 3px;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.theme-icon-moon {
  color: #0284c7 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}

.theme-icon-sun {
  color: #f59e0b !important;
  font-size: 12px !important;
  display: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}

/* Active Dark Mode Button State */
html.dark-theme .theme-toggle-track,
body.dark-theme .theme-toggle-track,
.theme-toggle-btn.is-dark .theme-toggle-track {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

html.dark-theme .theme-toggle-thumb,
body.dark-theme .theme-toggle-thumb,
.theme-toggle-btn.is-dark .theme-toggle-thumb {
  transform: translateX(24px) !important;
  background: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

html.dark-theme .theme-icon-moon,
body.dark-theme .theme-icon-moon,
.theme-toggle-btn.is-dark .theme-icon-moon {
  display: none !important;
}

html.dark-theme .theme-icon-sun,
body.dark-theme .theme-icon-sun,
.theme-toggle-btn.is-dark .theme-icon-sun {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fbbf24 !important;
}

/* 3. Deep Slate Dark Mode Theme Styles */
html.dark-theme body,
html.dark-theme .wrapper,
html.dark-theme .content-wrapper {
  background: #0b0f19 !important;
  color: #cbd5e1 !important;
}

/* Header in Dark Mode */
html.dark-theme .main-header .navbar {
  background: linear-gradient(135deg, #080c14 0%, #0f172a 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Footer in Dark Mode */
html.dark-theme .main-footer {
  background: #090d16 !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

/* Sidebar in Dark Mode */
html.dark-theme .main-sidebar {
  background: #080c14 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .sidebar-user-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Boxes, Panels & Cards in Dark Mode */
html.dark-theme .box,
html.dark-theme .box-solid,
html.dark-theme .glass-panel,
html.dark-theme .panel,
html.dark-theme .card {
  background: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
  color: #cbd5e1 !important;
}

html.dark-theme .box-header {
  background: transparent !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #1f2937 !important;
}

html.dark-theme .box-body {
  background: transparent !important;
  color: #cbd5e1 !important;
}

html.dark-theme .box-footer {
  background: #0d131f !important;
  border-top: 1px solid #1f2937 !important;
  color: #94a3b8 !important;
}

/* Headings in Dark Mode */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme .box-title,
html.dark-theme .content-header > h1,
html.dark-theme .dashboard-simpel h1,
html.dark-theme .dashboard-simpel h2,
html.dark-theme .dashboard-simpel h3,
html.dark-theme .dashboard-simpel h4 {
  color: #f8fafc !important;
}

html.dark-theme strong,
html.dark-theme b {
  color: #f1f5f9 !important;
}

html.dark-theme p,
html.dark-theme .text-muted,
html.dark-theme small {
  color: #94a3b8 !important;
}

/* Tables & DataTables in Dark Mode */
html.dark-theme .table {
  color: #cbd5e1 !important;
  border-color: #1f2937 !important;
}

html.dark-theme .table > thead > tr > th {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #1f2937 !important;
}

html.dark-theme .table > tbody > tr > td {
  background: #111827 !important;
  color: #cbd5e1 !important;
  border-color: #1f2937 !important;
}

html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: #0d131f !important;
}

html.dark-theme .table-hover > tbody > tr:hover > td {
  background: #1e293b !important;
  color: #f8fafc !important;
}

html.dark-theme div.dataTables_wrapper div.dataTables_length,
html.dark-theme div.dataTables_wrapper div.dataTables_filter,
html.dark-theme div.dataTables_wrapper div.dataTables_info,
html.dark-theme div.dataTables_wrapper div.dataTables_paginate {
  color: #94a3b8 !important;
}

html.dark-theme div.dataTables_wrapper div.dataTables_filter input,
html.dark-theme div.dataTables_wrapper div.dataTables_length select {
  background: #0f172a !important;
  border: 1px solid #374151 !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
}

html.dark-theme .pagination > li > a,
html.dark-theme .pagination > li > span {
  background: #111827 !important;
  border-color: #1f2937 !important;
  color: #cbd5e1 !important;
}

html.dark-theme .pagination > li.active > a,
html.dark-theme .pagination > li.active > span {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Form Controls & Inputs in Dark Mode */
html.dark-theme .form-control,
html.dark-theme input:not([type="checkbox"]):not([type="radio"]),
html.dark-theme select,
html.dark-theme textarea {
  background: #0f172a !important;
  border-color: #374151 !important;
  color: #f8fafc !important;
}

html.dark-theme .form-control:focus,
html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
  background: #0f172a !important;
}

html.dark-theme .input-group-addon {
  background: #1f2937 !important;
  border-color: #374151 !important;
  color: #94a3b8 !important;
}

html.dark-theme .select2-container--default .select2-selection--single {
  background-color: #0f172a !important;
  border-color: #374151 !important;
}

html.dark-theme
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #f8fafc !important;
}

html.dark-theme .select2-dropdown {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #f8fafc !important;
}

html.dark-theme
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #0284c7 !important;
}

/* User Dropdown Menu in Dark Mode */
html.dark-theme .navbar-custom-menu .dropdown-menu {
  background: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme .navbar-custom-menu .user-footer {
  background: #0d131f !important;
  border-top: 1px solid #1f2937 !important;
}

html.dark-theme .navbar-custom-menu .user-footer .btn-profile-action {
  background: transparent !important;
  border-color: #374151 !important;
  color: #cbd5e1 !important;
}

html.dark-theme .navbar-custom-menu .user-footer .btn-profile-action:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

/* Modals in Dark Mode */
html.dark-theme .modal-content {
  background: #111827 !important;
  border-color: #1f2937 !important;
  color: #f8fafc !important;
}

html.dark-theme .modal-header {
  border-bottom: 1px solid #1f2937 !important;
}

html.dark-theme .modal-footer {
  border-top: 1px solid #1f2937 !important;
  background: #0d131f !important;
}

/* SweetAlert2 Popup in Dark Mode */
html.dark-theme .swal2-popup,
html.dark-theme .swal2-modal {
  background: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

html.dark-theme .swal2-title {
  color: #f8fafc !important;
}

html.dark-theme .swal2-content,
html.dark-theme #swal2-content {
  color: #94a3b8 !important;
}

html.dark-theme .swal2-styled.swal2-cancel,
html.dark-theme .swal2-cancel {
  background: #1f2937 !important;
  color: #cbd5e1 !important;
  border-color: #374151 !important;
}

html.dark-theme .swal2-styled.swal2-cancel:hover,
html.dark-theme .swal2-cancel:hover {
  background: #374151 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   CARD & TYPOGRAPHY THEME SYSTEM (Dark = White Text, Light = Dark Text)
   ========================================================================== */

/* --- 1. HEADER IN DARK MODE --- */
html.dark-theme .main-header,
html.dark-theme .main-header .navbar,
html.dark-theme .skin-purple .main-header .navbar,
html.dark-theme .skin-blue .main-header .navbar {
  background: #080c14 !important;
  border-bottom: 1px solid #1e293b !important;
}

html.dark-theme .main-header .logo,
html.dark-theme .skin-purple .main-header .logo {
  background: #080c14 !important;
  border-right: 1px solid #1e293b !important;
  color: #ffffff !important;
}

html.dark-theme .main-header .sidebar-toggle {
  color: #cbd5e1 !important;
}

html.dark-theme .main-header .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html.dark-theme .live-clock {
  color: #38bdf8 !important;
}

html.dark-theme .navbar-custom-menu .navbar-nav > li.user-menu > a {
  color: #ffffff !important;
}

/* --- 2. SIDEBAR IN DARK MODE --- */
html.dark-theme .main-sidebar,
html.dark-theme .left-side,
html.dark-theme .skin-purple .main-sidebar,
html.dark-theme .skin-purple .left-side {
  background: #080c14 !important;
  border-right: 1px solid #1e293b !important;
}

html.dark-theme .sidebar-menu > li.header {
  background: transparent !important;
  color: #64748b !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

html.dark-theme .sidebar-menu > li > a {
  color: #cbd5e1 !important;
  background: transparent !important;
}

html.dark-theme .sidebar-menu > li:hover > a,
html.dark-theme .sidebar-menu > li.active > a {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(2, 132, 199, 0.25) 0%,
    rgba(3, 105, 161, 0.15) 100%
  ) !important;
}

html.dark-theme .sidebar-menu .treeview-menu {
  background: #05080e !important;
}

html.dark-theme .sidebar-menu .treeview-menu > li > a {
  color: #94a3b8 !important;
}

html.dark-theme .sidebar-menu .treeview-menu > li:hover > a,
html.dark-theme .sidebar-menu .treeview-menu > li.active > a {
  color: #38bdf8 !important;
}

html.dark-theme .sidebar-user-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid #1e293b !important;
}

html.dark-theme .sidebar-user-card .user-name {
  color: #ffffff !important;
}

html.dark-theme .sidebar-user-card .user-role {
  color: #38bdf8 !important;
}

html.dark-theme .mobile-sidebar-header {
  background: #080c14 !important;
  border-bottom: 1px solid #1e293b !important;
}

/* --- 3. FOOTER IN DARK MODE --- */
html.dark-theme .main-footer {
  background: #080c14 !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

html.dark-theme .main-footer a {
  color: #38bdf8 !important;
}

/* ==========================================================================
   4. BODY & CARDS IN DARK MODE (Dark Backgrounds, Crisp White Text)
   ========================================================================== */
html.dark-theme,
html.dark-theme body,
html.dark-theme .wrapper,
html.dark-theme .content-wrapper,
html.dark-theme .dashboard-simpel,
html.dark-theme .content {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

html.dark-theme .content-header > h1,
html.dark-theme .content-header > h1 small {
  color: #f8fafc !important;
}

/* Primary cards & panels in Dark Mode -> Deep Slate (#111827) */
html.dark-theme .glass-panel,
html.dark-theme .bg-white,
html.dark-theme .box,
html.dark-theme .box-solid,
html.dark-theme .card,
html.dark-theme .info-box,
html.dark-theme .panel,
html.dark-theme .well {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
  color: #ffffff !important;
}

/* All nested sub-cards, SOP steps, quick actions, and soft backgrounds in Dark Mode -> #0f172a */
html.dark-theme .bg-slate-50,
html.dark-theme [class*="bg-slate-50"],
html.dark-theme .bg-slate-100,
html.dark-theme [class*="bg-slate-100"],
html.dark-theme .bg-slate-200,
html.dark-theme [class*="bg-slate-200"],
html.dark-theme .bg-indigo-50,
html.dark-theme [class*="bg-indigo-50"],
html.dark-theme .bg-blue-50,
html.dark-theme [class*="bg-blue-50"],
html.dark-theme .bg-emerald-50,
html.dark-theme [class*="bg-emerald-50"],
html.dark-theme .bg-amber-50,
html.dark-theme [class*="bg-amber-50"],
html.dark-theme .bg-rose-50,
html.dark-theme [class*="bg-rose-50"],
html.dark-theme .bg-purple-50,
html.dark-theme [class*="bg-purple-50"] {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

/* Hover states for nested sub-cards in Dark Mode */
html.dark-theme a.bg-slate-50:hover,
html.dark-theme a[class*="bg-slate-50"]:hover,
html.dark-theme .hover-lift:hover {
  background-color: #1e293b !important;
}

/* Borders in Dark Mode */
html.dark-theme .border-slate-100,
html.dark-theme .border-slate-200,
html.dark-theme [class*="border-slate-100"],
html.dark-theme [class*="border-slate-200"],
html.dark-theme .border-indigo-100,
html.dark-theme [class*="border-indigo-100"],
html.dark-theme .border-emerald-100,
html.dark-theme [class*="border-emerald-100"],
html.dark-theme .border-blue-100,
html.dark-theme [class*="border-blue-100"],
html.dark-theme .border-rose-100,
html.dark-theme [class*="border-rose-100"],
html.dark-theme .border-amber-100,
html.dark-theme [class*="border-amber-100"] {
  border-color: #1f2937 !important;
}

html.dark-theme .box-header {
  background: transparent !important;
  border-bottom: 1px solid #1f2937 !important;
  color: #ffffff !important;
}

html.dark-theme .box-body {
  background: transparent !important;
  color: #f8fafc !important;
}

html.dark-theme .box-footer {
  background: #0d131f !important;
  border-top: 1px solid #1f2937 !important;
  color: #cbd5e1 !important;
}

/* Typography in Dark Mode -> PURE WHITE for all titles, headers, strong text */
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme .box-title,
html.dark-theme .glass-panel h1,
html.dark-theme .glass-panel h2,
html.dark-theme .glass-panel h3,
html.dark-theme .glass-panel h4,
html.dark-theme .glass-panel h5,
html.dark-theme .glass-panel h6,
html.dark-theme .text-slate-900,
html.dark-theme .text-slate-800,
html.dark-theme .text-slate-700,
html.dark-theme .text-slate-950,
html.dark-theme .text-indigo-800,
html.dark-theme .text-indigo-900,
html.dark-theme strong,
html.dark-theme b,
html.dark-theme label,
html.dark-theme th {
  color: #ffffff !important;
}

/* Secondary descriptions and body text in Dark Mode -> Light Slate */
html.dark-theme p,
html.dark-theme .glass-panel p,
html.dark-theme .box p,
html.dark-theme td,
html.dark-theme .text-slate-600,
html.dark-theme .text-slate-500,
html.dark-theme .text-slate-400,
html.dark-theme .text-muted,
html.dark-theme small {
  color: #cbd5e1 !important;
}

/* Quick Action links in Dark Mode */
html.dark-theme a.group .text-slate-800,
html.dark-theme a .text-slate-800 {
  color: #f8fafc !important;
}

/* Accents in Dark Mode */
html.dark-theme .live-clock {
  color: #38bdf8 !important;
}

html.dark-theme .sidebar-user-card .user-role {
  color: #38bdf8 !important;
}

html.dark-theme .main-footer a {
  color: #38bdf8 !important;
}

html.dark-theme a {
  color: #93c5fd !important;
}

html.dark-theme a:hover {
  color: #bfdbfe !important;
}

/* Badge and Buttons in Dark Mode */
html.dark-theme .badge,
html.dark-theme .label {
  color: #ffffff !important;
}

html.dark-theme .btn {
  color: #ffffff !important;
}

html.dark-theme .btn-default {
  color: #1e293b !important;
}

/* Nav Tabs in Dark Mode */
html.dark-theme .nav-tabs-custom {
  background: #111827 !important;
  border-color: #1f2937 !important;
}

html.dark-theme .nav-tabs-custom > .nav-tabs > li > a {
  color: #cbd5e1 !important;
}

html.dark-theme .nav-tabs-custom > .nav-tabs > li.active > a {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #1f2937 !important;
}

html.dark-theme .nav-tabs-custom > .tab-content {
  background: #111827 !important;
  color: #f8fafc !important;
}

/* Hero Welcome Card in Dark Mode -> Luminous Dark Slate Gradient with White Text */
html.dark-theme .hero-welcome-card {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e1b4b 50%,
    #172554 100%
  ) !important;
  border-color: #1f2937 !important;
  color: #ffffff !important;
}

html.dark-theme .hero-welcome-card .hero-title,
html.dark-theme .hero-welcome-card .hero-title span,
html.dark-theme .hero-welcome-card .hero-user-name {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.dark-theme .hero-welcome-card .hero-time-icon {
  color: #38bdf8 !important;
}

html.dark-theme .hero-welcome-card .hero-desc {
  color: #cbd5e1 !important;
}

html.dark-theme .hero-welcome-card .hero-matkul {
  color: #67e8f9 !important;
}

html.dark-theme .hero-welcome-card .hero-eval-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-theme .hero-welcome-card .hero-eval-sub {
  color: #94a3b8 !important;
}

html.dark-theme .hero-welcome-card .hero-eval-title {
  color: #ffffff !important;
}

html.dark-theme .hero-welcome-card .hero-eval-status {
  color: #38bdf8 !important;
}

/* Badge FIK UNIMED (Dark Mode) */
html.dark-theme .fik-unimed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
}

/* Navbar Greeting in Dark Mode */
html.dark-theme .navbar-greeting-text {
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #e2e8f0 !important;
}

html.dark-theme .navbar-greeting-name {
  font-weight: 700 !important;
  color: #ffffff !important;
}

html.dark-theme .navbar-caret {
  font-size: 12px !important;
  opacity: 0.7 !important;
  color: #e2e8f0 !important;
}

/* ============================================================================
   LIGHT MODE RULES (Clean White Backgrounds, High-Contrast Black/Dark Text)
   ============================================================================ */
html:not(.dark-theme) body,
html:not(.dark-theme) .wrapper,
html:not(.dark-theme) .content-wrapper,
html:not(.dark-theme) .dashboard-simpel,
html:not(.dark-theme) .content {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .glass-panel,
html:not(.dark-theme) .bg-white,
html:not(.dark-theme) .box,
html:not(.dark-theme) .box-solid,
html:not(.dark-theme) .card,
html:not(.dark-theme) .info-box,
html:not(.dark-theme) .panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Hero Welcome Card in Light Mode -> Clean White Card with High-Contrast Black/Dark Text */
html:not(.dark-theme) .hero-welcome-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-title,
html:not(.dark-theme) .hero-welcome-card .hero-title span {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-user-name {
  color: #0284c7 !important;
  background: none !important;
  -webkit-text-fill-color: #0284c7 !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-time-icon {
  color: #0284c7 !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-desc {
  color: #334155 !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-matkul {
  color: #0369a1 !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-eval-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-eval-sub {
  color: #64748b !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-eval-title {
  color: #0f172a !important;
}

html:not(.dark-theme) .hero-welcome-card .hero-eval-status {
  color: #0284c7 !important;
}

html:not(.dark-theme) .box-header {
  background: transparent !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .box-body {
  background: transparent !important;
  color: #1e293b !important;
}

html:not(.dark-theme) .box-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

/* All headings, titles, strong text in Light Mode -> PURE BLACK / DARK SLATE */
html:not(.dark-theme) h1,
html:not(.dark-theme) h2,
html:not(.dark-theme) h3,
html:not(.dark-theme) h4,
html:not(.dark-theme) h5,
html:not(.dark-theme) h6,
html:not(.dark-theme) .box-title,
html:not(.dark-theme) .glass-panel h1,
html:not(.dark-theme) .glass-panel h2,
html:not(.dark-theme) .glass-panel h3,
html:not(.dark-theme) .glass-panel h4,
html:not(.dark-theme) .glass-panel h5,
html:not(.dark-theme) .glass-panel h6,
html:not(.dark-theme) .text-slate-900,
html:not(.dark-theme) .text-slate-800,
html:not(.dark-theme) .text-slate-700,
html:not(.dark-theme) .text-slate-950,
html:not(.dark-theme) strong,
html:not(.dark-theme) b,
html:not(.dark-theme) label,
html:not(.dark-theme) th {
  color: #0f172a !important;
}

/* Paragraphs & descriptions in Light Mode -> Dark Slate (#334155) */
html:not(.dark-theme) p,
html:not(.dark-theme) .glass-panel p,
html:not(.dark-theme) .box p,
html:not(.dark-theme) td,
html:not(.dark-theme) .text-slate-600 {
  color: #334155 !important;
}

html:not(.dark-theme) .text-slate-500,
html:not(.dark-theme) .text-slate-400,
html:not(.dark-theme) .text-muted,
html:not(.dark-theme) small {
  color: #64748b !important;
}

/* Quick Action links in Light Mode */
html:not(.dark-theme) a.group .text-slate-800,
html:not(.dark-theme) a .text-slate-800 {
  color: #0f172a !important;
}

/* Sidebar in Light Mode -> Pure White (#ffffff) with dark text */
html:not(.dark-theme) .skin-purple .main-sidebar,
html:not(.dark-theme) .skin-blue .main-sidebar,
html:not(.dark-theme) .main-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark-theme) .sidebar-menu > li.header {
  color: #94a3b8 !important;
  background: transparent !important;
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
  font-weight: 700 !important;
}

html:not(.dark-theme) .sidebar-menu > li > a {
  color: #475569 !important;
  background: transparent !important;
}

html:not(.dark-theme) .sidebar-menu > li > a i {
  color: #94a3b8 !important;
}

html:not(.dark-theme) .sidebar-menu > li:hover > a {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .sidebar-menu > li:hover > a i {
  color: #0284c7 !important;
}

html:not(.dark-theme) .sidebar-menu > li.active > a {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

html:not(.dark-theme) .sidebar-menu > li.active > a i {
  color: #ffffff !important;
}

html:not(.dark-theme) .sidebar-menu .treeview-menu {
  background: #f8fafc !important;
  border-radius: 8px !important;
}

html:not(.dark-theme) .sidebar-menu .treeview-menu > li > a {
  color: #64748b !important;
}

html:not(.dark-theme) .sidebar-menu .treeview-menu > li > a:hover {
  color: #0284c7 !important;
  background: #e0f2fe !important;
}

html:not(.dark-theme) .sidebar-menu .treeview-menu > li.active > a {
  color: #0284c7 !important;
  font-weight: 600 !important;
}

html:not(.dark-theme) .sidebar-user-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html:not(.dark-theme) .sidebar-user-card .user-name {
  color: #0f172a !important;
}

html:not(.dark-theme) .sidebar-user-card .user-role {
  color: #0284c7 !important;
}

/* Header in Light Mode -> Pure White (#ffffff) */
html:not(.dark-theme) .skin-purple .main-header .navbar,
html:not(.dark-theme) .skin-blue .main-header .navbar,
html:not(.dark-theme) .main-header .navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ---- LOGO (Kiri Atas) di Light Mode: Putih Bersih, Teks Hitam ---- */
html:not(.dark-theme) .skin-purple .main-header .logo,
html:not(.dark-theme) .skin-blue .main-header .logo,
html:not(.dark-theme) .main-header .logo {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .main-header .logo:hover {
  background: #f8fafc !important;
}

html:not(.dark-theme) .main-header .logo .logo-lg,
html:not(.dark-theme) .main-header .logo .logo-lg b,
html:not(.dark-theme) .main-header .logo .logo-text,
html:not(.dark-theme) .main-header .logo .logo-mini {
  color: #0f172a !important;
}

html:not(.dark-theme) .main-header .logo .logo-lg i,
html:not(.dark-theme) .main-header .logo .logo-mini i {
  color: #0284c7 !important;
}

html:not(.dark-theme) .main-header .sidebar-toggle,
html:not(.dark-theme) .main-header .sidebar-toggle i {
  color: #475569 !important;
}

html:not(.dark-theme) .main-header .sidebar-toggle:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .navbar-nav > li > a {
  color: #475569 !important;
}

html:not(.dark-theme) .navbar-nav > li > a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .navbar-custom-menu .navbar-nav > li.user-menu > a {
  color: #1e293b !important;
}

html:not(.dark-theme) .live-clock {
  color: #0284c7 !important;
}

/* ---- Badge FIK UNIMED di Light Mode: Soft Light Blue dengan Teks Gelap Tegas ---- */
html:not(.dark-theme) .fik-unimed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(2, 132, 199, 0.08) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
}

html:not(.dark-theme) .fik-unimed-badge i {
  color: #0284c7 !important;
}

html:not(.dark-theme) .navbar-greeting-text {
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
}

html:not(.dark-theme) .navbar-greeting-name {
  font-weight: 700 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .navbar-caret {
  font-size: 12px !important;
  opacity: 0.7 !important;
  color: #475569 !important;
}

/* Badge & Buttons in Light Mode */
html:not(.dark-theme) .badge,
html:not(.dark-theme) .label {
  color: #ffffff !important;
}

html:not(.dark-theme) .btn-primary,
html:not(.dark-theme) .btn-info,
html:not(.dark-theme) .btn-success,
html:not(.dark-theme) .btn-warning,
html:not(.dark-theme) .btn-danger {
  color: #ffffff !important;
}

html:not(.dark-theme) .btn-default {
  color: #1e293b !important;
}

html:not(.dark-theme) a {
  color: #0284c7 !important;
}

/* ========================================================================
   FINAL DASHBOARD HEADER POLISH
   ======================================================================== */
:root {
  --header-light-bg: #ffffff;
  --header-light-surface: #f8fafc;
  --header-light-border: #dbe5ef;
  --header-light-text: #102033;
  --header-light-muted: #526477;
  --header-dark-bg: #0b1422;
  --header-dark-surface: #132237;
  --header-dark-border: #263a52;
  --header-dark-text: #f4f8fc;
  --header-dark-muted: #b6c6d8;
  --header-accent: #0284c7;
  --header-accent-soft: #e0f2fe;
}

.main-header {
  isolation: isolate;
}

.main-header .navbar,
.main-header .logo {
  min-height: 56px !important;
  height: 56px !important;
}

.main-header .navbar {
  display: flex !important;
  align-items: center !important;
  padding-right: 10px !important;
  border-bottom: 1px solid var(--header-light-border) !important;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.07) !important;
}

.main-header .logo {
  line-height: 56px !important;
  background: var(--header-light-bg) !important;
  border-right: 1px solid var(--header-light-border) !important;
  border-bottom: 1px solid var(--header-light-border) !important;
}

.main-header .logo .logo-lg {
  height: 56px !important;
  max-width: 100% !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: var(--header-light-surface) !important;
  border: 1px solid var(--header-light-border) !important;
  color: var(--header-light-text) !important;
  font-size: 13px !important;
  gap: 2px !important;
}

.main-header .logo .logo-lg .logo-text,
.main-header .logo .logo-lg .logo-text b {
  color: var(--header-light-text) !important;
}

.main-header .logo .logo-lg i,
.main-header .logo .logo-mini i {
  color: var(--header-accent) !important;
}

.main-header .sidebar-toggle {
  width: 48px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: var(--header-light-muted) !important;
}

.main-header .sidebar-toggle:hover,
.main-header .sidebar-toggle:focus-visible {
  background: var(--header-accent-soft) !important;
  color: var(--header-accent) !important;
}

.navbar-brand-badge {
  flex: 0 0 auto !important;
  height: 56px !important;
  padding: 0 12px !important;
}

.fik-unimed-badge {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: var(--header-accent-soft) !important;
  border: 1px solid #bae6fd !important;
  color: #075985 !important;
  font-size: 12px !important;
  letter-spacing: 0.15px !important;
  white-space: nowrap !important;
}

.navbar-custom-menu {
  margin-left: auto !important;
  height: 56px !important;
}

.navbar-custom-menu .navbar-nav {
  height: 56px !important;
  gap: 2px !important;
}

.navbar-custom-menu .navbar-nav > li > a {
  height: 56px !important;
  color: var(--header-light-text) !important;
}

.navbar-custom-menu .navbar-nav > li.user-menu > a {
  border-radius: 10px !important;
  margin: 6px 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
}

.navbar-custom-menu .navbar-nav > li.user-menu > a:hover,
.navbar-custom-menu .navbar-nav > li.user-menu.open > a,
.navbar-custom-menu .navbar-nav > li.user-menu > a:focus-visible {
  background: var(--header-light-surface) !important;
}

.navbar-custom-menu .user-image {
  width: 34px !important;
  height: 34px !important;
  border-color: #bae6fd !important;
}

.navbar-greeting-text {
  color: var(--header-light-text) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.navbar-greeting-name {
  color: var(--header-light-text) !important;
}

.navbar-caret {
  color: var(--header-light-muted) !important;
}

.theme-toggle-btn:focus-visible,
.main-header a:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.38) !important;
  outline-offset: -2px !important;
}

html.dark-theme .main-header .navbar,
html.dark-theme .main-header .logo {
  background: var(--header-dark-bg) !important;
  border-color: var(--header-dark-border) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.24) !important;
}

html.dark-theme .main-header .logo .logo-lg {
  background: var(--header-dark-surface) !important;
  border-color: var(--header-dark-border) !important;
  color: var(--header-dark-text) !important;
}

html.dark-theme .main-header .logo .logo-lg .logo-text,
html.dark-theme .main-header .logo .logo-lg .logo-text b {
  color: var(--header-dark-text) !important;
}

html.dark-theme .main-header .sidebar-toggle,
html.dark-theme .navbar-custom-menu .navbar-nav > li > a,
html.dark-theme .navbar-greeting-text,
html.dark-theme .navbar-greeting-name {
  color: var(--header-dark-text) !important;
}

html.dark-theme .main-header .sidebar-toggle:hover,
html.dark-theme .main-header .sidebar-toggle:focus-visible,
html.dark-theme .navbar-custom-menu .navbar-nav > li.user-menu > a:hover,
html.dark-theme .navbar-custom-menu .navbar-nav > li.user-menu.open > a,
html.dark-theme
  .navbar-custom-menu
  .navbar-nav
  > li.user-menu
  > a:focus-visible {
  background: var(--header-dark-surface) !important;
  color: #ffffff !important;
}

html.dark-theme .fik-unimed-badge {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(125, 211, 252, 0.42) !important;
  color: #bae6fd !important;
}

html.dark-theme .navbar-caret {
  color: var(--header-dark-muted) !important;
}

html.dark-theme .navbar-custom-menu .user-image {
  border-color: rgba(125, 211, 252, 0.65) !important;
}

@media (max-width: 991px) and (min-width: 768px) {
  .navbar-brand-badge {
    padding-left: 4px !important;
  }

  .navbar-greeting-text {
    max-width: 145px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 767px) {
  .main-header .navbar {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 8px !important;
  }

  .main-header .sidebar-toggle,
  .navbar-custom-menu,
  .navbar-custom-menu .navbar-nav {
    height: 58px !important;
  }

  .main-header .sidebar-toggle {
    width: 42px !important;
  }

  .mobile-header-brand {
    min-width: 0 !important;
    max-width: calc(100% - 106px) !important;
    height: 38px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    background: var(--header-light-surface) !important;
    border: 1px solid var(--header-light-border) !important;
    color: var(--header-light-text) !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-header-brand .brand-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .navbar-custom-menu .navbar-nav > li.user-menu > a {
    padding: 0 4px !important;
    margin: 7px 0 !important;
  }

  .navbar-custom-menu .user-image {
    width: 32px !important;
    height: 32px !important;
  }

  html.dark-theme .mobile-header-brand {
    background: var(--header-dark-surface) !important;
    border-color: var(--header-dark-border) !important;
    color: var(--header-dark-text) !important;
  }

  html.dark-theme .mobile-header-brand .brand-name {
    color: var(--header-dark-text) !important;
  }
}

html:not(.dark-theme) a:hover {
  color: #0369a1 !important;
}

/* Footer in Light Mode -> Pure White (#ffffff) */
html:not(.dark-theme) .main-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

html:not(.dark-theme) .main-footer a {
  color: #0284c7 !important;
}

/* ==========================================================================
   MODERN ACADEMIC MODULES DESIGN SYSTEM (Jurusan, Kelas, Matkul, Dosen, etc.)
   ========================================================================== */

.module-container {
  width: 100%;
  margin-bottom: 30px;
}

/* 1. Hero Header Card */
.module-hero-card {
  padding: 22px 26px;
  border-radius: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark-theme) .module-hero-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html.dark-theme .module-hero-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.module-hero-content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 260px;
}

.module-hero-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

.bg-gradient-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.bg-gradient-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.bg-gradient-indigo {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
}

.bg-gradient-rose {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
}

.bg-gradient-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

.module-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

html:not(.dark-theme) .module-hero-badge {
  background: rgba(2, 132, 199, 0.08) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.18) !important;
}

html.dark-theme .module-hero-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.footer-mode-badge {
  color: #0f172a !important;
}

.footer-mode-version {
  color: #1f2937 !important;
}

html.dark-theme .footer-mode-badge {
  background: linear-gradient(
    135deg,
    rgba(14, 116, 144, 0.9) 0%,
    rgba(8, 145, 178, 0.9) 100%
  ) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, 0.45) !important;
}

html.dark-theme .footer-mode-version {
  color: #e2e8f0 !important;
}

.module-hero-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

html:not(.dark-theme) .module-hero-title {
  color: #0f172a !important;
}

html.dark-theme .module-hero-title {
  color: #ffffff !important;
}

.module-hero-subtitle {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}

/* Breadcrumb inside module hero for clearer page flow */
.module-breadcrumb {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}
.module-breadcrumb a {
  color: #0284c7;
  text-decoration: none;
  font-weight: 600;
}
.module-breadcrumb a:hover {
  text-decoration: underline;
}

html:not(.dark-theme) .module-hero-subtitle {
  color: #64748b !important;
}

html.dark-theme .module-hero-subtitle {
  color: #94a3b8 !important;
}

.module-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

html:not(.dark-theme) .btn-hero-primary {
  background: linear-gradient(135deg, #0b7fc4 0%, #075f9b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgba(8, 89, 142, 0.28) !important;
}

html:not(.dark-theme) .btn-hero-primary:hover {
  background: linear-gradient(135deg, #086fb0 0%, #064d7f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(8, 89, 142, 0.32) !important;
}

.btn-hero-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
  color: #ffffff !important;
}

.btn-hero-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

html:not(.dark-theme) .btn-hero-emerald {
  background: linear-gradient(135deg, #10b981 0%, #0e8d63 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgba(12, 104, 71, 0.24) !important;
}

html:not(.dark-theme) .btn-hero-emerald:hover {
  background: linear-gradient(135deg, #0ea76d 0%, #0c734f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(12, 104, 71, 0.3) !important;
}

.btn-hero-emerald:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  color: #ffffff !important;
}

.btn-hero-ghost {
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

html:not(.dark-theme) .btn-hero-ghost {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark-theme) .btn-hero-ghost:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html.dark-theme .btn-hero-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.hero-stat-badge {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

html:not(.dark-theme) .hero-stat-badge {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

html.dark-theme .hero-stat-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. Main Module Card */
.module-card {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

html:not(.dark-theme) .module-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html.dark-theme .module-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.module-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid;
}

html:not(.dark-theme) .module-card-header {
  border-bottom-color: #f1f5f9 !important;
  background: #ffffff !important;
}

html.dark-theme .module-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  background: #0f172a !important;
}

.card-title-modern {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px 0;
  display: flex;
  align-items: center;
}

html:not(.dark-theme) .card-title-modern {
  color: #0f172a !important;
}

html.dark-theme .card-title-modern {
  color: #ffffff !important;
}

.card-subtitle-modern {
  font-size: 12.5px;
}

html:not(.dark-theme) .card-subtitle-modern {
  color: #64748b !important;
}

html.dark-theme .card-subtitle-modern {
  color: #94a3b8 !important;
}

.module-card-body {
  padding: 24px;
}

/* 3. Card Toolbar */
.module-card-toolbar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid;
}

html:not(.dark-theme) .module-card-toolbar {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

html.dark-theme .module-card-toolbar {
  background: #080c14 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bulk-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-toolbar-ghost {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .btn-toolbar-ghost {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark-theme) .btn-toolbar-ghost:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html.dark-theme .btn-toolbar-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .btn-toolbar-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.btn-toolbar-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.btn-toolbar-warning:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
  color: #ffffff !important;
}

.btn-toolbar-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.btn-toolbar-danger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
  color: #ffffff !important;
}

/* 4. Modern DataTable Styling */
.module-table-wrapper {
  padding: 16px 20px 24px;
}

.modern-data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 12px 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

html:not(.dark-theme) .modern-data-table {
  border: 1px solid #e2e8f0 !important;
}

html.dark-theme .modern-data-table {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modern-data-table thead th {
  padding: 14px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  border-bottom: 2px solid !important;
  border-top: none !important;
}

html:not(.dark-theme) .modern-data-table thead th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-bottom-color: #cbd5e1 !important;
}

html.dark-theme .modern-data-table thead th {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-bottom-color: #334155 !important;
}

.modern-data-table tbody td {
  padding: 13px 16px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  border-top: 1px solid !important;
  border-bottom: none !important;
  transition: background-color 0.15s ease !important;
}

html:not(.dark-theme) .modern-data-table tbody td {
  color: #1e293b !important;
  border-top-color: #f1f5f9 !important;
  background: #ffffff !important;
}

html:not(.dark-theme)
  .modern-data-table.table-striped
  tbody
  tr:nth-of-type(odd)
  td {
  background: #f8fafc !important;
}

html:not(.dark-theme) .modern-data-table tbody tr:hover td {
  background: #f0f9ff !important;
}

html.dark-theme .modern-data-table tbody td {
  color: #f1f5f9 !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  background: #0f172a !important;
}

html.dark-theme .modern-data-table.table-striped tbody tr:nth-of-type(odd) td {
  background: #0b0f19 !important;
}

html.dark-theme .modern-data-table tbody tr:hover td {
  background: #1e293b !important;
}

/* DataTables Search, Length, & Info Theming */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  margin: 8px 0 !important;
  font-size: 13px !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_length label,
html:not(.dark-theme) .dataTables_wrapper .dataTables_filter label,
html:not(.dark-theme) .dataTables_wrapper .dataTables_info {
  color: #475569 !important;
  font-weight: 500 !important;
}

html.dark-theme .dataTables_wrapper .dataTables_length label,
html.dark-theme .dataTables_wrapper .dataTables_filter label,
html.dark-theme .dataTables_wrapper .dataTables_info {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_filter input,
html:not(.dark-theme) .dataTables_wrapper .dataTables_length select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_filter input:focus,
html:not(.dark-theme) .dataTables_wrapper .dataTables_length select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

html.dark-theme .dataTables_wrapper .dataTables_filter input,
html.dark-theme .dataTables_wrapper .dataTables_length select {
  background: #080c14 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .dataTables_wrapper .dataTables_filter input:focus,
html.dark-theme .dataTables_wrapper .dataTables_length select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

/* DataTables Export Buttons (Copy, Excel, PDF, Print) */
.dt-buttons .btn {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  margin: 0 3px !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .dt-buttons .btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html:not(.dark-theme) .dt-buttons .btn:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

html.dark-theme .dt-buttons .btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

html.dark-theme .dt-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #38bdf8 !important;
}

/* DataTables Pagination */
.dataTables_wrapper .pagination > li > a {
  border-radius: 8px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}

html:not(.dark-theme) .dataTables_wrapper .pagination > li > a {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html:not(.dark-theme) .dataTables_wrapper .pagination > li.active > a {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

html.dark-theme .dataTables_wrapper .pagination > li > a {
  background: #080c14 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark-theme .dataTables_wrapper .pagination > li.active > a {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* 5. Custom Checkbox */
.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  cursor: pointer;
}

.custom-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 5px;
  transition: all 0.2s ease;
}

html:not(.dark-theme) .custom-checkbox .checkmark {
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
}

html.dark-theme .custom-checkbox .checkmark {
  background-color: #080c14;
  border: 1.5px solid #475569;
}

.custom-checkbox input:checked ~ .checkmark {
  background: #0284c7;
  border-color: #0284c7;
}

.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* 6. Batch Form Tables (Add & Edit) */
.form-batch-table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

html:not(.dark-theme) .form-batch-table-wrapper {
  border: 1px solid #e2e8f0;
}

html.dark-theme .form-batch-table-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.modern-batch-table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.modern-batch-table thead th {
  padding: 14px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid !important;
}

html:not(.dark-theme) .modern-batch-table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom-color: #e2e8f0 !important;
}

html.dark-theme .modern-batch-table thead th {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-bottom-color: #334155 !important;
}

.modern-batch-table tbody td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid !important;
}

html:not(.dark-theme) .modern-batch-table tbody td {
  border-top-color: #f1f5f9 !important;
  background: #ffffff !important;
}

html.dark-theme .modern-batch-table tbody td {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  background: #0f172a !important;
}

.row-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

html:not(.dark-theme) .row-num-badge {
  background: #f1f5f9;
  color: #0284c7;
}

html.dark-theme .row-num-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.input-with-icon .form-control-modern {
  padding-left: 38px !important;
}

.form-control-modern {
  height: 44px !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .form-control-modern {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark-theme) .form-control-modern:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

html.dark-theme .form-control-modern {
  background: #080c14 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .form-control-modern:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.form-submit-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 16px 24px 20px;
  box-sizing: border-box;
}

.btn-form-submit {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-form-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
  color: #ffffff !important;
}

.btn-form-submit-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-form-submit-warning:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
}

.btn-form-submit-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-form-submit-emerald:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  color: #ffffff !important;
}

/* Small action buttons used in tables to match global UI (Data Dosen, Data Mahasiswa, Remedial, etc.) */
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

html:not(.dark-theme) .btn-action-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22) !important;
}

html:not(.dark-theme) .btn-action-success {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.22) !important;
}

html:not(.dark-theme) .btn-action-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.22) !important;
}

html:not(.dark-theme) .btn-action-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.22) !important;
}

html:not(.dark-theme) .btn-action-info {
  background: linear-gradient(135deg, #0284c7 0%, #026094 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.22) !important;
}

html:not(.dark-theme) .btn-action-default {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Dark Theme btn-action styles */
html.dark-theme .btn-action-primary {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.15) !important;
}

html.dark-theme .btn-action-success {
  background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
}

html.dark-theme .btn-action-warning {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important;
}

html.dark-theme .btn-action-danger {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
}

html.dark-theme .btn-action-info {
  background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.15) !important;
}

html.dark-theme .btn-action-default {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}

.btn-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
}

/* Smaller icon sizing inside compact action buttons */
.btn-action i,
.btn-action .fa,
.btn-action .fas {
  font-size: 11px !important;
}

/* Extra-compact variant for very small UI (icon + tiny label) */
.btn-action-xs {
  gap: 2px !important;
  font-size: 10px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
}

.btn-action-xs i,
.btn-action-xs .fa,
.btn-action-xs .fas {
  font-size: 10px !important;
}

/* Compact edit actions used in relation tables */
.btn-relasi-edit {
  gap: 2px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease !important;
}

.btn-relasi-edit:hover {
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important;
}

html:not(.dark-theme) .btn-relasi-edit,
html:not(.dark-theme) .btn-relasi-edit:hover,
html:not(.dark-theme) .btn-relasi-edit:focus {
  color: #111827 !important;
}

.btn-relasi-edit i,
.btn-relasi-edit .fa,
.btn-relasi-edit .fas {
  font-size: 9px !important;
}

/* Bank Soal: align legacy editor forms with the dashboard module language */
.soal-module .soal-toolbar {
  gap: 14px;
}

.soal-toolbar .toolbar-left,
.soal-toolbar .toolbar-right {
  gap: 10px;
}

.soal-toolbar .select2-container,
.soal-toolbar #matkul_filter {
  min-width: 220px;
  max-width: 320px;
}

.soal-scope-badge,
.soal-media-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

html:not(.dark-theme) .soal-scope-badge {
  color: #3730a3;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

html:not(.dark-theme) .soal-media-note {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

html.dark-theme .soal-scope-badge {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.35);
}

html.dark-theme .soal-media-note {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Keep Jadwal Ujian and Bank Soal text readable in both themes. */
html:not(.dark-theme) .soal-module,
html:not(.dark-theme) .soal-module .module-card,
html:not(.dark-theme) .soal-module .module-card-toolbar,
html:not(.dark-theme) .soal-module .modern-data-table {
  color: #000000 !important;
}

html:not(.dark-theme) .soal-module .modern-data-table th,
html:not(.dark-theme) .soal-module .modern-data-table td,
html:not(.dark-theme) .soal-module .modern-data-table td a,
html:not(.dark-theme) .soal-module .modern-data-table td span,
html:not(.dark-theme) .soal-module .soal-media-note {
  color: #000000 !important;
}

html.dark-theme .soal-module,
html.dark-theme .soal-module .module-card,
html.dark-theme .soal-module .module-card-toolbar,
html.dark-theme .soal-module .modern-data-table {
  color: #ffffff !important;
}

html.dark-theme .soal-module .modern-data-table th,
html.dark-theme .soal-module .modern-data-table td,
html.dark-theme .soal-module .modern-data-table td a,
html.dark-theme .soal-module .modern-data-table td span,
html.dark-theme .soal-module .soal-media-note {
  color: #ffffff !important;
}

body.dark-theme .soal-module,
body.dark-theme .soal-module .module-card,
body.dark-theme .soal-module .module-card-toolbar,
body.dark-theme .soal-module .modern-data-table,
body.dark-theme .soal-module .modern-data-table th,
body.dark-theme .soal-module .modern-data-table td,
body.dark-theme .soal-module .modern-data-table td a,
body.dark-theme .soal-module .modern-data-table td span,
body.dark-theme .soal-module .soal-media-note {
  color: #ffffff !important;
}

html:not(.dark-theme) .ujian-form-module .bank-soal-panel,
html:not(.dark-theme) .ujian-form-module .bank-soal-panel h4,
html:not(.dark-theme) .ujian-form-module .bank-soal-panel p,
html:not(.dark-theme) .ujian-form-module .bank-soal-help,
html:not(.dark-theme) .ujian-form-module .bank-soal-item,
html:not(.dark-theme) .ujian-form-module .bank-soal-item span,
html:not(.dark-theme) .ujian-form-module .bank-soal-item strong,
html:not(.dark-theme) .ujian-form-module .form-group label,
html:not(.dark-theme) .ujian-form-module .form-control,
html:not(.dark-theme) .ujian-form-module .alert p {
  color: #000000 !important;
}

html.dark-theme .ujian-form-module .bank-soal-panel,
html.dark-theme .ujian-form-module .bank-soal-panel h4,
html.dark-theme .ujian-form-module .bank-soal-panel p,
html.dark-theme .ujian-form-module .bank-soal-help,
html.dark-theme .ujian-form-module .bank-soal-item,
html.dark-theme .ujian-form-module .bank-soal-item span,
html.dark-theme .ujian-form-module .bank-soal-item strong,
html.dark-theme .ujian-form-module .form-group label,
html.dark-theme .ujian-form-module .form-control,
html.dark-theme .ujian-form-module .alert p {
  color: #ffffff !important;
}

body.dark-theme .ujian-form-module .bank-soal-panel,
body.dark-theme .ujian-form-module .bank-soal-panel h4,
body.dark-theme .ujian-form-module .bank-soal-panel p,
body.dark-theme .ujian-form-module .bank-soal-help,
body.dark-theme .ujian-form-module .bank-soal-item,
body.dark-theme .ujian-form-module .bank-soal-item span,
body.dark-theme .ujian-form-module .bank-soal-item strong,
body.dark-theme .ujian-form-module .form-group label,
body.dark-theme .ujian-form-module .form-control,
body.dark-theme .ujian-form-module .alert p {
  color: #ffffff !important;
}

.soal-form-page > .row > [class*="col-"] {
  width: 100%;
  margin-left: 0;
}

.soal-form-page .box {
  margin: 0 auto 24px;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.soal-form-page .box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%) !important;
}

.soal-form-page .box-title,
.soal-form-page .box-title i {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.soal-form-page .box-tools .btn-box-tool {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
}

.soal-form-page .box-body {
  padding: 24px !important;
  border-radius: 0 0 12px 12px;
  background: var(--module-card-bg, #ffffff) !important;
}

.soal-form-page label {
  color: #334155;
  font-weight: 700 !important;
  font-size: 13px;
}

html.dark-theme .soal-form-page label {
  color: #cbd5e1;
}

.soal-form-page .form-control,
.soal-form-page .select2-container--default .select2-selection--single {
  min-height: 42px;
  border-color: #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html.dark-theme .soal-form-page .form-control,
html.dark-theme
  .soal-form-page
  .select2-container--default
  .select2-selection--single {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

.soal-form-page input[type="file"] {
  height: auto;
  padding: 9px 12px !important;
}

.soal-form-page .note-editor {
  overflow: hidden;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

.soal-form-page .media-preview {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.soal-form-page .form-group.text-right,
.soal-form-page .form-group:has(> .col-sm-offset-3) {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  margin-top: 20px !important;
  padding-top: 18px !important;
}

.soal-form-page .form-group.text-right .btn,
.soal-form-page .form-group:has(> .col-sm-offset-3) .btn {
  margin: 0 !important;
}

.soal-form-page .soal-actions {
  clear: both;
  position: relative;
  z-index: 1;
  margin-top: 28px !important;
}

.soal-form-page .select2-container--open {
  position: relative;
  z-index: 10001;
}

.soal-detail-content {
  max-width: 1180px;
  margin: 0 auto;
}

.soal-detail-page .soal-detail-content .box {
  margin: 0;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.soal-detail-page .soal-detail-content .box-header {
  display: none !important;
}

.soal-detail-page .soal-detail-content .box-body {
  padding: 0 !important;
  background: transparent !important;
}

.soal-detail-page .question-container,
.soal-detail-page .answers-container,
.soal-detail-page .meta-info {
  max-width: none;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06) !important;
}

.soal-detail-page .media-container {
  max-width: 100% !important;
  overflow: hidden;
}

.soal-detail-page .media-container img,
.soal-detail-page .media-container video,
.soal-detail-page .media-container audio {
  max-width: 100%;
  height: auto;
}

html.dark-theme .soal-detail-page .question-container,
html.dark-theme .soal-detail-page .answers-container,
html.dark-theme .soal-detail-page .meta-info {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #e2e8f0;
}

html.dark-theme .soal-detail-page .answer-option {
  background: #0f172a !important;
  border-color: #818cf8 !important;
}

html.dark-theme .soal-detail-page .meta-label {
  color: #c7d2fe !important;
}

html.dark-theme .soal-detail-page .meta-value {
  color: #e2e8f0 !important;
}

@media (max-width: 767px) {
  .soal-toolbar .toolbar-left,
  .soal-toolbar .toolbar-right,
  .soal-toolbar .select2-container,
  .soal-toolbar #matkul_filter,
  .soal-media-note {
    width: 100%;
    max-width: none;
  }

  .soal-form-page .box-header,
  .soal-form-page .box-body {
    padding: 16px !important;
  }

  .soal-form-page .form-group.text-right,
  .soal-form-page .form-group:has(> .col-sm-offset-3) {
    flex-direction: column;
    align-items: stretch;
  }

  .soal-form-page .form-group.text-right .btn,
  .soal-form-page .form-group:has(> .col-sm-offset-3) .btn {
    width: 100%;
  }

  .soal-detail-page .module-hero-actions {
    width: 100%;
  }

  .soal-detail-page .module-hero-actions .btn {
    flex: 1;
  }
}

.btn-form-cancel {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

html:not(.dark-theme) .btn-form-cancel {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark-theme) .btn-form-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

html.dark-theme .btn-form-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .btn-form-cancel:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* Reset button — Premium glassmorphism style */
.btn-form-reset {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
}

html:not(.dark-theme) .btn-form-reset {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4338ca !important;
  border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08) !important;
}

html:not(.dark-theme) .btn-form-reset:hover {
  background: rgba(99, 102, 241, 0.14) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #3730a3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18) !important;
}

html.dark-theme .btn-form-reset {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #a5b4fc !important;
  border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12) !important;
}

html.dark-theme .btn-form-reset:hover {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: rgba(165, 180, 252, 0.5) !important;
  color: #e0e7ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25) !important;
}

/* 7. Modern Modal */
.modern-modal .modal-content {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

html:not(.dark-theme) .modern-modal .modal-content {
  background: #ffffff !important;
}

html.dark-theme .modern-modal .modal-content {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modern-modal .modal-header {
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-bottom: 1px solid !important;
  position: relative !important;
}

html:not(.dark-theme) .modern-modal .modal-header {
  background: #ffffff !important;
  border-bottom-color: #f1f5f9 !important;
}

html.dark-theme .modern-modal .modal-header {
  background: #080c14 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffffff;
  flex-shrink: 0;
}

.modal-header-text {
  flex: 1;
}

.modern-modal .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
}

html:not(.dark-theme) .modern-modal .modal-title {
  color: #0f172a !important;
}

html.dark-theme .modern-modal .modal-title {
  color: #ffffff !important;
}

.modal-subtitle {
  font-size: 12px;
  margin: 0;
}

html:not(.dark-theme) .modal-subtitle {
  color: #64748b;
}

html.dark-theme .modal-subtitle {
  color: #94a3b8;
}

.modern-close {
  position: absolute !important;
  right: 20px !important;
  top: 20px !important;
  font-size: 22px !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}

html:not(.dark-theme) .modern-close {
  color: #0f172a !important;
}

html.dark-theme .modern-close {
  color: #ffffff !important;
}

.modern-close:hover {
  opacity: 1 !important;
}

.modern-modal .modal-body {
  padding: 24px !important;
}

.form-label-modern {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

html:not(.dark-theme) .form-label-modern {
  color: #334155;
}

html.dark-theme .form-label-modern {
  color: #e2e8f0;
}

.input-stepper-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

html:not(.dark-theme) .stepper-btn {
  background: #f1f5f9;
  color: #0284c7;
  border: 1px solid #cbd5e1;
}

html:not(.dark-theme) .stepper-btn:hover {
  background: #e2e8f0;
  color: #0369a1;
}

html.dark-theme .stepper-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #38bdf8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html.dark-theme .stepper-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.form-control-stepper {
  flex: 1;
  height: 44px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid;
  outline: none;
  transition: all 0.2s ease;
}

html:not(.dark-theme) .form-control-stepper {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

html.dark-theme .form-control-stepper {
  background: #080c14;
  color: #ffffff;
  border-color: #334155;
}

.stepper-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.chip-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}

html:not(.dark-theme) .chip-btn {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

html:not(.dark-theme) .chip-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

html.dark-theme .chip-btn {
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .chip-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.form-hint {
  font-size: 12px;
  display: block;
}

html:not(.dark-theme) .form-hint {
  color: #64748b;
}

html.dark-theme .form-hint {
  color: #94a3b8;
}

.modern-modal .modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

html:not(.dark-theme) .modern-modal .modal-footer {
  background: #f8fafc !important;
  border-top-color: #f1f5f9 !important;
}

html.dark-theme .modern-modal .modal-footer {
  background: #080c14 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-modal-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.btn-modal-ghost {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

html:not(.dark-theme) .btn-modal-ghost {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.dark-theme .btn-modal-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 8. Import Info Alert & Dropzone */
.module-info-alert {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

html:not(.dark-theme) .module-info-alert {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

html.dark-theme .module-info-alert {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

.info-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.file-upload-dropzone {
  border: 2px dashed;
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}

html:not(.dark-theme) .file-upload-dropzone {
  border-color: #cbd5e1;
  background: #f8fafc;
}

html:not(.dark-theme) .file-upload-dropzone:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}

html.dark-theme .file-upload-dropzone {
  border-color: #334155;
  background: #080c14;
}

html.dark-theme .file-upload-dropzone:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.05);
}

.dropzone-icon {
  font-size: 44px;
  margin-bottom: 12px;
  display: block;
}

html:not(.dark-theme) .dropzone-icon {
  color: #10b981;
}

html.dark-theme .dropzone-icon {
  color: #34d399;
}

.dropzone-label {
  cursor: pointer;
  display: block;
  margin: 0;
}

.dropzone-browse-text {
  font-size: 15px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

html:not(.dark-theme) .dropzone-browse-text {
  color: #0f172a;
}

html.dark-theme .dropzone-browse-text {
  color: #ffffff;
}

.dropzone-hint-text {
  font-size: 12.5px;
  display: block;
}

html:not(.dark-theme) .dropzone-hint-text {
  color: #64748b;
}

html.dark-theme .dropzone-hint-text {
  color: #94a3b8;
}

.dropzone-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-chosen-badge {
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

html:not(.dark-theme) .file-chosen-badge {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

html.dark-theme .file-chosen-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Responsive adjustments for mobile modules */
@media (max-width: 767px) {
  .module-hero-card {
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
  }

  .module-hero-content {
    width: 100%;
  }

  .module-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .module-hero-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .module-card-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }

  .bulk-action-group {
    width: 100%;
  }

  .bulk-action-group .btn {
    flex: 1;
    justify-content: center;
  }

  .module-table-wrapper {
    padding: 12px 10px;
  }

  .form-submit-wrapper {
    flex-direction: column-reverse;
    gap: 10px;
    padding: 14px 16px 18px;
  }

  .form-submit-wrapper .btn {
    width: 100%;
    justify-content: center;
    display: flex;
  }
}

/* ==========================================================================
   SELECT2 THEME-AWARE STYLES (for Kelas, Dosen, Mahasiswa, etc.)
   ========================================================================== */

/* Select2 single selection container */
.select2-container--default .select2-selection--single {
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .select2-container--default .select2-selection--single {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark-theme)
  .select2-container--default.select2-container--focus
  .select2-selection--single {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

html.dark-theme .select2-container--default .select2-selection--single {
  background: #080c14 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

html.dark-theme
  .select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 44px !important;
  padding-left: 38px !important;
  padding-right: 30px !important;
  font-size: 14px !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #0f172a !important;
}

html.dark-theme
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #ffffff !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 44px !important;
  top: 0 !important;
  right: 10px !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #64748b transparent transparent transparent !important;
}

html.dark-theme
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #94a3b8 transparent transparent transparent !important;
}

/* Select2 multiple selection container (match single selection styles) */
.select2-container--default .select2-selection--multiple {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

html:not(.dark-theme) .select2-container--default .select2-selection--multiple {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.dark-theme .select2-container--default .select2-selection--multiple {
  background: #080c14 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-left: 6px !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: #0369a1 !important;
  color: #ffffff !important;
}

html.dark-theme
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: #0ea5e9 !important;
  color: #06202a !important;
}

/* Ensure the input inside multiple select is visible in dark mode */
.select2-container--default
  .select2-selection--multiple
  .select2-search__field {
  background: transparent !important;
  color: inherit !important;
}

/* Select2 Dropdown Panel */
.select2-dropdown {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid !important;
  z-index: 9999 !important;
}

html:not(.dark-theme) .select2-dropdown {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.dark-theme .select2-dropdown {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* Select2 Search Input in Dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  outline: none !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html.dark-theme
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  background: #080c14 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

/* Select2 Options */
.select2-container--default .select2-results__option {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  transition: all 0.15s ease !important;
}

html:not(.dark-theme) .select2-container--default .select2-results__option {
  color: #1e293b !important;
  background: #ffffff !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: #eff6ff !important;
  color: #0284c7 !important;
}

html:not(.dark-theme)
  .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-weight: 600 !important;
}

html.dark-theme .select2-container--default .select2-results__option {
  color: #e2e8f0 !important;
  background: #0f172a !important;
}

html.dark-theme
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: #1e293b !important;
  color: #38bdf8 !important;
}

html.dark-theme
  .select2-container--default
  .select2-results__option[aria-selected="true"] {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

/* Select2 placeholder text */
html:not(.dark-theme)
  .select2-container--default
  .select2-selection__placeholder {
  color: #94a3b8 !important;
}

html.dark-theme .select2-container--default .select2-selection__placeholder {
  color: #475569 !important;
}

/* ========================================================================
   SYSTEM DESIGN OVERRIDES
   ======================================================================== */
:root {
  --color-primary: #0b7fc4;
  --color-background: #f4f7fb;
  --color-surface: #ffffff;
  --color-text: #102033;
  --color-muted: #526477;
  --color-border: #dbe5ef;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #0369a1;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.24);
}

html.dark-theme {
  --color-background: #0b1220;
  --color-surface: #111c2d;
  --color-text: #f1f5f9;
  --color-muted: #a7b7c9;
  --color-border: #263a52;
  --color-primary: #38bdf8;
  --color-info: #7dd3fc;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html,
body {
  background: var(--color-background);
  color: var(--color-text);
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0 !important;
  box-shadow: var(--focus-ring) !important;
}

img,
video,
iframe,
canvas {
  max-width: 100%;
}

.table-responsive {
  border: 0;
  margin-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  min-width: 620px;
}

.form-control,
.select2-container .select2-selection--single {
  min-height: 38px;
  border-radius: var(--radius-sm);
}

.btn {
  min-height: 38px;
  border-radius: var(--radius-sm);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.modal-dialog {
  width: auto;
  max-width: 600px;
  margin: 24px auto;
}

@media (max-width: 767px) {
  .content-wrapper .content,
  .content-wrapper .content-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .content-header > h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .content-header .breadcrumb {
    position: static !important;
    float: none !important;
    margin-top: 8px !important;
    white-space: normal !important;
    line-height: 1.6 !important;
  }

  .box-header,
  .box-body,
  .box-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .form-group {
    margin-bottom: 16px;
  }
  .btn {
    min-height: 42px;
  }
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn-group > .btn {
    float: none;
    margin-left: 0;
  }
  .modal-dialog {
    margin: 12px;
  }
  .modal-content {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .theme-toggle-track {
    width: 46px;
  }
  .theme-toggle-thumb {
    width: 20px;
    height: 20px;
  }
  .theme-toggle-btn.is-dark .theme-toggle-thumb {
    transform: translateX(20px) !important;
  }

  .exam-question img,
  #ujian img,
  .soal-content img {
    height: auto !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  .modal-dialog {
    margin-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Detail soal: override inline editor colors in dark mode. */
html.dark-theme .soal-detail-page .question-content,
html.dark-theme .soal-detail-page .answer-content,
html.dark-theme .soal-detail-page .question-content p,
html.dark-theme .soal-detail-page .answer-content p,
html.dark-theme .soal-detail-page .question-content span,
html.dark-theme .soal-detail-page .answer-content span,
html.dark-theme .soal-detail-page .question-content li,
html.dark-theme .soal-detail-page .answer-content li,
html.dark-theme .soal-detail-page .question-content td,
html.dark-theme .soal-detail-page .answer-content td,
html.dark-theme .soal-detail-page .question-content th,
html.dark-theme .soal-detail-page .answer-content th,
html.dark-theme .soal-detail-page .question-content strong,
html.dark-theme .soal-detail-page .answer-content strong,
html.dark-theme .soal-detail-page .question-content em,
html.dark-theme .soal-detail-page .answer-content em,
html.dark-theme .soal-detail-page .question-content b,
html.dark-theme .soal-detail-page .answer-content b {
  color: #f8fafc !important;
}

html.dark-theme .soal-detail-page .question-content a,
html.dark-theme .soal-detail-page .answer-content a {
  color: #7dd3fc !important;
}

.import-validation-alert {
  background: rgba(220, 38, 38, 0.14) !important;
  border: 1px solid rgba(220, 38, 38, 0.32) !important;
  border-left: 4px solid #dc2626 !important;
  color: #991b1b !important;
  opacity: 1;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    max-height 0.35s ease,
    margin 0.35s ease,
    padding 0.35s ease;
  overflow: hidden;
}

.import-validation-alert strong,
.import-validation-alert li {
  color: inherit !important;
}

.import-validation-alert.is-dismissing {
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transform: translateY(-4px);
}

html.dark-theme .import-validation-alert {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
  border-left-color: #f87171 !important;
  color: #fecaca !important;
}

/* Date/time picker follows the active theme, including next/previous icons. */
html:not(.dark-theme) .bootstrap-datetimepicker-widget,
html:not(.dark-theme) .bootstrap-datetimepicker-widget.dropdown-menu {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #d1d5db !important;
}

html:not(.dark-theme) .bootstrap-datetimepicker-widget table,
html:not(.dark-theme) .bootstrap-datetimepicker-widget th,
html:not(.dark-theme) .bootstrap-datetimepicker-widget td,
html:not(.dark-theme) .bootstrap-datetimepicker-widget a,
html:not(.dark-theme) .bootstrap-datetimepicker-widget button,
html:not(.dark-theme) .bootstrap-datetimepicker-widget .picker-switch,
html:not(.dark-theme) .bootstrap-datetimepicker-widget .timepicker-hour,
html:not(.dark-theme) .bootstrap-datetimepicker-widget .timepicker-minute,
html:not(.dark-theme) .bootstrap-datetimepicker-widget .timepicker-second {
  color: #000000 !important;
}

html:not(.dark-theme) .bootstrap-datetimepicker-widget .prev,
html:not(.dark-theme) .bootstrap-datetimepicker-widget .next,
html:not(.dark-theme)
  .bootstrap-datetimepicker-widget
  span[class*="glyphicon"] {
  color: #000000 !important;
}

html.dark-theme .bootstrap-datetimepicker-widget,
html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu,
body.dark-theme .bootstrap-datetimepicker-widget,
body.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #374151 !important;
}

html.dark-theme .bootstrap-datetimepicker-widget table,
html.dark-theme .bootstrap-datetimepicker-widget th,
html.dark-theme .bootstrap-datetimepicker-widget td,
html.dark-theme .bootstrap-datetimepicker-widget a,
html.dark-theme .bootstrap-datetimepicker-widget button,
html.dark-theme .bootstrap-datetimepicker-widget .picker-switch,
html.dark-theme .bootstrap-datetimepicker-widget .timepicker-hour,
html.dark-theme .bootstrap-datetimepicker-widget .timepicker-minute,
html.dark-theme .bootstrap-datetimepicker-widget .timepicker-second,
body.dark-theme .bootstrap-datetimepicker-widget table,
body.dark-theme .bootstrap-datetimepicker-widget th,
body.dark-theme .bootstrap-datetimepicker-widget td,
body.dark-theme .bootstrap-datetimepicker-widget a,
body.dark-theme .bootstrap-datetimepicker-widget button,
body.dark-theme .bootstrap-datetimepicker-widget .picker-switch,
body.dark-theme .bootstrap-datetimepicker-widget .timepicker-hour,
body.dark-theme .bootstrap-datetimepicker-widget .timepicker-minute,
body.dark-theme .bootstrap-datetimepicker-widget .timepicker-second {
  color: #ffffff !important;
}

html.dark-theme .bootstrap-datetimepicker-widget .prev,
html.dark-theme .bootstrap-datetimepicker-widget .next,
html.dark-theme .bootstrap-datetimepicker-widget span[class*="glyphicon"],
body.dark-theme .bootstrap-datetimepicker-widget .prev,
body.dark-theme .bootstrap-datetimepicker-widget .next,
body.dark-theme .bootstrap-datetimepicker-widget span[class*="glyphicon"] {
  color: #ffffff !important;
}

html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after,
body.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-bottom-color: #111827 !important;
}

html.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.top:after,
body.dark-theme .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-top-color: #111827 !important;
}

html.dark-theme .bootstrap-datetimepicker-widget td.today:before,
body.dark-theme .bootstrap-datetimepicker-widget td.today:before {
  border-bottom-color: #ffffff !important;
}

html:not(.dark-theme) .bootstrap-datetimepicker-widget td.day:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget td.hour:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget td.minute:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget td.second:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget th.prev:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget th.next:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget th.picker-switch:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget a[data-action]:hover,
html:not(.dark-theme)
  .bootstrap-datetimepicker-widget
  button[data-action]:hover {
  background: #e5e7eb !important;
  color: #000000 !important;
}

html.dark-theme .bootstrap-datetimepicker-widget td.day:hover,
html.dark-theme .bootstrap-datetimepicker-widget td.hour:hover,
html.dark-theme .bootstrap-datetimepicker-widget td.minute:hover,
html.dark-theme .bootstrap-datetimepicker-widget td.second:hover,
html.dark-theme .bootstrap-datetimepicker-widget th.prev:hover,
html.dark-theme .bootstrap-datetimepicker-widget th.next:hover,
html.dark-theme .bootstrap-datetimepicker-widget th.picker-switch:hover,
html.dark-theme .bootstrap-datetimepicker-widget a[data-action]:hover,
html.dark-theme .bootstrap-datetimepicker-widget button[data-action]:hover,
body.dark-theme .bootstrap-datetimepicker-widget td.day:hover,
body.dark-theme .bootstrap-datetimepicker-widget td.hour:hover,
body.dark-theme .bootstrap-datetimepicker-widget td.minute:hover,
body.dark-theme .bootstrap-datetimepicker-widget td.second:hover,
body.dark-theme .bootstrap-datetimepicker-widget th.prev:hover,
body.dark-theme .bootstrap-datetimepicker-widget th.next:hover,
body.dark-theme .bootstrap-datetimepicker-widget th.picker-switch:hover,
body.dark-theme .bootstrap-datetimepicker-widget a[data-action]:hover,
body.dark-theme .bootstrap-datetimepicker-widget button[data-action]:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

html:not(.dark-theme) .bootstrap-datetimepicker-widget td.active:hover,
html:not(.dark-theme) .bootstrap-datetimepicker-widget td.active,
html.dark-theme .bootstrap-datetimepicker-widget td.active:hover,
html.dark-theme .bootstrap-datetimepicker-widget td.active,
body.dark-theme .bootstrap-datetimepicker-widget td.active:hover,
body.dark-theme .bootstrap-datetimepicker-widget td.active {
  background: #2563eb !important;
}

/* ==========================================================================
   SIDEBAR — FIK UNIMED Logo & Icon System
   Konsisten untuk semua role: Admin, Dosen, Mahasiswa
   ========================================================================== */

/* ── FIK UNIMED Logo Wrap ───────────────────────────────────────── */
.sidebar-fik-logo-wrap {
  flex-shrink: 0;
  position: relative;
  width: 46px;
  height: 46px;
}

/* Logo image: ukuran 46×46px persis sesuai referensi FIK.png */
.sidebar-fik-logo {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  padding: 3px;
  border: 2px solid rgba(56, 189, 248, 0.45);
  object-fit: contain;
  object-position: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar-fik-logo:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
}

/* Online status indicator dot */
.sidebar-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border: 2px solid #0f172a;
  border-radius: 50%;
  display: block;
}

/* ── Main Nav Icons (level-1) — 16px, fixed 20px width ─────────── */
/* Sama untuk Admin / Dosen / Mahasiswa */
.sidebar-menu > li > a .sidebar-nav-icon {
  font-size: 16px !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin-right: 8px !important;
  transition:
    color 0.18s ease,
    transform 0.18s ease !important;
}

/* ── Sub-menu Icons (level-2) — 14px, fixed 18px width ─────────── */
.sidebar-menu .treeview-menu > li > a .sidebar-sub-icon {
  font-size: 14px !important;
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin-right: 7px !important;
  transition:
    color 0.18s ease,
    transform 0.18s ease !important;
}

/* ── Hover micro-animation — ikon sedikit membesar ─────────────── */
.sidebar-menu > li > a:hover .sidebar-nav-icon,
.sidebar-menu > li.active > a .sidebar-nav-icon,
.sidebar-menu > li.menu-open > a .sidebar-nav-icon {
  transform: scale(1.12) !important;
}

.sidebar-menu .treeview-menu > li > a:hover .sidebar-sub-icon,
.sidebar-menu .treeview-menu > li.active > a .sidebar-sub-icon {
  transform: scale(1.1) !important;
}

/* ── Flex layout untuk menu link ────────────────────────────────── */
.sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 15px 10px 20px !important;
  transition:
    background 0.18s ease,
    border-left-color 0.18s ease !important;
}

.sidebar-menu > li > a .pull-right-container {
  margin-left: auto !important;
}

.sidebar-menu .treeview-menu > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 10px 7px 35px !important;
  transition: background 0.18s ease !important;
}

/* ── Hover icon color accent (skin-purple dark sidebar) ─────────── */
.skin-purple .sidebar-menu > li:hover > a .sidebar-nav-icon,
.skin-purple .sidebar-menu > li.active > a .sidebar-nav-icon,
.skin-purple .sidebar-menu > li.menu-open > a .sidebar-nav-icon {
  color: #a78bfa !important;
}

.skin-purple .sidebar-menu .treeview-menu > li:hover > a .sidebar-sub-icon,
.skin-purple .sidebar-menu .treeview-menu > li.active > a .sidebar-sub-icon {
  color: #a78bfa !important;
}

/* Active treeview border */
.skin-purple .sidebar-menu > li.menu-open > a {
  border-left-color: #7c3aed !important;
}

/* =========================================================================
   SETTING UPLOAD CARDS (LIGHT & DARK MODE SYNC)
   ========================================================================= */
.setting-upload-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  height: 100% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.setting-upload-card:hover {
  background: #ffffff;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.setting-upload-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.setting-preview-box {
  border-radius: 12px;
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.setting-preview-box.setting-logo-box {
  width: 80px;
  height: 80px;
  padding: 6px;
}

.setting-preview-box.setting-bg-box {
  width: 120px;
  height: 80px;
  background: #0f172a;
}

.setting-preview-box.setting-fav-box {
  width: 54px;
  height: 54px;
  padding: 6px;
}

.setting-preview-img.contain {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.setting-preview-img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.setting-input-wrapper {
  flex: 1;
  min-width: 180px;
}

.setting-file-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  height: auto !important;
  border-radius: 10px !important;
  transition: all 0.2s ease;
}

.setting-file-input:hover {
  border-color: #0284c7 !important;
}

.setting-file-input::-webkit-file-upload-button {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
  margin-right: 10px;
  transition: background 0.2s ease;
}

.setting-file-input::-webkit-file-upload-button:hover {
  background: #0369a1;
}

.setting-help-text {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.4;
}

.setting-reset-wrapper {
  margin-top: 8px;
}

.setting-reset-label {
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Dark Theme Synchronization */
html.dark-theme .setting-upload-card,
body.dark-theme .setting-upload-card,
.dark .setting-upload-card {
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html.dark-theme .setting-upload-card:hover,
body.dark-theme .setting-upload-card:hover,
.dark .setting-upload-card:hover {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

html.dark-theme .setting-preview-box,
body.dark-theme .setting-preview-box,
.dark .setting-preview-box {
  background: #0b0f19 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .setting-file-input,
body.dark-theme .setting-file-input,
.dark .setting-file-input {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

html.dark-theme .setting-file-input:hover,
body.dark-theme .setting-file-input:hover,
.dark .setting-file-input:hover {
  border-color: #38bdf8 !important;
}

html.dark-theme .setting-file-input::-webkit-file-upload-button,
body.dark-theme .setting-file-input::-webkit-file-upload-button,
.dark .setting-file-input::-webkit-file-upload-button {
  background: #0284c7;
  color: #ffffff;
}

html.dark-theme .setting-file-input::-webkit-file-upload-button:hover,
body.dark-theme .setting-file-input::-webkit-file-upload-button:hover,
.dark .setting-file-input::-webkit-file-upload-button:hover {
  background: #38bdf8;
}

html.dark-theme .setting-help-text,
body.dark-theme .setting-help-text,
.dark .setting-help-text {
  color: #94a3b8 !important;
}

html.dark-theme .setting-reset-label,
body.dark-theme .setting-reset-label,
.dark .setting-reset-label {
  color: #f87171 !important;
}

/* =========================================================================
   GLOBAL SMOOTH TRANSITION & LAYOUT STABILITY MASTER SYSTEM
   (Applicable to Admin, Dosen, & Mahasiswa Panels)
   ========================================================================= */

/* 1. Root Layout Stability & Anti-Layout-Shift (CLS Prevention) */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body,
input,
button,
select,
textarea,
.form-control,
.btn {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 2. Global Universal Tab Stability & Cross-Fade */
.nav-tabs {
  border-bottom: 2px solid #e2e8f0;
}

.nav-tabs > li > a {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: color, background-color, border-color;
  backface-visibility: hidden;
}

.tab-content > .tab-pane {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.tab-content > .tab-pane.active {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Universal Form Input Anti-Jitter System */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="file"],
select.form-control,
textarea.form-control {
  transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: border-color, box-shadow, background-color;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
  border-color: #0284c7 !important;
}

.has-error .form-control,
.has-error .form-control:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.has-success .form-control,
.has-success .form-control:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

/* Form validation messages with smooth opacity */
.help-block {
  margin: 4px 0 0 0;
  font-size: 12px;
  line-height: 1.4;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Select2 Smooth Focus & Zero-Shift Dropdown */
.select2-container--default .select2-selection--single {
  height: 44px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  background-color: #f8fafc !important;
  transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  color: #0f172a !important;
  padding-left: 0 !important;
  font-size: 13.5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}

.select2-dropdown {
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  z-index: 1055 !important;
}

.select2-results__option {
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* 5. Button GPU Anti-Jitter & Smooth Hover */
.btn,
.btn-hero-primary,
.btn-hero-emerald,
.btn-hero-ghost,
.btn-form-submit,
.btn-action,
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: transform, box-shadow;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover,
.btn-hero-primary:hover,
.btn-hero-emerald:hover,
.btn-hero-ghost:hover,
.btn-form-submit:hover,
.btn-action:hover {
  transform: translateY(-1.5px) translateZ(0) !important;
}

.btn:active,
.btn-hero-primary:active,
.btn-hero-emerald:active,
.btn-form-submit:active {
  transform: translateY(0.5px) translateZ(0) !important;
}

/* 6. Smooth Tables & DataTables Hover */
table.dataTable tbody tr,
table.table tbody tr {
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 7. Global Dark Theme Alignment for Master Controls */
html.dark-theme .nav-tabs,
.dark .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.dark-theme .form-control,
body.dark-theme .form-control,
.dark .form-control {
  background-color: #080c14 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark-theme .form-control:focus,
body.dark-theme .form-control:focus,
.dark .form-control:focus {
  background-color: #0b0f19 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

html.dark-theme .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--single {
  background-color: #080c14 !important;
  border-color: #334155 !important;
}

html.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}

html.dark-theme .select2-dropdown,
.dark .select2-dropdown {
  background-color: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

html.dark-theme .select2-results__option,
.dark .select2-results__option {
  color: #cbd5e1 !important;
}

html.dark-theme .select2-results__option--highlighted,
.dark .select2-results__option--highlighted {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

/* 8. Exam Sheet (Mahasiswa Panel) Smooth Question Navigation & Options */
.step {
  animation: examStepFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

@keyframes examStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.box-body .step .funkyradio .funkyradio-success label,
.box-body .step .funkyradio .funkyradio-primary label {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: background-color, border-color, transform;
  backface-visibility: hidden;
}

.box-body .step .funkyradio .funkyradio-success label:hover,
.box-body .step .funkyradio .funkyradio-primary label:hover {
  transform: translateX(2px);
}