/* =========================================================================
   Halaman Detail Produk Hukum — frontend/views/regulation/view.php
   Token IDDS, dilingkupi .jdih-detail supaya tidak membocorkan gaya ke
   header, sidebar, dan footer situs. Sebelumnya inline di view; dipisah
   agar bisa dicache peramban dan disunting tanpa menyentuh PHP.
   ========================================================================= */

/* =========================================================================
   Halaman Detail Produk Hukum — token IDDS, dilingkupi .jdih-detail
   supaya tidak membocorkan gaya ke header, sidebar, dan footer situs.
   ========================================================================= */
.jdih-detail {
    /* Token (--jd-*) berada di jdih-tokens.css, dipakai bersama halaman daftar. */
    font-family: var(--jd-font);
    color: var(--jd-text);
    background: var(--jd-surface-subtle);
    padding: var(--jd-32) 0 var(--jd-48);
    margin-top: 50px;
}

/* AdminLTE menyetel font-family eksplisit pada h1–h6 ("Source Sans Pro"), dan
   aturan elemen itu mengalahkan pewarisan dari .jdih-detail apa pun urutan
   stylesheet-nya. Heading di halaman ini ditegaskan memakai typeface IDDS. */
.jdih-detail h1,
.jdih-detail h2,
.jdih-detail h3,
.jdih-detail h4,
.jdih-detail .jd-modal-title {
    font-family: var(--jd-font);
}

.jdih-detail .jd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--jd-24);
}
@media (max-width: 767px) {
    .jdih-detail { padding: var(--jd-16) 0 var(--jd-32); }
    .jdih-detail .jd-container { padding: 0 var(--jd-16); }
}

/* ---------- Remah jejak ---------- */
.jdih-detail .jd-breadcrumb {
    font-size: 14px; line-height: 20px;
    color: var(--jd-text-muted);
    margin-bottom: var(--jd-16);
}
.jdih-detail .jd-breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--jd-8);
}
.jdih-detail .jd-breadcrumb li { display: flex; align-items: center; gap: var(--jd-8); }
.jdih-detail .jd-breadcrumb li + li::before {
    content: "/"; color: var(--jd-border-strong);
}
/* main.css memasang `#landing-content a { color:#dd4b39 }` dengan spesifisitas ID.
   Selektor di bawah ikut memakai id pembungkus supaya warna tautan halaman ini
   menang tanpa perlu !important. */
#landing-content.jdih-detail .jd-breadcrumb a { color: var(--jd-text-secondary); }
#landing-content.jdih-detail .jd-breadcrumb a:hover { color: var(--jd-brand-hover); }
.jdih-detail .jd-breadcrumb [aria-current="page"] {
    color: var(--jd-text); font-weight: 500;
    max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Kepala halaman ---------- */
.jdih-detail .jd-pagehead {
    background: var(--jd-surface);
    border: 1px solid var(--jd-border);
    border-radius: var(--jd-radius);
    padding: var(--jd-16) var(--jd-24);
    margin-bottom: var(--jd-16);
}
@media (max-width: 767px) { .jdih-detail .jd-pagehead { padding: var(--jd-16); } }

.jdih-detail .jd-eyebrow {
    display: inline-block;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--jd-text-secondary);
    background: var(--jd-surface-sunken);
    border-radius: var(--jd-radius);
    padding: var(--jd-4) var(--jd-12);
    margin-bottom: var(--jd-12);
}
/* Judul dibuat ringkas agar kepala halaman tidak memakan layar; jenis produk
   hukum tidak lagi diulang sebagai label di atas judul (sudah ada di remah jejak). */
.jdih-detail h1.jd-title {
    font-size: 24px; line-height: 32px; font-weight: 700;
    color: var(--jd-navy);
    margin: 0 0 var(--jd-4);
}
.jdih-detail .jd-subtitle {
    font-size: 16px; line-height: 24px;
    color: var(--jd-text-secondary);
    margin: 0 0 var(--jd-16);
}
@media (max-width: 767px) {
    .jdih-detail h1.jd-title { font-size: 20px; line-height: 28px; }
    .jdih-detail .jd-subtitle { font-size: 15px; line-height: 22px; margin-bottom: var(--jd-12); }
}

.jdih-detail .jd-facts {
    display: flex; flex-wrap: wrap; gap: var(--jd-8) var(--jd-12);
    align-items: center;
}
.jdih-detail .jd-badge {
    display: inline-flex; align-items: center; gap: var(--jd-8);
    font-size: 14px; line-height: 20px; font-weight: 600;
    padding: var(--jd-8) var(--jd-12);
    border-radius: var(--jd-radius);
    border: 1px solid transparent;
}
.jdih-detail .jd-badge.is-aktif {
    color: var(--jd-success); background: var(--jd-success-bg); border-color: var(--jd-success);
}
.jdih-detail .jd-badge.is-nonaktif {
    color: var(--jd-neutral-state); background: var(--jd-neutral-bg); border-color: var(--jd-border-strong);
}
.jdih-detail .jd-fact {
    display: inline-flex; align-items: center; gap: var(--jd-8);
    font-size: 14px; line-height: 20px;
    color: var(--jd-text-secondary);
    background: var(--jd-surface-subtle);
    border: 1px solid var(--jd-border);
    border-radius: var(--jd-radius);
    padding: var(--jd-8) var(--jd-12);
}
.jdih-detail .jd-fact .jd-fact-label {
    color: var(--jd-text-secondary); font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
}
.jdih-detail .jd-fact b { color: var(--jd-text); font-weight: 600; }

/* ---------- Kerangka dua kolom ---------- */
.jdih-detail .jd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--jd-24);
    align-items: start;
}
@media (max-width: 991px) {
    .jdih-detail .jd-layout { grid-template-columns: minmax(0, 1fr); }
}

.jdih-detail .jd-main,
.jdih-detail .jd-aside {
    display: flex; flex-direction: column; gap: var(--jd-24);
    min-width: 0;
}
@media (min-width: 992px) {
    /* Panel aksi tetap terlihat saat metadata digulir — pengguna selalu tahu
       apa yang bisa dilakukan tanpa harus mengingat letak tombol. */
    .jdih-detail .jd-aside { position: sticky; top: var(--jd-24); }
}

/* ---------- Kartu ---------- */
.jdih-detail .jd-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-border);
    border-radius: var(--jd-radius);
    overflow: hidden;
}
.jdih-detail .jd-card > h2,
.jdih-detail .jd-card > h3 {
    font-size: 16px; line-height: 24px; font-weight: 600;
    color: var(--jd-navy);
    margin: 0;
    padding: var(--jd-16) var(--jd-24);
    border-bottom: 1px solid var(--jd-border);
    background: var(--jd-surface-subtle);
}
.jdih-detail .jd-card-body { padding: var(--jd-24); }
@media (max-width: 767px) {
    .jdih-detail .jd-card > h2,
    .jdih-detail .jd-card > h3 { padding: var(--jd-12) var(--jd-16); }
    .jdih-detail .jd-card-body { padding: var(--jd-16); }
}

/* Sasaran lompatan: beri ruang di atas agar judul seksi tidak tertutup
   navbar yang position:fixed. --navbar-h diisi skrip di layout utama. */
.jdih-detail .jd-anchor { scroll-margin-top: calc(var(--navbar-h, 80px) + var(--jd-16)); }

/* ---------- Modal abstrak ---------- */
.jdih-detail .jd-modal-content {
    border: 1px solid var(--jd-border);
    border-radius: var(--jd-radius);
    box-shadow: 0 24px 64px -24px rgba(20, 26, 25, .35);
    font-family: var(--jd-font);
    color: var(--jd-text);
}
.jdih-detail .jd-modal-header {
    display: block;
    text-align: left;
    padding: var(--jd-24);
    border-bottom: 1px solid var(--jd-border);
    background: var(--jd-surface-subtle);
    border-radius: var(--jd-radius) var(--jd-radius) 0 0;
}
/* Bootstrap 3 menyisipkan clearfix ::before/::after (display:table) pada
   .modal-header. Dalam kontainer flex keduanya ikut menjadi item flex dan
   menggeser judul ke tengah; dimatikan supaya judul menempel di kiri. */
.jdih-detail .jd-modal-header::before,
.jdih-detail .jd-modal-header::after { content: none; display: none; }
.jdih-detail .jd-modal-title {
    margin: 0 0 var(--jd-4);
    font-size: 24px; line-height: 32px; font-weight: 700; color: var(--jd-navy);
    text-align: left;
}
.jdih-detail .jd-modal-sub {
    margin: 0; font-size: 14px; line-height: 20px; color: var(--jd-text-secondary);
    text-align: left;
}
.jdih-detail .jd-modal-body {
    padding: var(--jd-24);
    max-height: min(70vh, 720px);
    overflow-y: auto;
}
.jdih-detail .jd-modal-footer {
    padding: var(--jd-16) var(--jd-24);
    border-top: 1px solid var(--jd-border);
    text-align: right;
}
@media (max-width: 767px) {
    .jdih-detail .jd-modal-header,
    .jdih-detail .jd-modal-body { padding: var(--jd-16); }
    .jdih-detail .jd-modal-footer { padding: var(--jd-12) var(--jd-16); }
    .jdih-detail .jd-modal-title { font-size: 20px; line-height: 28px; }
}

.jdih-detail .jd-section-label {
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--jd-text-muted);
    padding: var(--jd-16) var(--jd-24) var(--jd-8);
    margin: 0;
    border-top: 1px solid var(--jd-border);
    background: var(--jd-surface);
}
.jdih-detail .jd-card > .jd-section-label:first-of-type { border-top: 0; }
@media (max-width: 767px) {
    .jdih-detail .jd-section-label { padding: var(--jd-12) var(--jd-16) var(--jd-4); }
}

/* ---------- Tabel metadata ---------- */
.jdih-detail .jd-meta { width: 100%; border-collapse: collapse; }
.jdih-detail .jd-meta th,
.jdih-detail .jd-meta td {
    padding: var(--jd-12) var(--jd-24);
    font-size: 16px; line-height: 24px;
    vertical-align: top;
    border-bottom: 1px solid var(--jd-border);
    text-align: left;   /* menimpa `text-align:right` dari main.css */
}
.jdih-detail .jd-meta tr:last-child th,
.jdih-detail .jd-meta tr:last-child td { border-bottom: 0; }
.jdih-detail .jd-meta th {
    width: 34%;
    font-weight: 500;
    color: var(--jd-text-secondary);
    background: var(--jd-surface);
}
.jdih-detail .jd-meta td { color: var(--jd-text); }
.jdih-detail .jd-meta tr:hover th,
.jdih-detail .jd-meta tr:hover td { background: var(--jd-surface-subtle); }
@media (max-width: 767px) {
    /* Di layar sempit label dan nilai ditumpuk supaya nilai tidak terjepit. */
    .jdih-detail .jd-meta th,
    .jdih-detail .jd-meta td { display: block; width: auto; padding: var(--jd-4) var(--jd-16); }
    .jdih-detail .jd-meta th { padding-top: var(--jd-12); border-bottom: 0; font-size: 14px; }
    .jdih-detail .jd-meta td { padding-bottom: var(--jd-12); }
}
.jdih-detail .jd-empty { color: var(--jd-text-muted); font-style: italic; }

/* ---------- Isi kaya (abstrak, relasi, peraturan terkait) ---------- */
.jdih-detail .jd-rich { font-size: 16px; line-height: 26px; color: var(--jd-text); }
.jdih-detail .jd-rich p { margin: 0 0 var(--jd-12); }
.jdih-detail .jd-rich p:last-child { margin-bottom: 0; }
.jdih-detail .jd-rich a { color: var(--jd-brand); text-decoration: underline; }
.jdih-detail .jd-rich a:hover { color: var(--jd-brand-hover); }
.jdih-detail .jd-rich ul,
.jdih-detail .jd-rich ol { margin: 0 0 var(--jd-12); padding-left: var(--jd-24); }
.jdih-detail .jd-rich ul { list-style: disc; }
.jdih-detail .jd-rich li { margin-bottom: var(--jd-4); }
.jdih-detail .jd-rich u { text-decoration: none; font-weight: 600; color: var(--jd-text-secondary); }

.jdih-detail .jd-subhead {
    font-size: 14px; line-height: 20px; font-weight: 600;
    color: var(--jd-text-secondary);
    margin: 0 0 var(--jd-8);
}
.jdih-detail .jd-divider {
    height: 1px; background: var(--jd-border);
    border: 0; margin: var(--jd-24) 0;
}

/* ---------- Panel berkas ---------- */
/* Daftar berkas dibuat ringkas: satu baris per berkas (ikon, nama, tombol),
   tanpa kotak di dalam kartu; antar-berkas dipisah garis tipis. */
.jdih-detail .jd-aside .jd-card-body { padding: var(--jd-12) var(--jd-16); }
.jdih-detail .jd-file {
    display: flex; align-items: center; gap: var(--jd-8);
    padding: var(--jd-8) 0;
}
.jdih-detail .jd-file + .jd-file { border-top: 1px solid var(--jd-border); }
.jdih-detail .jd-file .fa-file-pdf-o { color: var(--jd-brand-action); font-size: 18px; flex: none; }
.jdih-detail .jd-file-meta {
    min-width: 0; flex: 1;
    display: flex; align-items: center; gap: var(--jd-8);
}
/* Nama berkas satu baris; nama lengkap tersedia lewat atribut title. */
.jdih-detail .jd-file-name {
    flex: 1; min-width: 0;
    font-size: 14px; line-height: 20px; font-weight: 500;
    color: var(--jd-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jdih-detail .jd-file-actions { display: flex; flex: none; gap: var(--jd-8); }
.jdih-detail .jd-file-actions .jd-btn { padding: var(--jd-4) var(--jd-12); min-height: 36px; }

/* ---------- Tombol ---------- */
.jdih-detail .jd-btn {
    display: inline-flex; align-items: center; gap: var(--jd-8);
    font-family: var(--jd-font);
    font-size: 14px; line-height: 20px; font-weight: 600;
    padding: var(--jd-8) var(--jd-12);
    border-radius: var(--jd-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
/* Sama seperti remah jejak: id pembungkus dipakai agar warna teks tombol
   tidak tertimpa `#landing-content a` — tanpa ini label "Unduh" menjadi
   merah di atas latar merah dan tidak terbaca sama sekali. */
#landing-content.jdih-detail .jd-btn-primary {
    background: var(--jd-brand-action); color: #FFFFFF; border-color: var(--jd-brand-action);
}
#landing-content.jdih-detail .jd-btn-primary:hover,
#landing-content.jdih-detail .jd-btn-primary:focus {
    background: var(--jd-brand-hover); border-color: var(--jd-brand-hover); color: #FFFFFF;
}
#landing-content.jdih-detail .jd-btn-secondary {
    background: var(--jd-surface); color: var(--jd-text); border-color: var(--jd-border-strong);
}
#landing-content.jdih-detail .jd-btn-secondary:hover,
#landing-content.jdih-detail .jd-btn-secondary:focus {
    background: var(--jd-surface-sunken); color: var(--jd-text);
}
/* Fokus keyboard selalu terlihat — tidak pernah dimatikan tanpa pengganti. */
.jdih-detail a:focus-visible,
.jdih-detail button:focus-visible,
.jdih-detail [tabindex]:focus-visible {
    outline: 3px solid var(--jd-navy);
    outline-offset: 2px;
}

/* ---------- Statistik & berbagi ---------- */
.jdih-detail .jd-stat-list {
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--jd-12);
}
.jdih-detail .jd-stat {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--jd-12);
}
.jdih-detail .jd-stat dt {
    font-size: 14px; line-height: 20px; font-weight: 500;
    color: var(--jd-text-secondary);
    display: inline-flex; align-items: center; gap: var(--jd-8);
}
.jdih-detail .jd-stat dt .fa { color: var(--jd-text-muted); width: 16px; text-align: center; }
.jdih-detail .jd-stat dd {
    margin: 0;
    font-size: 24px; line-height: 32px; font-weight: 700; color: var(--jd-navy);
    font-variant-numeric: tabular-nums;
}
.jdih-detail .jd-stat dd span {
    font-size: 14px; font-weight: 500; color: var(--jd-text-secondary);
}
.jdih-detail .jd-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jd-8); }
.jdih-detail .jd-share img { display: block; }

/* ---------- Penampil naskah ---------- */
.jdih-detail .jd-viewer { padding: 0; }
.jdih-detail .jd-viewer iframe {
    display: block; width: 100%; height: 720px; border: 0;
    background: var(--jd-surface-sunken);
}
@media (max-width: 767px) { .jdih-detail .jd-viewer iframe { height: 480px; } }

/* ---------- Status kosong ---------- */
.jdih-detail .jd-emptystate {
    font-size: 14px; line-height: 20px;
    color: var(--jd-text-muted);
}

/* ---------- Lewati ke konten ---------- */
.jdih-detail .jd-skip {
    position: absolute; left: -9999px;
    background: var(--jd-navy); color: #FFFFFF;
    padding: var(--jd-8) var(--jd-16); border-radius: var(--jd-radius);
    font-size: 14px; font-weight: 600; z-index: 100;
}
.jdih-detail .jd-skip:focus {
    left: var(--jd-24); top: var(--jd-8); color: #FFFFFF;
}

@media print {
    .jdih-detail { background: #FFFFFF; padding: 0; margin-top: 0; }
    .jdih-detail .jd-aside,
    .jdih-detail .jd-viewer,
    .jdih-detail .jd-breadcrumb { display: none; }
    .jdih-detail .jd-layout { display: block; }
    .jdih-detail .jd-card { border-color: #999; break-inside: avoid; }
}