/* =====================================================================
   LDP v9.3 — Unified UI/UX Alignment & Proportion
   Scope: Web Profil/Public, Panel Admin, Dashboard Peserta/LMS
   Tujuan: container konsisten, center alignment, spacing, card/table/form,
           serta responsive desktop/tablet/mobile tanpa mengubah logic PHP/DB.
   ===================================================================== */

:root{
  --ui-max:1180px;
  --ui-admin-max:1440px;
  --ui-pad:clamp(16px,2.4vw,32px);
  --ui-gap:clamp(16px,2vw,24px);
  --ui-section:clamp(44px,5.5vw,76px);
  --ui-radius:16px;
  --ui-line:#e5e8f0;
  --ui-bg:#f6f7fb;
  --ui-shadow:0 12px 34px -26px rgba(28,31,46,.38);
}

html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
img,svg,video,iframe{max-width:100%}

/* ---------------------------------------------------------------------
   1) GLOBAL / WEB PROFIL
   --------------------------------------------------------------------- */
.container{
  width:min(var(--ui-max),calc(100% - (var(--ui-pad) * 2)))!important;
  margin-inline:auto!important;
}
.narrow{width:min(820px,calc(100% - (var(--ui-pad) * 2)))!important;margin-inline:auto!important}
section{padding-block:var(--ui-section)}

/* Header: konten selalu berada di sumbu container yang sama */
.site-header .header-in{min-height:72px;justify-content:flex-start}
.site-header .brand{min-width:0}
.site-header .nav{min-width:0}

/* Heading section publik: badge, judul, deskripsi dan counter satu sumbu */
.section-head,
.section > .container > .section-head,
.container > .section-head{
  width:min(820px,100%);
  max-width:820px!important;
  margin:0 auto clamp(24px,3vw,38px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  text-align:center!important;
}
.section-head > *{margin-inline:auto!important;max-width:100%}
.section-head .section-count,
.section-count{position:static!important;align-self:center!important;margin:.35rem auto 0!important}
.section-head p,.section-head .section-sub{max-width:720px;margin-inline:auto!important;text-align:center}
.eyebrow{max-width:100%;text-align:center}

/* Grid/card publik: ukuran konsisten, isi tidak miring ke satu sisi */
.grid,.card-grid{width:100%;margin-inline:auto}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > *, .card-grid > *{min-width:0}
.card{height:100%;border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.card-media{width:100%;aspect-ratio:16/9}
.card-body{min-width:0}
.card-body h3,.card-body p{overflow-wrap:anywhere}
.card-foot{width:100%;margin-top:auto}

/* Form/filter publik */
.filterbar,
.filter-bar,
.form-inline{
  width:100%;
  max-width:var(--ui-max);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.filterbar :is(input,select),.filter-bar :is(input,select),.form-inline :is(input,select){min-width:0;min-height:48px}
.filterbar input,.filter-bar input{flex:1.35 1 340px}
.filterbar select,.filter-bar select{flex:1 1 260px}
.filterbar .btn,.filter-bar .btn{flex:0 0 auto;min-height:48px}

/* Tabel publik: wrapper center dan komposisi rapi */
.table-wrap{width:100%;max-width:100%;margin-inline:auto;border-radius:var(--ui-radius)}
table.data{width:100%;max-width:100%;margin-inline:auto}
table.data th,table.data td{vertical-align:middle}
table.data th:last-child,table.data td:last-child{text-align:center}

/* Verifikasi sertifikat */
.stepper{max-width:940px;margin:1.2rem auto 1.5rem!important}
.stepper li{justify-content:flex-start;min-height:48px}
.verif-step,.verif-card{width:min(940px,100%);margin-inline:auto}
.verif-step h1,.verif-step h2,.verif-step > p{text-align:left}
.verif-step .filterbar{align-items:stretch}
.verif-step .filterbar input{flex:1 1 520px}
.verif-kode{max-width:940px;margin-inline:auto}

/* Tim pengajar / struktur */
.person{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.person img{margin-inline:auto}
.person h3,.person .role{text-align:center}

/* Statistik */
.stats{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{height:100%;display:flex;min-height:126px;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* Hero: container proporsional; copy tidak dipaksa full-center agar readability */
.page-hero .container,.hero .container{margin-inline:auto}
.hero-pelatihan-inner{align-items:center}
.hero-pelatihan-stats{min-width:0}

/* ---------------------------------------------------------------------
   2) DASHBOARD PESERTA / LMS
   --------------------------------------------------------------------- */
.lms-subnav{width:100%;background:#fff;border-bottom:1px solid var(--ui-line)}
.lms-subnav-in{
  min-height:60px;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding-block:8px;
}
.lms-subnav-in > a{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px!important;
  border-radius:999px;
  white-space:nowrap;
}
.lms-subnav-in .grow{flex:1 1 auto}

.dash{padding-block:clamp(38px,5vw,64px)!important}
.dash > .container{display:block}
.dash-head{
  width:100%;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
  margin-bottom:24px!important;
}
.dash-head > div:first-child{min-width:0;flex:1 1 auto}
.dash-head .eyebrow{margin-bottom:12px;text-align:left}
.dash-head h1{margin-bottom:4px}
.dash-actions{flex:0 0 auto;display:flex!important;align-items:center;justify-content:flex-end;gap:8px!important}

/* 4 langkah peserta: sama besar, centered, clickable */
.lms-steps{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:18px auto 22px!important;
}
.lms-steps li{min-width:0!important;flex:none!important}
.lms-steps li > a{
  width:100%;height:100%;min-height:72px;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:12px;padding:12px 14px!important;
  border-radius:14px!important;
}
.lms-steps .num{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center}
.lms-steps .lbl{min-width:0;overflow-wrap:anywhere}

.panel-hint{width:100%;margin:0 auto 18px}
.stats.stats-sm{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.stats-sm .stat{min-height:122px}

/* Anchor nav dashboard: tampil seperti tab yang utuh, bukan teks mengambang */
.dash .lms-nav{
  width:100%;
  display:flex!important;
  align-items:center;
  gap:8px;
  margin:24px 0 30px!important;
  padding:8px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  background:#fff;
  overflow-x:auto;
}
.dash .lms-nav-item{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 14px;border-radius:10px;white-space:nowrap;
  color:#3f455a;font-weight:650;
}
.dash .lms-nav-item:hover{background:#f4f5f9;color:var(--maroon)}

.dash-title{margin:34px 0 16px!important;text-align:left}
.resume-card{width:100%;margin-inline:auto}
.cert-card{height:100%}
.empty{width:100%;margin-inline:auto;text-align:center;padding:26px 20px}

/* Katalog LMS */
.lms-catalog-nav,.kelas-tabs{width:100%;margin-inline:auto}
.dash .filterbar,.lms-filter,.catalog-filter{margin-inline:auto}
.dash .filterbar > label,.lms-filter > label{min-width:0}

/* Halaman sertifikat/profil peserta: konten utama terpusat dan tidak terlalu lebar */
.dash .container > .form-card,
.dash .container > .panel,
.dash .container > form:not(.filterbar){max-width:960px;margin-inline:auto}
.dash .container > .certificate{max-width:1080px;margin-inline:auto}

/* ---------------------------------------------------------------------
   3) PANEL ADMIN
   --------------------------------------------------------------------- */
body.admin{background:#f4f6fa}
.adm-main{min-width:0}
.adm-top{
  padding-inline:clamp(18px,2.4vw,34px)!important;
}
.adm-content{
  width:100%;
  max-width:var(--ui-admin-max)!important;
  margin:0 auto!important;
  padding:clamp(18px,2.4vw,32px)!important;
}
.adm-content > *{max-width:100%}
.adm-content > h2,.adm-content > h3{margin-inline:0}

/* Dashboard admin */
.adm-cards{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
.adm-card{height:100%;min-height:108px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.dash-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.adm-panel{width:100%;min-width:0;border-radius:var(--ui-radius)!important;overflow:hidden}
.adm-panel .panel-head{min-height:54px;align-items:center!important;padding-inline:2px}

/* Toolbar/filter admin */
.toolbar,.adm-filter{
  width:100%;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.toolbar{justify-content:space-between}
.toolbar .grow{min-width:0;flex:1 1 320px}
.adm-filter :is(input,select,textarea){min-width:0!important;max-width:none!important}
.adm-filter :is(input,select){flex:1 1 180px!important}
.toolbar > .btn,.adm-filter > .btn{flex:0 0 auto}

/* Form admin: max-width tetapi center */
.adm-content .form-card,
.adm-content > form.form-card{width:100%;max-width:1100px;margin-inline:auto}
.adm-content .form-grid{align-items:start}

/* Tabel admin: tetap memenuhi panel, action konsisten */
.admin .table-wrap{width:100%;max-width:100%;margin-inline:auto;overflow:auto}
.admin table.data{width:100%;min-width:760px;table-layout:auto!important}
.admin table.data th,.admin table.data td{word-break:normal;overflow-wrap:break-word}
.admin table.data th{white-space:nowrap}
.admin table.data .actions{justify-content:flex-end;align-items:center}
.admin table.data td:last-child,.admin table.data th:last-child{text-align:right}

/* Popup, quiz, batch, peserta, sertifikat/template */
.admin .popup-card{max-width:620px!important;margin-inline:auto!important}
.admin .quiz-form,.admin .quiz-item{max-width:100%}
.admin .doc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin .kode-box{max-width:760px;margin-inline:auto}

/* ---------------------------------------------------------------------
   4) RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1200px){
  .grid-4,.stats,.stats.stats-sm,.adm-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .lms-subnav-in{overflow-x:auto;scrollbar-width:none}
  .lms-subnav-in::-webkit-scrollbar{display:none}
  .lms-subnav-in .grow{display:none}
  .lms-subnav-out{margin-left:auto}
  .dash-head{align-items:flex-start!important;flex-direction:column}
  .dash-actions{width:100%;justify-content:flex-start}
  .lms-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dash-grid{grid-template-columns:1fr!important}
  .adm-content{padding:20px!important}
}

@media (max-width:760px){
  :root{--ui-pad:14px;--ui-section:38px}
  .grid-2,.grid-3,.grid-4,.stats,.stats.stats-sm,.adm-cards,.admin .doc-grid{grid-template-columns:1fr!important}
  .filterbar,.filter-bar,.form-inline,.adm-filter{align-items:stretch!important;flex-direction:column}
  .filterbar > *,.filter-bar > *,.form-inline > *,.adm-filter > *{width:100%!important;max-width:none!important;flex-basis:auto!important}
  .filterbar .btn,.filter-bar .btn{width:100%}
  .lms-steps{grid-template-columns:1fr!important}
  .lms-steps li > a{min-height:60px}
  .dash-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .dash-actions .btn{width:100%}
  .dash-actions .btn:last-child:nth-child(odd){grid-column:1/-1}
  .dash .lms-nav{margin-top:18px!important}
  .adm-top{padding-inline:14px!important}
  .adm-content{padding:14px!important}
  .adm-user-meta,.adm-logout{display:none!important}
  .admin .table-wrap{border-radius:12px}
}

@media (max-width:480px){
  .site-header .header-in{min-height:64px}
  .lms-subnav-in > a{padding:8px 11px!important;font-size:.86rem}
  .dash-actions{grid-template-columns:1fr}
  .dash-actions .btn{grid-column:auto!important}
  .section-head h2{font-size:1.45rem}
}

@media print{
  .lms-subnav,.dash .lms-nav,.dash-actions,.adm-side,.adm-top{display:none!important}
  .adm-main{margin-left:0!important}
  .adm-content{max-width:none!important;padding:0!important}
}