/* Opsi B — each actual /fitur/*.html is an independent route, common application code. */
body[data-option-route="dashboard"].workspace-ready .workspace-panel{display:none!important}
body[data-option-panel].workspace-ready #memberOverview, body[data-option-panel].workspace-ready #adminOverview{display:none!important}
body[data-option-panel].workspace-ready .workspace-panel:not(.workspace-selected){display:none!important}
body[data-option-panel].workspace-ready #eventManagementHub.workspace-selected{display:block!important}
body[data-option-panel] main.container{padding-top:8px}
.optionb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(20px,calc((100vw - 1100px)/2));background:#edf4ef;border-bottom:1px solid #d6e3dc;color:#124332}
.optionb-toolbar a{font-weight:700;text-decoration:none;color:#1c634a}.optionb-toolbar strong{font-size:14px}.optionb-toolbar span{font-size:12px;color:#668373}
body:not([data-option-panel]) .optionb-toolbar{display:none}
body[data-option-panel] .optionb-toolbar{display:flex}
@media(max-width:640px){.optionb-toolbar span{display:none}}

/* Tahap 28I: hindari flash panel sebelum otorisasi dan inisialisasi */
body[data-option-panel]:not(.workspace-ready) main.container > section.panel:not(#authPanel):not(#accountPanel),
body[data-option-route="dashboard"]:not(.workspace-ready) main.container > section.panel:not(#authPanel):not(#accountPanel){display:none!important}
body[data-option-panel]:not(.workspace-ready) #authPanel,
body[data-option-route="dashboard"]:not(.workspace-ready) #authPanel{min-height:180px}
body[data-option-panel] #accountPanel{min-height:55px}
@media(max-width:640px){
 html,*{scroll-behavior:auto!important}
 body[data-option-panel] .panel,body[data-option-panel] .admin-work-panel{max-width:100%;min-width:0}
 body[data-option-panel] .optionb-toolbar{padding:11px 14px;min-height:48px;gap:8px}
 body[data-option-panel] .optionb-toolbar strong{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body[data-option-panel] .actions button{min-height:44px}
 body[data-option-panel] .asp-monitor-kpi{min-width:0}
 body[data-option-panel] .tablewrap{max-width:100%;overflow-x:auto}
 body[data-option-panel] img{max-width:100%;height:auto}
}

/* 36D: navigation restored for separated Opsi B pages */
.main-top-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.main-top-nav a{white-space:nowrap}
#superadminNavLink[hidden]{display:none!important}
.optionb-toolbar a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:640px){.main-top-nav{gap:6px}.main-top-nav a{font-size:12px}.optionb-toolbar{gap:8px}}

/* 36E: dashboard Opsi B is a navigation hub, never a long form page. */
body[data-option-route="dashboard"] main.container > section.panel:not(#authPanel):not(#accountPanel):not(#activationPanel):not(#memberOverview):not(#adminOverview){display:none!important}
body[data-option-route="dashboard"] #memberOverview, body[data-option-route="dashboard"] #adminOverview{scroll-margin-top:18px}

/* Tahap 37: simple login, signup only when asked */
#registrationExtra[hidden]{display:none!important}
#authPanel .login-help{margin-top:-5px;margin-bottom:16px}
#authPanel input{min-height:44px}
@media(max-width:640px){#authPanel .actions{display:grid;grid-template-columns:1fr;gap:9px}#authPanel .actions button{width:100%;min-height:46px}}

/* Tahap 39: pencarian aktivasi yang mudah di layar kecil */
#activationAdminPanel #activationSearch{width:100%;min-height:45px;font-size:16px}
#activationAdminPanel #activationSubmission{max-width:100%;min-height:45px;font-size:16px}
#activationAdminPanel #activationCandidateCount{font-weight:650;color:#315a46}
#activationAdminPanel #activationInviteOutput{overflow-wrap:anywhere;line-height:1.6}
@media(max-width:640px){#activationAdminPanel .actions button{width:100%;min-height:46px}}

/* Tahap 40: ringkasan status pemrosesan undangan warga */
.activation-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 10px}
.activation-kpis>div{background:#f3f8f4;border:1px solid #dae8dd;border-radius:12px;padding:15px 12px;min-width:0}
.activation-kpis strong{display:block;font-size:clamp(23px,3vw,32px);color:#1d5942;line-height:1.2}
.activation-kpis span{display:block;font-size:12px;color:#536e5c;margin-top:6px;line-height:1.4}
@media(max-width:540px){.activation-kpis{gap:6px}.activation-kpis>div{padding:11px 8px}.activation-kpis span{font-size:11px}}