/* JLS — lembar gaya fondasi Juara Kargo. Berkas ini adalah sumbernya: sunting langsung di sini.
   Semua nilai berasal dari token (var(--…)) di tokens.css. File ini hanya menambah yang tidak bisa
   dinyatakan sebagai token: gradasi dan tekstur logo, potongan 30°, motif, fokus, bahan, dan gerak,
   lalu elemen antarmuka dan komponen dasbor. */

:root {
  /* Gradasi tanda JLS: emas tua di atas, emas terang di bawah, persis seperti logo. */
  --gradasi-emas: linear-gradient(180deg, var(--emas-600) 0%, var(--emas-400) 100%);
  /* Saat kursor di atasnya: satu tingkat lebih terang. */
  --transisi-warna: color var(--duration-xs) var(--ease-standard), background-color var(--duration-xs) var(--ease-standard),
    border-color var(--duration-xs) var(--ease-standard), box-shadow var(--duration-sm) var(--ease-standard);
  --transisi-gerak: transform var(--duration-md) var(--ease-standard), opacity var(--duration-md) var(--ease-standard);
  --potong: 16px;
  --motif-warna: var(--emas-500);
  --tan30: 0.5774;
}

/* ---------- Dasar ---------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-strong) solid var(--focus);
  outline-offset: 2px;
}
::selection { background: var(--brand-soft); color: var(--ink); }
.overline, .cetak-judul, .cetak-label { text-transform: uppercase; }

/* Kartu contoh di halaman sistem desain: halaman itu membuat latar html dan body transparan
   (data-mode di <html>), sehingga kartu bertema gelap tampil di atas halaman putih. Bayangan
   dalam ini mengecat latar tema di bawah isi kartu. Aplikasi biasa tidak memakai data-mode. */
html[data-mode] { min-height: 100%; box-shadow: inset 0 0 0 100vmax var(--surface); }

/* ---------- Angka, kode, tautan ---------- */

.jls-angka { font-variant-numeric: tabular-nums lining-nums; }
/* Kode (AWB, nomor dokumen, kode bandara) tidak pernah dipenggal di tanda hubung. */
.jls-kode { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.jls-tautan {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--brand-aksen);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: var(--transisi-warna);
}
.jls-tautan:hover { text-decoration-thickness: 3px; }

/* ---------- Emas ---------- */

/* Isian merek besar: gradasi logo. */
/* Bidang emas hanya untuk hiasan: tanpa teks atau ikon di atasnya. Teks diletakkan di samping, atau di panel jls-material. */
.jls-emas { background: var(--gradasi-emas); }

/* Tekstur bintik seperti logo, di atas isian emas yang luas (sisi pendek minimal 240px). */
.jls-tekstur { position: relative; isolation: isolate; }
.jls-tekstur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--opacity-tekstur);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3'stitchTiles='stitch' seed='2780'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete'tableValues='0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%2523n%29'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- Potongan lintasan (30°) ---------- */

/* Sudut kanan atas dipotong 30°. Lebar potongan --potong; tingginya --potong × tan 30°. */
.jls-potong {
  clip-path: polygon(0 0, calc(100% - var(--potong)) 0, 100% calc(var(--potong) * var(--tan30)), 100% 100%, 0 100%);
}
/* Sudut kiri bawah dipotong 30°: pasangan untuk bidang yang bersisian. */
.jls-potong-bawah {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--potong) 100%, 0 calc(100% - var(--potong) * var(--tan30)));
}

/* ---------- Motif ---------- */

/* Kisi isometrik: garis tegak dan ±30°. Warna dari --motif-warna (bawaan: line). */
.jls-kisi-iso { position: relative; isolation: isolate; }
.jls-kisi-iso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--motif-warna-kisi, var(--line));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='24.000'%3E%3Cpath d='M0.000 0.000L0.000 24.000M20.785 0.000L20.785 24.000M41.569 0.000L41.569 24.000M0.000 24.000L41.569 0.000M0.000 12.000L20.785 0.000M20.785 24.000L41.569 12.000M0.000 0.000L41.569 24.000M0.000 12.000L20.785 24.000M20.785 0.000L41.569 12.000' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 41.569px 24.000px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='24.000'%3E%3Cpath d='M0.000 0.000L0.000 24.000M20.785 0.000L20.785 24.000M41.569 0.000L41.569 24.000M0.000 24.000L41.569 0.000M0.000 12.000L20.785 0.000M20.785 24.000L41.569 12.000M0.000 0.000L41.569 24.000M0.000 12.000L20.785 24.000M20.785 0.000L41.569 12.000' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 41.569px 24.000px repeat;
}

/* ---------- Motif tiga arah ---------- */

/* Motif merek dari tanda: tiga bidang pita yang dipisah tiga celah tanda (tegak, turun 30°, naik 30°),
   dengan perbandingan pita : celah 60 : 51.4 seperti tanda. Warna dari --motif-warna (bawaan emas Juara).
   jls-tiga-arah: satu komposisi yang mengisi bidang (sampul, hero, panel). jls-tiga-arah--pita: ulangan
   mendatar untuk pita sempit (bilah, tepi kemasan, lakban 48 mm). Selalu di belakang isi, tanpa teks di atasnya. */
.jls-tiga-arah { position: relative; isolation: isolate; --motif-warna: var(--brand-aksen); }
.jls-tiga-arah::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--motif-warna);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3Cpattern id='v0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(786 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='d0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(800 405) rotate(-60) translate(-14 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='u0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(800 405) rotate(60) translate(-14 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Crect width='1600' height='900'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='black' clip-path='url(%23k)'%3E%3Cpolygon points='0,0 788.01,0 788.01,398.08 0,853.03' fill='url(%23d0)'/%3E%3Cpolygon points='811.99,0 1600,0 1600,853.03 811.99,398.08' fill='url(%23u0)'/%3E%3Cpolygon points='0,880.73 800,418.85 1600,880.73 1600,1800 0,1800' fill='url(%23v0)'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3Cpattern id='v0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(786 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='d0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(800 405) rotate(-60) translate(-14 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='u0' width='51.99' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(800 405) rotate(60) translate(-14 0)'%3E%3Crect width='28' height='10' fill='black'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Crect width='1600' height='900'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='black' clip-path='url(%23k)'%3E%3Cpolygon points='0,0 788.01,0 788.01,398.08 0,853.03' fill='url(%23d0)'/%3E%3Cpolygon points='811.99,0 1600,0 1600,853.03 811.99,398.08' fill='url(%23u0)'/%3E%3Cpolygon points='0,880.73 800,418.85 1600,880.73 1600,1800 0,1800' fill='url(%23v0)'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.jls-tiga-arah--pita::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 120'%3E%3Cdefs%3E%3Cpattern id='v0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(161.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='d0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(165 50.4) rotate(-60) translate(-3.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='u0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(165 50.4) rotate(60) translate(-3.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Crect width='330' height='120'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='black' clip-path='url(%23k)'%3E%3Cpolygon points='0,0 162,0 162,48.67 0,142.2' fill='url(%23d0)'/%3E%3Cpolygon points='168,0 330,0 330,142.2 168,48.67' fill='url(%23u0)'/%3E%3Cpolygon points='0,149.12 165,53.86 330,149.12 330,307.17 0,307.17' fill='url(%23v0)'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 120'%3E%3Cdefs%3E%3Cpattern id='v0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(161.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='d0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(165 50.4) rotate(-60) translate(-3.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3Cpattern id='u0' width='13' height='10' patternUnits='userSpaceOnUse' patternTransform='translate(165 50.4) rotate(60) translate(-3.5 0)'%3E%3Crect width='7' height='10' fill='black'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Crect width='330' height='120'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='black' clip-path='url(%23k)'%3E%3Cpolygon points='0,0 162,0 162,48.67 0,142.2' fill='url(%23d0)'/%3E%3Cpolygon points='168,0 330,0 330,142.2 168,48.67' fill='url(%23u0)'/%3E%3Cpolygon points='0,149.12 165,53.86 330,149.12 330,307.17 0,307.17' fill='url(%23v0)'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}
/* Tenang: untuk latar yang berdampingan dengan isi. Di atas gradasi emas: nada-ke-nada. */
.jls-tiga-arah--tenang { --motif-warna: color-mix(in srgb, var(--brand-aksen) 30%, transparent); }
.jls-emas.jls-tiga-arah { --motif-warna: color-mix(in srgb, var(--emas-700) 45%, transparent); }

/* ---------- Bahan ---------- */

/* Kaca buram untuk header lengket dan toast. */
.jls-material {
  background: color-mix(in srgb, var(--surface-raised) calc(var(--opacity-material) * 100%), transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

/* ---------- Gerak ---------- */

/* Masuk menyusuri lintasan 30°: dari kiri bawah ke tempatnya. */
@keyframes jls-masuk-lintasan {
  from { opacity: 0; transform: translate(-14px, 8.08px); }
  to { opacity: 1; transform: none; }
}
@keyframes jls-muncul {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.jls-masuk { animation: jls-masuk-lintasan var(--duration-lg) var(--ease-enter) backwards; }
.jls-muncul { animation: jls-muncul var(--duration-md) var(--ease-standard) backwards; }
.jls-tekan { transition: transform var(--duration-xs) var(--ease-standard); }
.jls-tekan:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  :root { --transisi-gerak: none; }
  .jls-masuk, .jls-muncul { animation: none; }
  .jls-tekan:active { transform: none; }
}

/* ==========================================================================
   Elemen antarmuka JLS. Ditambahkan ke bundle.css oleh build_css.py.
   Semua kelas berawalan jls-, semua nilai dari token. Elemen HTML asli
   (button, input, select, dialog) diberi gaya, sehingga bisa dipakai di
   framework apa pun. Ikon pada kontrol (panah pilihan, centang, pemisah
   jejak) dipasang build_css.py sebagai masker CSS dari ikon JLS.
   ========================================================================== */

/* ---------- Tombol ---------- */

.jls-tombol {
  --t-tinggi: var(--size-control-md);
  --t-pad: var(--space-5);
  --t-radius: var(--radius-md);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--t-tinggi);
  padding: 0 var(--t-pad);
  border: var(--border-regular) solid transparent;
  border-radius: var(--t-radius);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 600 15px/20px var(--font-sans);
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--transisi-warna), transform var(--duration-xs) var(--ease-standard);
}
.jls-tombol:hover { background: var(--surface-hover); }
.jls-tombol:active { transform: scale(0.97); }
.jls-tombol svg { flex: none; }
.jls-tombol--utama { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-emas); }
.jls-tombol--utama:hover { background-color: var(--brand-hover); }
.jls-tombol--utama:active { background-color: var(--brand-pressed); }
.jls-tombol--garis { background: transparent; border-color: var(--line-strong); }
.jls-tombol--garis:hover { background: var(--surface-hover); }
.jls-tombol--garis:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 0.5px var(--focus); }
.jls-tombol--teks { background: transparent; padding: 0 var(--space-3); }
.jls-tombol--teks:hover { background: var(--surface-hover); }
.jls-tombol--bahaya { background: var(--danger); color: var(--on-danger); }
.jls-tombol--bahaya:hover { background: color-mix(in srgb, var(--danger) 86%, var(--ink)); }
.jls-tombol--kecil { --t-tinggi: var(--size-control-sm); --t-pad: var(--space-3); --t-radius: var(--radius-sm); font-size: 13px; line-height: 18px; }
.jls-tombol--besar { --t-tinggi: var(--size-control-lg); --t-pad: var(--space-6); font-size: 16px; }
.jls-tombol--penuh { display: flex; width: 100%; }
.jls-tombol--ikon { width: var(--t-tinggi); padding: 0; }
.jls-tombol:disabled,
.jls-tombol[aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--ink-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.jls-tombol[aria-busy="true"] { cursor: progress; }
.jls-tombol[aria-busy="true"]::before,
.jls-putar {
  content: "";
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jls-putar 700ms linear infinite;
}
@keyframes jls-putar { to { transform: rotate(360deg); } }
.jls-grup-tombol { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Medan formulir ---------- */

.jls-medan { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.jls-label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.jls-label .jls-opsional { font-weight: 400; color: var(--ink-muted); }
.jls-bantuan { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.jls-galat { display: flex; gap: var(--space-1); align-items: flex-start; font: 500 12px/16px var(--font-sans); color: var(--danger-ink); }
.jls-galat svg { flex: none; margin-top: 0; }

.jls-isian {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--size-control-md);
  padding: 0 var(--space-3);
  border: var(--border-regular) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  transition: var(--transisi-warna);
}
.jls-isian::placeholder { color: var(--ink-muted); opacity: 1; }
.jls-isian:hover { border-color: var(--ink-muted); }
/* Fokus pada kontrol bergaris tepi: tepinya sendiri yang berubah menjadi satu garis focus 2 px,
   tanpa cincin outline kedua di luarnya. */
.jls-isian:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 0.5px var(--focus); }
.jls-isian[aria-invalid="true"]:focus-visible { border-color: var(--danger); box-shadow: inset 0 0 0 0.5px var(--danger); }
.jls-isian[aria-invalid="true"] { border-color: var(--danger); }
.jls-isian:disabled { background: var(--surface-sunken); color: var(--ink-disabled); border-color: var(--line); cursor: not-allowed; }
.jls-isian[readonly] { background: var(--surface-subtle); }
textarea.jls-isian { height: auto; min-height: 104px; padding: var(--space-3); resize: vertical; }
.jls-isian--kode { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
.jls-isian--kecil { height: var(--size-control-sm); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; }
.jls-isian--besar { height: var(--size-control-lg); }
input[type="number"].jls-isian { font-variant-numeric: tabular-nums; }

.jls-isian-grup { position: relative; display: flex; align-items: center; min-width: 0; }
.jls-isian-grup > .jls-isian { flex: 1; }
.jls-isian-grup > .jls-awal,
.jls-isian-grup > .jls-akhir {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
  pointer-events: none;
}
.jls-isian-grup > .jls-awal { left: var(--space-3); }
.jls-isian-grup > .jls-akhir { right: var(--space-3); }
/* Tombol atau tautan di awalan dan akhiran (misalnya tampilkan kata sandi, hapus isian) tetap bisa diklik. */
.jls-isian-grup > .jls-awal :is(button, a), .jls-isian-grup > .jls-akhir :is(button, a) { pointer-events: auto; }
.jls-isian-grup > .jls-akhir:has(> :is(button, a)) { right: 2px; }
/* Lebar ruang awalan dan akhiran: bawaan untuk ikon 20 px atau satuan pendek; atur untuk teks
   yang lebih panjang, misalnya style="--awal-lebar: 52px" untuk IDR. */
.jls-isian-grup:has(> .jls-awal) > .jls-isian { padding-left: var(--awal-lebar, 40px); }
.jls-isian-grup:has(> .jls-akhir) > .jls-isian { padding-right: var(--akhir-lebar, 48px); }

/* ---------- Pilihan (select) ---------- */

.jls-pilih { position: relative; display: block; min-width: 0; }
.jls-pilih > select.jls-isian { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.jls-pilih::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  pointer-events: none;
  transition: transform var(--duration-sm) var(--ease-standard);
}
.jls-pilih:has(> select:disabled)::after { background: var(--ink-disabled); }
.jls-pilih:has(> .jls-isian--kecil)::after { right: var(--space-2); }

/* Daftar pilihan select bergaya JLS di peramban yang mendukung select yang bisa diberi gaya
   (appearance: base-select). Peramban lain tetap memakai daftar bawaan sistem. */
@supports (appearance: base-select) {
  .jls-pilih > select.jls-isian,
  .jls-pilih > select.jls-isian::picker(select) { appearance: base-select; }
  .jls-pilih > select.jls-isian { display: flex; align-items: center; }
  .jls-pilih > select.jls-isian::picker-icon { display: none; }
  .jls-pilih > select.jls-isian:open { border-color: var(--focus); }
  .jls-pilih:has(> select:open)::after { transform: rotate(180deg); }
  .jls-pilih > select.jls-isian::picker(select) {
    box-sizing: border-box;
    min-width: anchor-size(width);
    max-height: min(320px, 50vh);
    margin-block: 6px;
    padding: 6px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gulir-ibu) transparent;
    opacity: 0;
    transition: opacity var(--duration-sm) var(--ease-standard), translate var(--duration-sm) var(--ease-standard), overlay var(--duration-sm) allow-discrete, display var(--duration-sm) allow-discrete;
    translate: 0 -4px;
  }
  .jls-pilih > select.jls-isian:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .jls-pilih > select.jls-isian:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  .jls-pilih > select.jls-isian option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: 500 15px/22px var(--font-sans);
    cursor: pointer;
  }
  .jls-pilih > select.jls-isian--kecil option { min-height: 32px; padding: 4px 10px; font-size: 14px; line-height: 20px; }
  .jls-pilih > select.jls-isian option:hover,
  .jls-pilih > select.jls-isian option:focus-visible { background: var(--surface-hover); outline: none; }
  .jls-pilih > select.jls-isian option:focus-visible { box-shadow: inset 0 0 0 var(--border-strong) var(--focus); }
  .jls-pilih > select.jls-isian option:checked { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
  .jls-pilih > select.jls-isian option::checkmark {
    content: "";
    order: 1;
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--brand-aksen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  }
  .jls-pilih > select.jls-isian option:disabled { color: var(--ink-disabled); background: none; cursor: not-allowed; }
  .jls-pilih > select.jls-isian option[value=""]:disabled { display: none; }
  .jls-pilih > select.jls-isian optgroup { padding: 0; color: var(--ink-muted); font: 700 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
  .jls-pilih > select.jls-isian optgroup::label { display: block; padding: var(--space-3) var(--space-3) var(--space-1); }
  .jls-pilih > select.jls-isian optgroup + optgroup { margin-top: 4px; padding-top: 2px; border-top: var(--border-hairline) solid var(--line); }
  .jls-pilih > select.jls-isian optgroup option { letter-spacing: 0; text-transform: none; }
}

/* ---------- Kotak centang dan radio ---------- */

/* Label boleh berisi teks dan elemen sebaris apa pun; kotaknya diletakkan di kiri baris pertama. */
.jls-centang,
.jls-radio {
  position: relative;
  display: block;
  min-height: 22px;
  padding-left: 32px;
  color: var(--ink);
  font: 400 15px/22px var(--font-sans);
  cursor: pointer;
}
.jls-centang > input,
.jls-radio > input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: var(--border-regular) solid var(--line-strong);
  background: var(--surface-raised);
  cursor: pointer;
  transition: var(--transisi-warna);
}
.jls-centang > input { border-radius: var(--radius-xs); }
.jls-radio > input { border-radius: 50%; }
.jls-centang > input::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--on-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transform: scale(0);
  transition: transform var(--duration-xs) var(--ease-standard);
}
.jls-radio > input::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--on-brand);
  transform: scale(0);
  transition: transform var(--duration-xs) var(--ease-standard);
}
.jls-centang > input:hover,
.jls-radio > input:hover { border-color: var(--ink-muted); }
.jls-centang > input:checked,
.jls-centang > input:indeterminate,
.jls-radio > input:checked { background: var(--brand-aksen); border-color: var(--brand-aksen); }
/* Kontrol terpilih di atas emas Juara: centang dan minus hitam arang on-aksen (seperti teks tombol).
   Titik radio, kenop sakelar, dan titik linimasa: bulatan kenop-aksen (putih di terang) dengan titik on-aksen di tengahnya. */
.jls-centang > input:checked::before,
.jls-centang > input:indeterminate::before,
.jls-radio > input:checked::before { transform: scale(1); background: var(--on-aksen); }
.jls-radio > input:checked::before { background: radial-gradient(circle, var(--on-aksen) 2.5px, var(--kenop-aksen) 3px); }
.jls-centang > input:indeterminate::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  transform: scale(1);
}
.jls-centang > input:disabled,
.jls-radio > input:disabled { background: var(--surface-sunken); border-color: var(--line); cursor: not-allowed; }
.jls-centang > input:disabled::before,
.jls-radio > input:disabled::before { background: var(--ink-disabled); }
.jls-centang > input:disabled:checked::before,
.jls-centang > input:disabled:indeterminate::before,
.jls-radio > input:disabled:checked::before { background: var(--ink-disabled); }
.jls-centang:has(> input:disabled),
.jls-radio:has(> input:disabled) { color: var(--ink-disabled); cursor: not-allowed; }
.jls-centang > .jls-bantuan,
.jls-radio > .jls-bantuan { display: block; margin-top: 2px; }
/* Kotak tanpa teks yang terlihat, misalnya kolom pilih di tabel; label lewat aria-label. */
.jls-centang--tunggal { display: inline-block; width: 20px; height: 20px; min-height: 0; padding: 0; vertical-align: middle; }
.jls-centang--tunggal > input { top: 0; }

.jls-kelompok { display: grid; gap: var(--space-3); align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.jls-kelompok > legend { padding: 0; margin-bottom: var(--space-3); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.jls-kelompok--mendatar { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-3) var(--space-6); }

/* Pilihan berbentuk kartu: label besar dengan radio atau kotak centang di dalamnya. */
.jls-kartu-pilih {
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 32px);
  border: var(--border-regular) solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition: var(--transisi-warna);
}
.jls-kartu-pilih:hover { border-color: var(--ink-muted); }
.jls-kartu-pilih:has(> input:checked) { border-color: var(--brand-aksen); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-aksen); }
.jls-kartu-pilih > input { top: calc(var(--space-4) + 1px); left: var(--space-4); }
.jls-kartu-pilih > b { font-weight: 600; }

/* ---------- Sakelar ---------- */

.jls-sakelar { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); font: 400 15px/22px var(--font-sans); cursor: pointer; }
.jls-sakelar > input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--duration-sm) var(--ease-standard), box-shadow var(--duration-sm) var(--ease-standard);
}
.jls-sakelar > input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-md) var(--ease-pegas);
}
.jls-sakelar > input:checked { background: var(--brand-aksen); box-shadow: none; }
.jls-sakelar > input:checked::before { transform: translateX(18px); background: radial-gradient(circle, var(--on-aksen) 4px, var(--kenop-aksen) 4.5px); }
.jls-sakelar > input:disabled { background: var(--surface-hover); cursor: not-allowed; }
.jls-sakelar:has(> input:disabled) { color: var(--ink-disabled); cursor: not-allowed; }

/* ---------- Segmen ---------- */

.jls-segmen { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); max-width: 100%; overflow-x: auto; }
.jls-segmen > label { position: relative; display: block; }
.jls-segmen > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jls-segmen > label > span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-4);
  border-radius: calc(var(--radius-md) - 3px);
  color: var(--ink-muted);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transisi-warna);
}
.jls-segmen > label > span:hover { color: var(--ink); }
.jls-segmen > label > input:checked + span { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--line); }
.jls-segmen > label > input:focus-visible + span { outline: var(--border-strong) solid var(--focus); outline-offset: 1px; }

/* ---------- Unggah berkas ---------- */

.jls-unggah {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: var(--border-regular) dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font: 400 14px/20px var(--font-sans);
  text-align: center;
  transition: var(--transisi-warna);
}
.jls-unggah > svg { color: var(--brand-aksen); }
.jls-unggah b { color: var(--ink); font-weight: 600; }
.jls-unggah > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.jls-unggah:hover,
.jls-unggah--seret { border-color: var(--brand-aksen); background: var(--brand-soft); }
.jls-unggah:focus-within { border-color: var(--focus); border-style: solid; box-shadow: inset 0 0 0 0.5px var(--focus); }
.jls-unggah > input[type="file"]:focus-visible { outline: none; }
.jls-berkas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 400 14px/20px var(--font-sans);
}
.jls-berkas > svg { color: var(--ink-muted); }
.jls-berkas b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jls-berkas small { color: var(--ink-muted); font-size: 12px; line-height: 16px; }

/* ---------- Daftar ---------- */

.jls-daftar { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--ink); font: 400 16px/24px var(--font-sans); }
.jls-daftar > li { position: relative; padding-left: var(--space-6); }
ul.jls-daftar > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-aksen);
}
ul.jls-daftar ul.jls-daftar > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand-aksen); }
ol.jls-daftar { counter-reset: jls-nomor; }
ol.jls-daftar > li { counter-increment: jls-nomor; padding-left: var(--space-8); }
ol.jls-daftar > li::before {
  content: counter(jls-nomor) ".";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  text-align: right;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.jls-daftar .jls-daftar { margin-top: var(--space-2); }
.jls-daftar--centang > li { padding-left: var(--space-8); }
.jls-daftar.jls-daftar--centang > li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--brand-aksen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
ol.jls-daftar--langkah { gap: var(--space-4); }
ol.jls-daftar--langkah > li { padding-left: 44px; min-height: 28px; }
ol.jls-daftar--langkah > li::before {
  content: counter(jls-nomor);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font: 700 13px/1 var(--font-sans);
  text-align: center;
}
.jls-daftar--rapat { gap: var(--space-1); font-size: 14px; line-height: 20px; }
ul.jls-daftar--rapat > li::before { top: 7px; }
.jls-daftar--rapat.jls-daftar.jls-daftar--centang > li::before { top: 0; }

.jls-rincian { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; font: 400 14px/20px var(--font-sans); }
.jls-rincian > dt { color: var(--ink-muted); font-weight: 500; }
.jls-rincian > dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.jls-rincian--tumpuk { grid-template-columns: minmax(0, 1fr); gap: 0; }
.jls-rincian--tumpuk > dd { margin-bottom: var(--space-3); }

/* ---------- Prosa (teks panjang: bantuan, syarat, artikel) ---------- */

.jls-prosa { max-width: var(--size-text-max); color: var(--ink); font: 400 16px/26px var(--font-sans); }
.jls-prosa > * { margin: 0; }
.jls-prosa > * + * { margin-top: var(--space-4); }
.jls-prosa > h2 { margin-top: var(--space-10); font: 700 26px/32px var(--font-sans); letter-spacing: -0.015em; text-wrap: balance; }
.jls-prosa > h3 { margin-top: var(--space-8); font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.jls-prosa > h2 + *, .jls-prosa > h3 + * { margin-top: var(--space-3); }
.jls-prosa a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--brand-aksen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.jls-prosa a:hover { text-decoration-thickness: 2.5px; }
.jls-prosa code, .jls-kode-sebaris { font-family: var(--font-mono); font-size: 0.875em; font-weight: 500; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-sunken); }
.jls-prosa blockquote, .jls-kutipan { margin-left: 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: var(--border-heavy) solid var(--brand-aksen); color: var(--ink); font-size: 18px; line-height: 28px; }
.jls-prosa hr, .jls-garis { height: 1px; margin: var(--space-8) 0; border: 0; background: var(--line); }
.jls-prosa small, .jls-kecil { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.jls-prosa ul, .jls-prosa ol { padding-left: var(--space-6); }
.jls-prosa li + li { margin-top: var(--space-2); }
.jls-prosa ul > li::marker { color: var(--brand-aksen); }
.jls-prosa ol > li::marker { color: var(--ink); font-weight: 700; }
.jls-prosa kbd, .jls-kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-sunken); box-shadow: inset 0 -1px 0 var(--line-strong); color: var(--ink); font: 500 12px/18px var(--font-mono); text-align: center; }

/* ---------- Lencana dan hitungan ---------- */

.jls-lencana {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: 600 12px/16px var(--font-sans);
  white-space: nowrap;
  vertical-align: middle;
}
.jls-lencana > svg { flex: none; margin-left: -2px; }
.jls-lencana--merek { background: var(--brand-soft); color: var(--brand-strong); }
/* Penanda emas: ikon lencana merek, menu aktif, dan pilihan terpilih memakai emas Juara; teksnya hitam arang. */
.jls-lencana--merek > svg { color: var(--brand-aksen); }
.jls-lencana--info { background: var(--info-soft); color: var(--info-ink); }
.jls-lencana--sukses { background: var(--success-soft); color: var(--success-ink); }
.jls-lencana--peringatan { background: var(--warning-soft); color: var(--warning-ink); }
.jls-lencana--bahaya { background: var(--danger-soft); color: var(--danger-ink); }
.jls-lencana--padat.jls-lencana--merek { background: var(--surface-inverse); color: var(--ink-inverse); }
.jls-lencana--padat.jls-lencana--merek > svg { color: var(--brand-aksen); }
.jls-lencana--padat.jls-lencana--info { background: var(--info); color: var(--on-info); }
.jls-lencana--padat.jls-lencana--sukses { background: var(--success); color: var(--on-success); }
.jls-lencana--padat.jls-lencana--peringatan { background: var(--warning); color: var(--on-warning); }
.jls-lencana--padat.jls-lencana--bahaya { background: var(--danger); color: var(--on-danger); }
.jls-lencana--titik::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jls-lencana--besar { height: 28px; padding: 0 12px; font-size: 13px; }
.jls-hitungan {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: 700 11px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.jls-hitungan--merek { background: var(--brand); color: var(--on-brand); }
.jls-hitungan--bahaya { background: var(--danger); color: var(--on-danger); }

/* ---------- Tag ---------- */

.jls-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  white-space: nowrap;
}
button.jls-tag { cursor: pointer; transition: var(--transisi-warna); }
button.jls-tag:hover { background: var(--surface-hover); }
button.jls-tag:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.jls-tag[aria-pressed="true"] { border-color: var(--brand-aksen); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.jls-tag__hapus {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.jls-tag__hapus:hover { background: var(--surface-hover); color: var(--ink); }
.jls-kode-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--ink);
  font: 600 12px/16px var(--font-mono);
  letter-spacing: 0.04em;
}
.jls-kode-tag--bahaya { background: var(--danger); color: var(--on-danger); }
.jls-deret { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Pesan ---------- */

.jls-pesan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--info-soft);
  color: var(--ink);
  font: 400 14px/20px var(--font-sans);
}
.jls-pesan > svg { color: var(--info-ink); margin-top: 1px; }
.jls-pesan__judul { display: block; font: 600 15px/22px var(--font-sans); }
.jls-pesan__isi { margin: 2px 0 0; }
.jls-pesan__aksi { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.jls-pesan--sukses { background: var(--success-soft); } .jls-pesan--sukses > svg { color: var(--success-ink); }
.jls-pesan--peringatan { background: var(--warning-soft); } .jls-pesan--peringatan > svg { color: var(--warning-ink); }
.jls-pesan--bahaya { background: var(--danger-soft); } .jls-pesan--bahaya > svg { color: var(--danger-ink); }
.jls-pesan--netral { background: var(--surface-sunken); } .jls-pesan--netral > svg { color: var(--ink-muted); }
.jls-pesan--pita { border-radius: 0; padding-left: var(--space-6); padding-right: var(--space-6); }

/* ---------- Toast ---------- */

.jls-toast-wadah {
  position: fixed;
  right: max(var(--space-6), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  width: min(400px, calc(100vw - 32px));
}
.jls-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  font: 400 14px/20px var(--font-sans);
  animation: jls-muncul var(--duration-md) var(--ease-enter) backwards;
}
.jls-toast > svg { color: var(--info-ink); margin-top: 1px; }
.jls-toast--sukses > svg { color: var(--success-ink); }
.jls-toast--peringatan > svg { color: var(--warning-ink); }
.jls-toast--bahaya > svg { color: var(--danger-ink); }
.jls-toast__isi { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; min-width: 0; }
.jls-toast__isi .jls-tombol { margin: -6px 0; }
.jls-toast__isi b { font-weight: 600; }
.jls-toast > .jls-tombol { margin: -6px -6px -6px 0; color: var(--ink-muted); }

/* ---------- Tooltip ---------- */

.jls-tip { position: relative; display: inline-flex; }
.jls-tip__isi {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--z-tooltip);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
  font: 500 12px/16px var(--font-sans);
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  opacity: 0;
  pointer-events: none;
  --tip-x: -50%;
  --tip-y: 4px;
  transform: translate(calc(var(--tip-x) + var(--tip-geser, 0px)), var(--tip-y));
  transition: opacity var(--duration-sm) var(--ease-standard), transform var(--duration-sm) var(--ease-standard);
}
.jls-tip:hover > .jls-tip__isi,
.jls-tip:focus-within > .jls-tip__isi { opacity: 1; --tip-y: 0px; }
.jls-tip--bawah > .jls-tip__isi { top: calc(100% + 8px); bottom: auto; --tip-y: -4px; }
/* Dekat tepi layar: rata kiri atau rata kanan dengan pemicunya, bukan di tengah. */
.jls-tip--awal > .jls-tip__isi { left: 0; --tip-x: 0%; }
.jls-tip--akhir > .jls-tip__isi { left: auto; right: 0; --tip-x: 0%; }
.jls-tip[data-tutup] > .jls-tip__isi { opacity: 0; }

/* ---------- Kemajuan dan pemuatan ---------- */

.jls-kemajuan { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.jls-kemajuan > span { display: block; width: var(--nilai, 0%); height: 100%; border-radius: inherit; background: var(--brand-aksen); transition: width var(--duration-lg) var(--ease-standard); }
.jls-kemajuan--tak-tentu > span { position: relative; width: 100%; overflow: hidden; }
.jls-kemajuan--tak-tentu > span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  right: 0;
  background-image: repeating-linear-gradient(150deg, var(--brand-aksen) 0 8px, var(--brand) 8px 16px);
  animation: jls-lintasan-jalan 800ms linear infinite;
}
@keyframes jls-lintasan-jalan { to { transform: translateX(32px); } }
.jls-kerangka { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.jls-kerangka::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--surface-raised) 65%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: jls-kerangka-jalan 1400ms var(--ease-standard) infinite;
}
@keyframes jls-kerangka-jalan { to { transform: translateX(100%); } }

/* ---------- Keadaan kosong ---------- */

.jls-kosong { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
.jls-kosong__ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-aksen); }
.jls-kosong__judul { margin: var(--space-2) 0 0; color: var(--ink); font: 600 17px/24px var(--font-sans); }
.jls-kosong__isi { max-width: 42ch; margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-kosong .jls-grup-tombol { justify-content: center; margin-top: var(--space-2); }

/* ---------- Tab ---------- */

.jls-tab { display: flex; gap: var(--space-6); border-bottom: var(--border-hairline) solid var(--line); overflow-x: auto; scrollbar-width: none; }
.jls-tab::-webkit-scrollbar { display: none; }
.jls-tab > [role="tab"] {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 600 15px/20px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-xs) var(--ease-standard);
}
.jls-tab > [role="tab"]:hover,
.jls-tab > [role="tab"][aria-selected="true"] { color: var(--ink); }
.jls-tab > [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: var(--border-heavy);
  border-radius: 4px 4px 0 0;
  background: var(--brand-aksen);
}
.jls-tab > [role="tab"][aria-selected="true"] .jls-hitungan { background: var(--brand); color: var(--on-brand); }
.jls-tab > [role="tab"]:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }

/* ---------- Langkah ---------- */

.jls-langkah { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.jls-langkah > li { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-3); min-width: 0; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); }
.jls-langkah > li:last-child { flex: none; }
.jls-langkah > li::after { content: ""; flex: 1; min-width: var(--space-4); height: 2px; border-radius: 2px; background: var(--line); }
.jls-langkah > li:last-child::after { display: none; }
.jls-langkah__nomor {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: var(--border-regular) solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  font: 700 13px/1 var(--font-sans);
}
.jls-langkah > li[data-status="selesai"] { color: var(--ink); }
.jls-langkah > li[data-status="selesai"] .jls-langkah__nomor { border-color: var(--brand-aksen); background: var(--brand-aksen); color: var(--on-aksen); }
.jls-langkah > li[data-status="selesai"]::after { background: var(--brand-aksen); }
.jls-langkah > li[aria-current="step"] { color: var(--ink); }
.jls-langkah > li[aria-current="step"] .jls-langkah__nomor { border: var(--border-strong) solid var(--brand-aksen); color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-soft); }
/* Layar sempit: hanya label langkah aktif yang terlihat; label lain tetap dibaca pembaca layar. */
@media (max-width: 640px) {
  .jls-langkah > li:not([aria-current="step"]) > :not(.jls-langkah__nomor) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jls-langkah > li[aria-current="step"] > :not(.jls-langkah__nomor) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Ponsel kecil (320–400 px): jarak dan garis antarlangkah dirapatkan agar empat langkah muat tanpa geser. */
@media (max-width: 400px) {
  .jls-langkah, .jls-langkah > li { gap: var(--space-2); }
  .jls-langkah > li::after { min-width: var(--space-2); }
}

/* ---------- Halaman (paginasi) ---------- */

.jls-halaman { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.jls-halaman a,
.jls-halaman button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 600 14px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transisi-warna);
}
.jls-halaman a:hover,
.jls-halaman button:hover { background: var(--surface-hover); }
.jls-halaman [aria-current="page"] { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 0 0 1px var(--brand-aksen); }
.jls-halaman [aria-current="page"]:hover { background-color: var(--brand-hover); }
.jls-halaman [aria-disabled="true"],
.jls-halaman button:disabled { color: var(--ink-disabled); background: transparent; cursor: not-allowed; }
.jls-halaman__elipsis { display: inline-grid; place-items: center; min-width: 24px; color: var(--ink-muted); }

/* ---------- Jejak navigasi ---------- */

.jls-jejak > ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: 500 14px/20px var(--font-sans); }
.jls-jejak li { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.jls-jejak li + li::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.jls-jejak a { color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-xs); }
.jls-jejak a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.jls-jejak [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Menu ---------- */

.jls-menu-wadah { position: relative; display: inline-block; }
.jls-menu {
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  min-width: 224px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
  z-index: var(--z-dropdown);
}
.jls-menu[hidden] { display: none; }
.jls-menu-wadah > .jls-menu { position: absolute; top: calc(100% + 6px); right: 0; }
.jls-menu-wadah--kiri > .jls-menu { right: auto; left: 0; }
.jls-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.jls-menu [role="menuitem"] > svg { flex: none; color: var(--ink-muted); }
.jls-menu [role="menuitem"]:hover,
.jls-menu [role="menuitem"]:focus-visible { background: var(--surface-hover); }
.jls-menu [role="menuitem"]:focus-visible { outline-offset: -2px; }
.jls-menu [role="menuitem"].jls-menu__bahaya,
.jls-menu [role="menuitem"].jls-menu__bahaya > svg { color: var(--danger-ink); }
.jls-menu [role="menuitem"]:disabled { color: var(--ink-disabled); cursor: not-allowed; background: none; }
.jls-menu [role="menuitem"] .jls-kbd { margin-left: auto; }
.jls-menu [role="separator"] { height: 1px; margin: 4px 6px; background: var(--line); }
.jls-menu__judul { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--ink-muted); font: 700 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Navigasi aplikasi ---------- */

.jls-nav { display: grid; gap: 2px; align-content: start; }
.jls-nav__judul { padding: var(--space-4) var(--space-3) var(--space-2); color: var(--ink-muted); font: 700 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.jls-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transisi-warna);
}
.jls-nav a > svg { flex: none; }
.jls-nav a:hover { background: var(--surface-hover); color: var(--ink); }
.jls-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.jls-nav a[aria-current="page"] > svg { color: var(--brand-aksen); }
.jls-nav a > .jls-hitungan { margin-left: auto; }
.jls-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--size-header);
  padding: 0 var(--space-6);
  border-bottom: var(--border-hairline) solid var(--line);
  background: var(--surface-raised);
}
.jls-header__spasi { flex: 1; }

/* ---------- Avatar ---------- */

.jls-avatar {
  --u: 36px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--u);
  height: var(--u);
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font: 700 calc(var(--u) * 0.38)/1 var(--font-sans);
  letter-spacing: 0.02em;
}
.jls-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.jls-avatar--kecil { --u: 28px; }
.jls-avatar--besar { --u: 48px; }
/* Akun klien: bergaris, tanpa isian; petugas JLS berisi brand-soft. */
.jls-avatar--arang { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* ---------- Tabel ---------- */

.jls-tabel-wadah { overflow-x: auto; border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.jls-tabel { width: 100%; border-collapse: collapse; color: var(--ink); font: 400 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-tabel > caption { padding: var(--space-4) var(--space-4) var(--space-2); caption-side: top; text-align: left; font: 600 17px/24px var(--font-sans); }
.jls-tabel th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--line);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
}
.jls-tabel td { height: 48px; box-sizing: border-box; padding: var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); vertical-align: middle; }
/* Satu baris per sel (keputusan pemilik). Konteks lain menjadi kolom baru; teks yang terlalu panjang dipotong dengan
   elipsis di jls-tabel__isi (dibungkus otomatis oleh JLS.ui.pasang, teks lengkap muncul sebagai title saat disorot).
   Atur batas per kolom dengan --sel-maks. Baris rincian (jls-tabel__rincian) tidak termasuk. */
.jls-tabel > :is(thead, tbody, tfoot) > tr:not(.jls-tabel__rincian) > :is(th, td) { white-space: nowrap; }
.jls-tabel__isi { display: inline-block; max-width: var(--sel-maks, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.jls-tabel tbody tr:last-child td { border-bottom: 0; }
.jls-tabel tbody tr { transition: background-color var(--duration-xs) var(--ease-standard); }
.jls-tabel tbody tr:hover { background: var(--surface-hover); }
.jls-tabel tbody tr[aria-selected="true"] { background: var(--brand-soft); }
.jls-tabel .jls-kanan { text-align: right; }
.jls-tabel .jls-sempit { width: 1%; white-space: nowrap; }
.jls-tabel th[aria-sort] > button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.jls-tabel th[aria-sort="ascending"],
.jls-tabel th[aria-sort="descending"] { color: var(--ink); }
.jls-tabel--padat td { height: 40px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.jls-tabel th[aria-sort="none"] > button > svg { opacity: 0.45; }
.jls-tabel th[aria-sort] > button:hover > svg { opacity: 1; }
/* Header lengket di dalam wadah yang tingginya dibatasi. */
.jls-tabel-wadah--gulir { max-height: var(--tabel-tinggi, 480px); overflow: auto; }
/* Baris yang bisa dibuka: tombol chevron di sel pertama atau terakhir, lalu baris rincian di bawahnya. */
.jls-tabel__buka > svg { transition: transform var(--duration-sm) var(--ease-standard); }
.jls-tabel__buka[aria-expanded="true"] > svg { transform: rotate(180deg); }
.jls-tabel tbody tr.jls-tabel__rincian,
.jls-tabel tbody tr.jls-tabel__rincian:hover { background: var(--surface-subtle); }
.jls-tabel tbody tr.jls-tabel__rincian > td { height: auto; padding: var(--space-4) var(--space-4) var(--space-5); }
.jls-tabel tbody tr:has(+ tr.jls-tabel__rincian:not([hidden])) > td { border-bottom-color: transparent; }

/* ---------- Kartu ---------- */

.jls-kartu { box-sizing: border-box; display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-sm); color: var(--ink); }
.jls-kartu__kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.jls-kartu__judul { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.jls-kartu__sub { margin: 2px 0 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-kartu__kaki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.jls-kartu--padat { gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); }
a.jls-kartu, .jls-kartu--interaktif { text-decoration: none; cursor: pointer; transition: box-shadow var(--duration-sm) var(--ease-standard), transform var(--duration-sm) var(--ease-standard); }
a.jls-kartu:hover, .jls-kartu--interaktif:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Kartu sorotan: isian aksi dengan teks on-brand, bukan gradasi logo. jls-kartu--emas adalah nama lamanya. */
.jls-kartu--sorotan, .jls-kartu--emas { background: var(--brand); color: var(--on-brand); }
.jls-metrik__label { color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: 0.01em; }
.jls-metrik__nilai { margin: 0; font: 800 40px/44px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.jls-metrik__nilai small { margin-left: 4px; color: var(--ink-muted); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.jls-metrik__ubah { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/18px var(--font-sans); }
.jls-metrik__ubah--naik { color: var(--success-ink); }
.jls-metrik__ubah--turun { color: var(--danger-ink); }
.jls-kartu--sorotan .jls-metrik__label, .jls-kartu--emas .jls-metrik__label,
.jls-kartu--sorotan .jls-metrik__nilai small, .jls-kartu--emas .jls-metrik__nilai small { color: var(--on-brand); }

/* ---------- Linimasa ---------- */

.jls-linimasa { display: grid; margin: 0; padding: 0; list-style: none; }
.jls-linimasa > li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 var(--space-4); padding-bottom: var(--space-5); }
.jls-linimasa > li:last-child { padding-bottom: 0; }
.jls-linimasa > li::before {
  content: "";
  position: relative;
  z-index: 1;
  grid-row: 1 / span 3;
  width: 12px;
  height: 12px;
  margin: 5px 6px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.jls-linimasa > li::after { content: ""; position: absolute; top: 22px; bottom: 0; left: 11px; width: 2px; border-radius: 2px; background: var(--line); }
.jls-linimasa > li:last-child::after { display: none; }
.jls-linimasa > li[data-status="selesai"]::before { background: var(--brand-aksen); box-shadow: inset 0 0 0 2px var(--brand-aksen); }
.jls-linimasa > li[data-status="selesai"]::after { background: var(--brand-aksen); }
.jls-linimasa > li[aria-current="step"]::before { width: 16px; height: 16px; margin: 3px 4px; background: radial-gradient(circle, var(--on-aksen) 2.5px, var(--kenop-aksen) 3px); box-shadow: 0 0 0 4px var(--brand-soft), inset 0 0 0 3px var(--brand-aksen); }
.jls-linimasa > li[data-status="masalah"]::before { background: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.jls-linimasa__judul { grid-column: 2; color: var(--ink); font: 600 15px/22px var(--font-sans); }
.jls-linimasa__waktu { grid-column: 2; color: var(--ink-muted); font: 500 13px/18px var(--font-mono); }
.jls-linimasa__catatan { grid-column: 2; margin: 2px 0 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-linimasa > li:not([data-status]):not([aria-current]) .jls-linimasa__judul { color: var(--ink-muted); font-weight: 500; }

/* ---------- Dialog ---------- */

.jls-dialog {
  box-sizing: border-box;
  width: min(var(--size-dialog-md), calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-2xl);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
}
.jls-dialog::backdrop { background: var(--scrim); }
.jls-dialog[open] { animation: jls-dialog-masuk var(--duration-lg) var(--ease-enter); }
@keyframes jls-dialog-masuk { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.jls-dialog--kecil { width: min(var(--size-dialog-sm), calc(100vw - 32px)); }
.jls-dialog--besar { width: min(var(--size-dialog-lg), calc(100vw - 32px)); }
.jls-dialog__isi { display: grid; gap: var(--space-4); padding: var(--space-8); }
.jls-dialog__kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.jls-dialog__judul { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.jls-dialog__kaki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-8); border-top: var(--border-hairline) solid var(--line); }
@media (max-width: 640px) {
  .jls-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
  .jls-dialog__isi { padding: var(--space-6); }
  .jls-dialog__kaki { padding: var(--space-4) var(--space-6); }
  .jls-dialog__kaki > .jls-tombol { flex: 1; }
}

/* ---------- Gerak dikurangi ---------- */

@media (prefers-reduced-motion: reduce) {
  .jls-tombol:active { transform: none; }
  .jls-tombol[aria-busy="true"]::before, .jls-putar { animation-duration: 2s; }
  .jls-kemajuan--tak-tentu > span::after, .jls-kerangka::after { animation: none; }
  .jls-toast, .jls-dialog[open] { animation: none; }
  a.jls-kartu:hover, .jls-kartu--interaktif:hover { transform: none; }
  .jls-sakelar > input::before { transition: none; }
}

/* ==========================================================================
   Komponen dasbor: kepala halaman, waktu data, bilah alat dan aksi massal,
   panel sembul, laci, lipatan, grafik, dan metrik. Ukuran laci bukan token
   warna atau jarak, jadi dinyatakan di sini.
   ========================================================================== */

:root {
  --laci-lebar: 480px;
  --laci-lebar-besar: 720px;
}

/* Teks khusus pembaca layar: tidak terlihat, tetap dibaca. */
.jls-sr-saja { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Gambar per tema, misalnya susunan logo terang dan gelap: tampil hanya di tema yang cocok. */
.jls-hanya-gelap { display: none; }
[data-theme="dark"] .jls-hanya-terang { display: none; }
[data-theme="dark"] .jls-hanya-gelap { display: revert; }

/* ---------- Kepala halaman ---------- */

.jls-kepala-halaman { display: grid; gap: var(--space-3); min-width: 0; }
.jls-kepala-halaman__baris { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.jls-kepala-halaman__teks { display: grid; gap: var(--space-1); min-width: 0; }
.jls-kepala-halaman__judul { margin: 0; color: var(--ink); font: 700 26px/32px var(--font-sans); letter-spacing: -0.015em; }
.jls-kepala-halaman__judul.jls-kode { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.jls-kepala-halaman--besar .jls-kepala-halaman__judul { font-size: 34px; line-height: 40px; letter-spacing: -0.02em; }
.jls-kepala-halaman__sub { margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-kepala-halaman__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-kepala-halaman__meta > * { display: inline-flex; align-items: center; gap: 6px; }
.jls-kepala-halaman__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.jls-kepala-halaman > .jls-tab { margin-top: var(--space-2); }
@media (max-width: 640px) {
  .jls-kepala-halaman__judul, .jls-kepala-halaman--besar .jls-kepala-halaman__judul { font-size: 22px; line-height: 28px; }
  .jls-kepala-halaman__aksi { width: 100%; }
  .jls-kepala-halaman__aksi > .jls-tombol--utama { flex: 1; }
}

/* Cap waktu data: kapan terakhir diperbarui, dengan titik hidup bila diperbarui otomatis. */
.jls-segar { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-segar--hidup::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.jls-segar--basi::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }

/* ---------- Bilah alat dan aksi massal ---------- */

.jls-bilah { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.jls-bilah__spasi { flex: 1; }
.jls-bilah > .jls-isian-grup { flex: 1 1 240px; max-width: 360px; }
.jls-bilah__pisah { width: 1px; height: 24px; background: var(--line); }
/* Aksi massal mengambang di tengah bawah layar: muncul dan hilang tanpa menggeser bilah alat atau tabel (keputusan pemilik). */
.jls-bilah--massal {
  position: fixed;
  right: 0;
  bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: var(--z-sticky);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
  animation: jls-muncul var(--duration-md) var(--ease-enter) backwards;
}
.jls-bilah--massal .jls-bilah__jumlah { font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
/* Tombol di atas bilah emas (pilihan A pemilik): selalu tampak sebagai tombol, tanpa perlu disorot.
   Tombol garis dan teks (termasuk "Pilih semua" dan "Batalkan semua pilihan") bergaris ink-inverse 45%, tanpa isi; teks 10.3:1 di terang, 3.9:1 di gelap.
   Tombol utama (DOC) berisi emas lebih pekat dengan bayangan tipis: terang emas-600 #BF9903 (6.6:1 dengan teks arang), gelap #846902 (5.3:1 dengan teks putih).
   Sorot selalu menggelap, tidak memutih. */
.jls-bilah--massal { --bilah-garis: color-mix(in srgb, var(--ink-inverse) 45%, transparent); --bilah-sorot: color-mix(in srgb, var(--ink-inverse) 12%, transparent); --bilah-tekan: color-mix(in srgb, var(--ink-inverse) 20%, transparent); --bilah-utama: var(--emas-600); --bilah-utama-sorot: var(--emas-700); }
[data-theme="dark"] .jls-bilah--massal { --bilah-sorot: rgba(0, 0, 0, 0.14); --bilah-tekan: rgba(0, 0, 0, 0.22); --bilah-utama: #846902; --bilah-utama-sorot: #6f5801; }
.jls-bilah--massal .jls-tombol--garis,
.jls-bilah--massal .jls-tombol--teks { color: var(--ink-inverse); background-color: transparent; border: 1px solid var(--bilah-garis); padding: 0 var(--t-pad); }
.jls-bilah--massal .jls-tombol--garis:hover,
.jls-bilah--massal .jls-tombol--teks:hover { background-color: var(--bilah-sorot); }
.jls-bilah--massal .jls-tombol--garis:active,
.jls-bilah--massal .jls-tombol--teks:active { background-color: var(--bilah-tekan); }
.jls-bilah--massal .jls-tombol--utama { color: var(--ink-inverse); background-color: var(--bilah-utama); border: 1px solid transparent; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.jls-bilah--massal .jls-tombol--utama:hover { background-color: var(--bilah-utama-sorot); }
.jls-bilah--massal .jls-tombol--utama:active { background-color: var(--bilah-utama-sorot); box-shadow: none; }
.jls-bilah--massal .jls-bilah__pisah { background: color-mix(in srgb, var(--ink-inverse) 24%, transparent); }
.jls-bilah--massal :focus-visible { outline-color: var(--ink-inverse); }
.jls-bilah--lengket { position: sticky; bottom: var(--space-4); z-index: var(--z-sticky); }
.jls-bilah--massal[hidden] { display: none; }
/* Ruang di akhir halaman agar baris terakhir bisa digulir ke atas bilah; toast naik di atas bilah. */
body:has(.jls-bilah--massal:not([hidden])) { padding-bottom: 96px; }
body:has(.jls-bilah--massal:not([hidden])) .jls-toast-wadah { bottom: calc(max(var(--space-6), env(safe-area-inset-bottom, 0px)) + 72px); }

/* ---------- Panel sembul (popover) ---------- */

.jls-sembul-wadah { position: relative; display: inline-block; }
.jls-sembul {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-4);
  width: max-content;
  min-width: 280px;
  max-width: min(400px, calc(100vw - 32px));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  z-index: var(--z-dropdown);
  animation: jls-muncul var(--duration-sm) var(--ease-enter) backwards;
}
.jls-sembul[hidden] { display: none; }
.jls-sembul-wadah > .jls-sembul { position: absolute; top: calc(100% + 6px); left: 0; }
.jls-sembul-wadah--kanan > .jls-sembul { left: auto; right: 0; }
.jls-sembul__judul { margin: 0; font: 600 15px/22px var(--font-sans); }
.jls-sembul__kaki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.jls-sembul__kaki > :first-child:not(:only-child) { margin-right: auto; }
[aria-haspopup="dialog"][aria-expanded="true"].jls-tombol { background: var(--surface-hover); }

/* Rentang tanggal: pintasan, lalu dua tanggal asli. Zona waktu selalu ditulis. */
.jls-rentang { display: grid; gap: var(--space-3); }
.jls-rentang__tanggal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.jls-rentang__tanggal .jls-isian { font-variant-numeric: tabular-nums; }

/* ---------- Laci (panel dari tepi kanan) ---------- */

.jls-laci {
  box-sizing: border-box;
  width: min(var(--laci-lebar), 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.jls-laci[open] { display: flex; flex-direction: column; animation: jls-laci-masuk var(--duration-lg) var(--ease-enter); }
.jls-laci::backdrop { background: var(--scrim); }
@keyframes jls-laci-masuk { from { transform: translateX(32px); opacity: 0; } }
.jls-laci--besar { width: min(var(--laci-lebar-besar), 100vw); }
.jls-laci > form { display: contents; }
.jls-laci__kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline) solid var(--line); }
.jls-laci__judul { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.jls-laci__judul.jls-kode { font-family: var(--font-mono); letter-spacing: 0; }
.jls-laci__sub { margin: 2px 0 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-laci__isi { flex: 1; display: grid; gap: var(--space-6); align-content: start; padding: var(--space-6); overflow-y: auto; }
.jls-laci__kaki { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: var(--border-hairline) solid var(--line); background: var(--surface-raised); }
@media (max-width: 640px) {
  .jls-laci, .jls-laci--besar { width: 100vw; border-radius: 0; }
  .jls-laci__kaki > .jls-tombol { flex: 1; }
}

/* ---------- Lipatan (akordeon) ---------- */

.jls-lipat { border-bottom: var(--border-hairline) solid var(--line); }
.jls-lipat-grup { border-top: var(--border-hairline) solid var(--line); }
.jls-lipat > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-1);
  color: var(--ink);
  font: 600 15px/22px var(--font-sans);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.jls-lipat > summary::-webkit-details-marker { display: none; }
.jls-lipat > summary > svg { flex: none; color: var(--ink-muted); }
.jls-lipat > summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: transform var(--duration-md) var(--ease-standard);
}
.jls-lipat[open] > summary::after { transform: rotate(180deg); }
.jls-lipat > summary:hover { color: var(--ink); background: var(--surface-hover); }
.jls-lipat > summary:focus-visible { outline-offset: 0; }
.jls-lipat__isi { padding: 0 var(--space-1) var(--space-5); color: var(--ink-muted); font: 400 14px/22px var(--font-sans); }
.jls-lipat > summary:has(> .jls-lencana, > .jls-hitungan) > :is(.jls-lencana, .jls-hitungan) { margin-left: auto; }
.jls-lipat > summary:has(> .jls-lencana, > .jls-hitungan)::after { margin-left: 0; }
.jls-lipat--kartu { border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.jls-lipat--kartu + .jls-lipat--kartu { margin-top: var(--space-3); }
.jls-lipat--kartu > summary { padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); }
.jls-lipat--kartu .jls-lipat__isi { padding: 0 var(--space-5) var(--space-5); }

/* ---------- Grafik ---------- */

/* Dibuat JLS.grafik: SVG dengan warna seri data-1 … data-8, legenda, tooltip, dan tabel cadangan. */
.jls-grafik { position: relative; display: grid; gap: var(--space-3); min-width: 0; color: var(--ink); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-grafik > svg { display: block; width: 100%; height: auto; overflow: visible; }
.jls-grafik__kisi { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.jls-grafik__dasar { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.jls-grafik__sumbu { fill: var(--ink-muted); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-grafik__nilai { fill: var(--ink); font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-grafik__garis { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jls-grafik__area { opacity: 0.16; }
.jls-grafik__titik { stroke: var(--surface-raised); stroke-width: 2; }
.jls-grafik__pemisah { stroke: var(--surface-raised); stroke-width: 2; }
.jls-grafik__bidik { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.jls-grafik__target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.jls-grafik__sasaran { fill: transparent; cursor: default; }
.jls-grafik__tanda { transition: opacity var(--duration-xs) var(--ease-standard); }
.jls-grafik[data-sorot] .jls-grafik__tanda:not([data-sorot]) { opacity: 0.35; }
.jls-grafik__tip {
  position: absolute;
  z-index: var(--z-tooltip);
  display: grid;
  gap: 4px;
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line);
  font: 500 12px/16px var(--font-sans);
  pointer-events: none;
  white-space: nowrap;
}
.jls-grafik__tip[hidden] { display: none; }
.jls-grafik__tip b { font-weight: 600; }
.jls-grafik__tip > div { display: flex; align-items: center; gap: var(--space-2); }
.jls-grafik__tip > div > span:last-child { margin-left: auto; padding-left: var(--space-3); font-weight: 600; }
.jls-grafik__pusat { fill: var(--ink); font: 800 28px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.jls-legenda.jls-legenda--tegak { display: grid; gap: var(--space-2); }
.jls-legenda.jls-legenda--tegak > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 52px; gap: var(--space-2); font: 500 13px/18px var(--font-sans); }
.jls-legenda--tegak b { font-weight: 600; text-align: right; }
.jls-legenda__persen { color: var(--ink-muted); text-align: right; }
.jls-grafik__memuat { display: flex; align-items: flex-end; gap: var(--space-3); padding: 0 var(--space-2) 0 44px; border-bottom: var(--border-hairline) solid var(--line); }
.jls-grafik__memuat > .jls-kerangka { flex: 1; border-radius: 4px 4px 0 0; }
.jls-grafik__kosong { display: grid; place-content: center; justify-items: center; gap: var(--space-2); text-align: center; }
.jls-grafik__kosong .jls-kosong__ikon { width: 48px; height: 48px; }
.jls-grafik__kosong .jls-kosong__judul { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; }
.jls-grafik__kosong .jls-kosong__isi { margin: 0; }
.jls-legenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--ink); font: 500 12px/16px var(--font-sans); }
.jls-legenda > li { display: inline-flex; align-items: center; gap: 6px; }
.jls-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--warna, var(--data-1)); }
.jls-swatch--garis { height: 3px; border-radius: 2px; width: 14px; }
.jls-grafik__tabel > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); font: 600 12px/16px var(--font-sans); cursor: pointer; border-radius: var(--radius-xs); }
.jls-grafik__tabel > summary:hover { color: var(--ink); }
.jls-grafik__tabel[open] > summary { margin-bottom: var(--space-2); }
.jls-grafik__tabel .jls-tabel-wadah { box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius-md); }

/* ---------- Metrik ---------- */

.jls-metrik { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.jls-metrik__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.jls-metrik__kepala > svg { flex: none; color: var(--ink-muted); }
.jls-metrik__ubah--netral { color: var(--ink-muted); }
/* Satuan kecil tidak menambah tinggi baris, agar kartu sejajar dengan atau tanpa satuan. */
.jls-metrik .jls-metrik__nilai small { line-height: 0; }
.jls-metrik__banding { color: var(--ink-muted); font-weight: 500; }
.jls-metrik__mini { display: block; width: 100%; height: 40px; margin-top: var(--space-1); }
.jls-metrik__mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jls-metrik__target { display: grid; gap: 6px; margin-top: var(--space-1); }
.jls-metrik__target > span { display: flex; justify-content: space-between; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-kisi-metrik { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ---------- Pilihan tema ---------- */

.jls-segmen > label > span > svg { flex: none; }
.jls-medan > .jls-segmen { justify-self: start; }

/* ---------- Dropdown (daftar pilih dengan pencarian) ---------- */

/* Dibuat JLS.ui dari <select> asli di dalam .jls-dropdown: tombol combobox, panel, pencarian
   (data-cari), dan listbox. Select aslinya tetap ada untuk formulir. */
.jls-dropdown { position: relative; display: block; min-width: 0; }
.jls-dropdown > select[hidden] { display: none; }
.jls-dropdown__pemicu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: 44px;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.jls-dropdown__pemicu::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: transform var(--duration-sm) var(--ease-standard);
}
.jls-dropdown__pemicu.jls-isian--kecil::after { right: var(--space-2); }
.jls-dropdown__pemicu[aria-expanded="true"] { border-color: var(--focus); }
.jls-dropdown__pemicu[aria-expanded="true"]::after { transform: rotate(180deg); }
.jls-dropdown__pemicu:disabled::after { background: var(--ink-disabled); }
.jls-dropdown__nilai { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jls-dropdown__nilai[data-kosong] { color: var(--ink-muted); }
.jls-dropdown__pemicu > svg { flex: none; color: var(--ink-muted); }
.jls-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: max(100%, 240px);
  max-width: min(420px, calc(100vw - 32px));
  max-height: 360px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  animation: jls-muncul var(--duration-sm) var(--ease-enter) backwards;
}
.jls-dropdown__panel[hidden] { display: none; }
.jls-dropdown--atas > .jls-dropdown__panel { top: auto; bottom: calc(100% + 6px); }
.jls-dropdown__cari { padding: 6px 6px 0; }
.jls-dropdown__cari .jls-isian { border-width: var(--border-hairline); }
.jls-dropdown__daftar { margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.jls-dropdown__kelompok { padding: var(--space-3) var(--space-3) var(--space-1); color: var(--ink-muted); font: 700 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.jls-dropdown__kelompok:not(:first-child) { margin-top: 4px; border-top: var(--border-hairline) solid var(--line); }
.jls-dropdown__daftar [role="option"] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 500 15px/22px var(--font-sans);
  cursor: pointer;
}
.jls-dropdown--kecil .jls-dropdown__daftar [role="option"] { min-height: 32px; padding: 4px 10px; font-size: 14px; line-height: 20px; }
.jls-dropdown__daftar [role="option"] > svg { flex: none; color: var(--ink-muted); }
.jls-dropdown__daftar [role="option"] > span { display: grid; min-width: 0; }
.jls-dropdown__daftar [role="option"] small { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.jls-dropdown__daftar [role="option"]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  visibility: hidden;
}
.jls-dropdown__daftar [role="option"]:hover,
.jls-dropdown__panel[data-papan] [role="option"][data-aktif] { background: var(--surface-hover); }
/* Cincin fokus hanya saat dipakai dengan papan ketik. */
.jls-dropdown__panel[data-papan] [role="option"][data-aktif] { box-shadow: inset 0 0 0 var(--border-strong) var(--focus); }
.jls-dropdown__daftar [role="option"][aria-selected="true"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.jls-dropdown__daftar [role="option"][aria-selected="true"] > svg,
.jls-dropdown__daftar [role="option"][aria-selected="true"]::after { color: var(--brand-aksen); background-color: var(--brand-aksen); }
.jls-dropdown__daftar [role="option"][aria-selected="true"] > svg { background-color: transparent; }
.jls-dropdown__daftar [role="option"][aria-selected="true"]::after { visibility: visible; }
.jls-dropdown__daftar [role="option"][aria-disabled="true"] { color: var(--ink-disabled); background: none; cursor: not-allowed; }
.jls-dropdown__daftar mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-aksen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.jls-dropdown__kosong { padding: var(--space-4) var(--space-3); color: var(--ink-muted); font: 400 14px/20px var(--font-sans); text-align: center; }

/* Dropdown pilih banyak: <select multiple>. Kotak centang di kiri tiap pilihan, panel tetap terbuka. */
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"]::after { display: none; }
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"]::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: var(--border-regular) solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
}
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"] { background: none; color: var(--ink); font-weight: 500; }
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]::before {
  border-color: var(--brand-aksen);
  background: var(--brand-aksen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181715' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
[data-theme="dark"] .jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"]:hover,
.jls-dropdown--banyak .jls-dropdown__panel[data-papan] [role="option"][data-aktif] { background: var(--surface-hover); }
.jls-dropdown__panel:has(> .jls-dropdown__kaki) { grid-template-rows: auto minmax(0, 1fr) auto; }
.jls-dropdown__kaki { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-top: var(--border-hairline) solid var(--line); color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- Isian angka (tambah dan kurang) ---------- */

/* <div class="jls-isian-angka"> berisi <input type="number" class="jls-isian">; JLS.ui menambah tombol − dan +. */
.jls-isian-angka { display: inline-flex; align-items: stretch; max-width: 100%; }
.jls-isian-angka > .jls-isian { width: 88px; border-radius: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; position: relative; z-index: 1; }
.jls-isian-angka > .jls-isian::-webkit-inner-spin-button,
.jls-isian-angka > .jls-isian::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jls-isian-angka > .jls-isian:focus-visible { z-index: 2; }
.jls-isian-angka > button {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size-control-md);
  border: var(--border-regular) solid var(--line-strong);
  background: var(--surface-sunken);
  color: var(--ink);
  cursor: pointer;
  transition: var(--transisi-warna);
}
.jls-isian-angka > button:first-child { border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.jls-isian-angka > button:last-child { border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.jls-isian-angka > button:hover { background: var(--surface-hover); }
.jls-isian-angka > button:disabled { color: var(--ink-disabled); background: var(--surface-sunken); cursor: not-allowed; }
.jls-isian-angka > button:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 0.5px var(--focus); position: relative; z-index: 2; }
.jls-isian-angka:has(> .jls-isian--kecil) > button { width: var(--size-control-sm); }
.jls-isian-angka:has(> .jls-isian--kecil) > button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.jls-isian-angka:has(> .jls-isian--kecil) > button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.jls-isian-angka:has(> .jls-isian--kecil) > .jls-isian { width: 64px; }

/* ---------- Pemberitahuan ---------- */

/* Panel di bawah tombol lonceng (di dalam jls-sembul). Butir belum dibaca bertitik emas. */
.jls-lonceng { position: relative; }
.jls-lonceng > .jls-hitungan { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface-raised); }
.jls-notifikasi { display: grid; width: min(380px, calc(100vw - 32px)); margin: calc(var(--space-4) * -1); }
.jls-notifikasi__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
.jls-notifikasi__judul { margin: 0; font: 600 15px/22px var(--font-sans); }
.jls-notifikasi__daftar { display: grid; max-height: 360px; margin: 0; padding: 0 var(--space-2) var(--space-2); list-style: none; overflow-y: auto; }
.jls-notifikasi__butir {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
}
a.jls-notifikasi__butir:hover { background: var(--surface-hover); }
.jls-notifikasi__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); }
.jls-notifikasi__ikon--sukses { background: var(--success-soft); color: var(--success-ink); }
.jls-notifikasi__ikon--peringatan { background: var(--warning-soft); color: var(--warning-ink); }
.jls-notifikasi__ikon--bahaya { background: var(--danger-soft); color: var(--danger-ink); }
.jls-notifikasi__ikon--info { background: var(--info-soft); color: var(--info-ink); }
.jls-notifikasi__isi { display: block; min-width: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.jls-notifikasi__isi b { display: block; margin-bottom: 2px; color: var(--ink); font: 600 14px/20px var(--font-sans); }
.jls-notifikasi__waktu { display: block; margin-top: 4px; font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-notifikasi__butir[data-baru]::after { content: ""; position: absolute; top: 18px; right: var(--space-3); width: 8px; height: 8px; border-radius: 50%; background: var(--brand-aksen); }
.jls-notifikasi__butir[data-baru] .jls-notifikasi__isi b::after { content: " · baru"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.jls-notifikasi__kaki { display: flex; justify-content: center; padding: var(--space-2); border-top: var(--border-hairline) solid var(--line); }

/* ---------- Penanda mitra ---------- */

/* Titik berwarna merek mitra di depan nama maskapai: di tabel, penyaring, legenda buatan sendiri.
   Warna dari token mitra-*; nama maskapai tetap ditulis dengan teks ink. */
.jls-mitra { display: inline-flex; align-items: center; gap: 6px; }
.jls-mitra::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mitra, var(--ink-muted)); box-shadow: inset 0 0 0 2px var(--mitra-aksen, transparent); }
.jls-mitra--ga { --mitra: var(--mitra-garuda); --mitra-aksen: var(--mitra-garuda-aksen); }
.jls-mitra--qg { --mitra: var(--mitra-citilink); --mitra-aksen: var(--mitra-citilink-aksen); }

/* ---------- Tanggal (pemilih tanggal) ---------- */

/* Dibuat JLS.ui dari <input type="date"> di dalam .jls-tanggal: tombol bertanggal JLS.format dan kalender. */
.jls-tanggal { position: relative; display: block; min-width: 0; }
.jls-tanggal > input[hidden] { display: none; }
.jls-tanggal__pemicu { display: flex; align-items: center; gap: var(--space-2); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.jls-tanggal__pemicu > svg { flex: none; color: var(--ink-muted); }
.jls-tanggal__pemicu[aria-expanded="true"] { border-color: var(--focus); }
.jls-tanggal__nilai { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jls-tanggal__nilai[data-kosong] { color: var(--ink-muted); }
.jls-tanggal__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  box-sizing: border-box;
  width: 304px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  animation: jls-muncul var(--duration-sm) var(--ease-enter) backwards;
}
.jls-tanggal__panel[hidden] { display: none; }
.jls-tanggal--atas > .jls-tanggal__panel { top: auto; bottom: calc(100% + 6px); }
.jls-tanggal__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.jls-tanggal__bulan { font: 600 15px/22px var(--font-sans); }
.jls-tanggal__kisi { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jls-tanggal__kisi th { padding: 0 0 var(--space-1); color: var(--ink-muted); font: 600 11px/16px var(--font-sans); text-align: center; }
.jls-tanggal__kisi td { padding: 1px; text-align: center; }
.jls-tanggal__kisi button {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 500 14px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.jls-tanggal__kisi button:hover { background: var(--surface-hover); }
.jls-tanggal__kisi button[data-luar] { color: var(--ink-muted); }
.jls-tanggal__kisi button:disabled { color: var(--ink-disabled); background: none; cursor: not-allowed; text-decoration: line-through; }
.jls-tanggal__kisi button[data-hari-ini]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand-aksen); }
.jls-tanggal__kisi td[aria-selected="true"] button { background: var(--brand); color: var(--on-brand); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--brand-aksen); }
.jls-tanggal__kisi button:focus-visible { outline-offset: 0; }
.jls-tanggal__kaki { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-hairline) solid var(--line); }

/* ---------- Gulir (scroll bar) ---------- */

/* Batang gulir JLS: satu ukuran di semua tempat. Ibu jari kapsul 8 px warna arang samar, berjarak 4 px
   dari tepi dan 12 px dari ujung atas dan bawah bidang, sehingga tidak menyentuh sudut membulat.
   Ukurannya tidak berubah saat disorot; hanya warnanya sedikit lebih pekat. */
:root {
  --gulir-ibu: color-mix(in srgb, var(--ink-muted) 55%, transparent);
  --gulir-ibu-sorot: color-mix(in srgb, var(--ink-muted) 80%, transparent);
  --gulir-jalur: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  html, .jls-gulir, .jls-menu, .jls-sembul, .jls-dropdown__daftar, .jls-laci__isi, .jls-tabel-wadah { scrollbar-width: auto; scrollbar-color: var(--gulir-ibu) var(--gulir-jalur); }
}
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--gulir-jalur); margin: 12px; }
::-webkit-scrollbar-thumb {
  min-height: 40px;
  min-width: 40px;
  border: 4px solid transparent;
  border-radius: var(--radius-full);
  background: var(--gulir-ibu) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--gulir-ibu-sorot); }
::-webkit-scrollbar-thumb:active { background-color: var(--brand-aksen); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Bidang gulir dengan bayangan tepi: tanda bahwa isi masih berlanjut. */
.jls-gulir--bayang {
  background:
    linear-gradient(var(--surface-raised) 30%, transparent) top / 100% 24px no-repeat local,
    linear-gradient(transparent, var(--surface-raised) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 14%, transparent), transparent) top / 100% 8px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) bottom / 100% 8px no-repeat scroll,
    var(--surface-raised);
}

/* ---------- Gerak dikurangi: tambahan dasbor ---------- */

@media (prefers-reduced-motion: reduce) {
  .jls-laci[open], .jls-sembul, .jls-bilah--massal { animation: none; }
  .jls-lipat > summary::after { transition: none; }
  .jls-dropdown__panel, .jls-tanggal__panel { animation: none; }
  .jls-pilih::after, .jls-dropdown__pemicu::after, .jls-tabel__buka > svg { transition: none; }
}

/* ---------- Kolaborasi: warna rekan ----------
   Setiap rekan punya satu warna identitas yang tetap (data-rekan="1" sampai "8", dipilih dari id pengguna
   dengan JLS.rekan.warna). Warna yang sama dipakai di kursor, cincin avatar, sorotan, dan nama di obrolan. */
[data-rekan="1"] { --rekan: var(--rekan-1); } [data-rekan="2"] { --rekan: var(--rekan-2); }
[data-rekan="3"] { --rekan: var(--rekan-3); } [data-rekan="4"] { --rekan: var(--rekan-4); }
[data-rekan="5"] { --rekan: var(--rekan-5); } [data-rekan="6"] { --rekan: var(--rekan-6); }
[data-rekan="7"] { --rekan: var(--rekan-7); } [data-rekan="8"] { --rekan: var(--rekan-8); }

/* ---------- Kehadiran ---------- */
/* Avatar rekan: isian petugas biasa, cincin dalam berwarna identitas. */
.jls-avatar[data-rekan] { box-shadow: inset 0 0 0 2px var(--rekan); }
/* Pembungkus avatar dengan titik status. */
.jls-hadir { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.jls-hadir::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--hadir-latar, var(--surface-raised));
  background: var(--ink-disabled);
}
.jls-hadir[data-status="aktif"]::after { background: var(--success); }
.jls-hadir[data-status="diam"]::after { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ink-muted); }
.jls-hadir[data-status="sibuk"]::after { background: var(--danger); }
.jls-hadir[data-status="luring"]::after { display: none; }
.jls-hadir[data-status="luring"] > .jls-avatar { box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; color: var(--ink-muted); }

/* Tumpukan avatar orang yang sedang membuka halaman yang sama. */
.jls-kehadiran { display: inline-flex; align-items: center; padding-left: 6px; list-style: none; margin: 0; }
.jls-kehadiran > * { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--hadir-latar, var(--surface-raised)); transition: transform var(--duration-sm) var(--ease-standard); }
.jls-kehadiran > :hover, .jls-kehadiran > :focus-within { position: relative; z-index: 1; transform: translateY(-2px); }
.jls-kehadiran button { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; font: inherit; color: inherit; }
.jls-kehadiran button:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: 2px; }
.jls-kehadiran .jls-kehadiran__lebih {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink);
  font: 600 11px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
/* Daftar kehadiran lengkap (di dalam sembul atau panel). */
.jls-hadir-daftar { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 240px; }
.jls-hadir-daftar > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); }
.jls-hadir-daftar__nama { flex: 1; min-width: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.jls-hadir-daftar__nama small { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mode ikuti: layar orang lain sedang diikuti. Bingkai berwarna rekan dan pil di atas. */
.jls-ikuti { position: relative; }
.jls-ikuti::after { content: ""; position: absolute; inset: 0; z-index: var(--z-sticky); border-radius: inherit; box-shadow: inset 0 0 0 3px var(--rekan); pointer-events: none; }
.jls-ikuti__pil {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: calc(var(--z-sticky) + 1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 4px 4px 12px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--rekan);
  color: var(--on-rekan);
  font: 600 13px/20px var(--font-sans);
  white-space: nowrap;
  transform: translateX(-50%);
}
.jls-ikuti__pil button { height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-rekan) 18%, transparent); color: inherit; font: 600 12px/1 var(--font-sans); cursor: pointer; }
.jls-ikuti__pil button:hover { background-color: color-mix(in srgb, var(--on-rekan) 28%, transparent); }
.jls-ikuti__pil button:focus-visible { outline: 2px solid var(--on-rekan); outline-offset: 1px; }

/* ---------- Kursor rekan ---------- */
/* Lapisan di atas konten bersama. Posisi dikirim sebagai pecahan dari ukuran lapisan, jadi sama di layar mana pun. */
.jls-kursor-lapis { position: absolute; inset: 0; z-index: var(--z-dropdown); overflow: hidden; pointer-events: none; }
.jls-kursor {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--rekan);
  transform: translate(var(--x, -100px), var(--y, -100px));
  transition: transform 120ms linear, opacity var(--duration-md) var(--ease-standard);
  will-change: transform;
}
.jls-kursor[data-keluar] { opacity: 0; }
.jls-kursor__panah { display: block; width: 20px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(12, 11, 10, 0.25)); }
.jls-kursor__panah path { fill: currentColor; stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
.jls-kursor__nama {
  position: absolute;
  top: 18px;
  left: 14px;
  width: max-content;
  max-width: 220px;
  padding: 3px 8px;
  border-radius: 3px 10px 10px 10px;
  background: var(--rekan);
  color: var(--on-rekan);
  font: 600 12px/16px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-md) var(--ease-standard), transform var(--duration-md) var(--ease-standard);
  transform-origin: 0 0;
}
/* Pesan singkat dari kursor (tekan / untuk mengetik di tempat). */
.jls-kursor[data-kiri] .jls-kursor__nama { left: auto; right: calc(100% - 10px); border-radius: 10px 3px 10px 10px; transform-origin: 100% 0; }
.jls-kursor__pesan { display: block; max-width: 220px; margin-top: 2px; font-weight: 500; white-space: normal; }
.jls-kursor__nama:has(.jls-kursor__pesan) { padding: 6px 10px; border-radius: 3px 14px 14px 14px; }
.jls-kursor[data-kiri] .jls-kursor__nama:has(.jls-kursor__pesan) { border-radius: 14px 3px 14px 14px; }
/* Diam lebih dari 5 detik: nama disembunyikan, panah tetap. */
.jls-kursor[data-diam] .jls-kursor__nama { opacity: 0; transform: scale(0.9); }
.jls-kursor[data-diam] .jls-kursor__panah { opacity: 0.7; }
/* Klik rekan: riak singkat di ujung panah. */
.jls-kursor__klik { position: absolute; top: -12px; left: -12px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--rekan); animation: jls-kursor-klik 520ms var(--ease-standard) forwards; }
@keyframes jls-kursor-klik { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- Sorotan rekan ---------- */
/* Elemen yang sedang dilihat atau diubah rekan: garis berwarna identitas dan nama di sudut. */
.jls-sorot-rekan { position: relative; outline: 2px solid var(--rekan); outline-offset: 2px; }
.jls-sorot-rekan__nama {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px 8px 0 8px;
  background: var(--rekan);
  color: var(--on-rekan);
  font: 600 11px/16px var(--font-sans);
  white-space: nowrap;
  transform: translateY(-100%);
  pointer-events: none;
}
.jls-sorot-rekan__nama > svg { width: 12px; height: 12px; }
tr.jls-sorot-rekan { outline-offset: -2px; }
tr.jls-sorot-rekan .jls-sorot-rekan__nama { position: static; transform: none; margin-left: var(--space-2); border-radius: var(--radius-full); vertical-align: middle; }
/* Sedang diubah rekan: isian dikunci untuk orang lain. */
.jls-sorot-rekan[aria-busy="true"] { cursor: not-allowed; }
.jls-sorot-rekan[aria-busy="true"] :is(input, select, textarea, button):not(.jls-sorot-rekan__nama) { pointer-events: none; }

/* ---------- Obrolan (bilah kanan) ---------- */
.jls-obrolan {
  --hadir-latar: var(--surface-raised);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: inset 1px 0 0 var(--line);
}
.jls-obrolan[hidden] { display: none; }
/* Menempel di kanan layar setinggi viewport; di ponsel menjadi layar penuh. */
.jls-obrolan--samping { position: sticky; top: 0; height: 100dvh; animation: jls-obrolan-masuk var(--duration-md) var(--ease-enter) backwards; }
@keyframes jls-obrolan-masuk { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 767px) { .jls-obrolan--samping { position: fixed; inset: 0; z-index: var(--z-dialog); width: 100%; } }
.jls-obrolan__kepala { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); box-sizing: border-box; border-bottom: var(--border-hairline) solid var(--line); }
.jls-obrolan__judul { flex: 1; min-width: 0; margin: 0; font: 600 16px/22px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-obrolan__judul small { display: block; color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.jls-obrolan__isi { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-4) var(--space-2); }
.jls-obrolan__kaki { position: relative; padding: var(--space-3); border-top: var(--border-hairline) solid var(--line); }
.jls-obrolan__kosong { margin: auto; max-width: 240px; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); text-align: center; }

/* Pemisah tanggal dan penanda pesan baru. */
.jls-obrolan__pemisah { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; color: var(--ink-muted); font: 600 12px/16px var(--font-sans); }
.jls-obrolan__pemisah::before, .jls-obrolan__pemisah::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jls-obrolan__pemisah--baru { color: var(--brand-strong); }
.jls-obrolan__pemisah--baru::before, .jls-obrolan__pemisah--baru::after { background: var(--brand-aksen); }

/* Tombol lompat ke pesan terbaru saat pengguna sedang menggulir ke atas. */
.jls-obrolan__lompat {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--surface-inverse);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transform: translateX(-50%);
}
.jls-obrolan__lompat[hidden] { display: none; }
.jls-obrolan__lompat:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: 2px; }

/* Pesan */
.jls-ujaran { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-2); align-items: start; margin-top: var(--space-3); }
.jls-ujaran > .jls-avatar, .jls-ujaran > .jls-hadir { grid-row: span 2; margin-top: 2px; }
.jls-ujaran__kepala { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 2px; font: 600 13px/18px var(--font-sans); }
.jls-ujaran__kepala > b { color: var(--ink); font-weight: 600; }
.jls-ujaran__kepala > time { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-ujaran__badan { min-width: 0; display: grid; justify-items: start; gap: 2px; }
.jls-ujaran__gelembung {
  max-width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 4px 16px 16px 16px;
  background-color: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: 400 14px/20px var(--font-sans);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Pesan berurutan dari orang yang sama (dalam 5 menit): tanpa avatar dan kepala. */
.jls-ujaran--lanjut { margin-top: 0; }
.jls-ujaran--lanjut > .jls-avatar, .jls-ujaran--lanjut > .jls-hadir { visibility: hidden; }
.jls-ujaran--lanjut .jls-ujaran__kepala { display: none; }
.jls-ujaran--lanjut .jls-ujaran__gelembung { border-top-left-radius: 16px; }
/* Pesan saya: kanan, isian emas, tanpa avatar. */
.jls-ujaran--saya { grid-template-columns: minmax(0, 1fr); }
.jls-ujaran--saya > .jls-avatar, .jls-ujaran--saya > .jls-hadir { display: none; }
.jls-ujaran--saya .jls-ujaran__badan { justify-items: end; }
.jls-ujaran--saya .jls-ujaran__kepala { justify-content: flex-end; }
.jls-ujaran--saya .jls-ujaran__kepala > b { display: none; }
.jls-ujaran--saya .jls-ujaran__gelembung { border-radius: 16px 4px 16px 16px; background-color: var(--brand); box-shadow: none; color: var(--on-brand); }
.jls-ujaran--saya.jls-ujaran--lanjut .jls-ujaran__gelembung { border-top-right-radius: 16px; }
/* Pesan yang menyebut saya. */
.jls-ujaran--sebut-saya .jls-ujaran__gelembung { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--brand-aksen); }
/* Pesan sistem: bergabung, keluar, perubahan status kiriman. */
.jls-ujaran--sistem { display: flex; justify-content: center; gap: 6px; margin: var(--space-3) 0; color: var(--ink-muted); font: 400 12px/16px var(--font-sans); text-align: center; }
.jls-ujaran--sistem > svg { flex: none; width: 16px; height: 16px; }
.jls-ujaran__status { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-muted); font: 400 11px/16px var(--font-sans); }
.jls-ujaran__status > svg { width: 14px; height: 14px; }
.jls-ujaran__status[data-status="dibaca"] > svg { color: var(--brand-aksen); }
.jls-ujaran__status[data-status="gagal"] { color: var(--danger-ink); }
/* Sebutan @nama dan nomor AWB di dalam pesan. */
.jls-sebut { padding: 0 3px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.jls-ujaran--saya .jls-sebut { background: color-mix(in srgb, var(--on-brand) 14%, transparent); color: inherit; }
.jls-ujaran__awb { color: inherit; font-family: var(--font-mono); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-aksen); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.jls-ujaran--saya .jls-ujaran__awb { text-decoration-color: currentColor; }
/* Kartu rujukan kiriman di dalam pesan. */
.jls-ujaran__rujukan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  align-items: center;
  width: 100%;
  max-width: 280px;
  margin-top: 4px;
  padding: var(--space-3);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
}
.jls-ujaran__rujukan > svg { grid-row: span 2; color: var(--ink-muted); }
.jls-ujaran__rujukan b { font: 600 14px/20px var(--font-mono); }
.jls-ujaran__rujukan span { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
a.jls-ujaran__rujukan:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
a.jls-ujaran__rujukan:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: 2px; }

/* Sedang mengetik */
.jls-mengetik { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; padding: 0 var(--space-4) var(--space-1); color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.jls-mengetik[hidden] { display: none; }
.jls-mengetik__titik { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: var(--radius-full); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.jls-mengetik__titik > i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); animation: jls-mengetik 1.2s ease-in-out infinite; }
.jls-mengetik__titik > i:nth-child(2) { animation-delay: 0.15s; }
.jls-mengetik__titik > i:nth-child(3) { animation-delay: 0.3s; }
@keyframes jls-mengetik { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Penyusun pesan */
.jls-penyusun { position: relative; display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-1) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.jls-penyusun:focus-within { box-shadow: inset 0 0 0 var(--border-strong) var(--focus); }
.jls-penyusun > textarea { display: block; width: 100%; min-height: 24px; max-height: 144px; margin: 0; padding: 4px 0; box-sizing: border-box; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 14px/20px var(--font-sans); overflow-y: auto; }
.jls-penyusun > textarea::placeholder { color: var(--ink-muted); }
.jls-penyusun__aksi { display: flex; align-items: center; gap: var(--space-1); }
.jls-penyusun__aksi > .jls-bantuan { flex: 1; margin: 0; text-align: right; padding-right: var(--space-1); }
.jls-penyusun__aksi .jls-tombol { --t-tinggi: 32px; }
/* Saran sebutan @nama */
.jls-penyusun__saran { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-2)); z-index: var(--z-dropdown); display: grid; gap: 2px; margin: 0; padding: var(--space-1); list-style: none; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); }
.jls-penyusun__saran[hidden] { display: none; }
.jls-penyusun__saran [role="option"] { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius-sm); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.jls-penyusun__saran [role="option"][aria-selected="true"] { background: var(--surface-hover); }

/* ---------- Daftar percakapan ---------- */
.jls-percakapan { display: grid; gap: 2px; margin: 0; padding: var(--space-2); list-style: none; }
.jls-percakapan__butir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.jls-percakapan__butir > .jls-avatar, .jls-percakapan__butir > .jls-hadir, .jls-percakapan__butir > .jls-percakapan__grup { grid-row: span 2; }
.jls-percakapan__butir:hover { background: var(--surface-hover); }
.jls-percakapan__butir:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: -2px; }
.jls-percakapan__butir[aria-current="true"], .jls-percakapan__butir[aria-current="page"] { background: var(--brand-soft); }
/* Di gelap brand-soft sama dengan panel, jadi percakapan aktif memakai surface-hover. */
[data-theme="dark"] .jls-percakapan__butir[aria-current="true"], [data-theme="dark"] .jls-percakapan__butir[aria-current="page"] { background: var(--surface-hover); }
.jls-percakapan__nama { font: 600 14px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-percakapan__waktu { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; justify-self: end; }
.jls-percakapan__cuplik { grid-column: 2; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-percakapan__butir > .jls-hitungan { grid-column: 3; justify-self: end; }
.jls-percakapan__butir[data-belum-dibaca] .jls-percakapan__cuplik { color: var(--ink); font-weight: 500; }
.jls-percakapan__grup { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .jls-kursor, .jls-kursor__nama, .jls-kehadiran > * { transition: none; }
  .jls-kursor__klik, .jls-obrolan--samping { animation: none; }
  .jls-mengetik__titik > i { animation: none; opacity: 0.8; }
}

/* ---------- Dokumen digital ----------
   Dokumen resmi di layar (invoice, manifes, rekap pendapatan mitra) dalam dua keadaan:
   draf (belum resmi: isian di kiri, pratinjau berskala di kanan, tanda air DRAF) dan
   terbit (resmi: nomor resmi, kertas utuh, panel status dan verifikasi QR di samping).
   Kertas mengikuti tema; ukurannya ikut lebar wadah (container query) seperti pratinjau PDF. */
.jls-dokumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-6); align-items: start; }
.jls-dokumen--draf { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
/* Dokumen yang sedang diisi (draf, proforma): isian di kiri, kertas di kanan, tanpa kelas tambahan. */
.jls-dokumen:has(> .jls-dokumen__isian) { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
@media (max-width: 1023px) { .jls-dokumen, .jls-dokumen--draf, .jls-dokumen:has(> .jls-dokumen__isian) { grid-template-columns: minmax(0, 1fr); } }
.jls-dokumen__bilah { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.jls-dokumen__identitas { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.jls-dokumen__jenis { color: var(--ink-muted); font: 600 13px/18px var(--font-sans); }
.jls-dokumen__nomor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; color: var(--ink); font: 600 22px/30px var(--font-mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.jls-dokumen--draf .jls-dokumen__nomor { font: 700 22px/30px var(--font-sans); letter-spacing: -0.01em; }
.jls-dokumen__id-draf { color: var(--ink-muted); font: 500 13px/18px var(--font-mono); }
.jls-dokumen__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Status simpan otomatis di draf. */
.jls-dokumen__simpan { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-dokumen__simpan > svg { width: 16px; height: 16px; flex: none; }
.jls-dokumen__simpan[data-status="tersimpan"] > svg { color: var(--success); }
.jls-dokumen__simpan[data-status="gagal"] { color: var(--danger-ink); }
.jls-dokumen__simpan[data-status="menyimpan"] > svg { animation: jls-putar 900ms linear infinite; }

/* Isian draf di kiri. */
.jls-dokumen__isian { display: grid; gap: var(--space-5); align-content: start; }

/* Kanvas dan kertas: A4 berskala. Ukuran huruf kertas = 10 pt pada A4, ikut lebar kanvas. */
.jls-dokumen__kanvas { container-type: inline-size; display: grid; justify-items: center; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-sunken); min-width: 0; }
.jls-dokumen__kertas {
  --kertas-huruf: min(1.6cqi, 13.3px);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 794px;
  aspect-ratio: 210 / 297;
  padding: 7.1% 9.5% 5em;
  overflow: clip;
  border-radius: 2px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  font: 400 var(--kertas-huruf)/1.45 var(--font-sans);
}
/* Draf: garis putus-putus dan tanda air DRAF miring 30°, sama dengan sudut tanda JLS. */
.jls-dokumen--draf .jls-dokumen__kertas { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--surface-raised); outline: 2px dashed var(--line-strong); outline-offset: -1px; }
.jls-dokumen--draf .jls-dokumen__kertas::before,
.jls-dokumen--batal .jls-dokumen__kertas::before {
  content: attr(data-tanda-air);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  font: 800 12em/1 var(--font-sans);
  letter-spacing: 0.06em;
  transform: rotate(-30deg);
  pointer-events: none;
  white-space: nowrap;
}
.jls-dokumen--batal .jls-dokumen__kertas::before { color: color-mix(in srgb, var(--danger) 14%, transparent); font-size: 7em; }
.jls-dokumen__kertas > * { position: relative; z-index: 1; }

/* Isi kertas (satuan em, jadi ikut skala). */
.jls-dokumen__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 2em; padding-bottom: 1.2em; margin-bottom: 2em; border-bottom: 0.08em solid var(--ink); }
.jls-dokumen__kop svg { display: block; height: 3.4em; width: auto; }
.jls-dokumen__kop-teks { text-align: right; font-size: 0.82em; line-height: 1.5; color: var(--ink-muted); }
.jls-dokumen__kop-teks b { color: var(--ink); font-weight: 700; }
.jls-dokumen__judul { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-bottom: 1.8em; }
.jls-dokumen__judul h2 { margin: 0; font: 800 1.6em/1.1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.jls-dokumen__judul dl { display: grid; grid-template-columns: auto auto; gap: 0.15em 1.2em; margin: 0; font-size: 0.9em; text-align: right; }
.jls-dokumen__judul dt { color: var(--ink-muted); }
.jls-dokumen__judul dd { margin: 0; font-family: var(--font-mono); font-weight: 600; }
.jls-dokumen__label { display: block; margin-bottom: 0.3em; color: var(--ink-muted); font: 700 0.75em/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.jls-dokumen__pihak { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; margin-bottom: 1.8em; }
.jls-dokumen__rincian { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: 0.9em; font-variant-numeric: tabular-nums; }
.jls-dokumen__rincian th { padding: 0.5em 0.6em; border-bottom: 0.08em solid var(--ink); color: var(--ink-muted); font: 700 0.85em/1.3 var(--font-sans); letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.jls-dokumen__rincian td { padding: 0.55em 0.6em; border-bottom: 0.06em solid var(--line); vertical-align: top; }
.jls-dokumen__rincian .jls-kanan { text-align: right; }
.jls-dokumen__rincian .jls-kode { font-family: var(--font-mono); font-weight: 500; }
.jls-dokumen__jumlah { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 0.35em 0; margin: 0 0 1.2em auto; font-size: 0.95em; font-variant-numeric: tabular-nums; }
.jls-dokumen__jumlah dt { color: var(--ink-muted); }
.jls-dokumen__jumlah dd { margin: 0; padding-left: 2.4em; text-align: right; }
.jls-dokumen__jumlah dt:last-of-type, .jls-dokumen__jumlah dd:last-of-type { padding-top: 0.4em; border-top: 0.08em solid var(--ink); color: var(--ink); font-weight: 800; font-size: 1.15em; }
.jls-dokumen__terbilang { margin: 0 0 1.8em; font-style: italic; font-size: 0.9em; }
.jls-dokumen__ttd { display: grid; justify-items: center; width: 34%; margin-left: auto; gap: 0.3em; font-size: 0.9em; text-align: center; }
.jls-dokumen__ttd-ruang { width: 100%; height: 4.5em; }
.jls-dokumen__kaki { position: absolute; right: 9.5%; bottom: 3.2%; left: 9.5%; display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; color: var(--ink-muted); font-size: 0.7em; line-height: 1.4; }
.jls-dokumen__kaki .jls-qr { width: 6em; }
/* Isian yang belum lengkap di pratinjau draf. */
.jls-dokumen__kosong { display: inline-block; min-width: 6em; border-bottom: 0.1em dashed var(--warning); color: var(--warning-ink); }

/* Di wadah sempit (ponsel), isi kertas ditata ulang agar terbaca, bukan diperkecil.
   Cetak dan PDF tetap A4. */
@container (max-width: 760px) {
  .jls-dokumen__kertas { --kertas-huruf: 13px; aspect-ratio: auto; padding: 20px 16px; }
  .jls-dokumen--draf .jls-dokumen__kertas::before { font-size: 6em; }
  .jls-dokumen__kop { flex-direction: column; gap: 0.8em; }
  .jls-dokumen__kop-teks { text-align: left; }
  .jls-dokumen__judul { flex-direction: column; align-items: flex-start; gap: 0.8em; }
  .jls-dokumen__judul dl { text-align: left; }
  .jls-dokumen__pihak { grid-template-columns: 1fr; gap: 1em; }
  .jls-dokumen__rincian, .jls-dokumen__rincian > tbody { display: block; }
  .jls-dokumen__rincian > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jls-dokumen__rincian tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1em; padding: 0.7em 0; border-bottom: 0.06em solid var(--line); }
  .jls-dokumen__rincian td { display: block; order: 2; padding: 0; border: 0; color: var(--ink-muted); font-size: 0.92em; text-align: left; }
  .jls-dokumen__rincian td:first-child { order: 0; flex: 1 0 55%; color: var(--ink); font-size: 1em; }
  .jls-dokumen__rincian td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-sans); font-weight: 400; }
  .jls-dokumen__rincian td[data-kartu="judul"] { font-weight: 600; }
  .jls-dokumen__rincian td[data-kartu="judul"]::before { content: none; }
  .jls-dokumen__rincian td:last-child { order: 1; color: var(--ink); font-size: 1em; font-weight: 700; text-align: right; }
  .jls-dokumen__rincian td:last-child::before { content: none; }
  .jls-dokumen__rincian tr::after { content: ""; order: 1; flex-basis: 100%; } /* baris 1: nomor dan jumlah; baris 2: rincian lain */
  .jls-dokumen__jumlah { margin-left: 0; width: 100%; grid-template-columns: 1fr auto; }
  .jls-dokumen__ttd { width: 100%; justify-items: start; text-align: left; }
  .jls-dokumen__kaki { position: static; margin-top: 1.5em; }
  .jls-dokumen__kaki .jls-qr { width: 7em; }
}

/* Panel samping dokumen terbit. */
.jls-dokumen__samping { display: grid; gap: var(--space-4); align-content: start; min-width: 0; position: sticky; top: var(--space-4); }
.jls-dokumen__samping > * { min-width: 0; }
.jls-dokumen__samping .jls-langkah { flex-wrap: wrap; row-gap: var(--space-2); }
@media (max-width: 1023px) { .jls-dokumen__samping { position: static; } }

/* QR: modul hitam di atas petak kertas putih di kedua tema, karena pemindai butuh kontras penuh.
   Satu-satunya bidang putih yang boleh ada di mode gelap. */
.jls-qr { display: inline-block; box-sizing: border-box; padding: 0; border-radius: var(--radius-xs); background: var(--paper); line-height: 0; box-shadow: inset 0 0 0 1px var(--line); }
.jls-qr > svg { display: block; width: 100%; height: auto; }

/* Verifikasi: tujuan QR. Membuktikan bahwa dokumen ini adalah salinan resmi. */
.jls-verifikasi { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.jls-verifikasi__status { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 4px; color: var(--success-ink); font: 600 14px/20px var(--font-sans); }
.jls-verifikasi__status > svg { width: 20px; height: 20px; flex: none; }
.jls-verifikasi__isi { margin: 0; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.jls-verifikasi__isi b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }

/* Cetak: hanya kertas yang tercetak, ukuran A4 sebenarnya, warna cetak. */
@media print {
  .jls-dokumen__bilah, .jls-dokumen__samping, .jls-dokumen__isian { display: none !important; }
  .jls-dokumen { display: block; }
  .jls-dokumen__kanvas { display: block; padding: 0; background: none; }
  .jls-dokumen__kertas { --kertas-huruf: 10pt; width: 210mm; max-width: none; aspect-ratio: auto; min-height: 297mm; padding: 15mm 20mm 30mm; border-radius: 0; box-shadow: none; outline: 0; background: var(--paper); color: var(--print-ink); }
  @page { size: A4; margin: 0; }
}

/* ---------- Cetak ----------
   Lapisan penimpa untuk cetak: bingkai aplikasi tidak ikut tercetak, hanya isi halaman. */
@media print {
  .jls-header, .jls-nav, .jls-nav-bawah, .jls-obrolan, .jls-toast-wadah, .jls-kursor-lapis { display: none !important; }
}

/* ---------- Gerbang (halaman masuk) ----------
   Satu-satunya halaman yang terlihat tanpa login, di employee, client, dan partner. */
.jls-gerbang { box-sizing: border-box; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-8) var(--space-4) max(var(--space-8), env(safe-area-inset-bottom, 0px)); background: var(--surface-subtle); }
.jls-gerbang__kartu { box-sizing: border-box; width: min(420px, 100%); display: grid; gap: var(--space-5); padding: var(--space-8) var(--space-6); border-radius: var(--radius-2xl); background: var(--surface-raised); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
@media (max-width: 479px) { .jls-gerbang { place-items: start center; padding-top: var(--space-6); } .jls-gerbang__kartu { padding: var(--space-6) var(--space-5); } }
@media (max-width: 359px) { .jls-gerbang { padding-inline: var(--space-2); } .jls-gerbang__kartu { padding-inline: var(--space-3); } }
.jls-gerbang__merek { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.jls-gerbang__merek svg { display: block; height: 32px; width: auto; }
.jls-gerbang__judul { display: grid; gap: var(--space-1); }
.jls-gerbang__judul h1 { margin: 0; color: var(--ink); font: 700 26px/32px var(--font-sans); letter-spacing: -0.015em; }
.jls-gerbang__judul p { margin: 0; color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.jls-gerbang__baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.jls-gerbang__kaki { margin: 0; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); text-align: center; }
/* Syarat kata sandi baru: centang hijau saat terpenuhi. */
.jls-gerbang__syarat { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.jls-gerbang__syarat > li { display: flex; align-items: center; gap: 6px; }
.jls-gerbang__syarat > li > svg { width: 16px; height: 16px; flex: none; color: var(--ink-disabled); }
.jls-gerbang__syarat > li[data-ok] { color: var(--ink); }
.jls-gerbang__syarat > li[data-ok] > svg { color: var(--success); }

/* ---------- Buntu (halaman galat) ----------
   404 (tidak ada atau tidak berhak, sengaja sama), sesi berakhir, tidak ada koneksi, gangguan server. */
.jls-buntu { box-sizing: border-box; min-height: 60dvh; display: grid; place-items: center; padding: var(--space-12) var(--space-4); text-align: center; }
.jls-buntu__isi { display: grid; justify-items: center; gap: var(--space-3); max-width: 440px; }
.jls-buntu__ikon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); }
.jls-buntu__ikon > svg { width: 32px; height: 32px; }
.jls-buntu__kode { color: var(--ink-muted); font: 600 13px/18px var(--font-mono); letter-spacing: 0.04em; }
.jls-buntu__judul { margin: 0; color: var(--ink); font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; }
.jls-buntu__teks { margin: 0; color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.jls-buntu__aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.jls-buntu__rujukan { margin: var(--space-2) 0 0; color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.jls-buntu__rujukan code { font: 500 12px/16px var(--font-mono); color: var(--ink); }

/* ---------- Pratinjau berkas ---------- */
.jls-pratinjau { container-type: inline-size; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 420px; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.jls-pratinjau__kepala { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
.jls-pratinjau__jenis { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font: 700 10px/1 var(--font-mono); letter-spacing: 0.04em; }
.jls-pratinjau__nama { flex: 1; min-width: 0; margin: 0; font: 600 15px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-pratinjau__nama small { display: block; color: var(--ink-muted); font: 400 12px/16px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jls-pratinjau__isi { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; padding: var(--space-4); overflow: auto; background: var(--surface-sunken); }
.jls-pratinjau__isi > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-xs); }
.jls-pratinjau__isi > video { display: block; width: 100%; max-height: 100%; border-radius: var(--radius-sm); background: var(--surface-inverse); }
.jls-pratinjau__isi > audio { width: min(480px, 100%); }
.jls-pratinjau__isi > iframe, .jls-pratinjau__isi > object { align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: var(--radius-xs); background: var(--surface-raised); }
/* Gambar transparan (PNG, WebP, SVG): papan catur tenang agar tepi gambar terlihat. */
.jls-pratinjau__isi--transparan { background-color: var(--surface-sunken); background-image: conic-gradient(var(--surface-hover) 25%, transparent 0 50%, var(--surface-hover) 0 75%, transparent 0); background-size: 16px 16px; }
/* Pratinjau sempit (ponsel): tombol Sebelumnya/Berikutnya tinggal ikon; teksnya tetap menjadi nama tombol bagi pembaca layar. */
@container (max-width: 340px) { .jls-pratinjau__kaki .jls-tombol { gap: 0; font-size: 0; } }
.jls-pratinjau__tidak { display: grid; justify-items: center; gap: var(--space-2); max-width: 360px; text-align: center; }
.jls-pratinjau__tidak p { margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-pratinjau__kaki > span { white-space: nowrap; }
.jls-pratinjau__kaki { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: var(--border-hairline) solid var(--line); color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- Izin peran ----------
   Matriks modul × izin untuk satu peran, di atas jls-tabel di dalam jls-tabel-wadah--gulir. Di layar sempit tabel digeser ke samping; kolom modul tetap terlihat. */
.jls-izin th:not(:first-child), .jls-izin td:not(:first-child) { width: 92px; text-align: center; }
.jls-izin th:first-child, .jls-izin td:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface-raised); }
.jls-izin thead th:first-child { z-index: 2; background-color: var(--surface-subtle); }
.jls-izin tr.jls-izin__grup > td { padding-top: var(--space-4); background-color: var(--surface-subtle); color: var(--ink-muted); font: 700 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.jls-izin td[data-tidak-berlaku] { position: relative; } /* wadah bagi teks jls-sr-saja, agar tidak keluar dari gulir tabel */
.jls-izin td[data-tidak-berlaku]::before { content: "–"; color: var(--ink-disabled); }
.jls-izin td:nth-child(2):not(:only-child), .jls-izin th:nth-child(2) { width: auto; color: var(--ink-muted); text-align: left; } /* kolom path */

/* ---------- Penagihan ----------
   Fondasi Air waybill, impor AWB, proforma, invoice dari AWB, dan harga jual per kg.
   jls-impor: rekap hasil pemeriksaan berkas; jls-cocok: pencocokan kolom berkas ke medan JLS;
   jls-sumber: asal tarif di samping angka; jls-harga: hasil cek harga. */
.jls-impor { display: grid; gap: var(--space-3); }
.jls-impor__hitung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--space-3); margin: 0; }
.jls-impor__hitung > div { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.jls-impor__hitung dt { order: 2; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); }
.jls-impor__hitung dd { order: 1; margin: 0; color: var(--ink); font: 700 24px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.jls-impor__hitung > [data-jenis="siap"] dd { color: var(--success-ink); }
.jls-impor__hitung > [data-jenis="tolak"] { box-shadow: inset 0 0 0 1px var(--danger); }
.jls-impor__hitung > [data-jenis="tolak"] dd { color: var(--danger-ink); }
.jls-impor__rumus { margin: 0; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-impor__rumus b { color: var(--ink); font-weight: 700; }

.jls-cocok { container-type: inline-size; display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.jls-cocok__baris { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-3); min-width: 0; }
.jls-cocok__kepala { color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.jls-cocok__medan { color: var(--ink); font: 600 14px/20px var(--font-sans); }
.jls-cocok__medan abbr { color: var(--danger-ink); text-decoration: none; }
.jls-cocok__contoh { min-width: 0; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); overflow-wrap: anywhere; }
@container (max-width: 520px) {
  .jls-cocok__kepala { display: none; }
  .jls-cocok__baris { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
  .jls-cocok__contoh::before { content: "Contoh: "; font-family: var(--font-sans); }
}

.jls-sumber { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-sumber > svg { flex: none; margin-top: 0; }
.jls-sumber a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.jls-sumber--kosong { color: var(--warning-ink); font-weight: 600; }

.jls-harga { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.jls-harga__nilai { margin: 0; color: var(--ink); font: 700 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.jls-harga__nilai small { display: block; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); letter-spacing: 0; }
.jls-harga__urutan { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; counter-reset: jls-urutan; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.jls-harga__urutan > li { position: relative; padding-left: var(--space-6); counter-increment: jls-urutan; }
.jls-harga__urutan > li::before { content: counter(jls-urutan); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); font: 700 11px/18px var(--font-sans); text-align: center; }
.jls-harga__urutan > li[aria-current="true"] { color: var(--ink); font-weight: 600; }
.jls-harga__urutan > li[aria-current="true"]::before { background: var(--brand-aksen); color: var(--on-aksen); }

/* ---------- Ekstensi peramban ----------
   Permukaan ekstensi Juara Kargo di luar halaman: popup ikon (--popup, 360 px, tinggi maksimal 600 px),
   panel samping (lebar diatur pengguna, minimal 320 px), sisipan di halaman portal (jls-sisip, di dalam Shadow DOM),
   dan halaman pengaturan. jls-antrean: daftar unduhan dengan status per berkas. */
.jls-ekstensi { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: var(--ekstensi-lebar, 360px); max-width: 100%; height: var(--ekstensi-tinggi, 600px); overflow: hidden; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
.jls-ekstensi--popup { height: auto; max-height: 600px; }
.jls-ekstensi__kepala { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
.jls-ekstensi__merek { display: inline-flex; flex: 1; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; font: 700 15px/20px var(--font-sans); }
.jls-ekstensi__merek > svg { flex: none; width: auto; height: 22px; }
.jls-ekstensi__halaman { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); }
.jls-ekstensi__halaman > svg { flex: none; }
.jls-ekstensi__halaman > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jls-ekstensi__isi { display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--space-4); min-height: 0; padding: var(--space-4); overflow: auto; } /* max-content: Segmen dan isian bergulir tidak ikut menyusut saat isi panel lebih tinggi dari panel */
.jls-ekstensi__kaki { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border-top: var(--border-hairline) solid var(--line); background: var(--surface-raised); }

.jls-antrean { display: grid; margin: 0; padding: 0; list-style: none; }
.jls-antrean__butir { box-sizing: border-box; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-3); min-height: 48px; padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--line); }
.jls-antrean__butir:last-child { border-bottom: 0; }
.jls-antrean__ikon { display: grid; grid-row: 1 / span 2; place-items: center; width: 20px; height: 20px; color: var(--ink-muted); }
.jls-antrean__nama { min-width: 0; color: var(--ink); font: 600 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.jls-antrean__ket { grid-column: 2; min-width: 0; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-antrean__aksi { grid-row: 1 / span 2; grid-column: 3; }
.jls-antrean__butir[data-status="menunggu"] .jls-antrean__nama { color: var(--ink-muted); }
.jls-antrean__butir[data-status="mengunduh"] .jls-antrean__ikon { color: var(--ink); }
.jls-antrean__butir[data-status="selesai"] .jls-antrean__ikon { color: var(--success); }
.jls-antrean__butir[data-status="gagal"] .jls-antrean__ikon { color: var(--danger); }
.jls-antrean__butir[data-status="gagal"] .jls-antrean__ket { color: var(--danger-ink); }

/* Sisipan di halaman portal: bilah mengambang dan kolom pilih. Selalu emas Juara agar jelas mana kontrol JLS dan mana milik halaman. */
.jls-sisip { position: fixed; left: 50%; bottom: var(--space-5); z-index: 2147483000; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.jls-sisip > .jls-bilah { flex-wrap: wrap; }
.jls-sisip > .jls-bilah--massal { position: static; width: auto; max-width: none; margin: 0; }
.jls-sisip__merek { display: inline-flex; flex: none; align-items: center; }
.jls-sisip__merek svg { display: block; width: auto; height: 20px; }
/* Kolom pilih berada di tabel milik portal, jadi gaya portal bisa menimpanya. !important menjaga kepala dan baris tetap sejajar di tengah. */
th.jls-sisip-pilih, td.jls-sisip-pilih { box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; padding: 0 !important; box-shadow: inset 3px 0 0 var(--brand-aksen); text-align: center !important; vertical-align: middle !important; }

/* ---------- Bot WhatsApp ----------
   Pratinjau percakapan bot staf. Netral, bukan tiruan tampilan WhatsApp: WhatsApp yang menentukan warna dan
   bentuknya di ponsel staf; yang dirancang di sini adalah isi, urutan, tombol, dan lampiran pesan. */
.jls-bot { display: grid; align-content: start; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.jls-bot__pesan { box-sizing: border-box; justify-self: start; max-width: min(320px, 90%); padding: var(--space-2) var(--space-3); border-radius: 4px 14px 14px 14px; background: var(--surface-raised); box-shadow: var(--shadow-xs); color: var(--ink); font: 400 14px/20px var(--font-sans); white-space: pre-line; overflow-wrap: anywhere; }
.jls-bot__pesan b { font-weight: 700; }
.jls-bot__pesan--staf { justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--surface-hover); box-shadow: none; }
.jls-bot__waktu { display: block; margin-top: 2px; color: var(--ink-muted); font: 500 11px/14px var(--font-sans); text-align: right; white-space: normal; }
.jls-bot__tombol { box-sizing: border-box; display: grid; gap: 2px; justify-self: start; width: min(320px, 90%); margin-top: -6px; }
.jls-bot__tombol > span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3); border-radius: 8px; background: var(--surface-raised); box-shadow: var(--shadow-xs); color: var(--ink); font: 600 14px/20px var(--font-sans); }
.jls-bot__dokumen { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); padding: var(--space-2); border-radius: 8px; background: var(--surface-sunken); white-space: normal; }
.jls-bot__dokumen > svg { flex: none; color: var(--ink-muted); }
.jls-bot__dokumen b { display: block; font: 600 13px/18px var(--font-sans); overflow-wrap: anywhere; }
.jls-bot__dokumen small { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-bot__kaki { display: block; margin-top: var(--space-1); color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-bot__daftar { box-sizing: border-box; display: grid; justify-self: start; width: min(320px, 90%); margin: 0; padding: var(--space-1) 0; border-radius: 8px; background: var(--surface-raised); box-shadow: var(--shadow-xs); list-style: none; }
.jls-bot__daftar > li { display: grid; gap: 0; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); font: 600 14px/20px var(--font-sans); }
.jls-bot__daftar > li:last-child { border-bottom: 0; }
.jls-bot__daftar small { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-bot__sistem { justify-self: center; max-width: 90%; padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink-muted); font: 600 11px/16px var(--font-sans); letter-spacing: 0.02em; text-align: center; }

/* ---------- Responsif: utilitas ----------
   Titik henti: ponsel < 768 px, tablet 768–1279 px, desktop ≥ 1280 px (token bp-*).
   Layar sentuh dikenali dari (pointer: coarse), bukan dari lebar: tablet dengan tetikus tetap memakai hover. */
@media (min-width: 768px) { .jls-hanya-ponsel { display: none !important; } }
@media (max-width: 767px) { .jls-sembunyi-ponsel { display: none !important; } }
@media (pointer: coarse) { .jls-sembunyi-sentuh { display: none !important; } }
@media (pointer: fine) { .jls-hanya-sentuh { display: none !important; } }

/* ---------- Navigasi bawah (ponsel) ---------- */
.jls-nav-bawah {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  padding: 4px max(4px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  background: var(--surface-raised);
  box-shadow: inset 0 var(--border-hairline) 0 var(--line), 0 -4px 16px -8px rgba(12, 11, 10, 0.12);
}
.jls-nav-bawah--statis { position: static; }
@media (min-width: 768px) { .jls-nav-bawah:not(.jls-nav-bawah--statis) { display: none; } }
.jls-nav-bawah > a, .jls-nav-bawah > button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-muted);
  font: 600 11px/14px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jls-nav-bawah > * > span:not(.jls-hitungan) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jls-nav-bawah > :active { background-color: var(--surface-hover); }
.jls-nav-bawah > :focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: -2px; }
.jls-nav-bawah > [aria-current="page"] { color: var(--brand-strong); }
.jls-nav-bawah > [aria-current="page"] > svg { color: var(--brand-aksen); }
.jls-nav-bawah > [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px; margin-left: -16px; border-radius: 0 0 3px 3px; background: var(--brand-aksen); }
.jls-nav-bawah .jls-hitungan { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface-raised); }
/* Ruang di bawah isi halaman agar tidak tertutup navigasi bawah. */
@media (max-width: 767px) { .jls-ruang-nav-bawah { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* Laci dari kiri untuk navigasi samping di tablet dan ponsel. */
.jls-laci--kiri { margin: 0 auto 0 0; border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; }
.jls-laci--kiri[open] { animation-name: jls-laci-masuk-kiri; }
@keyframes jls-laci-masuk-kiri { from { transform: translateX(-32px); opacity: 0; } }

/* Tab yang lebih lebar dari layar: tepi memudar sebagai tanda bisa digeser. */
.jls-tab[data-geser~="kanan"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.jls-tab[data-geser~="kiri"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.jls-tab[data-geser~="kiri"][data-geser~="kanan"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* Tabel kartu: di wadah yang sempit (di bawah 560 px), setiap baris menjadi kartu.
   JLS.ui.pasang mengisi data-label dari judul kolom. Memakai container query, jadi juga berlaku di panel sempit. */
.jls-tabel-wadah:has(> .jls-tabel--kartu) { container-type: inline-size; }
/* Saat menjadi kartu (wadah ≤ 560 px, dipasang JLS.ui.pasang) tabel tidak punya gulir sendiri: halaman yang bergulir, agar ibu jari tidak terjebak di dua gulir. */
.jls-tabel-wadah--gulir[data-kartu-aktif] { max-height: none; overflow: visible; }
@container (max-width: 560px) {
  .jls-tabel--kartu, .jls-tabel--kartu > tbody { display: block; }
  .jls-tabel--kartu > caption { display: block; }
  .jls-tabel--kartu > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jls-tabel--kartu > tbody > tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
  .jls-tabel--kartu > tbody > tr:last-child { border-bottom: 0; }
  .jls-tabel--kartu > tbody > tr > td { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: auto; min-height: 24px; padding: 0; border: 0; text-align: right; }
  .jls-tabel--kartu > tbody > tr > td::before { content: attr(data-label); flex: none; color: var(--ink-muted); font: 500 13px/20px var(--font-sans); text-align: left; }
  .jls-tabel--kartu > tbody > tr > td > .jls-tabel__isi { min-width: 0; max-width: 100%; }
  .jls-tabel--kartu > tbody > tr > td > :is(.jls-isian, .jls-isian-grup, .jls-dropdown, .jls-tanggal) { flex: 0 1 180px; min-width: 120px; }
  .jls-tabel--kartu > tbody > tr > td[data-kartu="judul"] { grid-column: 1; grid-row: 1; justify-content: flex-start; margin-bottom: var(--space-1); font-weight: 600; font-size: 15px; text-align: left; }
  .jls-tabel--kartu > tbody > tr > td[data-kartu="kontrol"] { grid-column: auto; grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: 32px; }
  .jls-tabel--kartu > tbody > tr > td[data-kartu]::before { display: none; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__rincian { display: block; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__rincian > td { display: block; text-align: left; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__rincian > td::before { display: none; }
}

/* ---------- Layar sentuh ---------- */
.jls-tombol, .jls-tag, .jls-tab > [role="tab"], .jls-halaman a, .jls-halaman button, .jls-nav a, .jls-percakapan__butir,
.jls-dropdown__pemicu, .jls-tanggal__pemicu, .jls-centang, .jls-radio, .jls-sakelar { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) {
  /* Sasaran sentuh minimal 44 px. Tombol kecil dan isian kecil ikut 44 px. */
  .jls-tombol--kecil { --t-tinggi: var(--size-control-md); }
  .jls-isian--kecil, .jls-dropdown__pemicu.jls-isian--kecil, .jls-tanggal__pemicu.jls-isian--kecil { height: var(--size-control-md); }
  /* Huruf isian minimal 16 px agar iOS tidak memperbesar halaman saat isian disentuh. */
  .jls-isian, .jls-isian--kecil, .jls-penyusun > textarea { font-size: 16px; }
  .jls-centang:not(.jls-kartu-pilih):not(.jls-centang--tunggal), .jls-radio:not(.jls-kartu-pilih) { padding-top: 11px; padding-bottom: 11px; }
  .jls-centang:not(.jls-kartu-pilih):not(.jls-centang--tunggal) > input, .jls-radio:not(.jls-kartu-pilih) > input { top: 12px; }
  .jls-centang--tunggal::after { content: ""; position: absolute; inset: -12px; }
  /* Tautan di kalimat kecil (asal tarif): daerah sentuh diperluas ke 44 px tanpa mengubah tata letak. */
  .jls-sumber a { padding: 15px 0; margin: -15px 0; }
  .jls-sakelar { min-height: 44px; }
  .jls-tag { min-height: 44px; }
  .jls-tag__hapus { position: relative; }
  .jls-tag__hapus::after { content: ""; position: absolute; inset: -12px; }
  .jls-tab > [role="tab"] { min-height: 44px; }
  .jls-menu [role="menuitem"], .jls-dropdown__daftar [role="option"], .jls-penyusun__saran [role="option"] { min-height: 44px; }
  .jls-halaman a, .jls-halaman button { min-width: 44px; height: 44px; }
  .jls-nav a { height: 44px; }
  .jls-lipat > summary { min-height: 44px; }
  .jls-tanggal__panel { width: min(336px, calc(100vw - 16px)); }
  .jls-tanggal__kisi td { padding: 0; }
  .jls-tanggal__kisi button { width: 44px; height: 44px; }
  .jls-kehadiran__lebih { position: relative; }
  .jls-kehadiran button::after { content: ""; position: absolute; inset: -8px; }
  .jls-kehadiran button { position: relative; }
  /* Petunjuk papan ketik tidak berlaku di layar sentuh. */
  .jls-penyusun__aksi > .jls-bantuan { visibility: hidden; }
  .jls-penyusun__aksi .jls-tombol { --t-tinggi: var(--size-control-md); }
  .jls-tombol { min-width: 44px; }
  .jls-tab > [role="tab"] { min-width: 44px; justify-content: center; }
  .jls-segmen > label > span { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .jls-isian-angka > button, .jls-isian-angka:has(> .jls-isian--kecil) > button { width: 44px; }
  .jls-tabel th[aria-sort] > button { min-width: 44px; }
  .jls-jejak a { display: inline-flex; align-items: center; min-height: 44px; }
  .jls-tabel th[aria-sort] > button { min-height: 44px; }
  .jls-grafik__tabel > summary { min-height: 44px; }
  .jls-ikuti__pil button { position: relative; height: 32px; }
  .jls-ikuti__pil button::after { content: ""; position: absolute; inset: -6px; }
}

/* Tanpa hover (jari): keadaan hover tidak tertinggal setelah disentuh, tekan memberi umpan balik,
   tooltip muncul dengan tekan lama. Kemilau emas tetap berjalan sekali saat isian emas disentuh. */
@media (hover: none) {
  .jls-tombol:hover { background-color: var(--surface-sunken); }
  .jls-tombol--garis:hover, .jls-tombol--teks:hover { background-color: transparent; }
  .jls-tombol--utama:hover { background-color: var(--brand); }
  .jls-tombol--bahaya:hover { background-color: var(--danger); }
  .jls-tombol:active, .jls-tombol--garis:active, .jls-tombol--teks:active { background-color: var(--surface-hover); }
  .jls-tombol--utama:active { background-color: var(--brand-pressed); }
  .jls-tabel tbody tr:hover:not([aria-selected="true"]) { background: transparent; }
  .jls-nav a:hover:not([aria-current="page"]), .jls-percakapan__butir:hover:not([aria-current]), button.jls-tag:hover:not([aria-pressed="true"]) { background: transparent; }
  .jls-nav a:active, .jls-percakapan__butir:active, button.jls-tag:active { background-color: var(--surface-hover); }
  .jls-kehadiran > :hover { transform: none; }
  .jls-tip:hover > .jls-tip__isi, .jls-tip:focus-within > .jls-tip__isi { opacity: 0; }
  .jls-tip[data-tekan-lama] > .jls-tip__isi { opacity: 1; --tip-y: 0px; }
  .jls-tip { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* Panel sembul di ponsel menjadi lembar bawah. */
@media (max-width: 639px) {
  .jls-sembul-wadah > .jls-sembul, .jls-sembul-wadah--kanan > .jls-sembul {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 85dvh;
    overflow-y: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 -8px 40px rgba(12, 11, 10, 0.28), inset 0 0 0 1px var(--line);
  }
  .jls-toast-wadah { right: 8px; left: 8px; width: auto; }
  /* Daftar dropdown dan kalender juga menjadi lembar bawah, supaya tidak terpotong di dalam laci,
     lembar bawah lain, atau wadah yang bergulir, dan selalu dalam jangkauan ibu jari. */
  .jls-dropdown__panel, .jls-dropdown--atas > .jls-dropdown__panel, .jls-tanggal__panel, .jls-tanggal--atas > .jls-tanggal__panel {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    z-index: calc(var(--z-dialog) + 10);
    width: auto;
    max-width: none;
    max-height: 70dvh;
    border-radius: var(--radius-xl);
    box-shadow: 0 -8px 40px rgba(12, 11, 10, 0.28), inset 0 0 0 1px var(--line);
  }
  .jls-tanggal__panel { width: auto; }
  body:has(.jls-nav-bawah:not(.jls-nav-bawah--statis)) .jls-toast-wadah { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Aksi massal di atas navigasi bawah; toast di atas aksi massal. */
  body:has(.jls-nav-bawah:not(.jls-nav-bawah--statis)) .jls-bilah--massal { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:has(.jls-bilah--massal:not([hidden])) .jls-toast-wadah { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
  body:has(.jls-nav-bawah:not(.jls-nav-bawah--statis)):has(.jls-bilah--massal:not([hidden])) .jls-toast-wadah { bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
}

/* Obrolan: menempel di desktop (≥ 1280 px), melayang di atas isi di tablet, layar penuh di ponsel. */
@media (min-width: 768px) and (max-width: 1279px) {
  .jls-obrolan--samping { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-dialog); height: 100dvh; box-shadow: var(--shadow-lg), inset 1px 0 0 var(--line); }
}
.jls-obrolan__kaki { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); }

/* ---------- Kursor rekan di layar sentuh ---------- */
/* Titik sentuh rekan yang memakai layar sentuh: lingkaran berwarna rekan dengan riak, nama, lalu hilang. */
.jls-kursor--sentuh .jls-kursor__panah { display: none; }
.jls-kursor--sentuh::before { content: ""; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--rekan) 30%, transparent); box-shadow: inset 0 0 0 2px var(--rekan); }
.jls-kursor--sentuh .jls-kursor__nama { top: 14px; left: 10px; }
/* Di ponsel kursor rekan disembunyikan: layar terlalu kecil dan jari menutupinya. Sorotan rekan tetap tampil. */
@media (max-width: 767px) { .jls-kursor-lapis:not([data-selalu]) { display: none; } }

/* ---------- Kemilau emas ----------
   Setiap isian emas (#EFBF04 di terang dan #9D7D02 di gelap untuk `brand` dan `surface-inverse`, emas Juara `brand-aksen`, gradasi logo)
   disapu cahaya `kilau` sekali saat kursor masuk, di mode terang dan gelap. Cahaya dibuat sebagai lapisan gradasi yang
   posisinya digerakkan lewat `--kemilau-x`, jadi tidak mengganggu latar, ikon, atau topeng yang sudah ada.
   Untuk elemen emas lain, tambahkan kelas `jls-kilau`. Tidak bergerak bila pengguna meminta gerak dikurangi. */
@property --kemilau-x { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
@keyframes jls-kemilau { from { --kemilau-x: -40%; } to { --kemilau-x: 140%; } }
.jls-kilau, .jls-tombol--utama, .jls-halaman [aria-current="page"], .jls-tanggal__kisi td[aria-selected="true"] button,
.jls-hitungan--merek, .jls-tab > [role="tab"][aria-selected="true"] .jls-hitungan, .jls-kartu--sorotan, .jls-kartu--emas,
.jls-lencana--padat.jls-lencana--merek, .jls-tip__isi, .jls-bilah--massal, .jls-ujaran--saya .jls-ujaran__gelembung, .jls-obrolan__lompat,
.jls-centang > input:checked, .jls-centang > input:indeterminate, .jls-radio > input:checked, .jls-sakelar > input:checked,
.jls-kemajuan > span, .jls-tab > [role="tab"][aria-selected="true"]::after,
.jls-langkah > li[data-status="selesai"] .jls-langkah__nomor, .jls-langkah > li[data-status="selesai"]::after,
.jls-linimasa > li[data-status="selesai"]::before, .jls-linimasa > li[data-status="selesai"]::after,
ul.jls-daftar > li::before, .jls-daftar.jls-daftar--centang > li::before {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%));
}
.jls-emas {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), var(--gradasi-emas);
}
.jls-kemajuan--tak-tentu > span::after {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), repeating-linear-gradient(150deg, var(--brand-aksen) 0 8px, var(--brand) 8px 16px);
}
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]::before {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181715' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 100% 100%, 12px 12px;
  background-position: 0 0, center;
  background-repeat: no-repeat;
}
[data-theme="dark"] .jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]::before {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.jls-kilau:hover, .jls-tombol--utama:hover:not(:disabled):not([aria-disabled="true"]), .jls-halaman [aria-current="page"]:hover,
.jls-tanggal__kisi td[aria-selected="true"] button:hover, .jls-hitungan--merek:hover, .jls-tab > [role="tab"][aria-selected="true"]:hover .jls-hitungan,
.jls-kartu--sorotan:hover, .jls-kartu--emas:hover, .jls-lencana--padat.jls-lencana--merek:hover, .jls-ujaran--saya .jls-ujaran__gelembung:hover, .jls-obrolan__lompat:hover, .jls-tip:hover > .jls-tip__isi, .jls-tip:focus-within > .jls-tip__isi, .jls-bilah--massal:hover,
.jls-centang:hover > input:checked, .jls-centang:hover > input:indeterminate, .jls-radio:hover > input:checked, .jls-sakelar:hover > input:checked,
.jls-kemajuan:hover > span, .jls-tab > [role="tab"][aria-selected="true"]:hover::after,
.jls-langkah > li[data-status="selesai"]:hover .jls-langkah__nomor, .jls-langkah > li[data-status="selesai"]:hover::after,
.jls-linimasa > li[data-status="selesai"]:hover::before, .jls-linimasa > li[data-status="selesai"]:hover::after,
ul.jls-daftar > li:hover::before, .jls-daftar.jls-daftar--centang > li:hover::before {
  background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%));
  animation: jls-kemilau 800ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}
.jls-emas:hover { background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), var(--gradasi-emas); animation: jls-kemilau 800ms cubic-bezier(0.4, 0, 0.2, 1) 1; }
.jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]:hover::before { background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181715' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); animation: jls-kemilau 800ms cubic-bezier(0.4, 0, 0.2, 1) 1; }
[data-theme="dark"] .jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]:hover::before { background-image: linear-gradient(105deg, transparent calc(var(--kemilau-x) - 22%), var(--kilau) var(--kemilau-x), transparent calc(var(--kemilau-x) + 22%)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.jls-kemajuan--tak-tentu:hover > span::after { animation: jls-lintasan-jalan 800ms linear infinite, jls-kemilau 800ms cubic-bezier(0.4, 0, 0.2, 1) 1; }
@media (prefers-reduced-motion: reduce) {
  .jls-kemajuan--tak-tentu:hover > span::after, .jls-emas:hover,
  .jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]:hover::before { animation: none; }
  .jls-kilau:hover, .jls-tombol--utama:hover:not(:disabled):not([aria-disabled="true"]), .jls-halaman [aria-current="page"]:hover,
  .jls-tanggal__kisi td[aria-selected="true"] button:hover, .jls-hitungan--merek:hover, .jls-tab > [role="tab"][aria-selected="true"]:hover .jls-hitungan,
  .jls-kartu--sorotan:hover, .jls-kartu--emas:hover, .jls-lencana--padat.jls-lencana--merek:hover, .jls-ujaran--saya .jls-ujaran__gelembung:hover, .jls-obrolan__lompat:hover, .jls-tip:hover > .jls-tip__isi, .jls-tip:focus-within > .jls-tip__isi, .jls-bilah--massal:hover,
  .jls-centang:hover > input:checked, .jls-centang:hover > input:indeterminate, .jls-radio:hover > input:checked, .jls-sakelar:hover > input:checked,
  .jls-kemajuan:hover > span, .jls-tab > [role="tab"][aria-selected="true"]:hover::after,
  .jls-langkah > li[data-status="selesai"]:hover .jls-langkah__nomor, .jls-langkah > li[data-status="selesai"]:hover::after,
  .jls-linimasa > li[data-status="selesai"]:hover::before, .jls-linimasa > li[data-status="selesai"]:hover::after,
  ul.jls-daftar > li:hover::before, .jls-daftar.jls-daftar--centang > li:hover::before,
  .jls-dropdown--banyak .jls-dropdown__daftar [role="option"][aria-selected="true"]:hover::before { animation: none; }
}

/* ---------- Isian OTP ----------
   Kode sekali pakai dari email: satu kotak per angka. <div class="jls-otp" data-otp="6"> cukup; kotaknya dibuat JLS.ui.pasang. */
.jls-otp { display: flex; gap: var(--space-2); max-width: 100%; }
.jls-otp__angka { flex: 1 1 0; min-width: 44px; max-width: 56px; height: 56px; padding: 0; text-align: center; font: 700 24px/32px var(--font-mono); font-variant-numeric: tabular-nums; }
.jls-otp__angka:placeholder-shown { caret-color: var(--focus); }
@media (max-width: 359px) { .jls-otp { gap: 3px; } .jls-otp__angka { height: 52px; font-size: 22px; } }

/* ---------- Akun (account.juarakargo.com/dashboard dan /profile) ----------
   Halaman setelah masuk: daftar dasbor yang dimiliki akun dan jalan ke profil. Tanpa menu peran dan tanpa pengalih di header. */
.jls-akun { box-sizing: border-box; min-height: 100dvh; background: var(--surface-subtle); color: var(--ink); font-family: var(--font-sans); }
.jls-akun__atas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--size-header, 64px); padding: 0 var(--space-4); background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.jls-akun__merek { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--ink); font: 700 16px/20px var(--font-sans); text-decoration: none; }
.jls-akun__merek svg { display: block; height: 28px; width: auto; }
.jls-akun__isi { box-sizing: border-box; display: grid; gap: var(--space-8); width: min(880px, 100%); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
.jls-akun__orang { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.jls-akun__orang > div { min-width: 0; }
.jls-akun__nama { margin: 0; color: var(--ink); font: 700 26px/32px var(--font-sans); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.jls-akun__sub { margin: 0; color: var(--ink-muted); font: 400 15px/22px var(--font-sans); overflow-wrap: anywhere; }
.jls-akun__bagian { display: grid; gap: var(--space-3); }
.jls-akun__judul { margin: 0; color: var(--ink); font: 700 18px/24px var(--font-sans); }
.jls-akun__dasbor { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.jls-akun__dasbor > li { display: grid; min-width: 0; }
.jls-akun__kartu { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 88px; padding: var(--space-4); color: inherit; }
.jls-akun__ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--brand-strong); }
.jls-akun__peran { display: block; color: var(--ink); font: 700 16px/22px var(--font-sans); }
.jls-akun__ket { display: block; min-width: 0; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jls-akun__kartu > svg { color: var(--ink-muted); }
.jls-akun__kolom { display: grid; gap: var(--space-4); }
.jls-akun__baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt aksi" "dd aksi"; align-items: center; column-gap: var(--space-3); row-gap: 2px; min-height: 44px; }
.jls-akun__baris > .jls-tombol { grid-area: aksi; }
.jls-akun__baris + .jls-akun__baris { padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line); }
.jls-akun__baris dt { grid-area: dt; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); }
.jls-akun__baris dd { grid-area: dd; margin: 0; min-width: 0; color: var(--ink); font: 500 15px/22px var(--font-sans); overflow-wrap: anywhere; }
@media (max-width: 479px) { .jls-akun__isi { padding-top: var(--space-6); gap: var(--space-6); } .jls-akun__nama { font-size: 22px; line-height: 28px; } }

/* ---------- Ketelusuran: nomor dokumen yang bisa diklik, dokumen terbuka di samping ----------
   .jls-telusur membungkus daftar (rekap) dan panelnya. Layar lebar: berdampingan. ≤ 1023 px: laci dari kanan.
   ≤ 639 px: lembar bawah. Animasi pakai `backwards` supaya tidak mengurung anak `fixed`. */
a.jls-tautan-dokumen {
  color: var(--ink);
  font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-decoration-line: underline; text-decoration-color: var(--brand-aksen); text-decoration-thickness: 2px; text-underline-offset: 4px;
  border-radius: var(--radius-xs); transition: var(--transisi-warna);
}
a.jls-tautan-dokumen:hover { text-decoration-thickness: 3px; background-color: var(--surface-hover); }
a.jls-tautan-dokumen[aria-current="true"] { font-weight: 700; text-decoration-thickness: 3px; }
.jls-telusur { --telusur-panel: minmax(380px, 44%); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.jls-telusur[data-terbuka] { grid-template-columns: minmax(0, 1fr) var(--telusur-panel); }
.jls-telusur__daftar { min-width: 0; }
@media (min-width: 1024px) { .jls-telusur[data-terbuka] [data-sekunder] { display: none; } }
.jls-telusur tbody tr[data-aktif] { background-color: var(--brand-soft); }
.jls-telusur__panel {
  box-sizing: border-box; position: sticky; top: var(--space-4); display: none; grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; max-height: calc(100dvh - 2 * var(--space-4));
  border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); overflow: hidden;
}
.jls-telusur[data-terbuka] > .jls-telusur__panel { display: grid; animation: jls-telusur-masuk var(--duration-md, 240ms) var(--ease-standard) backwards; }
@keyframes jls-telusur-masuk { from { opacity: 0; translate: 16px 0; } }
.jls-telusur__bar { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-subtle); box-shadow: inset 0 -1px 0 var(--line); }
.jls-telusur__atas { display: flex; align-items: center; gap: var(--space-1); }
.jls-telusur__hitung { flex: 1 1 auto; min-width: 0; color: var(--ink-muted); font: 600 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-telusur__jejak li { min-width: 0; }
.jls-telusur__jejak button { min-height: 28px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-muted); font: inherit; font-family: var(--font-mono); cursor: pointer; }
.jls-telusur__jejak button:hover { background-color: var(--surface-hover); color: var(--ink); }
.jls-telusur__jejak [aria-current="location"] { padding: 0 var(--space-1); color: var(--ink); font: 700 13px/28px var(--font-mono); }
.jls-telusur__isi { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); display: grid; gap: var(--space-4); align-content: start; }
.jls-telusur__isi > * { min-width: 0; }
.jls-telusur__isi:focus-visible { outline-offset: -3px; }
.jls-telusur__status { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-4); color: var(--ink-muted); text-align: center; font: 400 14px/20px var(--font-sans); }
.jls-telusur__status b { color: var(--ink); font: 700 16px/22px var(--font-sans); }
.jls-telusur__kerangka { display: grid; gap: var(--space-3); padding: var(--space-4); }
.jls-telusur__kerangka .jls-kerangka { height: 16px; }
.jls-telusur__kerangka .jls-kerangka:first-child { height: 28px; width: 60%; }
.jls-telusur__kerangka .jls-kerangka--kertas { height: 220px; }
.jls-telusur__kaki { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Kepala dokumen di dalam panel */
.jls-telusur-kepala { display: grid; gap: 2px; }
.jls-telusur-kepala__jenis { color: var(--ink-muted); font: 600 13px/18px var(--font-sans); }
.jls-telusur-kepala__nomor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font: 700 20px/28px var(--font-mono); letter-spacing: 0; overflow-wrap: anywhere; }
.jls-telusur-kepala__ket { color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.jls-telusur .jls-dokumen__kanvas { padding: var(--space-3); }
/* Rantai: asal dokumen (hulu) dan turunannya (hilir), urut waktu dari atas ke bawah */
.jls-rantai { display: grid; gap: var(--space-2); margin: 0; }
.jls-rantai__judul { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; font: 700 14px/20px var(--font-sans); }
.jls-rantai__judul small { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-rantai__daftar { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.jls-rantai__simpul { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--space-2); min-height: 52px; padding-right: var(--space-2); border-radius: var(--radius-sm); }
.jls-rantai__simpul::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.jls-rantai__simpul:first-child::before { top: 50%; }
.jls-rantai__simpul:last-child::before { bottom: 50%; }
.jls-rantai__simpul:only-child::before { display: none; }
.jls-rantai__titik { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; box-sizing: border-box; min-width: 40px; height: 24px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); font: 700 11px/1 var(--font-mono); box-shadow: 0 0 0 4px var(--surface-raised); }
.jls-rantai__teks { display: grid; min-width: 0; padding: var(--space-1) 0; }
.jls-rantai__teks small { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jls-rantai__teks a.jls-tautan-dokumen { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; font-size: 14px; }
.jls-rantai__simpul[aria-current="step"] { background-color: var(--brand-soft); }
.jls-rantai__simpul[aria-current="step"] .jls-rantai__titik { background: var(--brand); color: var(--ink-inverse); }
.jls-rantai__simpul[aria-current="step"] .jls-rantai__nomor { font: 700 14px/20px var(--font-mono); }
.jls-rantai__simpul[data-status="putus"] .jls-rantai__titik { background: var(--surface-raised); color: var(--warning-ink); box-shadow: 0 0 0 4px var(--surface-raised), inset 0 0 0 2px var(--warning); }
.jls-rantai__simpul[data-status="putus"]::before { background: repeating-linear-gradient(to bottom, var(--warning) 0 4px, transparent 4px 8px); }
.jls-rantai__simpul[data-status="putus"] .jls-rantai__teks b { color: var(--warning-ink); font: 700 14px/20px var(--font-sans); }
.jls-rantai__simpul[data-status="batal"] .jls-rantai__titik { background: var(--danger-soft); color: var(--danger-ink); }
.jls-rantai__simpul[data-status="batal"] a.jls-tautan-dokumen { text-decoration-line: line-through; text-decoration-color: var(--danger); }
.jls-rantai__simpul[data-status="tersembunyi"] .jls-rantai__teks b { color: var(--ink-muted); font: 600 14px/20px var(--font-sans); }
/* Segel: sidik tiap dokumen memuat sidik induknya, jadi perubahan di mana pun terlihat */
.jls-segel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success-ink); }
.jls-segel > svg { grid-row: span 2; width: 24px; height: 24px; }
.jls-segel__judul { margin: 0; font: 700 14px/20px var(--font-sans); }
.jls-segel__isi { margin: 0; font: 400 13px/18px var(--font-sans); overflow-wrap: anywhere; }
.jls-segel__isi .jls-kode { white-space: normal; }
.jls-segel[data-status="rusak"] { background: var(--danger-soft); color: var(--danger-ink); }
.jls-segel[data-status="menunggu"] { background: var(--warning-soft); color: var(--warning-ink); }
/* Dampak: apa yang ikut berubah bila dokumen ini dibatalkan */
.jls-dampak { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-subtle); color: var(--ink); font: 400 14px/20px var(--font-sans); box-shadow: inset 0 0 0 1px var(--line); }
.jls-dampak b { font-weight: 700; }
.jls-dampak ul { display: grid; gap: 2px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.jls-dampak li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.jls-dampak li > span { color: var(--ink-muted); font-size: 13px; }
/* Layar sempit: panel menjadi laci dari kanan, lalu lembar bawah */
@media (max-width: 1023px) {
  .jls-telusur[data-terbuka] { grid-template-columns: minmax(0, 1fr); }
  .jls-telusur[data-terbuka] > .jls-telusur__panel {
    position: fixed; z-index: 40; top: var(--space-2); right: var(--space-2); bottom: var(--space-2); width: min(480px, calc(100vw - 2 * var(--space-2)));
    max-height: none; box-shadow: var(--shadow-xl, 0 24px 64px rgba(12, 11, 10, 0.32)), inset 0 0 0 1px var(--line);
  }
}
@media (max-width: 639px) {
  .jls-telusur[data-terbuka] > .jls-telusur__panel {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation-name: jls-telusur-naik;
  }
  .jls-telusur__isi { padding: var(--space-3); }
}
@keyframes jls-telusur-naik { from { opacity: 0; translate: 0 24px; } }
@media (prefers-reduced-motion: reduce) { .jls-telusur[data-terbuka] > .jls-telusur__panel { animation: none; } }
@media (pointer: coarse) {
  a.jls-tautan-dokumen::after { content: ""; position: absolute; inset: -12px -4px; }
  a.jls-tautan-dokumen { position: relative; }
  .jls-telusur__jejak button { min-height: 44px; padding: 0 var(--space-2); }
  .jls-rantai__simpul { min-height: 56px; }
  .jls-rantai__teks a.jls-tautan-dokumen { min-height: 44px; }
}

/* ---------- Organisasi: bagan struktur dan daftar karyawan ----------
   <ul class="jls-organisasi"> bersarang: tiap <li> berisi satu kotak (jls-organisasi__kotak atau __grup) lalu <ul> bawahannya.
   ≥ 960 px berbentuk pohon dengan penghubung; di bawahnya menjadi daftar menjorok dengan rel di kiri. */
.jls-organisasi, .jls-organisasi ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.jls-organisasi ul { position: relative; padding-top: var(--space-6); }
.jls-organisasi ul::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--space-6); border-left: 2px solid var(--line-strong); }
:is(.jls-organisasi, .jls-organisasi ul) > li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: var(--space-6) var(--space-2) 0; }
.jls-organisasi > li { padding-top: 0; }
.jls-organisasi ul > li::before, .jls-organisasi ul > li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: var(--space-6); border-top: 2px solid var(--line-strong); }
.jls-organisasi ul > li::after { right: auto; left: 50%; border-left: 2px solid var(--line-strong); }
.jls-organisasi ul > li:first-child::before, .jls-organisasi ul > li:last-child::after { border-top: 0; }
.jls-organisasi ul > li:last-child::before { border-right: 2px solid var(--line-strong); border-radius: 0 var(--radius-sm) 0 0; }
.jls-organisasi ul > li:first-child::after { border-radius: var(--radius-sm) 0 0 0; }
.jls-organisasi ul > li:only-child { padding-top: 0; }
.jls-organisasi ul > li:only-child::before, .jls-organisasi ul > li:only-child::after { display: none; }
.jls-organisasi__kotak, .jls-organisasi__grup {
  box-sizing: border-box; display: grid; gap: var(--space-2); width: min(280px, 100%); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); color: var(--ink);
}
.jls-organisasi__kotak { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
.jls-organisasi__nama { display: block; min-width: 0; font: 700 15px/20px var(--font-sans); overflow-wrap: anywhere; }
.jls-organisasi__jabatan { display: block; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); }
.jls-organisasi__nomor { grid-column: 2; color: var(--ink-muted); font: 500 12px/16px var(--font-mono); }
.jls-organisasi__grup { width: min(300px, 100%); }
.jls-organisasi__judul { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; font: 700 14px/20px var(--font-sans); }
.jls-organisasi__judul small { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.jls-organisasi__orang { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jls-organisasi__orang > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); min-height: 44px; padding: 2px 0; }
.jls-organisasi__orang > li + li { border-top: var(--border-hairline) solid var(--line); }
.jls-organisasi__orang .jls-organisasi__nomor { grid-column: auto; }
.jls-organisasi__orang .jls-organisasi__teks { display: grid; min-width: 0; }
.jls-organisasi__orang .jls-organisasi__nama { font-size: 14px; }
@media (max-width: 959px) {
  .jls-organisasi, .jls-organisasi ul { display: block; padding-top: 0; }
  .jls-organisasi ul { margin-left: var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--line-strong); }
  .jls-organisasi ul::before { display: none; }
  :is(.jls-organisasi, .jls-organisasi ul) > li { display: block; padding: var(--space-3) 0 0; }
  .jls-organisasi ul > li::before, .jls-organisasi ul > li:first-child::before, .jls-organisasi ul > li:last-child::before, .jls-organisasi ul > li:only-child::before { display: block; top: 40px; right: auto; left: calc(-1 * var(--space-4)); width: var(--space-4); height: 0; border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; }
  .jls-organisasi ul > li::after, .jls-organisasi ul > li:only-child::after { display: none; }
  .jls-organisasi__kotak, .jls-organisasi__grup, .jls-organisasi__grup { width: 100%; max-width: 420px; }
}

/* ---------- Tanda tangan (profil: account.juarakargo.com/profile) ----------
   Satu gambar tanda tangan per akun, PNG atau SVG. Tampil lewat <img> saja, tidak pernah SVG sebaris.
   Di gelap gambar dibalik terang-gelapnya (warna tetap) supaya tinta hitam terbaca; cetak dan PDF memakai aslinya. */
.jls-tandatangan { display: grid; gap: var(--space-4); min-width: 0; }
.jls-tandatangan__papan {
  position: relative; display: grid; place-items: center; box-sizing: border-box; min-height: 168px; padding: var(--space-4) var(--space-4) var(--space-8);
  border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--surface-sunken);
  background-image: conic-gradient(var(--surface-hover) 25%, transparent 0 50%, var(--surface-hover) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.jls-tandatangan__papan::after { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); border-bottom: 2px dashed var(--line-strong); pointer-events: none; }
.jls-tandatangan__gambar { display: block; max-width: min(100%, 360px); max-height: 104px; width: auto; height: auto; object-fit: contain; position: relative; z-index: 1; }
[data-theme="dark"] .jls-tandatangan__gambar, [data-theme="dark"] .jls-dokumen__ttd-gambar { filter: invert(1) hue-rotate(180deg); }
.jls-tandatangan__kosong { margin: 0; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); text-align: center; }
.jls-tandatangan:not([data-status="kosong"]) .jls-tandatangan__kosong, .jls-tandatangan[data-status="kosong"] .jls-tandatangan__gambar { display: none; }
.jls-tandatangan__zona, .jls-tandatangan__aksi, .jls-tandatangan__info { min-width: 0; }
.jls-tandatangan[data-status="kosong"] .jls-tandatangan__aksi, .jls-tandatangan[data-status="kosong"] .jls-tandatangan__info { display: none; }
.jls-tandatangan:not([data-status="kosong"]) .jls-tandatangan__zona { display: none; }
.jls-tandatangan__aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jls-tandatangan__aksi [data-ttd-simpan], .jls-tandatangan__aksi [data-ttd-batal] { display: none; }
.jls-tandatangan[data-status="draf"] .jls-tandatangan__aksi [data-ttd-simpan], .jls-tandatangan[data-status="draf"] .jls-tandatangan__aksi [data-ttd-batal],
.jls-tandatangan[data-status="menyimpan"] .jls-tandatangan__aksi [data-ttd-simpan] { display: inline-flex; }
.jls-tandatangan[data-status="draf"] .jls-tandatangan__aksi [data-ttd-ganti], .jls-tandatangan[data-status="draf"] .jls-tandatangan__aksi [data-ttd-hapus],
.jls-tandatangan[data-status="menyimpan"] .jls-tandatangan__aksi :not([data-ttd-simpan]) { display: none; }
.jls-tandatangan__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--ink-muted); font: 500 13px/18px var(--font-sans); overflow-wrap: anywhere; }
.jls-tandatangan__info b { color: var(--ink); font-weight: 600; }
.jls-tandatangan__konfirmasi { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger-ink); font: 500 14px/20px var(--font-sans); }
.jls-tandatangan__konfirmasi[hidden] { display: none; }
.jls-tandatangan__konfirmasi > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jls-tandatangan .jls-galat[hidden] { display: none; }
.jls-tandatangan .jls-galat { font-size: 13px; line-height: 18px; }
/* Di kertas dokumen: gambar mengisi ruang tanda tangan, di atas nama penanda tangan */
.jls-dokumen__ttd-ruang { display: grid; align-items: end; justify-items: center; }
.jls-dokumen__ttd-gambar { display: block; max-width: 100%; max-height: 4.5em; width: auto; height: auto; object-fit: contain; }

/* ---------- Geser (input range) ----------
   Jalur 8 px `surface-sunken`, bagian terisi `brand-aksen`, kenop bulat `kenop-aksen` bertitik `on-aksen`; sasaran 44 px.
   JLS.ui.pasang mengisi --nilai (persen). */
input[type="range"].jls-geser {
  --nilai: 50%; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
input[type="range"].jls-geser::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--brand-aksen) var(--nilai), var(--surface-sunken) var(--nilai)); box-shadow: inset 0 0 0 1px var(--line); }
input[type="range"].jls-geser::-moz-range-track { height: 8px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--brand-aksen) var(--nilai), var(--surface-sunken) var(--nilai)); box-shadow: inset 0 0 0 1px var(--line); }
input[type="range"].jls-geser::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--on-aksen) 0 4px, var(--kenop-aksen) 4.5px); box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--brand-aksen); }
input[type="range"].jls-geser::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--on-aksen) 0 4px, var(--kenop-aksen) 4.5px); box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--brand-aksen); }
input[type="range"].jls-geser:focus-visible { outline: none; }
input[type="range"].jls-geser:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-sm), 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus); }
input[type="range"].jls-geser:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-sm), 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus); }
input[type="range"].jls-geser:disabled { cursor: not-allowed; opacity: 0.5; }

/* Tanda tangan dari foto JPG: latar dihapus otomatis, pengguna menyetel di sini */
.jls-tandatangan__olah { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.jls-tandatangan__olah[hidden] { display: none; }
.jls-tandatangan__olah-judul { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 14px/20px var(--font-sans); }
.jls-tandatangan__olah-judul > svg { flex: none; color: var(--brand-aksen); }
.jls-tandatangan__olah-nilai { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.jls-tandatangan__olah-nilai output { color: var(--ink-muted); font: 600 13px/18px var(--font-mono); }
.jls-tandatangan__olah .jls-bantuan { margin: 0; }
.jls-tandatangan__olah-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.jls-tandatangan:not([data-olah]) .jls-tandatangan__olah, .jls-tandatangan[data-status="menyimpan"] .jls-tandatangan__olah { display: none; }
.jls-tandatangan[data-olah][data-status="tersimpan"] .jls-tandatangan__olah { display: none; }
.jls-tandatangan__papan[data-asli] .jls-tandatangan__gambar { filter: none !important; }

/* Potong dan luruskan, saran luruskan, dan pilihan hasil vektor */
.jls-tandatangan__saran { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning-ink); font: 500 13px/18px var(--font-sans); }
.jls-tandatangan__saran[hidden] { display: none; }
.jls-tandatangan__potong { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line); }
.jls-tandatangan__potong[hidden] { display: none; }
.jls-tandatangan__bingkai { position: relative; width: calc(100% - 44px); max-width: 640px; margin: 22px auto; clip-path: inset(-22px); background: var(--surface-sunken); touch-action: none; }
.jls-tandatangan__bingkai > canvas { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
.jls-tandatangan__kotak { position: absolute; box-sizing: border-box; cursor: move; touch-action: none; outline: 2px solid var(--brand-aksen); outline-offset: -1px; box-shadow: 0 0 0 100vmax var(--scrim); }
.jls-tandatangan__kotak:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.jls-tandatangan__pegang { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); touch-action: none; }
.jls-tandatangan__pegang::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 4px; background: var(--brand-aksen); box-shadow: 0 0 0 2px var(--surface-raised); }
.jls-tandatangan__pegang[data-sisi="nw"] { left: 0; top: 0; cursor: nwse-resize; } .jls-tandatangan__pegang[data-sisi="n"] { left: 50%; top: 0; cursor: ns-resize; }
.jls-tandatangan__pegang[data-sisi="ne"] { left: 100%; top: 0; cursor: nesw-resize; } .jls-tandatangan__pegang[data-sisi="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.jls-tandatangan__pegang[data-sisi="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .jls-tandatangan__pegang[data-sisi="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.jls-tandatangan__pegang[data-sisi="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .jls-tandatangan__pegang[data-sisi="w"] { left: 0; top: 50%; cursor: ew-resize; }
.jls-tandatangan__olah .jls-segmen { width: 100%; }

/* ---------- Tabel: baris total, keadaan, dan kaki ----------
   Baris total (tfoot) satu bentuk di semua tabel; keadaan kosong, memuat, dan galat memakai baris status di tempat badan tabel;
   kaki tabel memuat jumlah baris dan paginasi. */
.jls-tabel tfoot :is(th, td) { height: 48px; box-sizing: border-box; padding: var(--space-2) var(--space-4); border-top: var(--border-hairline) solid var(--line-strong); border-bottom: 0; background: var(--surface-subtle); font-weight: 700; vertical-align: middle; }
.jls-tabel tbody th { position: static; z-index: auto; height: 48px; box-sizing: border-box; padding: var(--space-2) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); background: transparent; color: var(--ink); font: 600 14px/20px var(--font-sans); letter-spacing: 0; vertical-align: middle; }
.jls-tabel--padat tbody th { height: 40px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.jls-tabel tbody tr:last-child th { border-bottom: 0; }
.jls-tabel tfoot th { position: static; color: var(--ink); font: 700 14px/20px var(--font-sans); letter-spacing: 0; text-align: left; }
.jls-tabel--padat tfoot :is(th, td) { height: 40px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.jls-tabel-wadah--gulir .jls-tabel tfoot :is(th, td) { position: sticky; bottom: 0; z-index: 1; }
.jls-tabel tbody tr.jls-tabel__status, .jls-tabel tbody tr.jls-tabel__status:hover { background: transparent; }
.jls-tabel tbody tr.jls-tabel__status > td { height: auto; padding: 0; border-bottom: 0; white-space: normal; }
.jls-tabel__status .jls-kosong { padding: var(--space-10) var(--space-6); }
.jls-kosong__ikon--bahaya { background: var(--danger-soft); color: var(--danger-ink); }
.jls-tabel__memuat > td { white-space: nowrap; }
.jls-tabel__memuat .jls-kerangka { height: 14px; width: var(--l, 70%); max-width: 100%; }
.jls-tabel-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.jls-tabel-kaki p { margin: 0; min-width: 0; }
.jls-tabel-kaki b { color: var(--ink); font-weight: 600; }
@container (max-width: 560px) {
  .jls-tabel--kartu > tfoot { display: block; }
  .jls-tabel--kartu > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-subtle); border-top: var(--border-hairline) solid var(--line-strong); }
  .jls-tabel--kartu > tfoot > tr > :is(td, th) { display: flex; gap: var(--space-3); height: auto; padding: 0; border: 0; background: none; }
  .jls-tabel--kartu > tfoot > tr > :is(td, th):empty { display: none; }
  .jls-tabel--kartu > tfoot > tr > td[data-label]::before { content: attr(data-label); color: var(--ink-muted); font: 500 13px/20px var(--font-sans); }
  .jls-tabel--kartu > tbody > tr.jls-tabel__status { display: block; padding: 0; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__status > td { display: block; text-align: left; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__status > td::before { display: none; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__memuat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .jls-tabel--kartu > tbody > tr.jls-tabel__memuat > td::before { display: none; }
  .jls-tabel--kartu > tbody > tr.jls-tabel__memuat > td:nth-child(n+4) { display: none; }
}
.jls-tabel__urut { display: none; }
@container (max-width: 560px) {
  .jls-tabel__urut { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--line); }
  .jls-tabel__urut .jls-label { flex: none; margin: 0; }
  .jls-tabel__urut .jls-dropdown { flex: 1 1 auto; min-width: 0; }
}
/* Kolom aksi di ujung kanan tetap terlihat saat tabel digeser ke samping. */
.jls-tabel th.jls-tabel__aksi, .jls-tabel td.jls-tabel__aksi { position: sticky; right: 0; z-index: 1; }
.jls-tabel td.jls-tabel__aksi { background: var(--surface-raised); }
.jls-tabel tbody tr:hover > td.jls-tabel__aksi { background: var(--surface-hover); }
.jls-tabel tbody tr[aria-selected="true"] > td.jls-tabel__aksi { background: var(--brand-soft); }
@container (max-width: 560px) { .jls-tabel--kartu th.jls-tabel__aksi, .jls-tabel--kartu td.jls-tabel__aksi { position: static; background: none; } }

/* ---------- Gelar (profil: data diri) ----------
   Daftar gelar akun: tetap (depan atau belakang, dipakai di dokumen resmi) dan sementara (berlaku 2 tahun sejak diterbitkan, hanya di profil). */
.jls-gelar { display: grid; margin: 0; padding: 0; list-style: none; }
.jls-gelar__butir { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; }
.jls-gelar__butir + .jls-gelar__butir { border-top: var(--border-hairline) solid var(--line); }
.jls-gelar__utama { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.jls-gelar__teks { color: var(--ink); font: 600 16px/24px var(--font-mono); overflow-wrap: anywhere; }
.jls-gelar__meta { grid-column: 1; margin: 0; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.jls-gelar__butir > .jls-tombol { grid-column: 2; grid-row: 1 / span 2; }
.jls-gelar__butir[data-status="berakhir"] .jls-gelar__teks { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.jls-gelar__kosong { margin: 0; padding: var(--space-3) 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.jls-gelar-nama { display: grid; gap: 2px; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line); }
.jls-gelar-nama dt { color: var(--ink-muted); font: 500 13px/18px var(--font-sans); }
.jls-gelar-nama dd { margin: 0; color: var(--ink); font: 600 16px/24px var(--font-sans); overflow-wrap: anywhere; }
.jls-gelar-nama small { display: block; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.jls-gelar-form { display: grid; gap: var(--space-4); min-width: 0; }
.jls-gelar-form [data-jika] { display: grid; gap: var(--space-4); }
.jls-gelar-form [hidden] { display: none; }
.jls-gelar-form__sampai { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); font: 500 14px/20px var(--font-sans); }
.jls-gelar-form__sampai b { color: var(--ink); font-weight: 700; }
.jls-gelar-form .jls-galat[hidden] { display: none; }
.jls-gelar-form__aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); }