[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
}