/* ==========================================================================
   LDP v9.0 — Penyelarasan UI/UX (publik + admin)
   Dimuat paling akhir; hanya menata komposisi (alignment, spacing, tipografi,
   kartu, form, tabel, tombol, responsif). Tidak mengubah logika aplikasi.
   Palet mengikuti identitas JPM: Burgundy #7A1220, Red #C8102E, Gold #C9A227,
   Deep Navy #0B1F3B.
   ========================================================================== */
:root{
  --jpm-burgundy:#7A1220; --jpm-red:#C8102E; --jpm-gold:#C9A227;
  --jpm-navy:#0B1F3B; --jpm-line:#e4e7ef; --jpm-muted:#6a7086;
  --jpm-radius:14px; --jpm-gap:1.1rem;
}

/* ------------------------------------------------ Dasar & tipografi ----- */
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.25;text-wrap:balance}
.container.narrow{max-width:940px;margin-inline:auto}
.section{padding-block:clamp(2rem,4vw,3.4rem)}
.muted,.small.muted{color:var(--jpm-muted)}

/* ------------------------------------------------------------- Kartu ---- */
.panel,.form-card,.adm-panel{
  border:1px solid var(--jpm-line);border-radius:var(--jpm-radius);
  background:#fff;padding:clamp(1rem,2.2vw,1.6rem);
}
.panel+.panel,.form-card+.form-card{margin-top:var(--jpm-gap)}

/* -------------------------------------------------------------- Form ---- */
.form-grid{display:grid;gap:var(--jpm-gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea,
.form input,.form select,.form textarea{
  width:100%;padding:.62rem .8rem;border:1px solid var(--jpm-line);border-radius:10px;
  font:inherit;font-weight:400;background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus,
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--jpm-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)
}
.field input:disabled{background:#f6f7fb;color:var(--jpm-muted)}
.field-hint{font-weight:400;font-size:.8rem;color:var(--jpm-muted)}
.req{color:var(--jpm-red)}
.form-section{border:0;padding:0;margin:0 0 1.6rem}
.form-section legend{padding:0}
.form-section legend h2{margin:0 0 .2rem;font-size:1.05rem;color:var(--jpm-navy)}
.form-section-desc{margin:0 0 .9rem;font-size:.86rem;color:var(--jpm-muted)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding-top:.4rem;border-top:1px solid var(--jpm-line)}

/* ------------------------------------------------------------ Tombol ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}
.btn-sm{min-height:30px;padding:.3rem .7rem;font-size:.82rem}
.btn-lg{min-height:46px;padding:.7rem 1.4rem}
.actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

/* ------------------------------------------------------------- Tabel ---- */
.adm-panel table.data,.table-wrap{width:100%}
.adm-panel{overflow-x:auto}
table.data{border-collapse:collapse;min-width:640px}
table.data th,table.data td{padding:.6rem .7rem;vertical-align:middle;border-bottom:1px solid var(--jpm-line)}
table.data th{font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--jpm-muted);text-align:left}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:#fafbff}
table.data .empty{text-align:center;color:var(--jpm-muted);padding:1.6rem}

/* ------------------------------------- Verifikasi sertifikat (2 langkah)  */
.verif-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:1.2rem 0}
.verif-item{border:1px solid var(--jpm-line);border-radius:12px;padding:.75rem .9rem;background:#fff}
.verif-item dt{margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--jpm-muted)}
.verif-item dd{margin:.2rem 0 0;font-weight:700;color:var(--jpm-navy);word-break:break-word}
.verif-kode{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:center;
  border:1px dashed var(--jpm-line);border-radius:var(--jpm-radius);padding:1rem;margin:1.2rem 0}
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem}
.filterbar input{flex:1 1 240px}

/* -------------------------------------------------- Kuis & evaluasi ----- */
.quiz-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.8rem 0 1.2rem;font-size:.86rem;color:var(--jpm-muted)}
.quiz-form .quiz-item,.review-item{border:1px solid var(--jpm-line);border-radius:12px;padding:1rem;margin-bottom:.9rem}
.quiz-form label{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem .2rem;cursor:pointer}
.quiz-form input[type=radio]{width:auto;margin-top:.25rem;accent-color:var(--jpm-red)}
.score{font-size:2.6rem;font-weight:800;color:var(--jpm-burgundy);line-height:1}

/* --------------------------------------------- Akun peserta & dokumen --- */
.doc-grid{display:grid;gap:var(--jpm-gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1rem}
.doc-item{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--jpm-line);border-radius:12px;padding:1rem}
.doc-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto}
.doc-form input[type=file]{flex:1 1 160px;font-size:.82rem}
.doc-status{align-self:flex-start;font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;text-transform:capitalize}
.doc-status.menunggu{background:#fff5e0;color:#8a5b00}
.doc-status.disetujui,.doc-status.terverifikasi{background:#e8f7ee;color:#146c37}
.doc-status.ditolak{background:#fdecec;color:var(--jpm-burgundy)}
.doc-empty{font-size:.82rem;color:var(--jpm-muted)}
.progress{height:8px;border-radius:999px;background:#eef0f6;overflow:hidden}
.progress>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--jpm-burgundy),var(--jpm-red))}
.hint-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;margin-bottom:.7rem}
.badge{font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.badge-ok{background:#e8f7ee;color:#146c37}
.badge-warn{background:#fff5e0;color:#8a5b00}

/* -------------------------------------------------- Popup pengumuman ---- */
.popup-card,.popup-modal .panel{max-width:520px;margin-inline:auto;text-align:center}
.popup-card img{border-radius:12px;margin-bottom:.8rem}
.popup-card .actions{justify-content:center}

/* ------------------------------------------------------ Kode & alert ---- */
.kode-box{font-size:1.5rem;font-weight:800;letter-spacing:.12em;text-align:center;color:var(--jpm-burgundy);
  border:1px dashed var(--jpm-red);border-radius:12px;padding:.8rem;margin:.6rem 0 1rem}
.alert{border-radius:12px;padding:.85rem 1rem;margin-bottom:1rem;border:1px solid transparent}
.alert-success{background:#e8f7ee;border-color:#bfe6cd;color:#146c37}
.alert-error{background:#fdecec;border-color:#f3c6c6;color:var(--jpm-burgundy)}

/* ------------------------------------------------------------ Responsif - */
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr}
  .form-actions{align-items:stretch}
}
@media (max-width:640px){
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr}
  .btn{width:auto}
  .form-actions .btn-lg{width:100%}
  .quiz-meta{gap:.35rem .7rem}
  .verif-kode{gap:.8rem}
}

/* ==========================================================================
   v9.1 — Dokumen persyaratan (status baru) & verifikasi sertifikat 2 langkah
   ========================================================================== */
.doc-status.perlu_ditinjau{background:#eaf1ff;color:#1b4a8a}
.doc-item .small.muted{font-size:.78rem}

/* Form tindakan dokumen di panel admin */
form.dok-aksi{display:flex;flex-direction:column;gap:.4rem;min-width:230px}
form.dok-aksi textarea{width:100%;font:inherit;font-size:.82rem;padding:.45rem .6rem;
  border:1px solid var(--jpm-line);border-radius:10px;resize:vertical}
form.dok-aksi textarea:focus{outline:none;border-color:var(--jpm-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
form.dok-aksi .actions{gap:.35rem}

/* Stepper verifikasi */
.stepper{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.2rem 0 1.4rem;padding:0}
.stepper li{display:flex;align-items:center;gap:.5rem;flex:1 1 200px;
  border:1px solid var(--jpm-line);border-radius:999px;padding:.5rem .9rem;
  font-weight:600;font-size:.9rem;color:var(--jpm-muted);background:#fff}
.stepper .step-no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#eef0f6;color:var(--jpm-muted);font-size:.8rem}
.stepper li.is-active{border-color:var(--jpm-red);color:var(--jpm-burgundy)}
.stepper li.is-active .step-no{background:var(--jpm-red);color:#fff}
.stepper li.is-done{border-color:#bfe6cd;color:#146c37}
.stepper li.is-done .step-no{background:#146c37;color:#fff}
.verif-step h2{margin:0 0 .3rem;font-size:1.1rem;color:var(--jpm-navy)}
.verif-step .filterbar{margin-top:.9rem}
.verif-step .form-actions{margin-top:1.2rem}

/* Komposisi seksi publik: grid kartu konsisten & center */
.section > .container > h2,
.section-head{text-align:center}
.card-grid,.grid-3,.grid-4{align-items:stretch}
.card-grid > *,.grid-3 > *,.grid-4 > *{display:flex;flex-direction:column}
.card-grid .btn,.grid-3 .btn,.grid-4 .btn{margin-top:auto;align-self:flex-start}

@media (max-width:640px){
  .stepper li{flex:1 1 100%}
  form.dok-aksi{min-width:0}
}

/* =====================================================================
   v9.1 — Perbaikan komposisi header publik pada layar 1024px–1180px
   Masalah: tombol CTA navigasi keluar viewport (overflow horizontal 54px)
   karena aturan padding CTA yang dimuat belakangan menimpa media query.
   ===================================================================== */
html,body{max-width:100%;overflow-x:clip}

@media (max-width:1180px) and (min-width:1025px){
  .nav-list{gap:.6rem}
  .nav-list a{font-size:.82rem}
  .nav .nav-cta{padding:.5rem .9rem;font-size:.8rem}
}

/* Alihkan ke menu ringkas (hamburger) lebih awal, sebelum baris menu penuh. */
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .site-header{position:sticky;top:0;z-index:60}
  .header-in{position:relative}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-bottom:1px solid var(--jpm-line);
    box-shadow:0 24px 40px -28px rgba(20,24,45,.75);
    padding:.5rem clamp(4%,5vw,6%) 1rem;
    max-height:calc(100vh - 70px);overflow:auto;z-index:60;
  }
  .nav.open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list a{display:block;padding:.85rem .2rem;border-bottom:1px solid var(--jpm-line);font-size:.95rem}
  .nav-list li:last-child a{border-bottom:0}
  .nav-cta-wrap{margin-top:.8rem}
  .nav .nav-cta{display:flex;width:100%;justify-content:center;font-size:.95rem;padding:.8rem 1rem}
}

/* Marquee mitra tidak boleh menambah lebar dokumen. */
.marquee{overflow:hidden;max-width:100%}

/* ===================================================================
 * v9.2 — Perbaikan komposisi tabel, stepper peserta & dashboard admin
 * =================================================================== */

/* --- Tabel: proporsional, tanpa overlap, tanpa overflow tak perlu --- */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.data th, table.data td {
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data .col-aksi { text-align: right; white-space: nowrap; }
table.data .actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
table.data .actions form { margin: 0; }
table.data td .btn { white-space: nowrap; }
tr.is-unread td { background: rgba(201, 162, 39, .08); }

/* Mode kartu di layar kecil: tidak ada teks bertabrakan/terpotong */
@media (max-width: 720px) {
  .table-batch, .table-pesan, .table-dash { table-layout: auto; }
  .table-batch colgroup, .table-pesan colgroup, .table-dash colgroup { display: none; }
  .table-batch thead, .table-pesan thead, .table-dash thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-batch tr, .table-pesan tr, .table-dash tr {
    display: block; margin: 0 0 .75rem; padding: .35rem .1rem;
    border: 1px solid rgba(11, 31, 59, .12); border-radius: 12px; background: #fff;
  }
  .table-batch td, .table-pesan td, .table-dash td {
    display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
    border: 0; border-bottom: 1px dashed rgba(11, 31, 59, .1); padding: .5rem .8rem; text-align: right;
  }
  .table-batch tr td:last-child, .table-pesan tr td:last-child, .table-dash tr td:last-child { border-bottom: 0; }
  .table-batch td::before, .table-pesan td::before, .table-dash td::before {
    content: attr(data-label);
    font-weight: 600; color: #0B1F3B; opacity: .7; text-align: left; flex: 0 0 40%;
  }
  .table-batch td.col-aksi, .table-pesan td.col-aksi { justify-content: space-between; }
  table.data .actions { justify-content: flex-end; }
}

/* --- Stepper alur peserta: tiap langkah kini tautan --- */
.lms-steps { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.2rem 0; }
.lms-steps li { flex: 1 1 190px; }
.lms-steps li > a {
  display: flex; align-items: center; gap: .6rem; height: 100%;
  padding: .7rem .9rem; border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(11, 31, 59, .14); background: #fff; color: #0B1F3B;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.lms-steps li > a:hover { border-color: #7A1220; box-shadow: 0 6px 18px rgba(122, 18, 32, .12); transform: translateY(-1px); }
.lms-steps .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: rgba(11, 31, 59, .08); font-weight: 700; font-size: .82rem;
}
.lms-steps .lbl { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.lms-steps li.is-now > a { border-color: #7A1220; background: rgba(122, 18, 32, .05); }
.lms-steps li.is-now .num { background: #7A1220; color: #fff; }
.lms-steps li.is-done .num { background: #C9A227; color: #0B1F3B; }

/* --- Dashboard admin: kartu & panel sejajar --- */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.adm-card { min-width: 0; }
.adm-card strong { display: block; overflow-wrap: anywhere; line-height: 1.2; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; align-items: start; }
.adm-panel { min-width: 0; }
.adm-panel .panel-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; justify-content: space-between; }
table.data td.empty, table.data td.muted { text-align: center; padding: 1.2rem; opacity: .75; }