/* LDP JPM v10.8 — Responsive + Enrollment + Reporting normalization
   Layer ini sengaja dimuat PALING AKHIR agar menetralkan aturan legacy tanpa
   menghapus stylesheet lama yang masih dipakai modul existing. */

:root{--ldp-gap:clamp(14px,2vw,24px);--ldp-mobile-pad:16px}
html{max-width:100%;overflow-x:hidden;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
iframe{max-width:100%}
input,select,textarea,button{max-width:100%;font:inherit}
input,select,textarea{min-width:0;width:100%}
button,.btn{overflow-wrap:anywhere}
.container{width:min(calc(100% - 32px),1200px)!important;max-width:1200px!important;margin-inline:auto!important;padding-inline:0!important}
.grid>*,.form-grid>*,.contact-layout>*,.detail-layout>*,.footer-grid>*,.stats>*,.adm-content>*,.adm-grid>*{min-width:0}
.prose,.card-body,.panel,.form-card,.auth-card{overflow-wrap:anywhere;word-break:normal}
.prose img,.prose video,.prose iframe,.prose figure{max-width:100%!important;height:auto!important}
.prose pre,.prose code{max-width:100%;overflow:auto}
.prose table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.table-wrap table{margin:0;min-width:720px;max-width:none}
table.data th,table.data td{vertical-align:top;overflow-wrap:normal;word-break:normal}
.actions,.form-actions,.toolbar,.filterbar,.card-foot,.resume-actions{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}

/* Program detail: konten yang berasal dari editor tidak boleh melebihi viewport. */
.detail-layout{align-items:start}
.detail-main,.detail-side{min-width:0;max-width:100%}
.detail-img,.program-detail img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}

/* Form & auth */
.auth-wrap{padding-inline:0}
.auth-card,.auth-card-wide{width:min(100%,780px)!important;max-width:780px!important;margin-inline:auto}
.auth-card form,.form-card form{min-width:0}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--ldp-gap)!important}
.form-grid.cols-3,.grid.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.form-section{min-width:0}
.form-section label,.form-card label,.field{min-width:0}
.check{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:start!important;gap:.65rem!important}
.check input{width:auto!important;margin-top:.2rem}
.field-hint{overflow-wrap:anywhere}

/* Alamat administratif Indonesia */
.wilayah-picker{min-width:0;margin-top:.85rem}
.wilayah-grid{margin-bottom:.7rem}
.wilayah-picker select:disabled{opacity:.72;cursor:not-allowed}
.wilayah-hint{display:block;margin-top:.2rem}

/* Unified enrollment */
.enroll-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(20px,3vw,38px);align-items:start}
.enroll-main,.enroll-aside{min-width:0}
.enroll-aside{position:sticky;top:100px}
.enroll-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 1.2rem;padding:0;list-style:none;counter-reset:step}
.enroll-steps li{min-width:0;padding:.7rem .75rem;border:1px solid var(--border,#e6e9ef);border-radius:12px;background:#fff;font-size:.82rem;font-weight:700;line-height:1.25}
.enroll-steps li::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:.4rem;border-radius:50%;background:rgba(231,29,22,.1);color:#d91d17}
.enroll-note{padding:1rem;border-radius:14px;background:#fff8f7;border:1px solid #ffd6d2}
.enroll-summary{display:grid;gap:.8rem}
.enroll-summary .summary-row{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;padding-bottom:.7rem;border-bottom:1px solid var(--border,#eceff3)}
.enroll-summary .summary-row>*{min-width:0}
.enroll-summary .summary-row b{text-align:right}
.payment-methods{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem!important}
.pay-option{min-width:0!important;height:100%;align-items:flex-start!important}
.pay-option input{width:auto!important;flex:0 0 auto;margin-top:.2rem}
.pay-option span{min-width:0}
.pay-option small{display:block;margin-top:.25rem;line-height:1.45}

/* LMS status banners */
.lms-onboarding{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center}
.lms-onboarding .ico{font-size:1.5rem}
.lms-onboarding .actions{justify-content:flex-end}

/* WhatsApp tidak menutup form pada layar kecil. */
.wa-float{max-width:calc(100vw - 24px)}

/* Admin: page-level overflow dilarang; tabel boleh scroll DI DALAM panel. */
body.admin{overflow-x:hidden!important}
.adm-shell,.adm-main,.adm-content,.adm-panel,.adm-card,.adm-table-card{min-width:0!important;max-width:100%}
.adm-main{width:auto!important;overflow-x:hidden!important}
.adm-content{overflow-x:hidden!important}
.adm-panel,.adm-card{overflow:hidden}
.admin .table-wrap,.admin [class*="table-wrap"]{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.admin .table-wrap table,.admin table.data{width:max-content!important;min-width:100%!important;table-layout:auto!important}
.admin table.data th,.admin table.data td{max-width:420px;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
.admin table.data td.actions,.admin table.data td:last-child{white-space:nowrap!important}
.admin .toolbar,.admin .filterbar,.admin .adm-toolbar{display:flex!important;flex-wrap:wrap!important;gap:.65rem!important;max-width:100%}
.admin .toolbar>* ,.admin .filterbar>* ,.admin .adm-toolbar>*{min-width:0;max-width:100%}
.admin .adm-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.admin .adm-tabs>*{flex:0 0 auto}
.admin .stats,.admin .stats-sm{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
.admin .stat{min-width:0}
.admin .adm-top{min-width:0}
.admin .adm-title{min-width:0}
.admin .adm-title h1{overflow-wrap:anywhere}

/* Monitoring realtime: kolom tetap terbaca, tidak saling menimpa. */
.admin .presence-table{min-width:980px!important}
.admin .presence-table th:nth-child(1),.admin .presence-table td:nth-child(1){min-width:100px}
.admin .presence-table th:nth-child(2),.admin .presence-table td:nth-child(2){min-width:230px}
.admin .presence-table th:nth-child(3),.admin .presence-table td:nth-child(3){min-width:220px}
.admin .presence-table th:nth-child(4),.admin .presence-table td:nth-child(4){min-width:330px}
.admin .presence-table th:nth-child(5),.admin .presence-table td:nth-child(5){min-width:120px}
.admin .presence-table th:nth-child(6),.admin .presence-table td:nth-child(6){min-width:150px}

/* Report center */
.report-export-note{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border-radius:14px;background:#f7f9fc;border:1px solid #e6eaf0}
.report-export-note .ico{font-size:1.3rem}

@media (max-width:1100px){
  .detail-layout,.contact-layout,.enroll-shell{grid-template-columns:minmax(0,1fr)!important}
  .detail-side,.enroll-aside{position:static!important;top:auto!important}
  .payment-methods{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:820px){
  .container{width:min(calc(100% - 28px),1200px)!important}
  .grid.grid-3,.form-grid.cols-3,.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .enroll-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lms-onboarding{grid-template-columns:auto minmax(0,1fr)}
  .lms-onboarding .actions{grid-column:1/-1;justify-content:flex-start}
  .admin .adm-content{padding-inline:14px!important}
}

@media (max-width:600px){
  :root{--ldp-mobile-pad:12px}
  body{min-width:0!important}
  .container{width:calc(100% - 24px)!important;max-width:none!important}
  section,.section,.page-hero,.auth-wrap{max-width:100vw;overflow-x:clip}
  .page-hero{padding-block:clamp(24px,8vw,48px)!important}
  h1{font-size:clamp(1.75rem,8vw,2.35rem)!important;line-height:1.08!important}
  h2{font-size:clamp(1.3rem,6vw,1.7rem)!important}
  .grid,.grid.grid-2,.grid.grid-3,.form-grid,.form-grid.cols-2,.form-grid.cols-3,.stats,.stats-sm,.footer-grid{grid-template-columns:minmax(0,1fr)!important}
  .contact-layout,.detail-layout,.enroll-shell{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .auth-card,.auth-card-wide,.form-card,.panel{width:100%!important;max-width:100%!important;padding:18px!important;border-radius:18px!important}
  .auth-wrap>.container{width:calc(100% - 20px)!important}
  .form-section{padding:0!important}
  .form-section+.form-section{margin-top:1.4rem!important;padding-top:1.3rem!important}
  input,select,textarea{font-size:16px!important} /* mencegah auto zoom iOS */
  textarea{resize:vertical;min-height:90px}
  .actions,.form-actions,.card-foot,.resume-actions{align-items:stretch}
  .actions>.btn,.form-actions>.btn,.card-foot>.btn,.resume-actions>.btn{width:100%;justify-content:center}
  .enroll-steps{grid-template-columns:minmax(0,1fr)!important}
  .payment-methods{grid-template-columns:minmax(0,1fr)!important}
  .pay-option{padding:.85rem!important}
  .enroll-summary .summary-row{flex-direction:column;gap:.3rem}
  .enroll-summary .summary-row b{text-align:left}
  .table-wrap{margin-inline:0!important;border-radius:12px}
  .table-wrap::after{content:"Geser tabel ke samping →";display:block;padding:.55rem .75rem;font-size:.72rem;color:#687386;background:#f7f9fc;border-top:1px solid #e9edf2;position:sticky;left:0;width:max-content;min-width:100%}
  .prose table{font-size:.9rem}
  .wa-float{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;padding:.7rem .85rem!important;font-size:.78rem!important;max-width:58vw!important;white-space:normal!important;text-align:center!important;line-height:1.2!important}
  .site-footer{overflow:hidden}

  body.admin .adm-content{padding:12px!important;max-width:100vw!important}
  body.admin .adm-top{padding-inline:12px!important;gap:.5rem!important}
  body.admin .adm-title h1{font-size:1.1rem!important}
  body.admin .adm-user-meta,.admin .adm-logout{display:none!important}
  .admin .adm-panel,.admin .panel,.admin .adm-card{padding:14px!important;border-radius:14px!important}
  .admin .toolbar,.admin .filterbar,.admin .adm-toolbar{align-items:stretch!important}
  .admin .toolbar>* ,.admin .filterbar>* ,.admin .adm-toolbar>*{width:100%!important}
  .admin .toolbar .btn,.admin .filterbar .btn,.admin .adm-toolbar .btn{justify-content:center}
  .admin table.data{font-size:.82rem}
  .admin table.data th,.admin table.data td{padding:.65rem!important}
  .admin .stats,.admin .stats-sm{grid-template-columns:minmax(0,1fr)!important}
}

/* Header/footer hardening untuk layar 320–480px */
.header-in,.topbar-in,.footer-bottom>.container{min-width:0;max-width:100%}
.topbar-in{display:flex;flex-wrap:wrap;gap:.35rem .85rem}
.brand{min-width:0;max-width:calc(100% - 56px)}
.brand-logo{flex:0 0 auto;max-width:min(150px,40vw)}
.brand-text{min-width:0}
.brand-text strong,.brand-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.nav{max-width:100%}
.nav-list,.sub-list{max-width:100%}
.footer-bottom>.container{display:flex;flex-wrap:wrap;gap:.6rem 1rem}
@media(max-width:480px){
  .topbar{font-size:.72rem}
  .topbar-in{justify-content:center;text-align:center}
  .brand-text small{display:none}
  .brand-logo{max-width:120px}
  .header-in{min-height:58px!important}
  .footer-bottom>.container{justify-content:center;text-align:center}
}