/* 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 {
  --sdm-topbar-brand-width: 250px;
  background: #7938e6 !important;
  box-shadow: 0 3px 18px rgba(48, 49, 130, .13);
}
body.vertical-collpsed #page-topbar { --sdm-topbar-brand-width: 70px; }

#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;
}

/* Give the ticker only the space remaining beside the account controls. */
#page-topbar .navbar-header {
  padding-left: var(--sdm-topbar-brand-width);
  min-width: 0;
}
#page-topbar .navbar-header > .btn-menu-web {
  left: 0 !important;
  flex-shrink: 0;
}
@media (min-width: 992px) {
  #page-topbar > .navbar-brand-box {
    width: var(--sdm-topbar-brand-width) !important;
  }
  body.vertical-collpsed #page-topbar > .navbar-brand-box .logo .logo-sm { display: block; }
  body.vertical-collpsed #page-topbar > .navbar-brand-box .logo .logo-lg { display: none; }
  body.vertical-collpsed #page-topbar > .navbar-brand-box .sdm-app-brand-text,
  body.vertical-collpsed #page-topbar > .navbar-brand-box .mdi-chevron-down { display: none !important; }
  body.vertical-collpsed #page-topbar > .navbar-brand-box .dropdown > .header-item {
    justify-content: center;
    gap: 0;
  }
}
#page-topbar .sdm-topbar-actions {
  flex: 0 0 auto;
  margin-left: auto;
}
#page-topbar #notification-ticker-container {
  flex: 1 1 500px;
  min-width: 0;
  max-width: 500px;
  margin: 0 12px !important;
  container-type: inline-size;
  container-name: sdm-ticker;
}
#page-topbar .notification-ticker-container {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 5px 12px;
  gap: 8px;
}
#page-topbar .ticker-content { flex: 1 1 auto; min-width: 0; }
#page-topbar .ticker-item { min-width: 0; width: 100%; }
#page-topbar .ticker-item > .badge,
#page-topbar .ticker-badge { flex-shrink: 0; }
#page-topbar .ticker-text { min-width: 0; display: block; }
@container sdm-ticker (max-width: 360px) {
  #page-topbar .ticker-badge { display: none; }
}
@container sdm-ticker (max-width: 240px) {
  #page-topbar .ticker-item > .badge { display: none; }
}
@media (max-width: 991.98px) {
  #page-topbar .navbar-header,
  body.vertical-collpsed #page-topbar .navbar-header { padding-left: 0; }
  #page-topbar .sdm-topbar-mobile-brand {
    position: static !important;
    flex: 0 0 auto;
    order: -1;
  }
}

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

#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;
  }
}

/* Shared style for account switching and returning to Portal Lecturer. */
#page-topbar .pb-card-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  transition: box-shadow .18s, transform .12s, border-color .18s, background .18s;
}

#page-topbar .pb-card-dark:hover,
#page-topbar .pb-card-dark:focus {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}

#page-topbar .pb-card-dark:active { transform: scale(.97); }
#page-topbar .pb-card-dark:focus-visible { outline: 3px solid rgba(255, 255, 255, .65); outline-offset: 3px; }
#page-topbar .pb-card-dark .pb-card-ico i { font-size: 18px; line-height: 1; }

#page-topbar .pb-card-dark .pb-card-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  transition: background .18s;
}

#page-topbar .pb-card-dark:hover .pb-card-ico { background: rgba(255, 255, 255, .25); }

#page-topbar .pb-card-dark .pb-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#page-topbar .pb-card-dark .pb-card-sub {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
}

#page-topbar .pb-card-dark .pb-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

@media (max-width: 767.98px) {
  /* Layar sempit: tampilkan ikon saja agar topbar tidak meluber */
  #page-topbar .pb-card-dark { padding: 4px; gap: 0; }
  #page-topbar .pb-card-dark .pb-card-body { display: none; }
}

/* Scope to the Pegawai toolbar using its existing, permission-independent export. */
#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) {
  container-name: sdm-pegawai-toolbar;
  container-type: inline-size;
  row-gap: 12px;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) > .col-md-9 > .d-flex {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) > .col-md-9 > .d-flex > * {
  flex-shrink: 0;
  margin: 0 !important;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .input-group {
  flex-wrap: nowrap;
  max-width: 100%;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) #jenis_tanggal {
  flex: 0 0 80px;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) #tanggal_tmt {
  min-width: 0;
}

#layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .btn {
  min-height: 42px;
  white-space: nowrap;
}

/* Account for the actual card width, including an expanded desktop sidebar. */
@container sdm-pegawai-toolbar (max-width: 1050px) {
  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) > .col-md-3,
  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) > .col-md-9 {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) > .col-md-9 > .d-flex {
    justify-content: flex-start !important;
  }

  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .input-group {
    flex: 0 0 100%;
    width: 100% !important;
  }

  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) #btnTambah {
    flex-grow: 1;
    text-align: center;
  }

  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .dropdown:has(> .dropdown-menu.show) {
    flex-basis: 100%;
    text-align: left;
  }

  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .dropdown-menu {
    position: static !important;
    transform: none !important;
    animation: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 8px !important;
  }

  #layout-wrapper .card-body > .row:has(#excel_kelengkapan_download) .dropdown-item {
    white-space: normal;
  }
}

/* Show one sidebar toggle at the same breakpoint as the mobile navigation. */
#page-topbar .sdm-topbar-mobile-brand .btn-menu-mobile {
  display: none !important;
}

@media (max-width: 991.98px) {
  #page-topbar .navbar-header > .btn-menu-web {
    display: none !important;
  }

  #page-topbar .sdm-topbar-mobile-brand .btn-menu-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Let tablet/mobile users scroll past long employee names in both list tabs. */
@media (max-width: 1399.98px) {
  #layout-wrapper .card-body:has(#excel_kelengkapan_download) :is(#tervalidasi, #draftContent) > .table-responsive > .table > :is(thead, tbody) > tr > .sticky-column {
    position: static;
    left: auto;
    z-index: auto;
  }

  #layout-wrapper .card-body:has(#excel_kelengkapan_download) :is(#tervalidasi, #draftContent) > .table-responsive > .table > tbody > tr > td:has(> a[onclick^="showDetail("]) {
    width: 240px;
    min-width: 180px;
    max-width: 240px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}