:root {
  --navy: #061b3a;
  --navy2: #0b2d5c;
  --gold: #d9ad4f;
  --bg: #eef3f9;
  --text: #16233b;
  --muted: #7a8494;
  --white: #fff;
  --line: rgba(9, 28, 60, .10)
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg)
}

a {
  text-decoration: none
}

.admin-shell {
  display: flex;
  min-height: 100vh
}

.admin-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 292px;
  background: linear-gradient(180deg, #071d3e, #020b18);
  color: #fff;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 12px 0 30px rgba(2, 11, 24, .22)
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px
}

.side-brand img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  border-radius: 20px;
  padding: 8px
}

.side-brand strong {
  display: block;
  font-size: 22px;
  letter-spacing: 1px
}

.side-brand span {
  display: block;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #c9d5e7
}

.side-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
  margin: 18px 10px 10px
}

.side-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: #eef4ff;
  border-radius: 14px;
  padding: 12px 15px;
  margin: 4px 0;
  font-weight: 800;
  transition: .2s
}

.side-menu a .mi {
  width: 24px;
  color: var(--gold);
  opacity: .9
}

.side-menu a:hover,
.side-menu a.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06));
  box-shadow: inset 4px 0 0 var(--gold), 0 12px 22px rgba(0, 0, 0, .16)
}

.admin-main {
  margin-left: 292px;
  width: calc(100% - 292px);
  min-height: 100vh
}

.admin-topbar {
  height: 92px;
  background: linear-gradient(135deg, #1b365b, #071d3e);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 32px;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 16px 35px rgba(6, 27, 58, .18)
}

.top-toggle {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px
}

.top-title strong {
  display: block;
  font-size: 20px
}

.top-title span {
  display: block;
  font-size: 13px;
  color: #d5e2f5
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px
}

.top-portal {
  padding: 11px 18px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, .18)
}

.user-menu {
  position: relative
}

.user-menu button {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #f4cc70, var(--gold));
  color: var(--navy);
  padding: 12px 18px;
  font-weight: 900
}

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 52px;
  width: 190px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
  overflow: hidden;
  padding: 8px;
  z-index: 99
}

.user-dropdown.show {
  display: block
}

.user-dropdown a {
  display: block;
  color: var(--text);
  padding: 11px 13px;
  border-radius: 12px;
  font-weight: 800
}

.user-dropdown a:hover {
  background: #f3f6fb
}

.user-dropdown .danger {
  color: #c53030
}

.admin-content {
  padding: 30px 34px
}

.dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 36px 40px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #082757, #124177);
  color: #fff;
  box-shadow: 0 24px 50px rgba(6, 27, 58, .22)
}

.dash-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 35%, rgba(255, 255, 255, .24), transparent 25%), linear-gradient(90deg, rgba(6, 27, 58, .22), rgba(216, 173, 79, .08));
}

.dash-hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.dash-hero span {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: 8px 16px;
  color: #ffe4a8;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px
}

.dash-hero h1 {
  font-size: 46px;
  line-height: 1;
  margin: 22px 0 12px;
  font-weight: 950
}

.dash-hero p {
  font-size: 18px;
  margin: 0;
  color: #e7eefb
}

.hero-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px
}

.hero-pills b {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 16px;
  padding: 11px 18px
}

.dash-hero-logo {
  position: absolute;
  right: 55px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 22px rgba(255, 255, 255, .07)
}

.dash-hero-logo img {
  width: 102px;
  height: 102px;
  object-fit: contain;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  border-radius: 28px;
  padding: 10px
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px
}

.stat-box {
  position: relative;
  overflow: hidden;
  min-height: 172px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(216, 173, 79, .18);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 38px rgba(9, 28, 60, .10);
  transition: .22s
}

.stat-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px rgba(9, 28, 60, .16)
}

.stat-box:after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(216, 173, 79, .12)
}

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px
}

.stat-mark {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--navy), #07376e);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950
}

.stat-top em {
  font-style: normal;
  background: #eef5fc;
  color: #07376e;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 950
}

.stat-box h4 {
  margin: 0 0 8px;
  color: #697386;
  font-size: 15px
}

.stat-box strong {
  font-size: 34px;
  line-height: 1;
  color: var(--navy)
}

.stat-box p {
  margin: 7px 0 0;
  color: #8b94a3
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px
}

.chart-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 18px 38px rgba(9, 28, 60, .10)
}

.chart-box h3 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: 18px
}

.chart-box canvas {
  width: 100% !important;
  min-height: 260px !important;
  max-height: 320px !important
}

.portal-body {
  min-height: 100vh;
  background: url('../img/portal_bg.png') center/cover no-repeat fixed;
  position: relative;
  color: #fff
}

.portal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 15, 32, .82), rgba(3, 15, 32, .38), rgba(3, 15, 32, .10));
  z-index: 0
}

.portal-nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 44px
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 14px
}

.portal-brand img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: rgba(255, 255, 255, .9);
  border-radius: 20px;
  padding: 8px
}

.portal-brand strong {
  display: block;
  font-size: 22px
}

.portal-brand span {
  display: block;
  color: #dce8f7
}

.portal-login-btn,
.portal-actions a {
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: #061b3a;
  padding: 13px 20px;
  border-radius: 16px;
  font-weight: 950
}

.portal-hero {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  padding: 40px 7vw
}

.portal-card {
  max-width: 760px;
  padding: 42px;
  border-radius: 32px;
  background: rgba(6, 27, 58, .54);
  border: 1px solid rgba(255, 255, 255, .20);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .26)
}

.portal-badge {
  display: inline-block;
  color: #ffe4a8;
  background: rgba(255, 255, 255, .13);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: 2px
}

.portal-card h1 {
  font-size: 64px;
  line-height: 1;
  margin: 22px 0 12px
}

.portal-card p {
  font-size: 20px;
  color: #edf5ff
}

.portal-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px
}

.portal-actions span {
  color: #dbe7f6
}

.auth-body {
  min-height: 100vh;
  background: url('../img/login_bg.png') center/cover no-repeat fixed;
  display: block
}

.admin-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: linear-gradient(90deg, rgba(3, 15, 32, .86), rgba(3, 15, 32, .48))
}

.admin-login-left {
  color: #fff;
  padding: 70px 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.admin-login-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px
}

.admin-login-brand img,
.login-card-head img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: #fff;
  border-radius: 24px;
  padding: 8px
}

.admin-login-brand h1 {
  margin: 0;
  font-size: 48px;
  letter-spacing: 3px
}

.admin-login-brand p {
  margin: 0;
  color: #dce8f7;
  letter-spacing: 2px
}

.admin-login-left h2 {
  font-size: 44px;
  max-width: 650px;
  margin: 0 0 18px
}

.login-copy {
  font-size: 18px;
  color: #dce8f7;
  max-width: 620px
}

.login-portal-link {
  color: #ffe4a8;
  font-weight: 900;
  margin-top: 22px
}

.admin-login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px
}

.admin-login-card {
  width: min(430px, 100%);
  background: rgba(255, 255, 255, .94);
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28)
}

.login-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px
}

.login-card-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 28px
}

.login-card-head span {
  color: var(--muted)
}

.admin-login-card label {
  display: block;
  font-weight: 900;
  color: var(--navy);
  margin: 14px 0 8px
}

.admin-login-card input {
  width: 100%;
  border: 1px solid #d8e1ee;
  border-radius: 16px;
  padding: 14px 15px;
  font-size: 15px;
  outline: none
}

.admin-login-card input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 173, 79, .18)
}

.admin-login-card button {
  width: 100%;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: var(--navy);
  font-weight: 950;
  padding: 15px;
  margin-top: 22px;
  font-size: 16px
}

.admin-login-card small {
  display: block;
  text-align: center;
  color: var(--muted);
  margin-top: 14px
}

.btn-gold {
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  border: 0;
  color: var(--navy);
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 14px
}

.premium-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 38px rgba(9, 28, 60, .10);
  border: 1px solid var(--line)
}

.modal-navy {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff
}

.page-title h3 {
  color: var(--navy)
}

@media(max-width:1200px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .dash-hero-logo {
    opacity: .18
  }
}

@media(max-width:800px) {
  .admin-sidebar {
    margin-left: -292px
  }

  .admin-sidebar.show {
    margin-left: 0
  }

  .admin-main {
    margin-left: 0;
    width: 100%
  }

  .admin-topbar {
    padding: 0 16px
  }

  .top-title span {
    display: none
  }

  .top-actions {
    gap: 8px
  }

  .top-portal {
    display: none
  }

  .stat-grid,
  .chart-grid,
  .admin-login-page {
    grid-template-columns: 1fr
  }

  .dash-hero {
    padding: 28px
  }

  .dash-hero h1 {
    font-size: 36px
  }

  .portal-card h1 {
    font-size: 44px
  }

  .portal-nav {
    padding: 20px
  }

  .admin-login-left {
    padding: 40px 28px
  }

  .admin-login-left h2 {
    font-size: 32px
  }
}


/* PATCH_003D_LOGIN_RESEARCH_BACKGROUND */
.auth-body {
  min-height: 100vh !important;
  background:
    linear-gradient(90deg, rgba(3, 15, 32, .90) 0%, rgba(3, 15, 32, .68) 46%, rgba(3, 15, 32, .30) 100%),
    url('../img/login_bg.png') center center/cover no-repeat fixed !important;
}

.admin-login-page {
  min-height: 100vh !important;
  background: transparent !important;
  grid-template-columns: 1.05fr .95fr !important;
}

.admin-login-left {
  position: relative;
  z-index: 1;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.admin-login-left:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  left: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(245, 205, 109, .16), transparent 65%);
  z-index: -1;
}

.admin-login-brand img,
.login-card-head img {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .20);
}

.admin-login-left h2 {
  font-size: 52px !important;
  line-height: 1.08 !important;
  letter-spacing: -1px;
}

.login-copy {
  font-size: 19px !important;
  line-height: 1.45 !important;
  color: #edf5ff !important;
}

.login-portal-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffe7a7 !important;
  backdrop-filter: blur(10px);
}

.admin-login-card {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 32px 85px rgba(0, 0, 0, .34) !important;
}

.admin-login-card input {
  background: rgba(238, 244, 252, .82) !important;
}

.admin-login-card button {
  box-shadow: 0 15px 28px rgba(216, 173, 79, .28);
  transition: .22s ease;
}

.admin-login-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(216, 173, 79, .36);
}

@media(max-width:800px) {
  .auth-body {
    background-position: center center !important;
  }

  .admin-login-left h2 {
    font-size: 34px !important;
  }
}


/* PATCH_004_MODUL_PENELITIAN */
.penelitian-title-cell {
  max-width: 420px;
  white-space: normal
}

.premium-card h5 {
  font-weight: 900;
  color: var(--sonaf-navy, #061b3a);
  margin-bottom: 16px
}

.table th {
  font-weight: 800
}


/* PATCH_003EA_FIX_USER_DROPDOWN_FINAL */
.sonaf-topbar,
.topbar,
.navbar,
.sonaf-main,
.main {
  overflow: visible !important;
}

.dropdown {
  position: relative !important;
}

.dropdown-menu {
  position: absolute !important;
  z-index: 99999 !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px;
  padding: 10px 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(6, 27, 58, .22);
}

.dropdown-menu.show {
  display: block !important;
}

.dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #071b3a !important;
  text-decoration: none !important;
  font-weight: 600;
}

.dropdown-item:hover {
  background: rgba(216, 170, 74, .16) !important;
}

.dropdown-divider {
  margin: 8px 0;
  border-top: 1px solid rgba(7, 27, 58, .12);
}

.sonaf-user-btn {
  cursor: pointer;
  white-space: nowrap;
}

.sonaf-user-btn i {
  margin-right: 6px;
}

@media(max-width:768px) {
  .dropdown-menu {
    right: 0 !important;
    min-width: 190px;
  }
}


/* PATCH_003EB_USER_DROPDOWN_REAL_FIX */
.topbar,
.admin-topbar,
.top-actions,
.user-menu,
.admin-main,
.main-panel {
  overflow: visible !important;
}

.user-menu {
  position: relative !important;
  z-index: 9999 !important;
}

#userMenuBtn {
  cursor: pointer !important;
  user-select: none;
}

#userDropdown.user-dropdown {
  display: none;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  width: 220px !important;
  min-width: 220px;
  background: #ffffff !important;
  border: 1px solid rgba(7, 27, 58, .08);
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(6, 27, 58, .28) !important;
  padding: 10px !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

#userDropdown.user-dropdown.show {
  display: block !important;
  animation: sonafDropdown .16s ease-out;
}

#userDropdown.user-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-left: 1px solid rgba(7, 27, 58, .08);
  border-top: 1px solid rgba(7, 27, 58, .08);
}

#userDropdown.user-dropdown a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #071b3a !important;
  text-decoration: none !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  font-weight: 800 !important;
}

#userDropdown.user-dropdown a:hover {
  background: rgba(216, 170, 74, .16) !important;
}

#userDropdown.user-dropdown a.danger {
  color: #c53030 !important;
}

@keyframes sonafDropdown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* PATCH_004A_FINALISASI_MODUL_PENELITIAN */
.penelitian-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.form-section-title {
  font-weight: 900;
  color: var(--sonaf-navy, #061b3a);
  border-left: 4px solid var(--sonaf-gold, #d8aa4a);
  padding-left: 10px;
  margin-bottom: 12px;
}

.mini-progress {
  height: 8px;
  width: 90px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.mini-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, #061b3a, #d8aa4a);
  border-radius: 999px;
}

.detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 28px;
  margin-bottom: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #061b3a, #0b2d5c);
  color: #fff;
  box-shadow: 0 24px 60px rgba(6, 27, 58, .22);
}

.detail-hero h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 12px 0 8px;
}

.detail-hero p {
  margin: 0;
  color: #dbe7f6;
}

.detail-progress {
  width: 150px;
  height: 150px;
  min-width: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
}

.detail-progress strong {
  font-size: 34px;
  line-height: 1;
  color: #f2c86b;
}

.detail-progress span {
  font-size: 13px;
  color: #dbe7f6;
}

@media(max-width:1000px) {
  .penelitian-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .detail-hero {
    flex-direction: column;
    align-items: flex-start
  }
}

@media(max-width:640px) {
  .penelitian-stats {
    grid-template-columns: 1fr
  }
}


/* PATCH_005_WORKFLOW_15_FASE_ENTERPRISE */
.workflow-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px
}

.workflow-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 28px;
  margin-bottom: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #061b3a, #0b2d5c);
  color: #fff;
  box-shadow: 0 24px 60px rgba(6, 27, 58, .22);
}

.workflow-hero h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 12px 0 8px
}

.workflow-hero p {
  margin: 0;
  color: #dbe7f6
}

.workflow-progress-circle {
  width: 150px;
  height: 150px;
  min-width: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
}

.workflow-progress-circle strong {
  font-size: 34px;
  line-height: 1;
  color: #f2c86b
}

.workflow-progress-circle span {
  font-size: 13px;
  color: #dbe7f6
}

.workflow-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.workflow-step {
  border: 1px solid rgba(6, 27, 58, .10);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  min-height: 100px;
  box-shadow: 0 8px 22px rgba(6, 27, 58, .06);
}

.workflow-step .workflow-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 10px;
}

.workflow-step.done .workflow-dot {
  background: #198754;
  color: #fff
}

.workflow-step.active {
  border-color: #d8aa4a;
  box-shadow: 0 12px 30px rgba(216, 170, 74, .18)
}

.workflow-step.active .workflow-dot {
  background: #d8aa4a;
  color: #061b3a
}

.workflow-step.pending .workflow-dot {
  background: #e5e7eb;
  color: #6b7280
}

.workflow-step strong {
  display: block;
  color: #061b3a;
  font-size: 13px
}

.workflow-step small {
  display: block;
  color: #6b7280;
  margin-top: 5px
}

.workflow-note {
  border-left: 4px solid #d8aa4a;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 12px;
}

.workflow-note strong {
  display: block;
  color: #061b3a
}

.workflow-note small {
  display: block;
  color: #6b7280;
  font-size: 12px
}

.workflow-note p {
  margin: 8px 0 0
}

@media(max-width:1200px) {
  .workflow-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:768px) {
  .workflow-stats {
    grid-template-columns: 1fr
  }

  .workflow-hero {
    flex-direction: column;
    align-items: flex-start
  }

  .workflow-timeline {
    grid-template-columns: 1fr
  }
}


/* PATCH_006_REPOSITORY_DOKUMEN */
.repository-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px
}

.repository-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 28px;
  margin-bottom: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #061b3a, #0b2d5c);
  color: #fff;
  box-shadow: 0 24px 60px rgba(6, 27, 58, .22);
}

.repository-hero h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 12px 0 8px
}

.repository-hero p {
  margin: 0;
  color: #dbe7f6
}

@media(max-width:768px) {
  .repository-stats {
    grid-template-columns: 1fr
  }

  .repository-hero {
    flex-direction: column;
    align-items: flex-start
  }
}

/* PATCH_007_MONITORING_DASHBOARD_WORKFLOW_ENTERPRISE */
.monitoring-header {
  align-items: flex-start
}

.monitoring-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px
}

.monitoring-stats .sonaf-stat-card {
  min-height: 116px
}

.monitoring-stats .sonaf-stat-icon {
  background: linear-gradient(135deg, var(--navy, #061b3a), #07376e);
  color: var(--gold, #d8ad4f)
}

.mini-progress {
  height: 9px;
  background: #e8eef7;
  border-radius: 999px;
  overflow: hidden;
  min-width: 95px
}

.mini-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b5ed7, #20c997);
  border-radius: 999px
}

.monitoring-print-title {
  display: none
}

@media print {

  .admin-sidebar,
  .admin-topbar,
  .monitoring-header .btn,
  .dataTables_length,
  .dataTables_filter,
  .dataTables_info,
  .dataTables_paginate {
    display: none !important
  }

  .admin-main {
    margin-left: 0 !important;
    width: 100% !important
  }

  .admin-content {
    padding: 0 !important
  }

  .premium-card,
  .sonaf-stat-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important
  }

  .monitoring-stats {
    grid-template-columns: repeat(4, 1fr) !important
  }

  .chart-grid canvas,
  canvas {
    max-height: 220px !important
  }

  .monitoring-print-title {
    display: block !important
  }
}

@media(max-width:1200px) {
  .monitoring-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:768px) {
  .monitoring-stats {
    grid-template-columns: 1fr
  }
}

/* PATCH_009 - Workflow penelitian berbasis mekanisme kegiatan penelitian */
.workflow-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.workflow-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(10, 35, 66, .12);
  color: #0b2342;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(10, 35, 66, .06)
}

.workflow-tabs a.active {
  background: #0b2342;
  color: #fff;
  border-color: #0b2342
}

.research-flow-wrap {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(10, 35, 66, .10);
  overflow-x: auto
}

.research-flow-grid {
  position: relative;
  min-width: 760px;
  min-height: 650px;
  display: flex;
  justify-content: center
}

.flow-main {
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  z-index: 2
}

.flow-box {
  width: 250px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  border-radius: 8px;
  border: 2px solid #4f9a4f;
  box-shadow: 0 8px 18px rgba(36, 99, 36, .08);
  line-height: 1.25
}

.flow-box.core {
  background: #dff2d7;
  color: #0f2f18
}

.flow-arrow {
  width: 2px;
  height: 34px;
  background: #111;
  position: relative;
  margin: 0
}

.flow-arrow:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #111
}

.support {
  position: absolute;
  width: 145px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  line-height: 1.2;
  z-index: 2
}

.support-left {
  left: 85px;
  background: #f8d6d6;
  color: #6b1111;
  border: 2px solid #d92323
}

.support-right {
  right: 85px;
  background: #fff1b8;
  color: #4d3700;
  border: 2px solid #e4a300
}

.support-top {
  top: 120px
}

.support-surveyor {
  top: 120px
}

.support-forum {
  top: 360px
}

.support-bottom {
  top: 450px
}

.support-seminar {
  top: 450px
}

.support:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background: #111;
  width: 170px;
  z-index: -1
}

.support-left:before {
  left: 100%
}

.support-right:before {
  right: 100%
}

.flow-output {
  min-width: 760px;
  display: flex;
  justify-content: center;
  gap: 28px;
  position: relative;
  margin-top: 18px;
  padding-top: 35px
}

.flow-output:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 30px;
  width: 2px;
  background: #111
}

.flow-output:after {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(50% - 240px);
  right: calc(50% - 240px);
  height: 2px;
  background: #111
}

.output-pill {
  width: 170px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #cfe6ff;
  border: 2px solid #256fd6;
  color: #062b61;
  font-weight: 800;
  line-height: 1.2
}

.flow-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #4a5870
}

.legend-box {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px
}

.legend-box.core {
  background: #dff2d7;
  border: 1px solid #4f9a4f
}

.support-red {
  background: #f8d6d6;
  border: 1px solid #d92323
}

.support-yellow {
  background: #fff1b8;
  border: 1px solid #e4a300
}

.output-blue {
  background: #cfe6ff;
  border: 1px solid #256fd6
}

@media(max-width:900px) {

  .research-flow-grid,
  .flow-output {
    min-width: 720px
  }

  .support-left {
    left: 55px
  }

  .support-right {
    right: 55px
  }
}

@media print {

  .admin-sidebar,
  .admin-topbar,
  .workflow-tabs,
  .btn {
    display: none !important
  }

  .admin-main,
  .admin-content {
    margin: 0 !important;
    padding: 0 !important
  }

  .premium-card {
    box-shadow: none !important;
    border: 0 !important
  }

  .research-flow-wrap {
    border: 0 !important
  }
}


/* PATCH_024_PENELITIAN_PAGE_CLEANUP */
.penelitian-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.penelitian-clean-table {
  table-layout: fixed;
  margin-bottom: 0 !important;
}

.penelitian-clean-table thead th {
  white-space: nowrap;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0b2342;
  background: #f8fafc;
  border-bottom: 1px solid rgba(10, 35, 66, .10) !important;
  padding: 14px 12px !important;
}

.penelitian-clean-table tbody td {
  padding: 16px 12px !important;
  vertical-align: middle !important;
  border-color: rgba(10, 35, 66, .08) !important;
}

.penelitian-clean-table tbody tr:hover {
  background: #f8fbff;
}

.penelitian-title-cell {
  min-width: 0
}

.penelitian-code {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef4ff;
  color: #0b3d78;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
  white-space: nowrap;
}

.penelitian-title {
  color: #111827;
  font-weight: 800;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: anywhere;
}

.penelitian-meta-cell strong {
  color: #0b2342;
  font-weight: 900;
}

.penelitian-meta-cell small {
  display: block;
  color: #64748b;
  line-height: 1.35;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.penelitian-status-cell small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 5px;
}

.sonaf-badge-soft {
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 800;
  text-transform: capitalize;
}

.penelitian-progress {
  height: 8px;
  width: 100%;
  background: #e8eef7;
  border-radius: 999px;
  overflow: hidden;
}

.penelitian-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b3d78, #d8aa4a);
  border-radius: 999px;
}

.penelitian-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.penelitian-actions .btn {
  min-width: 82px;
  border-radius: 9px;
  font-weight: 800;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#penelitianTable_wrapper .dataTables_length,
#penelitianTable_wrapper .dataTables_filter {
  margin-bottom: 14px;
}

#penelitianTable_wrapper .dataTables_filter input,
#penelitianTable_wrapper .dataTables_length select {
  border-radius: 10px;
  border: 1px solid rgba(10, 35, 66, .16);
  padding: 7px 10px;
}

@media(max-width:992px) {
  .penelitian-clean-table {
    min-width: 980px;
    table-layout: auto
  }

  .penelitian-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
  }
}


/* PATCH_026B_ENTERPRISE_UI_SAFE
   Perapian kolom aksi tabel tanpa mengubah menu, route, controller, model, atau database. */
.table td:last-child,
.dataTable td:last-child {
  vertical-align: middle !important;
}

.sonaf-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: max-content;
}

.sonaf-action-group .btn {
  min-height: 31px;
  padding: 5px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.sonaf-action-group .btn i {
  font-size: 12px;
  line-height: 1;
}

.sonaf-status-badge {
  border-radius: 999px !important;
  padding: 6px 9px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

.sonaf-phase-pill {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  border-radius: 999px;
  background: #eef4ff;
  color: #0b3d78;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
  line-height: 1.2;
}

.sonaf-table-title {
  max-width: 260px;
  color: #111827;
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sonaf-progress-wrap {
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sonaf-progress-bar {
  flex: 1;
  height: 8px;
  background: #e8eef7;
  border-radius: 999px;
  overflow: hidden;
}

.sonaf-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b3d78, #d8aa4a);
  border-radius: 999px;
}

.sonaf-progress-wrap small {
  min-width: 34px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

#workflowTable,
#repositoryTable,
#masterTable,
#usersTable,
#penelitianTable {
  vertical-align: middle;
}

#workflowTable tbody td,
#repositoryTable tbody td,
#masterTable tbody td,
#usersTable tbody td,
#penelitianTable tbody td {
  vertical-align: middle !important;
}

@media(max-width:768px) {
  .sonaf-action-group {
    justify-content: flex-start;
  }

  .sonaf-action-group .btn span {
    display: none;
  }

  .sonaf-action-group .btn {
    width: 34px;
    height: 32px;
    padding: 0 !important;
  }

  .sonaf-table-title {
    max-width: 220px;
  }
}

/* PATCH_028_PORTAL_RESEARCH_STATUS_DASHBOARD */
.portal-hero-data {
  align-items: flex-start;
  gap: 28px;
  min-height: calc(100vh - 120px);
  padding-top: 32px;
  padding-bottom: 52px
}

.portal-card-main {
  flex: 0 0 min(520px, 42vw)
}

.portal-data-panel {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .94);
  color: #10213f;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px)
}

.portal-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px
}

.portal-section-head span {
  display: block;
  color: #6b7890;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.4px
}

.portal-section-head strong {
  display: block;
  color: #071d3e;
  font-size: 22px
}

.portal-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px
}

.portal-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  padding: 17px 16px;
  border: 1px solid rgba(7, 29, 62, .08);
  box-shadow: 0 14px 32px rgba(9, 28, 60, .10);
  background: #fff;
  min-height: 112px
}

.portal-status-card strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  color: #071d3e
}

.portal-status-card span {
  display: block;
  font-weight: 950;
  color: #172b4d
}

.portal-status-card small {
  display: block;
  color: #6b7890;
  margin-top: 3px
}

.portal-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #f4f7fb
}

.portal-status-card.red {
  border-left: 6px solid #dc2626
}

.portal-status-card.red .portal-status-icon {
  color: #dc2626;
  background: #fee2e2
}

.portal-status-card.yellow {
  border-left: 6px solid #eab308
}

.portal-status-card.yellow .portal-status-icon {
  color: #ca8a04;
  background: #fef3c7
}

.portal-status-card.orange {
  border-left: 6px solid #f97316
}

.portal-status-card.orange .portal-status-icon {
  color: #ea580c;
  background: #ffedd5
}

.portal-status-card.green {
  border-left: 6px solid #16a34a
}

.portal-status-card.green .portal-status-icon {
  color: #16a34a;
  background: #dcfce7
}

.portal-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px
}

.portal-mini-grid div {
  background: #f7f9fc;
  border: 1px solid #e3e9f3;
  border-radius: 18px;
  padding: 14px
}

.portal-mini-grid strong {
  display: block;
  font-size: 24px;
  color: #071d3e
}

.portal-mini-grid span {
  display: block;
  color: #697386;
  font-weight: 800;
  font-size: 13px
}

.portal-table-card {
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 22px;
  overflow: hidden
}

.portal-table-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 17px 18px;
  border-bottom: 1px solid #e3e9f3
}

.portal-table-title strong {
  font-size: 18px;
  color: #071d3e
}

.portal-table-title span {
  color: #697386;
  font-weight: 800;
  font-size: 13px
}

.portal-table-wrap {
  overflow: auto
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px
}

.portal-table th {
  background: #f5f8fc;
  color: #4b5870;
  text-align: left;
  padding: 13px 15px;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase
}

.portal-table td {
  padding: 14px 15px;
  border-top: 1px solid #edf1f6;
  vertical-align: middle
}

.portal-table td strong {
  display: block;
  max-width: 360px;
  color: #112545;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-table td span {
  display: block;
  color: #778299;
  font-size: 12px;
  margin-top: 3px
}

.portal-empty {
  text-align: center;
  color: #697386;
  padding: 26px !important
}

.portal-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap
}

.portal-status-badge.red {
  background: #fee2e2;
  color: #991b1b
}

.portal-status-badge.yellow {
  background: #fef3c7;
  color: #92400e
}

.portal-status-badge.orange {
  background: #ffedd5;
  color: #9a3412
}

.portal-status-badge.green {
  background: #dcfce7;
  color: #166534
}

.portal-progress {
  height: 9px;
  background: #e7edf6;
  border-radius: 999px;
  overflow: hidden;
  min-width: 120px
}

.portal-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f97316, #f5cd6d);
  border-radius: 999px
}

.portal-table td small {
  display: block;
  margin-top: 5px;
  color: #697386;
  font-weight: 900
}

@media(max-width:1180px) {
  .portal-hero-data {
    display: block
  }

  .portal-card-main {
    max-width: none;
    margin-bottom: 20px
  }

  .portal-status-grid,
  .portal-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:680px) {

  .portal-status-grid,
  .portal-mini-grid {
    grid-template-columns: 1fr
  }

  .portal-data-panel {
    padding: 16px;
    border-radius: 22px
  }

  .portal-section-head,
  .portal-table-title {
    display: block
  }

  .portal-card-main {
    padding: 30px
  }

  .portal-card h1 {
    font-size: 38px
  }

  .portal-actions {
    align-items: flex-start;
    flex-direction: column
  }

  .portal-nav {
    gap: 14px;
    align-items: flex-start;
    flex-direction: column
  }

  .portal-login-btn {
    display: inline-flex
  }

  .portal-status-card strong {
    font-size: 28px
  }
}

/* PATCH_029_PORTAL_PUBLIC_INFORMATION_CENTER */
.portal-brand-link {
  color: #fff;
  text-decoration: none
}

.portal-nav-menu {
  gap: 18px
}

.portal-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.portal-menu a {
  color: #fff;
  font-weight: 900;
  border-radius: 14px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none
}

.portal-menu a:hover,
.portal-menu a.active {
  background: rgba(216, 173, 79, .22);
  border-color: rgba(245, 205, 109, .45);
  color: #ffe4a8
}

.portal-menu .portal-login-btn {
  color: #061b3a;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  border: 0
}

.portal-page {
  position: relative;
  z-index: 2;
  padding: 24px 7vw 60px
}

.portal-page-hero {
  border-radius: 30px;
  background: rgba(6, 27, 58, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  padding: 34px 38px;
  margin-bottom: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22)
}

.portal-page-hero h1 {
  font-size: 46px;
  line-height: 1;
  margin: 16px 0 10px
}

.portal-page-hero p {
  max-width: 780px;
  color: #eaf2ff;
  font-size: 18px
}

.portal-content-card,
.portal-guide-card,
.portal-guide-toc {
  background: rgba(255, 255, 255, .95);
  color: #10213f;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .20)
}

.portal-content-card {
  padding: 24px
}

.portal-filterbar {
  display: grid;
  grid-template-columns: 1.5fr .5fr .7fr;
  gap: 12px;
  margin-bottom: 18px
}

.portal-filterbar input,
.portal-filterbar select {
  border: 1px solid #dbe4f0;
  border-radius: 15px;
  padding: 13px 14px;
  font-weight: 800;
  color: #10213f;
  background: #fff;
  outline: none
}

.portal-filterbar input:focus,
.portal-filterbar select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 173, 79, .15)
}

.portal-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px
}

.portal-doc-card {
  display: flex;
  gap: 15px;
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(9, 28, 60, .08)
}

.portal-doc-ext {
  flex: 0 0 58px;
  height: 58px;
  border-radius: 17px;
  background: linear-gradient(135deg, #071d3e, #123b70);
  color: #f5cd6d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 13px
}

.portal-doc-body {
  min-width: 0;
  flex: 1
}

.portal-doc-body h3 {
  margin: 0 0 6px;
  color: #071d3e;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-doc-body p {
  margin: 0 0 10px;
  color: #4b5870;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-doc-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.portal-doc-meta span {
  background: #f3f6fb;
  color: #53627a;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900
}

.portal-doc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.portal-doc-footer small {
  color: #748097;
  font-weight: 800
}

.portal-doc-footer a,
.portal-table-title a {
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: #061b3a;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap
}

.portal-empty-card {
  grid-column: 1/-1;
  background: #fff;
  border-radius: 18px;
  border: 1px dashed #d3dceb
}

.portal-guide-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start
}

.portal-guide-toc {
  position: sticky;
  top: 20px;
  padding: 18px
}

.portal-guide-toc strong {
  display: block;
  color: #071d3e;
  margin-bottom: 12px;
  font-size: 18px
}

.portal-guide-toc a {
  display: block;
  color: #53627a;
  font-weight: 900;
  padding: 11px 10px;
  border-radius: 12px;
  text-decoration: none
}

.portal-guide-toc a:hover {
  background: #f3f6fb;
  color: #071d3e
}

.portal-guide-card {
  padding: 30px 34px
}

.portal-guide-card section {
  padding: 18px 0;
  border-bottom: 1px solid #e6edf5
}

.portal-guide-card section:last-child {
  border-bottom: 0
}

.portal-guide-card h2 {
  margin: 0 0 8px;
  color: #071d3e
}

.portal-guide-card p {
  margin: 0;
  color: #4b5870;
  font-size: 16px;
  line-height: 1.65
}

.portal-doc-latest {
  margin-top: 18px
}

.portal-doc-list-mini {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.portal-doc-list-mini a {
  display: block;
  background: #f7f9fc;
  border: 1px solid #e3e9f3;
  border-radius: 15px;
  padding: 12px;
  text-decoration: none
}

.portal-doc-list-mini b {
  display: block;
  color: #071d3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-doc-list-mini span {
  display: block;
  color: #697386;
  font-size: 12px;
  font-weight: 800;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

@media(max-width:900px) {

  .portal-filterbar,
  .portal-doc-grid,
  .portal-guide-layout,
  .portal-doc-list-mini {
    grid-template-columns: 1fr
  }

  .portal-guide-toc {
    position: relative;
    top: 0
  }

  .portal-page-hero h1 {
    font-size: 36px
  }

  .portal-menu {
    justify-content: flex-start
  }
}

/* PATCH_030_PORTAL_REPOSITORY_SCIENTIFIC_VIEW */
.portal-repository-page {
  padding-top: 18px
}

.portal-repo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 28px;
  align-items: end
}

.portal-repo-searchbox {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  padding: 10px;
  backdrop-filter: blur(10px)
}

.portal-repo-searchbox input {
  flex: 1;
  border: 0;
  border-radius: 15px;
  padding: 15px 16px;
  font-weight: 800;
  color: #10213f;
  outline: none
}

.portal-repo-searchbox button,
.portal-repo-toolbar button {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: #061b3a;
  font-weight: 950;
  padding: 12px 18px
}

.portal-repo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 20px
}

.portal-repo-stats article {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .96);
  color: #10213f;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18)
}

.portal-repo-stats span {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: #f3f6fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px
}

.portal-repo-stats strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: #071d3e
}

.portal-repo-stats small {
  display: block;
  color: #697386;
  font-weight: 900
}

.portal-repo-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start
}

.portal-repo-sidebar {
  display: grid;
  gap: 16px
}

.portal-side-card,
.portal-repo-main {
  background: rgba(255, 255, 255, .96);
  color: #10213f;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 24px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .18)
}

.portal-side-card {
  padding: 18px
}

.portal-side-card>strong {
  display: block;
  color: #071d3e;
  font-size: 17px;
  margin-bottom: 13px
}

.portal-side-card select {
  width: 100%;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  padding: 12px 13px;
  margin: 7px 0;
  font-weight: 850;
  color: #10213f;
  background: #fff;
  outline: none
}

.portal-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.portal-tag-cloud button,
.portal-tag-cloud span {
  border: 1px solid #e3e9f3;
  background: #f7f9fc;
  color: #53627a;
  border-radius: 999px;
  padding: 8px 11px;
  font-weight: 900;
  font-size: 12px
}

.portal-tag-cloud button {
  cursor: pointer
}

.portal-tag-cloud b {
  color: #071d3e;
  margin-left: 4px
}

.portal-side-list {
  display: grid;
  gap: 9px;
  counter-reset: sideitem
}

.portal-side-list a {
  display: block;
  border: 1px solid #e3e9f3;
  background: #f7f9fc;
  border-radius: 15px;
  padding: 11px 12px;
  text-decoration: none;
  position: relative
}

.portal-side-list.numbered a {
  padding-left: 42px;
  counter-increment: sideitem
}

.portal-side-list.numbered a:before {
  content: counter(sideitem);
  position: absolute;
  left: 12px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #071d3e;
  color: #f5cd6d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 950
}

.portal-side-list b {
  display: block;
  color: #071d3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-side-list small {
  display: block;
  color: #697386;
  font-weight: 800;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.portal-side-empty {
  display: block;
  color: #697386;
  background: #f7f9fc;
  border-radius: 14px;
  padding: 12px
}

.portal-repo-main {
  padding: 18px
}

.portal-repo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e3e9f3;
  padding: 0 0 16px;
  margin-bottom: 16px
}

.portal-repo-toolbar strong {
  display: block;
  color: #071d3e;
  font-size: 20px
}

.portal-repo-toolbar span {
  display: block;
  color: #697386;
  font-weight: 800
}

.portal-repo-toolbar button {
  background: #f3f6fb;
  color: #071d3e;
  border: 1px solid #e3e9f3
}

.portal-research-list {
  display: grid;
  gap: 16px
}

.portal-research-card {
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(9, 28, 60, .08);
  overflow: hidden
}

.portal-research-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #edf1f6
}

.portal-research-head span {
  display: block;
  color: #697386;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase
}

.portal-research-head h2 {
  margin: 7px 0;
  color: #071d3e;
  font-size: 20px;
  line-height: 1.25
}

.portal-research-head p {
  margin: 0;
  color: #53627a;
  font-weight: 800
}

.portal-research-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #edf1f6
}

.portal-research-metrics span {
  border: 1px solid #e3e9f3;
  background: #fff;
  border-radius: 999px;
  padding: 8px 11px;
  color: #53627a;
  font-weight: 850;
  font-size: 12px
}

.portal-research-metrics b {
  color: #071d3e
}

.portal-research-docs {
  display: grid;
  gap: 10px;
  padding: 16px 20px
}

.portal-research-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #e7edf6;
  background: #fbfcfe;
  border-radius: 16px;
  padding: 12px 13px
}

.portal-research-doc b {
  display: block;
  color: #071d3e
}

.portal-research-doc small {
  display: block;
  color: #697386;
  font-weight: 800;
  margin-top: 3px
}

.portal-doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.portal-doc-actions a,
.portal-doc-actions button {
  border: 0;
  text-decoration: none;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap
}

.portal-doc-actions a {
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: #061b3a
}

.portal-doc-actions button {
  background: #071d3e;
  color: #fff;
  cursor: pointer
}

.portal-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 11, 24, .78);
  padding: 4vh 5vw
}

.portal-preview-modal.show {
  display: block
}

.portal-preview-box {
  height: 92vh;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38)
}

.portal-preview-box button {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 2;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #071d3e;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer
}

.portal-preview-box iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.portal-doc-grid {
  display: none
}

@media(max-width:1100px) {

  .portal-repo-hero,
  .portal-repo-layout {
    grid-template-columns: 1fr
  }

  .portal-repo-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .portal-repo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:700px) {

  .portal-repo-searchbox,
  .portal-repo-toolbar,
  .portal-research-head,
  .portal-research-doc {
    display: block
  }

  .portal-repo-searchbox button {
    width: 100%;
    margin-top: 10px
  }

  .portal-repo-sidebar,
  .portal-repo-stats {
    grid-template-columns: 1fr
  }

  .portal-research-head .portal-status-badge {
    margin-top: 12px
  }

  .portal-doc-actions {
    justify-content: flex-start;
    margin-top: 10px
  }

  .portal-repo-stats article {
    padding: 16px
  }

  .portal-repo-stats strong {
    font-size: 26px
  }
}

/* PATCH_032_MONITORING_ENTERPRISE_DASHBOARD_REDESIGN */
.monitoring-enterprise-page {
  padding: 24px 0 36px;
}

.monitoring-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #071d3e, #123b70);
  color: #fff;
  box-shadow: 0 20px 48px rgba(7, 29, 62, .22);
}

.monitoring-eyebrow {
  display: block;
  color: #f5cd6d;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-size: 12px;
  margin-bottom: 6px;
}

.monitoring-hero-card h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 950;
}

.monitoring-hero-card p {
  margin: 6px 0 0;
  color: #dbeafe;
  max-width: 760px;
  font-weight: 700;
}

.monitoring-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.monitoring-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.monitoring-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e6edf5;
  box-shadow: 0 16px 34px rgba(9, 28, 60, .08);
}

.monitoring-kpi small {
  display: block;
  color: #64748b;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.monitoring-kpi strong {
  display: block;
  margin-top: 3px;
  color: #071d3e;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 48px;
}

.kpi-icon.navy {
  background: #e9f0ff;
  color: #0b3d78
}

.kpi-icon.orange {
  background: #ffedd5;
  color: #f97316
}

.kpi-icon.green {
  background: #dcfce7;
  color: #16a34a
}

.kpi-icon.red {
  background: #fee2e2;
  color: #dc2626
}

.kpi-icon.blue {
  background: #dbeafe;
  color: #2563eb
}

.kpi-icon.yellow {
  background: #fef3c7;
  color: #ca8a04
}

.kpi-icon.purple {
  background: #ede9fe;
  color: #7c3aed
}

.kpi-icon.grey {
  background: #f1f5f9;
  color: #475569
}

.monitoring-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.monitoring-alert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.monitoring-panel {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 18px 42px rgba(9, 28, 60, .08);
  overflow: hidden;
}

.monitoring-panel canvas {
  width: 100% !important;
  height: 260px !important;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-head strong {
  display: block;
  color: #071d3e;
  font-size: 18px;
  font-weight: 950;
}

.panel-head span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.compact-panel {
  min-height: 250px;
}

.monitoring-list {
  display: grid;
  gap: 10px;
}

.monitoring-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #e7edf6;
  background: #f8fafc;
  border-radius: 16px;
}

.monitoring-list-item b {
  display: block;
  color: #071d3e;
  font-weight: 950;
}

.monitoring-list-item span {
  display: block;
  max-width: 430px;
  color: #475569;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitoring-list-item em {
  font-style: normal;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.monitoring-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  font-weight: 850;
}

.monitoring-table-panel {
  padding: 20px;
}

.monitoring-table {
  min-width: 1120px;
  border-collapse: separate !important;
  border-spacing: 0;
}

.monitoring-table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 950 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 14px !important;
  white-space: nowrap;
}

.monitoring-table tbody td {
  padding: 16px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #10213f;
}

.monitoring-table tbody tr:hover td {
  background: #f8fafc !important;
}

.monitoring-title {
  max-width: 260px;
  color: #071d3e;
  font-weight: 850;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.code-cell {
  color: #0b3d78 !important;
  font-weight: 950;
  white-space: nowrap;
}

.phase-chip,
.status-chip,
.sla-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  line-height: 1;
}

.phase-chip {
  background: #eef4ff;
  color: #0b3d78;
  border: 1px solid #dbeafe;
  white-space: normal;
  line-height: 1.25;
  max-width: 180px;
  border-radius: 14px;
}

.status-chip.primary {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe
}

.status-chip.info {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd
}

.status-chip.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0
}

.status-chip.warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a
}

.status-chip.danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca
}

.status-chip.orange {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa
}

.status-chip.secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0
}

.sla-chip.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0
}

.sla-chip.warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a
}

.sla-chip.danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca
}

.progress-cell {
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.progress-track {
  width: 88px;
  height: 9px;
  background: #e8eef7;
  border-radius: 999px;
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b76e0, #19c5a4);
}

.progress-cell b {
  color: #0f172a;
  font-size: 12px;
  min-width: 34px;
}

.monitoring-action-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.monitoring-action-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 10px !important;
  font-weight: 900 !important;
}

.monitoring-action-column {
  text-align: center !important;
}

.monitoring-progress-column {
  min-width: 140px !important;
}

.monitoring-enterprise-page .dataTables_wrapper .row {
  align-items: center;
  row-gap: 12px;
}

.monitoring-enterprise-page .dataTables_filter input,
.monitoring-enterprise-page .dataTables_length select {
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  padding: 8px 10px;
  outline: none;
}

.monitoring-enterprise-page .dataTables_filter input:focus,
.monitoring-enterprise-page .dataTables_length select:focus {
  border-color: #d8aa4a;
  box-shadow: 0 0 0 4px rgba(216, 170, 74, .14);
}

@media(max-width:1180px) {
  .monitoring-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-chart-grid,
  .monitoring-alert-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:700px) {
  .monitoring-hero-card {
    display: block;
    padding: 18px;
    border-radius: 20px;
  }

  .monitoring-hero-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }

  .monitoring-kpi-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-panel {
    padding: 15px;
    border-radius: 20px;
  }

  .panel-head {
    display: block;
  }
}

/* PATCH_033_MONITORING_VIEWPORT_CROP_FIX
   Perapian Monitoring Enterprise berdasarkan acuan visual: mencegah tombol/header/card/tabel terpotong
   tanpa mengubah controller, model, route, database, atau logika workflow. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.admin-main,
.admin-content,
.monitoring-enterprise-page {
  min-width: 0;
}

.admin-topbar,
.top-actions,
.user-menu {
  overflow: visible !important;
}

.admin-topbar {
  min-height: 92px;
  height: auto;
  padding-right: 26px !important;
  flex-wrap: nowrap;
}

.top-toggle {
  flex: 0 0 44px;
  position: relative;
  z-index: 2;
}

.top-title {
  min-width: 0;
  flex: 1 1 auto;
}

.top-title strong,
.top-title span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions {
  flex: 0 0 auto;
  min-width: max-content;
  position: relative;
  z-index: 50;
}

.user-menu button,
.sonaf-user-btn {
  max-width: 260px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitoring-enterprise-page {
  width: 100%;
  padding: 24px 0 38px;
}

.monitoring-hero-card {
  width: 100%;
  overflow: visible;
}

.monitoring-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  align-items: stretch;
}

.monitoring-kpi {
  min-width: 0;
  overflow: hidden;
}

.monitoring-kpi small {
  line-height: 1.2;
}

.monitoring-chart-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.monitoring-alert-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.monitoring-panel {
  min-width: 0;
}

.monitoring-panel canvas {
  display: block;
  max-width: 100%;
}

.monitoring-table-panel {
  width: 100%;
  overflow: visible;
}

.monitoring-table-panel .table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.monitoring-table {
  min-width: 1180px;
  margin-bottom: 0 !important;
}

.monitoring-table th:last-child,
.monitoring-table td:last-child {
  min-width: 120px;
  text-align: center !important;
}

.monitoring-action-group {
  min-width: max-content;
}

.monitoring-action-group .btn {
  white-space: nowrap !important;
  flex: 0 0 auto;
}

.monitoring-enterprise-page .dataTables_wrapper {
  width: 100%;
  overflow: visible;
}

.monitoring-enterprise-page .dataTables_wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.monitoring-enterprise-page .dataTables_filter {
  text-align: right !important;
}

.monitoring-enterprise-page .dataTables_filter input {
  max-width: 260px;
  width: min(260px, 70vw) !important;
}

@media(min-width:1500px) {
  .monitoring-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .monitoring-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:1100px) {
  .admin-topbar {
    gap: 12px;
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  .top-actions {
    gap: 8px;
  }

  .user-menu button,
  .sonaf-user-btn {
    max-width: 190px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .monitoring-hero-card {
    display: block;
  }

  .monitoring-hero-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
}

@media(max-width:820px) {
  .admin-content {
    padding: 22px 16px !important;
  }

  .top-title strong {
    font-size: 17px;
  }

  .top-title span {
    display: block;
    font-size: 12px;
  }

  .user-menu button,
  .sonaf-user-btn {
    max-width: 150px;
  }

  .monitoring-chart-grid,
  .monitoring-alert-grid {
    grid-template-columns: 1fr !important;
  }

  .monitoring-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:560px) {
  .top-actions .top-portal {
    display: none !important;
  }

  .user-menu button,
  .sonaf-user-btn {
    max-width: 120px;
  }

  .monitoring-hero-card h2 {
    font-size: 22px;
  }

  .monitoring-hero-card p {
    font-size: 13px;
  }

  .monitoring-panel canvas {
    height: 220px !important;
  }
}


/* PATCH_034_MONITORING_STATUS_BADGE_OVERFLOW_FIX
   Fix badge fase/status pada kartu Review Tertunda dan Approval Tertunda agar tidak terpotong.
   Perubahan hanya CSS, tidak mengubah logika aplikasi. */
.monitoring-alert-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
}

.monitoring-alert-grid .monitoring-panel,
.monitoring-alert-grid .compact-panel {
  overflow: visible !important;
  min-width: 0 !important;
}

.monitoring-alert-grid .monitoring-list {
  overflow: visible !important;
}

.monitoring-alert-grid .monitoring-list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 13px 14px !important;
}

.monitoring-alert-grid .monitoring-list-item>div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 170px) !important;
}

.monitoring-alert-grid .monitoring-list-item b {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.monitoring-alert-grid .monitoring-list-item span {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.monitoring-alert-grid .monitoring-list-item em {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 118px !important;
  max-width: 190px !important;
  padding: 8px 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
}

@media(max-width:980px) {
  .monitoring-alert-grid {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width:620px) {
  .monitoring-alert-grid .monitoring-list-item {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .monitoring-alert-grid .monitoring-list-item>div {
    max-width: 100% !important;
    width: 100% !important;
  }

  .monitoring-alert-grid .monitoring-list-item em {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* PATCH_035_LAPORAN_ANALITIK_ENTERPRISE_REDESIGN */
.laporan-enterprise-page {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden
}

.laporan-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #061b3a, #113a66);
  color: #fff;
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow: 0 18px 38px rgba(9, 28, 60, .16)
}

.laporan-hero h3 {
  margin: 8px 0 6px;
  font-size: 24px;
  font-weight: 950
}

.laporan-hero p {
  margin: 0;
  color: #dce8f7
}

.laporan-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffe3a6
}

.laporan-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: max-content
}

.laporan-hero-actions .btn {
  border-radius: 13px;
  font-weight: 900;
  padding: 10px 14px
}

.laporan-filter-card {
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 18px 38px rgba(9, 28, 60, .09)
}

.laporan-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px
}

.laporan-filter-head h5 {
  margin: 0 0 4px;
  color: #061b3a;
  font-weight: 950
}

.laporan-filter-head small {
  color: #65758b
}

.laporan-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f4f7fb;
  color: #334155;
  font-weight: 900
}

.laporan-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 180px;
  gap: 14px;
  align-items: end
}

.laporan-field label {
  display: block;
  margin: 0 0 7px;
  color: #061b3a;
  font-weight: 900
}

.laporan-field .form-select,
.laporan-field .form-control {
  border-radius: 14px;
  border: 1px solid #d8e1ee;
  padding: 11px 13px
}

.laporan-filter-action .btn {
  border-radius: 14px;
  font-weight: 950;
  padding: 11px 14px
}

.laporan-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px
}

.laporan-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 34px rgba(9, 28, 60, .08);
  overflow: hidden
}

.laporan-stat-card span {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px
}

.laporan-stat-card small {
  display: block;
  color: #65758b;
  font-weight: 900;
  margin-bottom: 5px
}

.laporan-stat-card strong {
  display: block;
  color: #061b3a;
  font-size: 30px;
  line-height: 1;
  font-weight: 950
}

.laporan-stat-card.stat-total span {
  background: linear-gradient(135deg, #0b5ed7, #13b6d4)
}

.laporan-stat-card.stat-active span {
  background: linear-gradient(135deg, #f59e0b, #f97316)
}

.laporan-stat-card.stat-done span {
  background: linear-gradient(135deg, #16a34a, #22c55e)
}

.laporan-stat-card.stat-late span {
  background: linear-gradient(135deg, #dc2626, #f43f5e)
}

.laporan-stat-card.stat-progress span {
  background: linear-gradient(135deg, #061b3a, #0f4c81)
}

.laporan-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px
}

.laporan-chart-card,
.laporan-table-card {
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(9, 28, 60, .08);
  padding: 20px;
  overflow: hidden
}

.laporan-chart-card.chart-wide {
  grid-column: auto
}

.laporan-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.laporan-card-title h5 {
  margin: 0;
  color: #061b3a;
  font-weight: 950;
  font-size: 16px
}

.laporan-card-title small {
  color: #65758b;
  font-weight: 700
}

.laporan-chart-wrap {
  position: relative;
  height: 280px;
  width: 100%
}

.laporan-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important
}

.laporan-table-title {
  align-items: center;
  margin-bottom: 16px
}

.laporan-table {
  margin-bottom: 0 !important
}

.laporan-table thead th {
  background: #f8fafc !important;
  color: #061b3a;
  font-weight: 950;
  border-bottom: 1px solid #dfe7f2 !important;
  white-space: nowrap;
  padding: 14px 12px !important
}

.laporan-table tbody td {
  vertical-align: middle;
  padding: 14px 12px !important;
  border-color: #edf2f7 !important
}

.laporan-table tbody tr:hover {
  background: #f8fbff
}

.laporan-title-cell {
  min-width: 240px;
  max-width: 340px;
  font-weight: 800;
  color: #243447;
  line-height: 1.35
}

.laporan-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid transparent
}

.laporan-status-badge.badge-success {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac
}

.laporan-status-badge.badge-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d
}

.laporan-status-badge.badge-orange {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74
}

.laporan-status-badge.badge-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5
}

.laporan-status-badge.badge-muted {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db
}

.laporan-progress {
  height: 9px;
  min-width: 96px;
  background: #e5eaf2;
  border-radius: 999px;
  overflow: hidden
}

.laporan-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b5ed7, #20c997)
}

.laporan-progress-text {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-weight: 900
}

.laporan-action-cell .btn {
  border-radius: 11px;
  font-weight: 900;
  white-space: nowrap
}

.laporan-table-card .dataTables_wrapper .dataTables_length,
.laporan-table-card .dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px
}

.laporan-table-card .dataTables_wrapper .dataTables_filter input {
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 8px 11px;
  margin-left: 8px
}

.laporan-table-card .dataTables_wrapper .dataTables_length select {
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  padding: 6px 26px 6px 8px;
  margin: 0 6px
}

.laporan-table-card .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px !important;
  border: 1px solid #d8e1ee !important;
  background: #fff !important;
  color: #061b3a !important;
  margin: 0 2px !important
}

.laporan-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #061b3a !important;
  color: #fff !important;
  border-color: #061b3a !important
}

@media(max-width:1400px) {
  .laporan-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .laporan-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:992px) {
  .laporan-hero {
    flex-direction: column
  }

  .laporan-hero-actions {
    justify-content: flex-start
  }

  .laporan-stat-grid,
  .laporan-chart-grid {
    grid-template-columns: 1fr
  }

  .laporan-filter-grid {
    grid-template-columns: 1fr
  }

  .laporan-chart-wrap {
    height: 250px
  }
}

@media print {

  .laporan-hero,
  .laporan-filter-card,
  .laporan-hero-actions,
  .laporan-table-card .dataTables_length,
  .laporan-table-card .dataTables_filter,
  .laporan-table-card .dataTables_info,
  .laporan-table-card .dataTables_paginate {
    display: none !important
  }

  .laporan-stat-grid {
    grid-template-columns: repeat(5, 1fr) !important
  }

  .laporan-chart-grid {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .laporan-chart-card,
  .laporan-table-card,
  .laporan-stat-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important
  }

  .laporan-chart-wrap {
    height: 220px !important
  }
}


/* PATCH_036_MONITORING_ENTERPRISE_ANALYTICS_COMPLETION
   Melengkapi panel Monitoring Enterprise dengan grafik nyata dan empty-state aman. */
.monitoring-chart-panel {
  position: relative;
  min-height: 355px;
}

.monitoring-chart-wrap {
  position: relative;
  width: 100%;
  height: 285px;
  min-height: 285px;
}

.monitoring-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

.monitoring-chart-wrap canvas.is-empty {
  opacity: .22;
}

.monitoring-chart-empty {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #64748b;
  font-weight: 950;
  background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .92));
  border: 1px dashed #d8e1ee;
  border-radius: 18px;
  z-index: 2;
}

.monitoring-chart-empty.show {
  display: flex;
}

.monitoring-chart-grid .panel-head strong {
  white-space: normal;
  line-height: 1.25;
}

.monitoring-chart-grid .panel-head span {
  text-align: right;
  line-height: 1.25;
}

@media(max-width:700px) {
  .monitoring-chart-panel {
    min-height: 330px
  }

  .monitoring-chart-wrap {
    height: 250px;
    min-height: 250px
  }

  .monitoring-chart-grid .panel-head {
    display: block
  }

  .monitoring-chart-grid .panel-head span {
    text-align: left;
    margin-top: 4px
  }
}


/* PATCH_036C_MONITORING_SERVER_RENDERED_CHART_FIX
   Grafik Monitoring Enterprise dirender server-side agar tetap tampil di hosting walau Chart.js gagal/cache. */
.monitoring-chart-wrap.html-rendered {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 285px;
  height: auto;
  padding: 12px 2px 4px;
}

.sonaf-html-chart {
  width: 100%;
  min-height: 250px;
}

.sonaf-html-chart.bar.vertical {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding: 26px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #edf2f7;
}

.sonaf-html-chart.bar.vertical .chart-col {
  flex: 1 1 0;
  max-width: 96px;
  min-width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sonaf-html-chart.bar.vertical .chart-bar-wrap {
  width: 100%;
  height: 165px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e6edf5;
}

.sonaf-html-chart.bar.vertical .chart-bar-wrap b {
  display: block;
  width: 100%;
  min-height: 6px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #d8aa4a, #061b3a);
}

.sonaf-html-chart.bar.vertical strong {
  font-size: 13px;
  color: #061b3a;
  font-weight: 950;
}

.sonaf-html-chart.bar.vertical span {
  max-width: 100%;
  font-size: 12px;
  color: #64748b;
  text-align: center;
  line-height: 1.25;
  word-break: break-word;
}

.sonaf-html-chart.bar.horizontal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #edf2f7;
}

.sonaf-html-chart.bar.horizontal .chart-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr 44px;
  align-items: center;
  gap: 12px;
}

.sonaf-html-chart.bar.horizontal .chart-label {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sonaf-html-chart.bar.horizontal .chart-track {
  height: 18px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
  border: 1px solid #e5edf6;
}

.sonaf-html-chart.bar.horizontal .chart-track b {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #061b3a, #d8aa4a);
}

.sonaf-html-chart.bar.horizontal strong {
  color: #061b3a;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.sonaf-html-donut {
  width: 100%;
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  align-items: center;
  gap: 22px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #edf2f7;
}

.sonaf-html-donut .donut-visual {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 36px rgba(15, 23, 42, .08);
}

.sonaf-html-donut .donut-visual>div {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
}

.sonaf-html-donut small {
  font-size: 12px;
  color: #64748b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sonaf-html-donut strong {
  font-size: 28px;
  color: #061b3a;
  font-weight: 950;
}

.sonaf-html-donut .donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sonaf-html-donut .donut-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.sonaf-html-donut .donut-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.sonaf-html-donut .donut-legend strong {
  font-size: 13px;
  color: #061b3a;
}

.monitoring-chart-no-data {
  width: 100%;
  min-height: 250px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  text-align: center;
}

.monitoring-chart-no-data i {
  font-size: 28px;
  color: #94a3b8;
}

.monitoring-chart-no-data strong {
  font-size: 15px;
  color: #334155;
}

.monitoring-chart-no-data span {
  font-size: 12px;
}

@media(max-width:900px) {
  .sonaf-html-donut {
    grid-template-columns: 1fr;
  }

  .sonaf-html-donut .donut-visual {
    width: 165px;
    height: 165px;
  }

  .sonaf-html-chart.bar.horizontal .chart-row {
    grid-template-columns: 110px 1fr 34px;
  }
}

/* ======================================================================
   PATCH_042_REPOSITORY_PUBLIC_UI_REFINEMENT
   Tujuan: merapikan halaman portal repository publik agar card, badge,
   statistik, dan tombol download tidak saling menindih.
   Scope: hanya CSS portal repository, tidak mengubah backend/database.
   ====================================================================== */
.portal-repository-page,
.portal-repository-page * {
  box-sizing: border-box;
}

.portal-repository-page {
  overflow-x: hidden;
}

.portal-repo-layout {
  display: grid !important;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.portal-repo-sidebar,
.portal-repo-main,
.portal-research-list,
.portal-research-card {
  min-width: 0 !important;
}

.portal-repo-main {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 20px !important;
}

.portal-repo-toolbar {
  align-items: flex-start !important;
}

.portal-research-list {
  display: grid !important;
  gap: 18px !important;
}

.portal-research-card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fff !important;
}

.portal-research-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 20px 22px !important;
  min-height: 0 !important;
}

.portal-research-head>div {
  min-width: 0 !important;
}

.portal-research-head h2 {
  max-width: 100% !important;
  margin: 8px 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.portal-research-head p {
  overflow-wrap: anywhere !important;
}

.portal-research-head .portal-status-badge,
.portal-research-card .portal-status-badge {
  align-self: start !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 76px !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 9px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

.portal-research-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  min-height: 0 !important;
}

.portal-research-metrics span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 100% !important;
}

.portal-research-docs {
  display: grid !important;
  gap: 12px !important;
  padding: 18px 22px 20px !important;
  min-height: 0 !important;
}

.portal-research-doc {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.portal-research-doc>div:first-child {
  min-width: 0 !important;
}

.portal-research-doc b,
.portal-research-doc small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.portal-doc-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: max-content !important;
}

.portal-doc-actions a,
.portal-doc-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  white-space: nowrap !important;
}

.portal-side-card {
  overflow: hidden !important;
}

.portal-side-list a,
.portal-tag-cloud button,
.portal-tag-cloud span {
  max-width: 100% !important;
}

@media(max-width:1100px) {
  .portal-repo-layout {
    grid-template-columns: 1fr !important;
  }

  .portal-repo-sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media(max-width:760px) {
  .portal-repo-sidebar {
    grid-template-columns: 1fr !important;
  }

  .portal-research-head {
    grid-template-columns: 1fr !important;
  }

  .portal-research-head .portal-status-badge,
  .portal-research-card .portal-status-badge {
    justify-self: start !important;
    margin-top: 4px !important;
  }

  .portal-research-doc {
    grid-template-columns: 1fr !important;
  }

  .portal-doc-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }
}

/* ==========================================================
   PATCH_043_REPOSITORY_SIDEBAR_TEXT_WRAP_FIX
   Tujuan: teks pada panel kiri Repository Publik (Dokumen Terbaru
   dan Dokumen Terpopuler) tidak terpotong/tersembunyi.
   Scope: CSS-only; tidak mengubah controller, model, database, atau JS.
   ========================================================== */
.portal-repository-page .portal-side-card {
  overflow: visible;
}

.portal-repository-page .portal-side-list,
.portal-repository-page .portal-doc-list-mini {
  min-width: 0;
}

.portal-repository-page .portal-side-list a,
.portal-repository-page .portal-doc-list-mini a {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  height: auto;
}

.portal-repository-page .portal-side-list b,
.portal-repository-page .portal-side-list small,
.portal-repository-page .portal-doc-list-mini b,
.portal-repository-page .portal-doc-list-mini span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.portal-repository-page .portal-side-list b,
.portal-repository-page .portal-doc-list-mini b {
  margin-bottom: 4px;
}

.portal-repository-page .portal-side-list small,
.portal-repository-page .portal-doc-list-mini span {
  display: block;
}

.portal-repository-page .portal-side-list.numbered a {
  padding-left: 44px;
}

.portal-repository-page .portal-side-list.numbered a:before {
  top: 14px;
}

@media (min-width: 1101px) {
  .portal-repository-page .portal-repo-sidebar {
    align-self: start;
  }
}

/* PATCH_044_PORTAL_PREVIEW_APPROVAL_GUARD */
.portal-doc-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.portal-doc-actions a,
.portal-doc-actions button,
.portalPreviewBtn,
.portalApprovalBtn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.portalPreviewBtn {
  background: #0b2a55;
  color: #fff;
}

.portalApprovalBtn {
  background: #f3c64e;
  color: #0b1f3a;
}

.portal-side-list .portal-side-preview {
  width: 100%;
  display: block;
  text-align: left;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 12px;
  margin: 8px 0;
  color: #0b1f3a;
}

.portal-side-list .portal-side-preview b,
.portal-side-list .portal-side-preview small {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.portal-preview-modal.show {
  display: flex;
}

.portal-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.portal-preview-box.portal-secure-preview {
  position: relative;
  width: min(1100px, 96vw);
  height: min(760px, 92vh);
  background: #0b1f3a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
}

.portal-preview-toolbar {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: #061a33;
  color: #fff;
}

.portal-preview-toolbar strong {
  white-space: nowrap
}

.portal-preview-toolbar span {
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.3;
  flex: 1;
}

.portal-preview-toolbar button,
#portalPreviewClose {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.portal-secure-preview iframe {
  width: 100%;
  height: calc(100% - 58px);
  border: 0;
  background: #fff;
}

.portal-preview-watermark {
  pointer-events: none;
  position: absolute;
  inset: 58px 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(11, 42, 85, .13);
  font-size: clamp(28px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-22deg);
  text-align: center;
  user-select: none;
}

@media print {
  .portal-body * {
    visibility: hidden !important
  }

  .portal-body:before {
    content: 'Dokumen preview SONAF tidak dapat dicetak tanpa persetujuan Admin.';
    visibility: visible !important;
    display: block;
    padding: 40px;
    font: 700 18px Arial, sans-serif;
    color: #111827;
  }
}

@media(max-width:768px) {
  .portal-preview-toolbar {
    height: auto;
    min-height: 70px;
    align-items: flex-start;
    padding: 12px;
  }

  .portal-preview-toolbar {
    flex-wrap: wrap
  }

  .portal-secure-preview iframe {
    height: calc(100% - 82px)
  }
}

/* PATCH_044A_PREVIEW_SECURITY_HARDENING
   Proteksi tambahan khusus modal preview portal publik.
   Tidak mengubah backend, database, atau modul lain. */
body.portal-preview-lock {
  overflow: hidden;
}

.portal-preview-modal,
.portal-secure-preview,
.portal-secure-preview * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.portal-secure-preview iframe {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.portal-secure-preview::after {
  content: 'Klik kanan, salin, cetak, download, dan screenshot memerlukan persetujuan Admin SONAF';
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 3;
  background: rgba(6, 26, 51, .84);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}

.portal-preview-watermark {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}


/* ==========================================================
   PATCH_045_PORTAL_DOCUMENT_CARD_REDIRECT
   Tujuan: card Dokumen Terbaru di Portal menjadi area klik
   menuju halaman Repository Publik, bukan membuka download/preview.
   Scope: Portal index + CSS; tidak mengubah database/controller/model.
   ========================================================== */
.portal-doc-list-mini a.portal-doc-mini-link,
.portal-doc-list-mini a[href*="r=portal/repository"] {
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.portal-doc-list-mini a.portal-doc-mini-link:hover,
.portal-doc-list-mini a[href*="r=portal/repository"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(9, 28, 60, .14);
  border-color: rgba(216, 173, 79, .72);
  background: #fffdf7;
}

.portal-doc-list-mini a.portal-doc-mini-link:after,
.portal-doc-list-mini a[href*="r=portal/repository"]:after {
  content: 'Buka Repository';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5cd6d, var(--gold));
  color: #061b3a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .2px;
}

.portal-doc-list-mini a.portal-doc-mini-link:focus,
.portal-doc-list-mini a[href*="r=portal/repository"]:focus {
  outline: 3px solid rgba(216, 173, 79, .28);
  outline-offset: 3px;
}

.portal-video-card {
  margin: 50px auto;
  max-width: 950px;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

.portal-video-header {

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  padding: 35px;

  text-align: center;

  color: white;

}

.portal-video-header h2 {

  margin-top: 15px;

  margin-bottom: 10px;

  font-size: 30px;

}

.portal-video-header p {

  color: rgba(255, 255, 255, .9);

}

.portal-video-body {

  padding: 30px;

  background: #fafafa;

}

.portal-video-body img {

  width: 100%;

  border-radius: 18px;

  transition: .3s;

}

.portal-video-body img:hover {

  transform: scale(1.02);

}

.portal-video-footer {

  text-align: center;

  padding: 25px;

}

.portal-btn-primary {

  display: inline-block;

  background: #2563eb;

  color: #fff;

  padding: 14px 35px;

  border-radius: 12px;

  text-decoration: none;

  font-weight: bold;

  transition: .3s;

}

.portal-btn-primary:hover {

  background: #1d4ed8;

  color: #fff;

}