/* ELS Materi Present — gaya khusus aplikasi ini (dimuat sesudah tokens.css dan app.css). Hanya token --color-*, tanpa warna
   mentah. Milik aplikasi: boleh diubah; tokens.css dan app.css tidak. */

.strong { font-weight: 700; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.select-sm { min-height: 36px; width: auto; font-size: var(--fs-sm); padding-right: var(--space-5); }
.toolbar-row { margin-bottom: var(--space-4); }
.section-title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.textarea { min-height: 64px; padding: var(--space-2) var(--space-3); resize: vertical; }
.page-head.row-between { align-items: flex-end; }

/* <details>: penanda buka/tutup yang jelas. app.css (template) memberi summary display:flex sehingga ::marker bawaan
   hilang dan label tampak seperti teks biasa tanpa isi. */
details > summary { list-style: none; color: var(--color-link); font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸'; display: inline-block; width: 1em; flex: none; text-align: center; }
details[open] > summary::before { content: '▾'; }
details > summary:hover { text-decoration: underline; }

/* ================================================================== navigasi utama */
.subnav { position: relative; z-index: 1; border-bottom: 1px solid var(--color-border); background: var(--color-glass); }
.subnav-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4);
  display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); white-space: nowrap;
  color: var(--color-muted); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  border-bottom: 2px solid transparent;
}
.subnav-link:hover { color: var(--color-text); }
.subnav-link[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-primary); }

/* ================================================================== beranda */
.deck-name { font-size: var(--fs-lg); }
.variant-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.variant-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-border);
}
.variant-name { font-size: var(--fs-md); }
.variant-actions { flex-shrink: 0; }
.is-archived { opacity: .7; }
@media (max-width: 639px) {
  .variant-actions { width: 100%; }
  .variant-actions .btn { flex: 1 1 auto; }
}

/* ================================================================== unggah */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 140px; padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); text-align: center; cursor: pointer;
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface);
  transition: border-color .24s, background-color .24s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--color-primary); background: var(--color-primary-soft); }
input.sr-only:focus-visible + .dropzone { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.table th { color: var(--color-muted); font-weight: 600; white-space: nowrap; }
.upload-table td { min-width: 120px; }
/* Deck/Varian: lebar select mengikuti pilihan terpanjang (label tidak terpotong); tabel menggulir bila perlu */
.upload-table td[data-label="Deck"], .upload-table td[data-label="Varian"] { min-width: 150px; }
.upload-table .select { width: auto; min-width: 100%; max-width: 360px; padding-right: var(--space-5); }
.upload-table tr.detail td { padding-top: 0; }
.upload-table tr:not(.detail) td { border-bottom: 0; }
.upload-table .select, .upload-table .input { font-size: var(--fs-sm); min-height: 38px; }
.reasons { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.detail-box:empty { display: none; }
.summary-box { padding: var(--space-3); border-radius: var(--radius); background: var(--color-surface-2); }
.summary-box > * + * { margin-top: var(--space-2); }
.summary-list { margin: 0; padding-left: var(--space-5); font-size: var(--fs-sm); }
.summary-list li + li { margin-top: 2px; }
.warn-list { margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.warn-list li + li { margin-top: var(--space-1); }
.status-text { overflow-wrap: anywhere; }
.checks { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.checks .ok { color: var(--color-success-text); }
.checks .bad { color: var(--color-danger-text); font-weight: 700; }
.checks .warn { color: var(--color-warning-text); font-weight: 700; }

/* tabel → kartu di layar sempit */
@media (max-width: 719px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .upload-table tr:not(.detail) { border-bottom: 0; }
  .table td { border: 0; padding: var(--space-1) var(--space-3); min-width: 0; }
  .table td[data-label] { min-width: 0; }
  .upload-table .select { width: 100%; max-width: 100%; }
  .table td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; color: var(--color-muted); font-size: var(--fs-xs); font-weight: 600;
  }
}

/* ================================================================== diff & konflik */
.diff > * + * { margin-top: var(--space-3); }
.hunk, .conflict { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.conflict { padding-bottom: var(--space-2); }
.hunk-head { padding: var(--space-1) var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); font-weight: 600; }
.cols-2, .cols-3 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .cols-2 > * + *, .cols-3 > * + * { border-left: 1px solid var(--color-border); }
}
.diff-col { min-width: 0; }
.diff-label { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }
.diff-old .diff-label { color: var(--color-danger-text); }
.diff-new .diff-label { color: var(--color-success-text); }
.code {
  margin: 0; padding: var(--space-2) var(--space-3); max-height: 320px; overflow: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
mark.w-del { background: var(--color-danger-bg); color: var(--color-danger-text); border-radius: 2px; }
mark.w-add { background: var(--color-success-bg); color: var(--color-success-text); border-radius: 2px; }
.conflict-choice { padding: var(--space-2) var(--space-3) 0; }

/* ================================================================== riwayat */
.version-list { list-style: none; margin: 0; padding: 0; }
.version-item.is-active { border-color: var(--color-success-border); }
.version-n { font-size: var(--fs-lg); }
.version-note { margin-top: var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.version-item details { margin-top: var(--space-2); }
.compare { margin-bottom: var(--space-5); }
.compare-row .select { width: auto; min-width: 140px; flex: 1 1 140px; }

/* ================================================================== terapkan & kelola */
.target-card .row .select { width: auto; }
.audit-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: var(--fs-sm); }
.audit-list li { padding: var(--space-1) 0; border-top: 1px solid var(--color-border); }
.manage-variant .input-group { max-width: 420px; }