[hidden]{display:none!important}.head-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
#adminView{padding:48px 0 30px}.admin-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.admin-head h1{font-size:clamp(2rem,4vw,3.25rem);margin:0 0 10px}.admin-toolbar{display:flex;gap:10px;margin:28px 0 14px}.admin-toolbar input{max-width:420px}.admin-message{min-height:1.3em;color:#24565b}.table-wrap{overflow:auto;background:#fff;border:1px solid #d8e2e4;border-radius:15px}.table-wrap table{width:100%;border-collapse:collapse;min-width:690px}.table-wrap th,.table-wrap td{text-align:left;padding:15px 16px;border-bottom:1px solid #e5edef;vertical-align:top}.table-wrap th{font-size:.74rem;letter-spacing:.06em;color:#54707a;background:#f7fafb}.table-wrap td small{display:block;color:#607882;margin-top:4px}.pill{display:inline-block;border-radius:99px;padding:5px 8px;font-size:.7rem;font-weight:800;background:#e8eef0;color:#46616a}.pill.live{background:#dff4e8;color:#16754e}.user-action{padding:8px 11px;font-size:.84rem}.admin-note{font-size:.82rem;color:#607882;margin-top:13px}input{width:100%;font:inherit;padding:13px;border:1px solid #bfd1d6;border-radius:10px;background:#fff}dialog{width:min(680px,calc(100% - 26px));border:0;border-radius:18px;padding:0;box-shadow:0 25px 80px #0c283366}dialog::backdrop{background:#102b3566}dialog form{padding:26px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.dialog-head h2{margin:0 0 5px}.icon-button{background:transparent;color:#45616b;font-size:1.5rem;padding:2px 9px}.dialog-head .eyebrow{margin-bottom:5px}.dialog-head p{margin:0}.dialog-head~label:not(.check-row){display:block;font-weight:700;font-size:.9rem;margin:18px 0 7px}.check-row{display:flex;align-items:center;gap:8px;margin:19px 0;font-weight:700}.check-row input{width:auto}.grant-inputs{display:grid;gap:10px}.grant-row{display:grid;grid-template-columns:125px 1fr 1fr 1fr;gap:8px;align-items:center;background:#f5f8f9;padding:10px;border-radius:10px}.grant-row input[type=checkbox]{width:auto}.grant-row label{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.84rem}.grant-row select,.grant-row input{padding:9px;font-size:.84rem}.grant-row select:disabled,.grant-row input:disabled{opacity:.55}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.dialog-actions button{min-width:110px}@media(max-width:700px){.hub-head,.admin-head{gap:14px;flex-direction:column}.head-actions{justify-content:flex-start}.admin-toolbar{flex-direction:column}.admin-toolbar input{max-width:none}.grant-row{grid-template-columns:1fr 1fr}.grant-row label{grid-column:1/-1}}


/* ==========================================================
   SPK HUB USER MANAGEMENT V2
   ========================================================== */

.user-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:26px 0 18px
}

.user-kpis article{
  background:#fff;
  border:1px solid #d8e2e4;
  border-radius:14px;
  padding:16px
}

.user-kpis span{
  display:block;
  color:#607882;
  font-size:.75rem;
  font-weight:800;
  margin-bottom:7px
}

.user-kpis strong{
  display:block;
  font-size:1.75rem;
  line-height:1
}

.admin-toolbar{
  align-items:center;
  flex-wrap:wrap
}

.admin-toolbar select{
  font:inherit;
  padding:12px;
  border:1px solid #bfd1d6;
  border-radius:10px;
  background:#fff;
  min-width:165px
}

.pill.pending{
  background:#fff1ce;
  color:#8a6200
}

.pill.waiting{
  background:#e8f0ff;
  color:#285da8
}

.pill.inactive{
  background:#f4e5e5;
  color:#9b3636
}

.module-pill-wrap{
  display:flex;
  gap:5px;
  flex-wrap:wrap
}

.module-pill{
  white-space:nowrap
}

.last-login{
  font-size:.82rem;
  color:#4f6872
}

.empty-user-row{
  text-align:center!important;
  padding:28px!important
}

@media(max-width:980px){
  .user-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:700px){
  .user-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .user-kpis article:first-child{
    grid-column:1/-1
  }

  #adminView .table-wrap{
    overflow:visible;
    border:0;
    background:transparent
  }

  #adminView table{
    min-width:0
  }

  #adminView thead{
    display:none
  }

  #adminView tbody,
  #adminView tr,
  #adminView td{
    display:block;
    width:100%
  }

  #adminView tr{
    background:#fff;
    border:1px solid #d8e2e4;
    border-radius:14px;
    margin-bottom:12px;
    padding:12px
  }

  #adminView td{
    border:0;
    padding:8px 4px
  }

  #adminView td::before{
    content:attr(data-label);
    display:block;
    color:#71858c;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:4px
  }

  #adminView .empty-user-row::before{
    display:none
  }

  #adminView .user-action{
    width:100%
  }

  .admin-toolbar select{
    width:100%
  }
}


/* USER MANAGEMENT V2.2 */

.user-sort{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer
}

.user-sort:hover,
.user-sort.is-active{
  color:#0b7e76
}

.sort-indicator{
  font-weight:900
}

.user-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:16px 0 4px
}

.page-size-control{
  display:flex;
  align-items:center;
  gap:8px;
  color:#56717a;
  font-size:.86rem;
  font-weight:700
}

.page-size-control select{
  width:auto;
  padding:8px 10px;
  border:1px solid #bfd1d6;
  border-radius:9px;
  background:#fff
}

.page-info{
  color:#56717a;
  font-size:.86rem;
  font-weight:700
}

.page-actions,
.page-buttons{
  display:flex;
  align-items:center;
  gap:6px
}

.page-number{
  min-width:36px;
  height:36px;
  padding:6px 10px;
  border:1px solid #bfd1d6;
  border-radius:9px;
  background:#fff;
  color:#244e59;
  font-weight:800
}

.page-number.active{
  background:#087f78;
  color:#fff;
  border-color:#087f78
}

.page-dots{
  padding:0 4px;
  color:#71858c
}

.page-actions button:disabled{
  opacity:.45;
  cursor:not-allowed
}

@media(max-width:700px){
  .user-pagination{
    flex-direction:column;
    align-items:stretch
  }

  .page-actions{
    justify-content:space-between
  }

  .page-buttons{
    justify-content:center;
    flex-wrap:wrap
  }

  .page-info{
    text-align:center
  }
}


/* ==========================================================
   USER MANAGEMENT V2.3 - KOMPAS DIRECTORY
   ========================================================== */

.wide-dialog{
  width:min(1180px,calc(100% - 28px));
  max-height:92vh
}

.kompas-import-shell{
  padding:26px;
  max-height:92vh;
  overflow:auto
}

.kompas-directory-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 180px 220px auto;
  gap:10px;
  margin:18px 0 12px
}

.kompas-directory-toolbar select{
  font:inherit;
  padding:12px;
  border:1px solid #bfd1d6;
  border-radius:10px;
  background:#fff
}

.kompas-directory-table table{
  min-width:850px
}

.kompas-dir-sort{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer
}

.kompas-dir-sort:hover,
.kompas-dir-sort.is-active{
  color:#0b7e76
}

@media(max-width:760px){
  .kompas-directory-toolbar{
    grid-template-columns:1fr
  }

  .kompas-directory-table{
    overflow:visible;
    border:0;
    background:transparent
  }

  .kompas-directory-table table{
    min-width:0
  }

  .kompas-directory-table thead{
    display:none
  }

  .kompas-directory-table tbody,
  .kompas-directory-table tr,
  .kompas-directory-table td{
    display:block;
    width:100%
  }

  .kompas-directory-table tr{
    background:#fff;
    border:1px solid #d8e2e4;
    border-radius:14px;
    padding:12px;
    margin-bottom:12px
  }

  .kompas-directory-table td{
    border:0;
    padding:8px 4px
  }

  .kompas-directory-table td::before{
    content:attr(data-label);
    display:block;
    color:#71858c;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:4px
  }
}


/* ==========================================================
   USER MANAGEMENT V2.4 - ONBOARDING KOMPAS
   ========================================================== */

.kompas-onboard-btn{
  border:0;
  border-radius:10px;
  background:#087f78;
  color:#fff;
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  padding:10px 14px;
  cursor:pointer;
  white-space:nowrap
}

.kompas-onboard-btn:hover{
  filter:brightness(.95)
}

.kompas-onboard-btn:disabled{
  opacity:.55;
  cursor:not-allowed
}

@media(max-width:760px){
  .kompas-onboard-btn{
    width:100%
  }
}


/* ==========================================================
   USER MANAGEMENT V2.5 - BATCH ONBOARDING
   ========================================================== */

.kompas-batch-bar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  margin:12px 0;
  border:1px solid #cbdadd;
  border-radius:12px;
  background:#f7fbfb
}

.batch-select-page{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.84rem;
  font-weight:700;
  color:#365d66
}

.batch-select-page input,
.kompas-batch-checkbox{
  width:18px;
  height:18px;
  accent-color:#087f78
}

.batch-status{
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  color:#56717a;
  font-size:.84rem
}

.batch-status strong{
  font-size:1rem;
  color:#0b7e76
}

.batch-limit{
  padding-left:8px;
  color:#83979d
}

.batch-check-col{
  width:68px;
  text-align:center
}

.batch-not-actionable{
  color:#a4b2b6
}

.kompas-batch-results{
  margin:12px 0 16px;
  border:1px solid #cbdadd;
  border-radius:12px;
  background:#fff;
  overflow:hidden
}

.batch-result-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#f5f9f9;
  border-bottom:1px solid #dbe5e7
}

.batch-result-item{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 110px minmax(220px,1fr);
  gap:12px;
  align-items:center;
  padding:11px 14px;
  border-bottom:1px solid #edf2f3
}

.batch-result-item:last-child{
  border-bottom:0
}

.batch-result-item small{
  display:block;
  color:#6b838b;
  margin-top:3px
}

.batch-result-status{
  font-size:.76rem;
  font-weight:900
}

.batch-result-item.berjaya .batch-result-status{
  color:#147746
}

.batch-result-item.gagal .batch-result-status{
  color:#a53a3a
}

.batch-result-item.dihentikan .batch-result-status{
  color:#9a6700
}

.batch-result-message{
  color:#536e76;
  font-size:.82rem
}

@media(max-width:760px){
  .kompas-batch-bar{
    align-items:stretch;
    flex-direction:column
  }

  .batch-status{
    margin-left:0
  }

  .kompas-batch-bar button{
    width:100%
  }

  .batch-result-item{
    grid-template-columns:1fr
  }

  .batch-check-col{
    width:auto;
    text-align:left
  }
}


/* ==========================================================
   USER MANAGEMENT V2.5.1 - DRY RUN MODE
   ========================================================== */

.batch-dry-run{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  border:1px solid #b8d8d5;
  border-radius:10px;
  background:#eef9f7;
  color:#285b5d
}

.batch-dry-run input{
  width:18px;
  height:18px;
  accent-color:#087f78
}

.batch-dry-run span{
  display:flex;
  flex-direction:column;
  gap:1px
}

.batch-dry-run strong{
  font-size:.82rem
}

.batch-dry-run small{
  color:#668083;
  font-size:.7rem
}

.batch-result-item.simulasi .batch-result-status{
  color:#176e95
}


/* ==========================================================
   USER MANAGEMENT V2.6 - LIVE BATCH SAFETY GATE
   ========================================================== */

.batch-live-warning{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid #e4b657;
  border-radius:10px;
  background:#fff7df;
  color:#79520a;
  font-size:.78rem
}

.batch-live-warning[hidden]{
  display:none
}

.batch-live-warning strong{
  white-space:nowrap;
  font-size:.78rem
}

.batch-live-warning span{
  line-height:1.35
}

/* ==========================================================
   SPK HUB V2.9 - USER ONBOARDING
   ========================================================== */

.v29-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.pill.attention{
  background:#fff0e5;
  color:#a1541b;
}

.pill.legacy{
  background:#edf1f2;
  color:#5e747b;
}

.onboarding-view .intro p:last-child{
  max-width:650px;
}

.onboarding-card{
  max-width:520px;
}

.profile-note{
  margin:16px 0 0;
  padding:11px 13px;
  border-left:4px solid #d38a24;
  border-radius:8px;
  background:#fff4df;
  color:#76501c;
  font-size:.83rem;
  line-height:1.45;
}

.pending-card{
  text-align:center;
}

.pending-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 16px;
  border-radius:50%;
  background:#dcf3e7;
  color:#15744c;
  font-size:1.5rem;
  font-weight:900;
}

.pending-card .quiet{
  width:100%;
  margin-top:18px;
}

.user-review-dialog{
  width:min(780px,calc(100% - 26px));
}

.self-profile-review{
  margin:0 0 20px;
  padding:16px;
  border:1px solid #cfe0e3;
  border-radius:14px;
  background:#f7fbfb;
}

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

.review-head>div{
  display:grid;
  gap:5px;
}

.review-kicker{
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.08em;
  color:#087c77;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.review-grid div{
  min-width:0;
  padding:11px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e1eaec;
}

.review-grid span{
  display:block;
  margin-bottom:4px;
  color:#687e85;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.review-grid strong{
  display:block;
  overflow-wrap:anywhere;
  font-size:.88rem;
}

.self-profile-review label{
  display:block;
  margin:8px 0 6px;
  font-weight:800;
  font-size:.78rem;
  color:#385963;
}

.self-profile-review textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #bfd1d6;
  border-radius:10px;
  font:inherit;
  resize:vertical;
}

#requestProfileUpdate{
  margin-top:10px;
}

.invite-flow{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 12px;
  margin:20px 0 4px;
  padding:14px;
  border-radius:12px;
  background:#f5f9fa;
}

.invite-flow>span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#0b7773;
  color:#fff;
  font-size:.75rem;
  font-weight:900;
}

.invite-flow p{
  margin:0;
}

.invite-flow strong,
.invite-flow small{
  display:block;
}

.invite-flow small{
  margin-top:2px;
  color:#607882;
  font-size:.75rem;
  line-height:1.35;
}

.table-wrap table{
  min-width:860px;
}

@media(max-width:1120px){
  .v29-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .v29-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .review-grid{
    grid-template-columns:1fr;
  }

  .review-head{
    flex-direction:column;
  }

  .user-review-dialog form{
    padding:18px;
  }
}

/* SPK HUB V2.13 - JU eMBPK */
.ju-embpk-access{margin-top:16px;border:1px solid #dfeaea;border-radius:16px;padding:15px;background:#f8fbfb}.ju-embpk-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.ju-embpk-head strong,.ju-embpk-head small{display:block}.ju-embpk-head small{margin-top:3px;color:#687f84}.ju-embpk-kicker{font-size:10px;font-weight:900;letter-spacing:.08em;color:#087f79}.ju-embpk-status{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900;background:#eef2f2;color:#60777c}.ju-embpk-status.is-active{background:#e8f8f4;color:#0a756c}.ju-embpk-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:14px}.ju-embpk-grid select{width:100%;margin-top:7px}.ju-embpk-actions{display:flex;gap:8px}@media(max-width:700px){.ju-embpk-head{flex-direction:column}.ju-embpk-grid{grid-template-columns:1fr}.ju-embpk-actions{flex-direction:column}.ju-embpk-actions button{width:100%}}