/* Usulan rombak UI Kustomisasi Laporan V2 (tambah, detail, detail-ai).
 * Hanya komponen Bootstrap 3 + SIAKAD v1; satu-satunya warna baru: gradien tombol AI (sama dengan tag "AI" di daftar).
 * Dipasang oleh _build/restyle.mjs, dimuat setelah mockup.css. */

/* ---------- tombol AI: pembeda dari tombol aksi biasa ---------- */
.btn.btn-ai { color: #fff; border-color: #2563eb; background: linear-gradient(135deg, #2563eb, #7c3aed); font-weight: 600; }
.btn.btn-ai:hover, .btn.btn-ai:focus, .btn.btn-ai:active { color: #fff; border-color: #1d4ed8; background: linear-gradient(135deg, #1d4ed8, #6d28d9); }
.btn.btn-ai img { width: 16px; height: 16px; margin: -3px 6px 0 0; vertical-align: middle; }

/* ---------- Nama Template: tanpa kartu, menyatu dengan baris form ---------- */
.tpl-source { width: 100%; max-width: 380px; padding: 2px 0 6px; }
.tpl-source > .btn-block { margin-top: 0; }
.tpl-or { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #9e9e9e; }
.tpl-or::before, .tpl-or::after { content: ""; flex: 1; border-top: 1px solid #eaecf0; }
.tpl-source .help-block { margin: 6px 0 0; }
.tpl-link { color: #2b45a2; font-weight: 500; white-space: nowrap; }
.tpl-source input[type=file] { display: block; width: 100%; padding: 4px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #606060; }
.tpl-source input[type=file]::file-selector-button { margin-right: 10px; padding: 4px 12px; border: 1px solid #ddd; border-radius: 3px; background: #fafafa; color: #666; font: 500 13px Poppins, sans-serif; cursor: pointer; }
.tpl-source input[type=file]::file-selector-button:hover { background: #f4f4f4; }

.input-namatemplate a[data-type="download"] ~ .tpl-source { padding-top: 10px; }

/* ---------- Daftar Variabel: tampilan custom di atas token v1 (teks minimal 13px) ---------- */
.var-total { margin-right: 8px; color: #606060; }

#var-groups .collapse-trigger-link { display: block; padding: 10px 15px; color: #333; text-decoration: none; cursor: pointer; }
#var-groups .collapse-trigger-link:hover { text-decoration: none; background: #f5f5f5; }
#var-groups .toggle-icon { width: 14px; display: inline-block; }
#var-groups .var-group-desc { margin-left: 6px; color: #757575; font-weight: 400; }
#var-groups .panel-heading { background: #fff; }
#var-groups .panel-collapse { overflow: hidden; }
#var-groups .panel-body { padding: 0; border-top: 1px solid #eaecf0; }

.var-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: -1px; }
.var-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 15px; border-bottom: 1px solid #eaecf0; }
.var-item:nth-child(odd) { border-right: 1px solid #eaecf0; }
.var-desc { flex: 1; min-width: 0; color: #333; }
.var-empty { margin: 0; padding: 14px 15px; color: #757575; }
.var-none { border: 1px solid #eaecf0; border-radius: 4px; }

.var-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 10px; border: 1px solid transparent; border-radius: 4px; background: #3850c910; color: #2b45a2; font: 500 13px/20px Consolas, "Courier New", monospace; cursor: pointer; }
.var-chip:hover { border-color: #3850c9; }
.var-chip .fa { color: #9e9e9e; font-size: 13px; }
.var-chip.is-copied { border-color: #95c9b4; background: #f1f8f5; color: #00880d; }
.var-chip.is-copied .fa { color: #00880d; }

@media (max-width: 767.98px) {
    .var-grid { grid-template-columns: 1fr; }
    .var-item:nth-child(odd) { border-right: 0; }
    #var-groups .var-group-desc { display: none; }
}

/* ---------- Tabel Jabatan: sama dengan grid variabel (header terang, garis tipis, chip), kolom pertama menempel saat digeser ---------- */
/* kustomisasiv2.css memaksa th/td 9px, garis tebal, header biru tua, dan baris selang-seling untuk seluruh halaman */
.jabatan-scroll table { width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
.jabatan-scroll table thead tr, .jabatan-scroll table thead tr:first-child { background: none; color: #001b36; }
.jabatan-scroll table th, .jabatan-scroll table td { padding: 10px 15px; border: 0; border-bottom: 1px solid #eaecf0; font-size: 13px; text-align: left; white-space: nowrap; }
.jabatan-scroll table thead th { background: #f4f4f5; color: #001b36; font-weight: 600; }
.jabatan-scroll table tbody tr, .jabatan-scroll table tbody tr:nth-child(even) { background: #fff; }
.jabatan-scroll table tbody tr:hover, .jabatan-scroll table tbody tr:hover td:first-child { background: #f5f5f5; }
.jabatan-scroll table th:first-child, .jabatan-scroll table td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #eaecf0; }
.jabatan-scroll table tbody td:first-child { background: #fff; color: #001b36; font-weight: 500; }
.jabatan-scroll table thead th:first-child { background: #f4f4f5; }
.jabatan-scroll table tbody tr:last-child td { border-bottom: 0; }