/* Halaman /code — pakai skin /css/style.css + highlight.css, tambahan khusus.
   Selector dasar (.page, .topbar, .wrap, .category, .btn, .toast, .footer,
   .method-badge, .endpoint-row) sudah ada di style.css. */

body[data-code-page] .brand { white-space: normal; line-height: 1.2; }

/* ---------- deskripsi hero: gaya docs, tapi versi lebih rapat ---------- */
body[data-code-page] .code-lead {
    margin: 0 0 6px;
    max-width: 560px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--ink);
}

body[data-code-page] .code-sub {
    margin: 0 0 20px;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--desc);
}

/* ---------- navigasi sidebar: adaptor .side-cats ---------- */

body[data-code-page] .side-cats a.active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
}

/* tombol kategori (pakai gaya link sidebar yang sama) */
body[data-code-page] .code-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--desc);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

body[data-code-page] .code-cat:hover { background: var(--panel-hover); color: var(--ink); }

body[data-code-page] .code-cat.active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 500;
}

body[data-code-page] .code-cat .side-cat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-code-page] .code-cat .side-cat-count {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.06em;
}

/* label kategori di kartu */
.code-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--desc);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-mid);
    border-radius: 6px;
    padding: 1px 7px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-code-page] .side-foot { padding: 12px 20px; }

/* ---------- daftar kode (kartu) ---------- */
.code-list { display: block; }

.code-item { border-top: none; text-decoration: none; }

.code-item .endpoint-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 18px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s;
}

.code-item:hover .endpoint-row { background: var(--panel-hover); }

.code-item .method-badge { min-width: 40px; }

/* nomor urut: terbaru = 1 */
.code-item-num {
    flex-shrink: 0;
    min-width: 20px;
    margin-right: 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

.code-item .endpoint-main {
    flex: 1;
    min-width: 0;
}

/* nama + kategori bertumpuk; nama tidak boleh terpotong di layar sempit */
.code-item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.code-item-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.code-item:hover .code-item-name { color: var(--ink); }

/* kategori: teks polos, bukan chip */
.code-item-cat {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.code-item:hover .endpoint-arrow { color: var(--ink); }

.code-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* ---------- viewer ---------- */
.code-viewer-head { cursor: default; flex-wrap: wrap; row-gap: 8px; }

.code-viewer-head .category-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.code-viewer-head .count-badge { margin-left: 0; }

.code-viewer-head .code-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    color: var(--muted);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.code-viewer-head .code-back:hover { background: var(--panel-hover); color: var(--ink); }

.code-viewer-head .code-head-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.code-viewer-head .btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: 11px;
    text-decoration: none;
}

/* Kode mengisi seluruh area body: tanpa margin/padding luar, tanpa sudut. */
.code-body {
    display: block;
    width: 100%;
    padding: 0;
    background: #141414;
}

.code-body pre.code-pre {
    margin: 0;
    padding: 18px;
    background: #141414;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    line-height: 1.7;
    font-size: 12.5px;
    white-space: pre;
    color: var(--text);
}

.code-body pre.code-pre code { color: var(--text); }