/* =====================================================================
   LDP v9.5 — Responsive alignment & admin/LMS hardening
   ===================================================================== */
:root{--v95-content:1180px;--v95-admin:1320px;--v95-mobile-gap:14px}
html,body{max-width:100%;overflow-x:hidden}
.container,.narrow{margin-left:auto!important;margin-right:auto!important}
.site-header .header-in{width:min(calc(100% - 28px),1180px)!important;margin-inline:auto!important}
.section-head{text-align:center!important;margin-inline:auto!important}

/* OTP actions: centered and visually balanced */
.auth-card .auth-inline-form{display:flex!important;justify-content:center!important;width:100%;margin:.55rem 0 0!important}
.auth-card .auth-inline-form .btn{margin-inline:auto!important;min-width:150px;justify-content:center!important}
.auth-card .btn-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:underline;text-underline-offset:3px}

/* Public batch mobile: labels and values share the same left edge. */
@media(max-width:720px){
  .table-batch tr{padding:4px 0!important}
  .table-batch td{display:grid!important;grid-template-columns:106px minmax(0,1fr)!important;justify-content:initial!important;text-align:left!important;gap:10px!important;padding:10px 12px!important}
  .table-batch td::before{flex:none!important;text-align:left!important}
  .table-batch td.num{justify-content:initial!important;text-align:left!important}
  .table-batch td.col-aksi{justify-content:initial!important;text-align:left!important;align-items:center!important}
  .table-batch td.col-aksi .btn{justify-self:start!important;margin:0!important;min-width:72px}
}

/* LMS participant mobile/tablet alignment */
@media(max-width:900px){
  .dash>.container,.learn>.container,.auth-wrap>.container{width:min(calc(100% - 28px),720px)!important;margin-inline:auto!important}
  .dash-head{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important;gap:14px!important}
  .dash-head>div:first-child{width:100%}
  .dash-actions{justify-content:center!important;width:100%}
  .lms-subnav-in,.kelas-tabs,.lms-catalog-nav{max-width:100%;overflow-x:auto!important;overscroll-behavior-inline:contain}
}
@media(max-width:560px){
  .dash-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .dash-actions .btn{width:100%!important}
  .auth-card{width:min(100%,460px)!important;padding:22px 18px!important}
  .auth-card h1{text-align:center!important;font-size:clamp(1.55rem,8vw,2rem)!important}
}

/* Admin: centered canvas and clean controls */
body.admin .adm-main{min-width:0!important}
body.admin .adm-content{width:min(calc(100% - 32px),var(--v95-admin))!important;margin-inline:auto!important;padding-left:0!important;padding-right:0!important}
body.admin .adm-top{min-width:0}
body.admin .adm-panel{width:100%;min-width:0;padding:clamp(14px,2vw,22px)!important}
body.admin .form-row{gap:14px!important}
body.admin input,body.admin select,body.admin textarea{max-width:100%;min-width:0}
body.admin .actions{gap:8px}

/* Tables become readable cards on phones instead of compressed/overflowing rows.
   data-label is populated automatically by ldp-v95.js. */
@media(max-width:700px){
  body.admin .adm-content{width:calc(100% - 20px)!important;margin-inline:auto!important;padding:10px 0 24px!important}
  body.admin .adm-panel{border-radius:14px!important;padding:12px!important;overflow:visible!important}
  body.admin .table-wrap{border:0!important;overflow:visible!important;background:transparent!important}
  body.admin table.data{display:block!important;width:100%!important;min-width:0!important;border:0!important}
  body.admin table.data thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  body.admin table.data tbody{display:grid!important;gap:10px!important;width:100%!important}
  body.admin table.data tr{display:block!important;width:100%!important;border:1px solid #e4e7ef!important;border-radius:12px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 4px 16px -14px rgba(35,39,69,.45)}
  body.admin table.data td{display:grid!important;grid-template-columns:minmax(88px,34%) minmax(0,1fr)!important;gap:10px!important;align-items:start!important;width:100%!important;min-width:0!important;padding:9px 10px!important;border:0!important;border-bottom:1px solid #eef0f5!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.admin table.data td:last-child{border-bottom:0!important}
  body.admin table.data td::before{content:attr(data-label);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#6a7086;text-align:left!important;line-height:1.45}
  body.admin table.data td[data-label="" ]::before{display:none}
  body.admin table.data td[data-label="" ]{grid-template-columns:1fr!important}
  body.admin table.data td .actions{justify-content:flex-start!important;display:flex!important;flex-wrap:wrap!important}
  body.admin table.data td .btn{width:auto!important;min-width:62px!important}
  body.admin table.data td img.thumb{width:52px!important;height:52px!important}
  body.admin .toolbar,body.admin .adm-filter{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  body.admin .toolbar>*,body.admin .adm-filter>*{width:100%!important;max-width:none!important;margin:0!important}
  body.admin .form-row{grid-template-columns:1fr!important}
}

@media(min-width:701px) and (max-width:1100px){
  body.admin .adm-content{width:calc(100% - 28px)!important}
  body.admin table.data{font-size:.86rem!important}
  body.admin table.data th,body.admin table.data td{padding:.65rem .7rem!important}
}