.submission-tracking { width:min(1080px,calc(100% - 32px)); margin:32px auto 64px; }
.track-modal { width:min(560px,92vw); box-sizing:border-box; }
.track-modal .form-field { font-size:var(--text-body,14px); }
.track-modal .form-field input { font-size:16px; }
.track-modal .form-field .field-error { margin-top:2px; color:var(--field-error,#e64047); font-size:var(--text-small,13px); font-weight:600; line-height:1.5; }
.track-modal [data-public-tracking-results] { max-height:min(55vh,470px); overflow:auto; }
.track-modal .tracking-item + .tracking-item { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.track-modal .tracking-item small { display:block; color:var(--muted); margin-top:6px; }
.track-modal .submission-timeline { margin:16px 0 0; }
/* Hasil NIM pada modal: daftar kode pengajuan yang dapat dipilih. */
.track-modal .tracking-list__lead { margin:16px 0 10px; color:var(--muted); font-size:13px; }
.tracking-code-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.tracking-code-item { width:100%; display:grid; gap:6px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--navy); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s, background .2s; }
.tracking-code-item:hover, .tracking-code-item:focus-visible { border-color:var(--orange); background:#fffaf6; outline:0; }
.tracking-code-item__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.tracking-code-item__head b { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; overflow-wrap:anywhere; }
.tracking-code-item small { color:var(--muted); font-size:12px; }

/* Halaman status /lacak-pengajuan/<kode>/ (langkah Konfirmasi wizard homepage). */
.tracking-status__summary { margin-top:22px; }
.tracking-status__summary h3 { margin:10px 0 12px; font:700 20px/1.3 var(--font-heading); color:var(--navy); }
.tracking-status__meta { display:grid; gap:10px; margin:0 0 22px; }
.tracking-status__meta > div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; }
.tracking-status__meta dt { color:var(--muted); font-size:13px; }
.tracking-status__meta dd { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-weight:600; }
.tracking-status__meta code { padding:6px 10px; border-radius:8px; background:#fff3ea; color:var(--navy); font-size:14px; overflow-wrap:anywhere; }
.tracking-status__meta .btn { min-height:34px; padding:6px 12px; font-size:12px; }
.tracking-status__skm { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.tracking-status__skm h3 { font-family:var(--font-heading); margin:0 0 7px; }
.tracking-status__skm p { color:var(--muted); font-size:13px; line-height:1.5; }
.tracking-status__skm #publicProofForm { margin-top:16px; }
@media (max-width:620px) { .tracking-status__meta > div { grid-template-columns:1fr; gap:4px; } }
.submission-tracking .detail-section,.submission-tracking .page-title { margin-bottom:24px; }
.submission-tracking .form-field { font-size:var(--text-body,14px); }
.submission-tracking .form-field input { font-size:16px; }
.submission-tracking .form-field small,.submission-tracking .file-upload-field small { font-size:12px; }
.submission-tracking .public-header { margin-bottom:24px; }
.submission-actions,.submission-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.submission-links .btn { white-space:normal; text-align:left; overflow-wrap:anywhere; }
#submissions-table small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
#submissionDetail dd { white-space:pre-wrap; overflow-wrap:anywhere; }
.submission-timeline,.submission-events { list-style:none; padding:0; margin:20px 0; }
.submission-timeline li { border-left:3px solid var(--line); padding:0 0 20px 18px; }
.submission-timeline li.active { border-color:var(--orange); }
.submission-timeline li.done { border-color:var(--green); }
.submission-timeline li>b { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:50%; background:var(--orange-soft); font-size:12px; }
.submission-timeline strong,.submission-events strong { font-size:14px; }
.submission-timeline p,.submission-events p { margin:8px 0; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.submission-timeline small,.submission-events small { display:block; color:var(--muted); font-size:12px; line-height:1.5; }
.submission-events li { padding:12px 0; border-bottom:1px solid var(--line); }
.submission-tracking h1 { font-family:var(--font-heading); font-size:28px; }
.submission-tracking h2 { margin-top:16px; font-family:var(--font-heading); font-size:24px; }
.submission-tracking h3,#submissionDetail h3 { font-family:var(--font-heading); font-size:18px; }
.submission-tracking .detail-section { padding:24px; }
#proof-form { margin-top:24px; }
.submission-receipt { overflow-wrap:anywhere; }
.submission-receipt code { display:block; padding:12px; margin:10px 0; color:var(--navy); background:var(--orange-soft); user-select:all; font-size:14px; }
/* Surat otomatis: halaman A4 bersama (.letter-wizard-page) di tengah layar, catatan DRAFT di atasnya. */
.submission-draft-body { margin:0; background:#eef0f3; }
.submission-draft { width:min(720px, calc(100% - 32px)); margin:24px auto; }
.submission-draft .letter-wizard-preview { padding:0; background:transparent; }
.draft-notice { margin:0 0 14px; padding:10px 14px; border:1px solid #f3c7a8; border-radius:10px; background:#fff8f3; color:#b4531f; font:600 13px/1.5 var(--font-body); }
@media(max-width:720px) { .submission-tracking .design-form { grid-template-columns:1fr; }.submission-actions .btn { width:100%; }.submission-tracking .detail-section { padding:18px; } }
@media print { @page { size:A4; margin:0; }.submission-draft-body { background:#fff; }.submission-draft { width:auto; margin:0; }.draft-notice { display:none; }.submission-draft .letter-wizard-page { box-shadow:none; border:0; } }

/* Detail Pengajuan admin: desain awal (Log Pemrosesan + tombol aksi bawah) dengan data dan alur API. */
.status-history i .ui-icon { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; }
.status-history .status-audit .status-audit__note { margin-top:4px; color:var(--navy); font-size:var(--text-small,12px); font-style:normal; line-height:1.5; white-space:pre-line; }
.submission-process-lead { margin:-4px 0 16px; color:var(--muted); font-size:var(--text-body,14px); line-height:1.5; }
.submission-readonly-note:empty { display:none; }
#submission-process-dialog .modal { width:min(560px,94vw); }

/* Halaman status: panel "Perlu Perbaikan" dengan catatan petugas dan verifikasi email pemohon. */
.tracking-status__revision { margin-top:22px; padding:18px 20px; border:1px solid #f3c7a8; border-left:4px solid var(--orange); border-radius:12px; background:#fff8f3; }
.tracking-status__revision h3 { margin:0 0 8px; font-family:var(--font-heading); color:var(--navy); }
.tracking-status__revision p { color:var(--muted); font-size:13px; line-height:1.5; }
.tracking-status__revision .tracking-status__revision-note { color:var(--navy); font-weight:600; white-space:pre-line; }
.tracking-status__revision .tracking-status__revision-note:empty { display:none; }
#publicRevisionAccessForm { margin-top:14px; max-width:420px; }


/* Kotak catatan Log Pemrosesan dibedakan per tindakan; kotak dari pemohon tetap biru keabu-abuan. */
.status-history .status-audit.is-approved { border-color:#bfe3cf; background:#f1faf5; }
.status-history .status-audit.is-approved::before { content:'Disetujui oleh'; color:#1f8a4c; }
.status-history .status-audit.is-returned { border-color:#f6cfae; background:#fff6ee; }
.status-history .status-audit.is-returned::before { content:'Dikembalikan oleh'; color:#c25a1c; }
.status-history .status-audit.is-rejected { border-color:#f0c4c7; background:#fff3f4; }
.status-history .status-audit.is-rejected::before { content:'Ditolak oleh'; color:#b93838; }
/* Warna lebih tegas: tiap jenis catatan punya garis kiri berwarna; kotak dari pemohon biru agar tidak mirip disetujui. */
.status-history .status-audit { border-left-width:4px; }
.status-history .status-audit.submitted { border-color:#c3d6f5; border-left-color:#3b6fd1; background:#eef4ff; }
.status-history .status-audit.submitted::before { color:#2f5fb3; }
.status-history .status-audit.is-approved { border-color:#a8dcbd; border-left-color:#1f9d55; background:#e5f6ec; }
.status-history .status-audit.is-returned { border-color:#f3c39b; border-left-color:var(--orange); background:#fff1e6; }
.status-history .status-audit.is-rejected { border-color:#eeb3b8; border-left-color:#c94444; background:#ffeef0; }
/* Penyesuaian: catatan pemohon abu-abu; semua penolakan (dikembalikan maupun ditolak final) merah. */
.status-history .status-audit.submitted { border-color:#d9dde3; border-left-color:#8a94a3; background:#f3f4f6; }
.status-history .status-audit.submitted::before { color:#5f6b7a; }
.status-history .status-audit.is-returned, .status-history .status-audit.is-rejected { border-color:#eeb3b8; border-left-color:#c94444; background:#ffeef0; }
.status-history .status-audit.is-returned::before, .status-history .status-audit.is-rejected::before { color:#b93838; }

/* Halaman pratinjau dokumen pengajuan (admin): judul berkas, tombol Unduh, dan penampil PDF/gambar. */
.document-preview-head { gap:16px; }
.document-preview-head > div { min-width:0; }
.document-preview-head h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.document-preview-download { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; }
.document-preview-download .ui-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.document-preview { padding:0; overflow:hidden; }
.document-preview__frame { display:block; width:100%; height:calc(100vh - 260px); min-height:520px; border:0; background:#525659; }
.document-preview__image { display:grid; place-items:center; padding:24px; background:#f3f4f6; }
.document-preview__image img { max-width:100%; max-height:calc(100vh - 300px); border-radius:8px; box-shadow:0 8px 24px rgba(21,35,57,.12); }
.document-preview__empty { margin:0; padding:40px 24px; color:var(--muted); text-align:center; }
@media (max-width:620px) { .document-preview__frame { height:70vh; min-height:0; } }

/* Log Pemrosesan: subjudul bagian, lalu riwayat berbentuk chat (pemohon kiri, petugas kanan). */
.process-log-subtitle { margin:20px 0 12px; color:var(--muted); font:700 var(--text-caption,12px) var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.process-log-subtitle:first-of-type { margin-top:4px; }
.process-chat { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.process-chat__item { display:flex; align-items:flex-end; gap:10px; }
.process-chat__item.is-right { flex-direction:row-reverse; }
.process-chat__avatar { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#e7e9ee; color:#4f5868; font-size:var(--text-caption,12px); font-weight:700; }
.process-chat__item.is-approved .process-chat__avatar { background:#d7f0e1; color:#1f8a4c; }
.process-chat__item.is-rejected .process-chat__avatar { background:#fbdcdf; color:#b93838; }
.process-chat__bubble { position:relative; min-width:0; max-width:86%; display:grid; gap:6px; padding:11px 13px; border:1px solid #dfe2e7; border-radius:14px; background:#f3f4f6; }
.process-chat__item.is-left .process-chat__bubble { border-bottom-left-radius:4px; }
.process-chat__item.is-right .process-chat__bubble { border-bottom-right-radius:4px; }
.process-chat__item.is-approved .process-chat__bubble { border-color:#a8dcbd; background:#e5f6ec; }
.process-chat__item.is-rejected .process-chat__bubble { border-color:#eeb3b8; background:#ffeef0; }
.process-chat__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.process-chat__head b { color:var(--navy); font-size:var(--text-body,14px); }
.process-chat__head small { color:var(--muted); font-size:var(--text-caption,12px); }
.process-chat__label { color:#5f6b7a; font-size:var(--text-caption,12px); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.process-chat__item.is-approved .process-chat__label { color:#1f8a4c; }
.process-chat__item.is-rejected .process-chat__label { color:#b93838; }
.process-chat__route { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.process-chat__chip { max-width:100%; padding:3px 9px; border-radius:999px; background:#fff; border:1px solid rgba(23,35,59,.12); color:var(--navy); font-size:var(--text-small,13px); font-weight:600; overflow-wrap:anywhere; }
.process-chat__chip.is-target { border-color:currentColor; }
.process-chat__item.is-approved .process-chat__chip.is-target { color:#1f8a4c; }
.process-chat__item.is-rejected .process-chat__chip.is-target { color:#b93838; }
.process-chat__arrow { color:var(--muted); font-weight:700; }
.process-chat__note { margin:2px 0 0; color:var(--navy); font-size:var(--text-body,14px); line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.process-chat__bubble .process-document-actions { margin-top:4px; }
.process-chat__time { justify-self:end; color:#8a93a1; font-size:var(--text-caption,12px); }
@media (max-width:620px) { .process-chat__bubble { max-width:100%; } .process-chat__avatar { display:none; } }
/* Cegah gulir horizontal: kolom detail, chat, dan gelembung tidak boleh melebar mengikuti isi (nama dokumen panjang). */
#adminApp [data-submission-detail] .detail-page-grid > div, #adminApp [data-submission-detail] .detail-page-grid > aside, #adminApp [data-submission-detail] .detail-section { min-width:0; }
.process-chat, .process-chat__item { min-width:0; max-width:100%; }
.process-chat__bubble { flex:0 1 auto; grid-template-columns:minmax(0, 1fr); }
.process-chat__bubble > * { min-width:0; }
.process-chat__bubble .process-document-actions { min-width:0; }
#adminApp .process-chat__bubble .process-document-button { max-width:100%; }
/* Riwayat Percakapan: panel penuh di bawah kolom data dan tahapan; gelembung dibatasi agar nyaman dibaca. */
.process-chat-panel { margin-top:17px; min-width:0; }
.process-chat-panel .process-chat__bubble { max-width:min(640px, 82%); }
@media (max-width:620px) { .process-chat-panel .process-chat__bubble { max-width:100%; } }
/* Panel Tahapan Pemrosesan setinggi kolom kiri (Data Pemohon + Detail Layanan) agar tidak ada ruang kosong di bawahnya. */
#adminApp [data-submission-detail] .detail-page-grid { align-items:stretch; }
#adminApp [data-submission-detail] .detail-page-grid > aside { display:flex; flex-direction:column; }
#adminApp [data-submission-detail] .detail-page-grid > aside > .panel { flex:1; }
/* Area chat bergaya WhatsApp: latar krem bermotif titik halus, gelembung putih/hijau/merah, pembatas tanggal di tengah. */
.process-chat { padding:18px 16px; border:1px solid #e3ddd3; border-radius:14px; background-color:#efeae2;
  background-image:radial-gradient(rgba(84,72,56,.09) 1px, transparent 1.2px), radial-gradient(rgba(84,72,56,.06) 1px, transparent 1.2px);
  background-size:22px 22px, 22px 22px; background-position:0 0, 11px 11px; }
.process-chat__item.is-applicant .process-chat__bubble { border-color:#e6e2da; background:#fff; }
.process-chat__item.is-approved .process-chat__bubble { border-color:#bfe7c9; background:#dcf8e3; }
.process-chat__item.is-rejected .process-chat__bubble { border-color:#f2c2c6; background:#ffe9eb; }
.process-chat__bubble { box-shadow:0 1px 1.5px rgba(11,20,26,.13); }
.process-chat__avatar { box-shadow:0 0 0 2px #fff; }
.process-chat__item.is-applicant .process-chat__avatar { background:#fff; color:#5f6b7a; box-shadow:0 0 0 1px #e3ddd3; }
.process-chat__chip { background:rgba(255,255,255,.85); }
.process-chat__day { display:flex; justify-content:center; margin:2px 0; }
.process-chat__day span { padding:5px 12px; border-radius:8px; background:#fff; color:#54656f; font-size:var(--text-caption,12px); font-weight:600; box-shadow:0 1px 1px rgba(11,20,26,.1); }
@media (max-width:620px) { .process-chat { padding:12px 10px; } }

/* Halaman status memakai wizard bersama (.public-wizard); isi langkah berada di kartu .public-form-step. */
.tracking-status .tracking-status__summary { margin-top:0; }
.tracking-status .process-timeline-card { margin-top:4px; }
.tracking-skm-steps { display:grid; gap:18px; margin:0; padding:0; list-style:none; }
.tracking-skm-steps > li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start; }
.tracking-skm-steps > li > b { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--orange-soft); color:var(--orange); font-size:13px; }
.tracking-skm-steps > li + li { padding-top:18px; border-top:1px solid var(--line); }
.tracking-skm-steps strong { display:block; margin:5px 0 6px; color:var(--navy); font:700 16px var(--font-heading); }
.tracking-skm-steps p { margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.55; }
.tracking-skm-steps #publicProofForm { margin-top:10px; }
.tracking-skm-state { margin-top:10px !important; color:var(--green) !important; font-weight:600; }
.tracking-skm-state:empty { display:none; }
.tracking-download { display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px 16px; align-items:center; }
.tracking-download__icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--orange-soft); color:var(--orange); }
.tracking-download__icon .ui-icon { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; }
.tracking-download h3 { margin:0 0 4px; color:var(--navy); font:700 18px var(--font-heading); }
.tracking-download p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.tracking-download .btn { grid-column:1 / -1; justify-self:start; min-width:200px; }
@media (max-width:620px) { .tracking-download .btn { justify-self:stretch; } }

/* Kartu tautan SKM pada langkah Survei Kepuasan: seluruh kartu dapat diklik, ikon salin di ujung kanan. */
.tracking-skm-link { display:flex; align-items:stretch; margin:4px 0 2px; border:1px solid #f3c7a8; border-radius:12px; background:#fff8f3; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.tracking-skm-link:hover { border-color:var(--orange); box-shadow:0 6px 18px rgba(232,111,45,.14); }
.tracking-skm-link a { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:12px 14px; color:var(--navy); text-decoration:none; }
.tracking-skm-link__icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--orange); color:#fff; }
.tracking-skm-link__icon .ui-icon, .tracking-skm-link__copy .ui-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.tracking-skm-link__text { min-width:0; display:grid; gap:2px; }
.tracking-skm-link__text b { font-size:15px; }
.tracking-skm-link__text small { color:var(--orange); font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracking-skm-link a:hover .tracking-skm-link__text small { text-decoration:underline; }
.tracking-skm-link__copy { flex:0 0 52px; display:grid; place-items:center; border:0; border-left:1px solid #f3c7a8; background:transparent; color:#7a5a45; cursor:pointer; transition:background .2s, color .2s; }
.tracking-skm-link__copy:hover, .tracking-skm-link__copy:focus-visible { background:#ffefe3; color:var(--orange); outline:0; }
.tracking-skm-link__copy.is-copied { color:#1f9d55; }

/* Kotak sidebar halaman status: hijau saat menampilkan lama penyelesaian sebenarnya. */
.public-wizard .public-form-estimate.is-finished { border-color:#bfe7c9; background:#effaf3; }
.public-wizard .public-form-estimate.is-finished > span { color:#1f8a4c; }

/* Surat otomatis (HTML) pada halaman pratinjau: latar abu seperti penampil dokumen. */
.document-preview__frame--letter { background:#eef0f3; }

/* Kelompok dokumen dalam gelembung chat: dipisah garis dan label sumber (sistem / pemohon / petugas). */
.process-chat__documents { display:grid; gap:6px; margin-top:4px; padding-top:10px; border-top:1px dashed rgba(23,35,59,.18); }
.process-chat__documents-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.process-chat__documents-head b { display:inline-flex; align-items:center; gap:6px; color:var(--navy); font-size:var(--text-caption,12px); letter-spacing:.04em; text-transform:uppercase; }
.process-chat__documents-head b::before { content:""; width:8px; height:8px; border-radius:50%; background:#8a94a3; }
.process-chat__documents.is-system .process-chat__documents-head b::before { background:#3b6fd1; }
.process-chat__documents.is-applicant .process-chat__documents-head b::before { background:var(--orange); }
.process-chat__documents.is-staff .process-chat__documents-head b::before { background:#1f9d55; }
.process-chat__documents-head small { color:var(--muted); font-size:var(--text-caption,12px); }
.process-chat__documents .process-document-actions { margin-top:0; }
/* Dokumen buatan sistem memakai tombol biru agar berbeda dari unggahan (oranye). */
#adminApp .process-chat__documents.is-system .process-document-button { background:#3b6fd1; border-color:#3b6fd1; box-shadow:0 7px 18px rgba(59,111,209,.2); }
#adminApp .process-chat__documents.is-system .process-document-button:hover { background:#2f5fb3; border-color:#2f5fb3; }