/* Paparan aktivasi hanya hidup selepas pautan jemputan disahkan. */
#activateView.login-view{display:none!important}
#activateView.login-view.is-active{display:grid!important}
@media(max-width:700px){#activateView.login-view.is-active{display:grid!important}}

/* V2.6.1 - kecilkan tajuk Selamat Datang sahaja */
.hub-head h1{
  font-size:clamp(1.8rem,3vw,2.65rem);
  line-height:1.05;
  letter-spacing:-.035em;
}

@media(max-width:700px){
  .hub-head h1{
    font-size:clamp(1.7rem,7vw,2.2rem);
    line-height:1.06;
  }
}

/* =========================================================
   SPK HUB V2.8 - Dashboard Polish
   ========================================================= */

.section-kicker{
  margin:0 0 6px;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.12em;
  color:#087c77;
}

.compact-head{
  margin-bottom:14px;
}

.active-systems{
  margin-top:8px;
}

.system-health{
  margin-top:34px;
  padding:22px;
  background:rgba(255,255,255,.72);
  border:1px solid #d7e3e6;
  border-radius:18px;
}

.status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.status-system{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #d5e1e4;
  border-radius:13px;
  padding:14px 15px;
}

.status-system div{
  min-width:0;
}

.status-system strong{
  display:block;
  font-size:.88rem;
  line-height:1.25;
}

.status-system small{
  display:block;
  margin-top:4px;
  color:#688087;
  font-size:.72rem;
}

.status-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#1a9b64;
  box-shadow:0 0 0 5px #e2f5ec;
}

.status-system.upcoming .status-dot{
  background:#c58b28;
  box-shadow:0 0 0 5px #fff3dc;
}

.module-card{
  position:relative;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.module-card.is-live{
  box-shadow:0 8px 26px rgba(18,63,77,.06);
}

.module-card.is-live:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(18,63,77,.11);
}

.module-card.is-coming{
  border-top-color:#aebdc1;
  background:#f7fafb;
}

.module-card.is-coming .status{
  color:#86621d;
}

.module-card.is-coming .module-icon{
  background:#e9eff1;
  color:#60777e;
}

.module-card.is-coming button{
  background:#dce5e7;
  color:#63777d;
}

.empty-card{
  grid-column:1/-1;
}

.upcoming-systems{
  margin-top:8px;
}

.access-summary{
  margin-top:38px;
}

.access-grid div{
  border:1px solid #d3e0e3;
  background:rgba(255,255,255,.58);
}

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

@media(max-width:700px){
  .system-health{
    padding:17px;
  }

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

  .status-system{
    padding:13px;
  }
}

/* =========================================================
   SPK HUB V2.8 - Phase 2 Visual Polish
   ========================================================= */

.shell{
  max-width:1240px;
}

/* Header / Welcome */
.hub-head{
  padding:36px 0 18px;
  gap:24px;
}

.hub-head h1{
  font-size:clamp(1.95rem,3.2vw,2.85rem);
  line-height:1.04;
  letter-spacing:-.04em;
  margin-bottom:10px;
}

#roleLabel{
  font-size:.98rem;
  line-height:1.45;
}

.head-actions{
  display:flex;
  gap:10px;
  align-items:center;
  padding-top:2px;
}

.head-actions .quiet{
  min-height:46px;
  padding:11px 17px;
  white-space:nowrap;
}

/* Notice */
.notice{
  margin-top:8px;
  padding:13px 17px;
  border-radius:10px;
  background:#dff2f1;
}

/* Sections */
.section-head{
  margin:30px 0 15px;
}

.section-head h2{
  font-size:1.32rem;
  letter-spacing:-.018em;
}

.section-head p{
  font-size:.94rem;
  line-height:1.45;
}

.section-kicker{
  margin-bottom:4px;
}

/* Active cards */
.active-systems .module-card{
  padding:25px;
  border-radius:17px;
}

.active-systems .module-icon{
  width:43px;
  height:43px;
  border-radius:11px;
  font-size:1rem;
}

.active-systems .module-card h3{
  margin-top:21px;
  font-size:1.22rem;
}

.active-systems .module-card p{
  min-height:45px;
}

.active-systems .module-card button{
  min-height:48px;
  border-radius:10px;
  font-size:.95rem;
}

/* Status Sistem: lebih padat seperti health strip */
.system-health{
  margin-top:28px;
  padding:19px 21px 21px;
  border-radius:16px;
}

.system-health .section-head{
  margin-top:0;
  margin-bottom:12px;
}

.status-grid{
  gap:10px;
}

.status-system{
  min-height:66px;
  padding:12px 14px;
  border-radius:11px;
}

.status-system strong{
  font-size:.84rem;
}

.status-system small{
  font-size:.69rem;
}

/* Upcoming: sengaja lebih ringan daripada sistem aktif */
.upcoming-systems{
  margin-top:2px;
}

.upcoming-systems .modules{
  gap:14px;
}

.module-card.is-coming{
  padding:21px 23px;
  border-radius:15px;
  box-shadow:none;
}

.module-card.is-coming h3{
  margin:17px 0 6px;
  font-size:1.12rem;
}

.module-card.is-coming p{
  min-height:auto;
  margin-bottom:8px;
}

.module-card.is-coming .module-meta{
  padding:10px 0 13px;
}

.module-card.is-coming button{
  min-height:43px;
  padding:10px 14px;
}

/* Access summary */
.access-summary{
  margin-top:30px;
  padding-top:22px;
}

.access-summary .section-head{
  margin-top:0;
}

.access-grid{
  gap:12px;
  margin-top:12px;
}

.access-grid div{
  padding:15px 17px;
  border-radius:11px;
}

/* Desktop refinement */
@media(min-width:901px){
  .active-systems .modules{
    gap:18px;
  }

  .active-systems .module-card{
    min-height:286px;
    display:flex;
    flex-direction:column;
  }

  .active-systems .module-card button{
    margin-top:auto;
  }
}

/* Tablet */
@media(max-width:900px){
  .hub-head{
    align-items:flex-start;
  }

  .head-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}

/* Mobile */
@media(max-width:700px){
  .hub-head{
    padding:28px 0 15px;
    flex-direction:column;
  }

  .hub-head h1{
    font-size:clamp(1.75rem,8vw,2.15rem);
  }

  .head-actions{
    width:100%;
    justify-content:flex-start;
  }

  .head-actions .quiet{
    flex:1 1 auto;
  }

  .section-head{
    margin:25px 0 13px;
  }

  .system-health{
    margin-top:24px;
    padding:16px;
  }

  .active-systems .module-card{
    padding:21px;
  }

  .module-card.is-coming{
    padding:18px;
  }

  .access-summary{
    margin-top:25px;
  }
}

/* =========================================================
   SPK HUB V2.8 - Phase 3 Final Polish
   ========================================================= */

/* Profil pengguna */
#roleLabel{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:3px;
  padding:7px 11px;
  border:1px solid #c6d9dd;
  border-radius:999px;
  background:rgba(255,255,255,.5);
  color:#48646d;
  font-size:.84rem;
  font-weight:700;
}

/* Ikon sistem */
.module-icon{
  width:44px;
  height:44px;
  border-radius:12px;
}

.module-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.module-icon.icon-kompas{
  color:#15789a;
  background:#e5f3f7;
}

.module-icon.icon-haluan{
  color:#168654;
  background:#e6f5ed;
}

.module-icon.icon-rpi{
  color:#b87519;
  background:#fff2df;
}

.module-icon.icon-embpk{
  color:#7655a8;
  background:#f0ebf8;
}

/* Badge status */
.module-card .status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:999px;
  background:#e8f7ef;
  color:#16724d;
  letter-spacing:.06em;
}

.module-card .status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22a66b;
}

.module-card.is-coming .status{
  background:#fff2dc;
  color:#8a6119;
}

.module-card.is-coming .status::before{
  background:#d89b30;
}

/* Kad sistem aktif */
.active-systems .module-card{
  border:1px solid #d8e4e7;
  border-top-width:5px;
}

.active-systems .module-card.green{
  border-top-color:#198754;
}

.active-systems .module-card:not(.green){
  border-top-color:#217e9f;
}

/* Butang aktif lebih kemas */
.active-systems .module-card button{
  box-shadow:0 5px 15px rgba(18,63,77,.08);
}

.active-systems .module-card button:hover{
  transform:translateY(-1px);
}

/* Status strip */
.status-system.live strong{
  color:#163b45;
}

.status-system.live small{
  color:#3f7564;
}

/* Mobile final */
@media(max-width:700px){
  #roleLabel{
    font-size:.78rem;
    padding:6px 9px;
  }

  .module-icon{
    width:42px;
    height:42px;
  }

  .module-icon svg{
    width:23px;
    height:23px;
  }

  .module-card .status{
    font-size:.6rem;
    padding:5px 8px;
  }

  .head-actions{
    gap:8px;
  }

  .head-actions .quiet{
    min-height:43px;
    padding:10px 12px;
  }
}

/* =========================================================
   SPK HUB V2.8.1
   Dynamic System Status + Announcements
   ========================================================= */

.hub-announcements{
  margin-top:26px;
}

.hub-announcements .section-head{
  margin-bottom:11px;
}

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

.announcement-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:15px 17px;
  border:1px solid #cbdde1;
  border-left:5px solid #218b91;
  border-radius:12px;
  background:#fff;
}

.announcement-card strong{
  display:block;
  color:#163740;
  font-size:.94rem;
}

.announcement-card p{
  margin:5px 0 0;
  color:#516c75;
  font-size:.86rem;
  line-height:1.45;
}

.announcement-level{
  flex:0 0 auto;
  min-width:62px;
  padding:5px 8px;
  border-radius:999px;
  background:#e5f2f4;
  color:#176a70;
  text-align:center;
  font-size:.61rem;
  font-weight:850;
  letter-spacing:.07em;
}

.announcement-card.level-success{
  border-left-color:#21a66b;
}

.announcement-card.level-success .announcement-level{
  background:#e5f6ed;
  color:#16744d;
}

.announcement-card.level-warning{
  border-left-color:#d99a2c;
}

.announcement-card.level-warning .announcement-level{
  background:#fff2dc;
  color:#8a6119;
}

.announcement-card.level-critical{
  border-left-color:#c94d4d;
}

.announcement-card.level-critical .announcement-level{
  background:#fde8e8;
  color:#a53b3b;
}

/* Status dinamik */
.status-system.maintenance .status-dot{
  background:#e19a27;
  box-shadow:0 0 0 5px #fff0d6;
}

.status-system.disruption .status-dot{
  background:#cf4d4d;
  box-shadow:0 0 0 5px #fde5e5;
}

.status-system.disruption small{
  color:#a34848;
}

.status-system.maintenance small{
  color:#86611e;
}

@media(max-width:700px){
  .hub-announcements{
    margin-top:21px;
  }

  .announcement-card{
    gap:10px;
    padding:13px;
    flex-direction:column;
  }

  .announcement-level{
    min-width:auto;
  }
}

/* =========================================================
   V2.8.1 - Dynamic Module Card Status
   ========================================================= */

.module-card.system-maintenance{
  border-top-color:#d99a2c !important;
}

.module-card.system-maintenance .status{
  background:#fff2dc;
  color:#8a6119;
}

.module-card.system-maintenance .status::before{
  background:#d99a2c;
}

.module-card.system-disruption{
  border-top-color:#cf4d4d !important;
}

.module-card.system-disruption .status{
  background:#fde8e8;
  color:#a33e3e;
}

.module-card.system-disruption .status::before{
  background:#cf4d4d;
}

/* =========================================================
   SPK HUB V2.8.1 - Pentadbiran Hub
   ========================================================= */

.hub-admin-dialog{
  width:min(960px,94vw);
  max-width:960px;
}

.hub-admin-shell{
  padding:0;
}

.hub-admin-tabs{
  display:flex;
  gap:8px;
  margin:20px 0;
  padding:5px;
  border-radius:12px;
  background:#edf3f5;
}

.hub-admin-tab{
  flex:1;
  background:transparent;
  color:#48646d;
}

.hub-admin-tab.is-active{
  background:#0b7773;
  color:#fff;
}

.hub-admin-panel{
  margin-top:8px;
}

.hub-admin-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:15px;
}

.hub-admin-section-head h3,
.hub-announcement-admin-head h3{
  margin:0;
}

.hub-admin-section-head p{
  margin:5px 0 0;
  color:#607981;
  font-size:.86rem;
}

.hub-status-admin-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:20px;
}

.hub-status-admin-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  text-align:left;
  background:#fff;
  color:#173a44;
  border:1px solid #d2e0e3;
}

.hub-status-admin-card:hover{
  border-color:#84b8bd;
}

.hub-status-admin-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#21a66b;
  flex:0 0 auto;
}

.status-maintenance .hub-status-admin-dot{
  background:#d99a2c;
}

.status-disruption .hub-status-admin-dot{
  background:#cf4d4d;
}

.status-upcoming .hub-status-admin-dot{
  background:#d99a2c;
}

.hub-status-admin-text{
  min-width:0;
}

.hub-status-admin-text strong,
.hub-status-admin-text small{
  display:block;
}

.hub-status-admin-text strong{
  font-size:.82rem;
}

.hub-status-admin-text small{
  margin-top:3px;
  color:#678088;
  font-size:.69rem;
}

.hub-admin-form{
  padding:18px;
  border:1px solid #d4e1e4;
  border-radius:14px;
  background:#f8fbfb;
}

.hub-admin-form label{
  display:block;
  margin-bottom:14px;
  font-size:.82rem;
  font-weight:750;
  color:#385963;
}

.hub-admin-form input,
.hub-admin-form textarea,
.hub-admin-form select{
  width:100%;
  margin-top:7px;
}

.hub-admin-form textarea{
  resize:vertical;
  padding:13px;
  border:1px solid #bfd1d6;
  border-radius:10px;
  font:inherit;
}

.hub-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.hub-announcement-admin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:24px 0 12px;
}

.hub-announcement-admin-head span{
  color:#617a82;
  font-size:.78rem;
  font-weight:700;
}

.hub-announcement-admin-list{
  display:grid;
  gap:10px;
  max-height:390px;
  overflow:auto;
}

.hub-announcement-admin-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:15px;
  border:1px solid #d3e0e3;
  border-radius:12px;
  background:#fff;
}

.hub-announcement-admin-card.is-inactive{
  opacity:.68;
}

.hub-announcement-admin-info{
  min-width:0;
}

.hub-announcement-admin-info strong{
  display:block;
  margin-top:7px;
}

.hub-announcement-admin-info p{
  margin:5px 0 0;
  color:#5a737b;
  font-size:.82rem;
  line-height:1.4;
}

.hub-announcement-admin-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.hub-announcement-state{
  padding:4px 7px;
  border-radius:999px;
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.05em;
}

.hub-announcement-state.active{
  background:#e6f6ed;
  color:#16744d;
}

.hub-announcement-state.inactive{
  background:#edf1f2;
  color:#647980;
}

@media(max-width:700px){

  .hub-status-admin-list{
    grid-template-columns:1fr 1fr;
  }

  .hub-form-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .hub-announcement-admin-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .hub-announcement-admin-card button{
    width:100%;
  }

  .hub-admin-section-head{
    flex-direction:column;
  }
}


/* =========================================================
   V2.8.1 - PENTADBIRAN HUB FINAL RESPONSIVE
   Single source of truth
   ========================================================= */

dialog#hubAdminDialog.wide-dialog.hub-admin-dialog{
  width:min(1000px,calc(100vw - 48px)) !important;
  max-width:1000px !important;

  height:fit-content !important;
  block-size:fit-content !important;
  min-height:0 !important;
  min-block-size:0 !important;

  max-height:calc(100dvh - 32px) !important;
  max-block-size:calc(100dvh - 32px) !important;

  padding:0 !important;
  margin:auto !important;

  border:0 !important;
  border-radius:20px !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hubAdminDialog .hub-admin-shell{
  width:100% !important;

  height:auto !important;
  block-size:auto !important;
  min-height:0 !important;

  max-height:calc(100dvh - 32px) !important;

  padding:20px 22px 22px !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  box-sizing:border-box !important;
}

#hubAdminDialog *,
#hubAdminDialog *::before,
#hubAdminDialog *::after{
  box-sizing:border-box;
}

/* Header */
#hubAdminDialog .dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

#hubAdminDialog .dialog-head > div{
  min-width:0;
}

#hubAdminDialog .icon-button{
  flex:0 0 auto;
  width:auto;
}

/* Tabs */
#hubAdminDialog .hub-admin-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  width:100%;
  margin:0 0 18px;
}

#hubAdminDialog .hub-admin-tab{
  width:100%;
  min-width:0;
}

/* Panels */
#hubAdminDialog .hub-admin-panel{
  width:100%;
  min-width:0;
  margin-top:0;
}

#hubAdminDialog .hub-admin-panel[hidden]{
  display:none !important;
}

/* Status header */
#hubAdminDialog .hub-admin-section-head{
  margin-bottom:12px;
}

/* Status cards */
#hubAdminDialog .hub-status-admin-list{
  width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

#hubAdminDialog .hub-status-admin-card{
  min-width:0;
  padding:11px 13px;
}

/* Forms */
#hubAdminDialog .hub-admin-form{
  width:100%;
  min-width:0;
  padding:16px 18px;
}

#hubAdminDialog .hub-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

#hubAdminDialog .hub-admin-form label{
  margin-bottom:11px;
}

#hubAdminDialog input,
#hubAdminDialog select,
#hubAdminDialog textarea{
  width:100%;
  max-width:100%;
  min-width:0;
}

#hubAdminDialog textarea{
  min-height:84px;
  max-height:130px;
}

/* Announcement list */
#hubAdminDialog .hub-announcement-admin-head{
  margin:18px 0 10px;
}

#hubAnnouncementAdminList{
  width:100%;
  min-width:0;

  max-height:230px !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  padding-right:4px;
}

#hubAdminDialog .hub-announcement-admin-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;

  width:100%;
  min-width:0;

  gap:14px;
  align-items:center;

  padding:12px 14px;
}

#hubAdminDialog .hub-announcement-admin-info{
  min-width:0;
  overflow-wrap:anywhere;
}

#hubAdminDialog .hub-announcement-admin-card > button{
  width:auto;
  min-width:105px;
  max-width:145px;
  white-space:nowrap;
}

/* Tablet */
@media(max-width:900px){

  dialog#hubAdminDialog.wide-dialog.hub-admin-dialog{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }

  #hubAdminDialog .hub-status-admin-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:640px){

  dialog#hubAdminDialog.wide-dialog.hub-admin-dialog{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;

    max-height:calc(100dvh - 12px) !important;
    max-block-size:calc(100dvh - 12px) !important;

    border-radius:16px !important;
  }

  #hubAdminDialog .hub-admin-shell{
    max-height:calc(100dvh - 12px) !important;
    padding:14px !important;
  }

  #hubAdminDialog .hub-status-admin-list,
  #hubAdminDialog .hub-form-grid{
    grid-template-columns:1fr;
  }

  #hubAdminDialog .hub-announcement-admin-card{
    grid-template-columns:1fr;
  }

  #hubAdminDialog .hub-announcement-admin-card > button{
    width:100%;
    max-width:none;
  }

  #hubAdminDialog .dialog-actions button,
  #hubAdminDialog .hub-admin-section-head > button{
    width:100%;
  }
}