/* SDM visual theme inspired by the NDE dashboard. Presentation only. */
#layout-wrapper {
  --sdm-green: #078d75;
  --sdm-teal: #12aa95;
  --sdm-blue: #2355d8;
  --sdm-purple: #7938e6;
  --sdm-ink: #172b49;
  --sdm-border: #e2e9f1;
  color: var(--sdm-ink);
  background: #f3f5f9;
}

#layout-wrapper .page-content {
  background: #f3f5f9;
}

#page-topbar {
  background: #7938e6 !important;
  box-shadow: 0 3px 18px rgba(48, 49, 130, .13);
}

#page-topbar .navbar-header {
  background-color: #8b24eb !important;
  background-image: linear-gradient(90deg, #b21feb 0%, #8b24eb 30%, #5d38ed 62%, #1464f0 100%) !important;
  border-bottom-color: transparent !important;
}

#page-topbar .navbar-brand-box {
  background: #129879 !important;
  text-align: center;
  padding-right: 8px;
  padding-left: 8px;
}

#page-topbar .navbar-brand-box > .dropdown {
  display: inline-flex !important;
  height: 100%;
  align-items: center;
  justify-content: center;
}

#page-topbar .navbar-brand-box .logo-lg {
  white-space: nowrap;
}

#page-topbar .navbar-brand-box .dropdown > .header-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-topbar .navbar-brand-box .sdm-app-brand-text {
  color: #fff !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

#page-topbar .navbar-brand-box .logo-lg .sdm-app-brand-text {
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
}

#page-topbar .navbar-brand-box .logo-lg img,
#page-topbar .navbar-brand-box .dropdown > .header-item img {
  width: auto;
  height: 40px !important;
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}

#page-topbar .header-item,
#page-topbar .header-item i,
#page-topbar .navbar-header > .d-flex > .header-item {
  color: #fff !important;
}

#page-topbar .header-item:hover,
#page-topbar .header-item:focus {
  background-color: rgba(255, 255, 255, .12) !important;
}

#page-topbar .dropdown-menu,
#page-topbar .dropdown-menu .dropdown-item {
  color: var(--sdm-ink) !important;
}

#layout-wrapper .vertical-menu {
  background: linear-gradient(172deg, #078d75 0%, #0a958b 38%, #167cba 72%, #2452d0 100%) !important;
  box-shadow: 3px 0 18px rgba(21, 65, 129, .1);
}

#layout-wrapper .vertical-menu .sidebar-menu-scroll,
#layout-wrapper .vertical-menu #sidebar-menu {
  background: transparent !important;
}

#layout-wrapper .vertical-menu .menu-title {
  color: rgba(255, 255, 255, .68) !important;
  font-weight: 700;
  letter-spacing: .06em;
}

#layout-wrapper .vertical-menu #sidebar-menu ul li a,
#layout-wrapper .vertical-menu #sidebar-menu ul li a i,
#layout-wrapper .vertical-menu #sidebar-menu ul li a span {
  color: rgba(255, 255, 255, .91) !important;
}

#layout-wrapper .vertical-menu #sidebar-menu ul li a:hover,
#layout-wrapper .vertical-menu #sidebar-menu ul li.mm-active > a,
#layout-wrapper .vertical-menu #sidebar-menu ul li a.active {
  background: rgba(255, 255, 255, .17) !important;
  color: #fff !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

#layout-wrapper .vertical-menu #sidebar-menu ul li a:hover i,
#layout-wrapper .vertical-menu #sidebar-menu ul li.mm-active > a i,
#layout-wrapper .vertical-menu #sidebar-menu ul li a.active i {
  color: #fff !important;
}

#layout-wrapper .vertical-menu #sidebar-menu ul.sub-menu {
  background: rgba(8, 66, 126, .12) !important;
  border-radius: 9px;
}

#layout-wrapper .vertical-menu #sidebar-menu ul.sub-menu li a {
  color: rgba(255, 255, 255, .82) !important;
}

#layout-wrapper .page-title-box h4,
#layout-wrapper .page-title-box .page-title,
#layout-wrapper .card-title {
  color: var(--sdm-ink);
  font-weight: 700;
}

#layout-wrapper .card {
  border: 1px solid var(--sdm-border);
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(29, 52, 91, .055);
}

#layout-wrapper .card-header {
  border-color: var(--sdm-border);
  border-radius: 14px 14px 0 0 !important;
}

#layout-wrapper .card.bg-primary { background: linear-gradient(125deg, #528cf0, #79b0f6) !important; }
#layout-wrapper .card.bg-info { background: linear-gradient(125deg, #2bb9b1, #66d9cf) !important; }
#layout-wrapper .card.bg-success { background: linear-gradient(125deg, #0db48e, #62d7b4) !important; }
#layout-wrapper .card.bg-warning { background: linear-gradient(125deg, #ffbf39, #ffdb69) !important; }
#layout-wrapper .card.bg-danger { background: linear-gradient(125deg, #f46271, #f7969c) !important; }

#layout-wrapper .sdm-dashboard-welcome {
  overflow: hidden;
  background: linear-gradient(112deg, #f2fff9 0%, #f7fffb 60%, #e7f8f4 100%);
  border-color: #d3eee2;
}

#layout-wrapper .sdm-dashboard-welcome .sdm-welcome-name {
  color: #078d75;
}

#layout-wrapper .sdm-unjani-watermark {
  width: min(100%, 260px);
  height: 200px;
  margin-left: auto;
  background: url("../images/logo/logo_unjani.png") center / contain no-repeat;
  filter: grayscale(1) sepia(.45) hue-rotate(95deg);
  opacity: .2;
}

/* Dashboard summary cards only. */
.sdm-dashboard-page #containerTotalPegawai > .col > .card {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(41, 76, 125, .14) !important;
}

.sdm-dashboard-page #containerTotalPegawai > .col:nth-child(1) > .card {
  background: linear-gradient(125deg, #4388ee, #7ab0f6) !important;
}

.sdm-dashboard-page #containerTotalPegawai > .col:nth-child(2) > .card {
  background: linear-gradient(125deg, #ee6873, #f69a9f) !important;
}

.sdm-dashboard-page #containerTotalPegawai > .col:nth-child(3) > .card {
  background: linear-gradient(125deg, #12aa91, #63d5ba) !important;
}

.sdm-dashboard-page #containerTotalPegawai > .col > .card::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  right: -35px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}

.sdm-dashboard-page #containerTotalPegawai > .col > .card .card-body {
  position: relative;
  z-index: 1;
}

.sdm-dashboard-page #containerTotalPegawai > .col > .card p,
.sdm-dashboard-page #containerTotalPegawai > .col > .card h2,
.sdm-dashboard-page #containerTotalPegawai > .col > .card a,
.sdm-dashboard-page #containerTotalPegawai > .col > .card i {
  color: #fff !important;
}

.sdm-dashboard-page #containerTotalPegawai > .col > .card .avatar-title {
  background: rgba(255, 255, 255, .2) !important;
}

/* Dashboard data panels keep white content so charts and tables stay readable. */
.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12 > .card {
  border-top: 3px solid #4d8ef0 !important;
}

.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+2) > .card { border-top-color: #ec7280 !important; }
.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+3) > .card { border-top-color: #20b69c !important; }
.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+4) > .card { border-top-color: #7c66eb !important; }

.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12 > .card > .card-header {
  background: linear-gradient(90deg, #edf5ff, #fff) !important;
}

.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+2) > .card > .card-header { background: linear-gradient(90deg, #fff0f1, #fff) !important; }
.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+3) > .card > .card-header { background: linear-gradient(90deg, #e9fbf5, #fff) !important; }
.sdm-dashboard-page .sdm-dashboard-panels > .col-md-12:nth-child(4n+4) > .card > .card-header { background: linear-gradient(90deg, #f1eeff, #fff) !important; }

#layout-wrapper .btn {
  border-radius: 8px;
  font-weight: 600;
}

#layout-wrapper .btn-primary,
#layout-wrapper .btn-info,
#layout-wrapper .btn-success,
#layout-wrapper .btn-danger {
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 9px rgba(31, 82, 158, .12);
}

#layout-wrapper .btn-primary { background: linear-gradient(110deg, #7552ee, #3b62e9) !important; }
#layout-wrapper .btn-info { background: linear-gradient(110deg, #438eee, #58aff1) !important; }
#layout-wrapper .btn-success { background: linear-gradient(110deg, #089778, #22bba0) !important; }
#layout-wrapper .btn-danger { background: linear-gradient(110deg, #e85367, #f17d84) !important; }
#layout-wrapper .btn-warning { background: linear-gradient(110deg, #f9bc3e, #ffdc73) !important; border-color: transparent !important; color: #47370d !important; }

#layout-wrapper .btn-primary:hover,
#layout-wrapper .btn-info:hover,
#layout-wrapper .btn-success:hover,
#layout-wrapper .btn-danger:hover,
#layout-wrapper .btn-warning:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}

#layout-wrapper .table-light,
#layout-wrapper .table thead.table-light th {
  --bs-table-bg: #edf5f8;
  --bs-table-color: #24445b;
  color: #24445b !important;
  border-color: #dce8ed;
}

#layout-wrapper .table thead th {
  font-weight: 700;
}

#layout-wrapper .table thead.table-light > tr > th,
#layout-wrapper .table thead > tr.table-light > th {
  background-color: #edf5f8 !important;
}

#layout-wrapper .form-control:focus,
#layout-wrapper .form-select:focus,
#layout-wrapper .select2-container--focus .select2-selection {
  border-color: #66b9a8 !important;
  box-shadow: 0 0 0 .2rem rgba(18, 170, 149, .12) !important;
}

#layout-wrapper .page-link {
  color: var(--sdm-blue);
}

#layout-wrapper .page-item.active .page-link {
  background: var(--sdm-blue);
  border-color: var(--sdm-blue);
  color: #fff;
}

#layout-wrapper .footer {
  background: #f3f5f9;
  border-top: 1px solid var(--sdm-border);
}

/* Modal proses SISTER: tampilan saja, status dan persentase tetap dari aplikasi. */
:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(31, 45, 105, .2);
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-header {
  background: linear-gradient(105deg, #0a9b83 0%, #167cba 54%, #6748db 100%);
  border-bottom: 0;
  padding: 18px 22px;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-header .modal-title {
  color: #fff;
  font-weight: 700;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: .85;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-body {
  background: #fbfcff;
  padding: 22px;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .progress {
  height: 20px !important;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebf5;
  box-shadow: inset 0 1px 3px rgba(27, 49, 85, .1);
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .progress-bar {
  border-radius: 999px;
  background-color: #198fc0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent), linear-gradient(90deg, #10aa91, #3864df);
  background-size: 1rem 1rem, 100% 100%;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(35, 85, 216, .25);
  transition: width .35s ease;
}

#sister_unduh_bar {
  transition: width .8s ease;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .progress-bar.bg-success {
  background-color: #0e9d78 !important;
  background-image: linear-gradient(90deg, #10aa91, #54c990);
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .progress-bar.bg-danger {
  background-color: #e45064 !important;
  background-image: linear-gradient(90deg, #e45064, #f27a78);
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .alert-info {
  color: #24547d;
  background: #eaf5ff;
  border-color: #cfe8fc;
  border-radius: 12px;
}

:is(#mdl_sister_placeholder, #mdl_sister_preview, #mdl_sister_progress, #mdl_unduh_sister, #mdl_portofolio_unduh) .modal-footer {
  background: #fbfcff;
  border-top-color: #e8edf5;
}

@media (max-width: 991.98px) {
  #page-topbar > .navbar-brand-box {
    display: none;
  }

  #page-topbar .navbar-header .navbar-brand-box {
    width: auto !important;
    background: transparent !important;
    padding: 0 6px;
  }

  #page-topbar .navbar-header .navbar-brand-box .logo-sm {
    white-space: nowrap;
  }

  #page-topbar .navbar-header .navbar-brand-box .logo-sm .sdm-app-brand-text {
    display: inline-block;
    margin-left: 6px;
    font-size: 16px;
    vertical-align: middle;
  }

  body.vertical-collpsed #page-topbar .navbar-header .navbar-brand-box .logo-sm {
    display: inline-block;
  }

  body.vertical-collpsed #page-topbar .navbar-header .navbar-brand-box .logo-lg {
    display: none;
  }

  #layout-wrapper .vertical-menu { box-shadow: 6px 0 20px rgba(21, 65, 129, .16); }
}

@media (max-width: 767.98px) {
  #page-topbar .navbar-header .navbar-brand-box .logo-sm .sdm-app-brand-text {
    font-size: 14px;
  }

  #layout-wrapper .sdm-unjani-watermark {
    width: 150px;
    height: 120px;
    margin: 20px auto 0;
  }
}