/* Tema memakai light-dark(), jadi setiap warna ditulis sekali saja - tidak ada
   blok gelap terpisah yang bisa ketinggalan diperbarui. Tombol tema cukup
   mengatur `color-scheme` di elemen root. */
:root {
  color-scheme: light dark;

  --bg:        light-dark(#f2f4f7, #131519);
  --card:      light-dark(#ffffff, #1b1e24);
  --raise:     light-dark(#f7f8fb, #22262e);
  --ink:       light-dark(#16181d, #e9ebef);
  --muted:     light-dark(#69707e, #98a0b0);
  --line:      light-dark(#dde1e8, #2d323b);
  --line-soft: light-dark(#eaedf2, #262b33);

  --brand:     light-dark(#1f3864, #7aa5e8);
  --on-brand:  light-dark(#ffffff, #10131a);
  --accent:    light-dark(#a8710f, #e3ad42);
  --warn-bg:   light-dark(#fff7e2, #38300f);
  --ok:        light-dark(#1b7a49, #56c98a);
  --ok-bg:     light-dark(#e6f4ec, #14301f);
  --err:       light-dark(#b3261e, #f08a80);
  --err-bg:    light-dark(#fdecea, #3a1c19);

  --shadow: light-dark(0 1px 2px rgba(16,24,40,.06), 0 1px 2px rgba(0,0,0,.4));
  --radius: 10px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
h2 {
  margin: 0 0 14px; font-size: 16.5px; display: flex; align-items: center; gap: 10px;
  letter-spacing: -.01em;
}
p { margin: 0 0 10px; }
.sub, .muted { color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* --- ikon ---------------------------------------------------------------- */
.ico {
  width: 16px; height: 16px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 26px; height: 26px; stroke-width: 1.7; }
h2 > .ico { width: 18px; height: 18px; color: var(--brand); }

/* --- kerangka ------------------------------------------------------------ */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 22px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.brand { min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* minmax(0, 1fr) mencegah tabel hasil yang lebar memaksa seluruh halaman
   melebar. Grid item punya min-width:auto secara default, jadi kontennya
   menolak menyusut dan halaman ikut scroll horizontal - yang juga membuat
   topbar sticky tergeser keluar layar. */
main {
  max-width: 1440px; margin: 0 auto; padding: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; min-width: 0; box-shadow: var(--shadow);
}
.step {
  display: inline-grid; place-items: center; width: 23px; height: 23px; flex: none;
  border-radius: 50%; background: var(--brand); color: var(--on-brand);
  font-size: 12.5px; font-weight: 700;
}

/* --- tombol -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--raise); border-color: var(--muted); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--brand); }
.btn-sm { padding: 4px 8px; font-size: 12.5px; }
.btn-icon { padding: 7px 9px; }
.btn-danger:hover:not(:disabled) { color: var(--err); border-color: var(--err); }

/* pilihan tema bergaya segmented control */
.seg-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--card);
}
.seg-opt {
  display: grid; place-items: center; width: 32px; height: 30px; padding: 0;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.seg-opt:hover { background: var(--raise); color: var(--ink); }
.seg-opt[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

.chip { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-err { background: var(--err-bg); color: var(--err); }
.chip-wait { background: var(--raise); color: var(--muted); }
.chip-user {
  background: var(--raise); color: var(--ink); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px;
}

.banner {
  margin: 14px 20px 0; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--warn-bg); font-size: 13.5px;
}
.banner-warn { border-color: var(--err); background: var(--err-bg); }
.banner code {
  background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1));
  padding: 1px 5px; border-radius: 4px;
}

/* --- unggah -------------------------------------------------------------- */
.dropzone {
  display: grid; justify-items: center; gap: 8px;
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 26px;
  text-align: center; cursor: pointer; color: var(--muted);
  transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--raise); }
.dropzone p { margin: 0; }

.row-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; }
.row-check.inline { margin: 0; align-items: center; font-size: 13px; color: var(--muted); }
.row-check small { display: block; color: var(--muted); font-size: 12.5px; }
.ctx { display: block; margin: 12px 0; font-size: 13.5px; }
.ctx input {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 14px;
}
.ctx input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.status { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* --- daftar dokumen ------------------------------------------------------ */
.doclist { display: grid; gap: 8px; }
.docrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--raise);
}
.docrow.active { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.docrow > .ico { color: var(--muted); }
.docrow-main { display: grid; gap: 2px; min-width: 200px; flex: 1; }
.docrow-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.docrow-meta { font-size: 12.5px; color: var(--muted); }
.docrow-actions { display: flex; gap: 6px; }

/* --- review -------------------------------------------------------------- */
.probe { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.probe b { color: var(--ink); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar p { margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.seg {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--raise); display: flex; flex-direction: column;
}
.seg.off { opacity: .58; }
.seg.dark-flag { border-color: var(--err); }
.seg.dup-flag { border-color: var(--accent); }
.seg img {
  width: 100%; height: 186px; object-fit: cover; object-position: top; display: block;
  cursor: zoom-in; background: var(--bg);
}
.seg img:hover { filter: brightness(1.06); }
.seg-body { padding: 9px 11px; display: grid; gap: 5px; }
.seg-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.seg-meta { font-size: 12px; color: var(--muted); }
.seg-meta.split { color: var(--brand); }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: var(--line-soft); color: var(--muted);
}
.badge-dark { background: var(--err-bg); color: var(--err); }
.badge-dup { background: var(--warn-bg); color: var(--accent); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-err { background: var(--err-bg); color: var(--err); }

/* --- progres ------------------------------------------------------------- */
.progress {
  height: 8px; background: var(--line-soft); border-radius: 99px; overflow: hidden;
  margin-bottom: 12px;
}
.bar { height: 100%; width: 0; background: var(--brand); transition: width .35s; }
.proglist {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 5px;
  max-height: 280px; overflow: auto; font-size: 13px;
}
.proglist li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.proglist .err { color: var(--err); font-size: 12px; }

/* --- duplikat ------------------------------------------------------------ */
.note {
  font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.dup-group {
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; background: var(--warn-bg);
}
.dup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; }
.dup-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px;
}
.dup-card.primary { border-color: var(--ok); border-width: 2px; }
.dup-card.dropped { opacity: .5; }
.dup-card img {
  width: 100%; height: 148px; object-fit: cover; object-position: top;
  border-radius: 6px; display: block; margin-bottom: 8px; cursor: zoom-in;
}
.dup-card img:hover { filter: brightness(1.06); }
.dup-card .btn { margin-top: 8px; width: 100%; justify-content: center; }
.dup-resolved {
  margin-top: 10px; font-size: 13px; color: var(--ink);
  background: var(--card); border-radius: 8px; padding: 9px 12px;
}

/* --- hasil --------------------------------------------------------------- */
.pageimgs { display: grid; gap: 8px; margin-bottom: 16px; min-width: 0; }
.pageimgs details { border: 1px solid var(--line); border-radius: 9px; background: var(--raise); }
.pageimgs summary {
  cursor: pointer; padding: 9px 12px; font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.pageimgs summary::-webkit-details-marker { display: none; }
.pageimgs summary .ico { color: var(--muted); }
.pageimgs img { width: 100%; display: block; border-top: 1px solid var(--line); }

.tablewrap {
  overflow: auto; max-height: 70vh; max-width: 100%;
  border: 1px solid var(--line); border-radius: 9px;
}
table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
th, td {
  border-bottom: 1px solid var(--line-soft); padding: 7px 10px; text-align: left;
  vertical-align: top; white-space: nowrap;
}
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--brand); color: var(--on-brand);
  font-size: 12.5px; font-weight: 600;
}
td.ar { direction: rtl; text-align: right; font-family: Tahoma, "Segoe UI", sans-serif; }
tbody tr:hover td { background: var(--raise); }
tr.low td { background: var(--warn-bg); }
tr.dropped td { background: var(--line-soft); text-decoration: line-through; opacity: .7; }

/* --- pratinjau halaman utuh ---------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: light-dark(rgba(28, 32, 40, .82), rgba(8, 10, 14, .93));
}
.lb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 9px 14px; background: var(--card); border-bottom: 1px solid var(--line);
  flex-wrap: wrap; flex: none;
}
.lb-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.lb-title strong { font-size: 15px; }
.lb-meta { color: var(--muted); font-size: 12.5px; }
.lb-actions { display: flex; align-items: center; gap: 6px; }

.lb-stage {
  flex: 1; position: relative; overflow: auto; padding: 16px;
  display: grid; place-items: center;
}
.lb-stage img { display: block; box-shadow: 0 6px 28px rgba(0, 0, 0, .45); }

/* Mode muat-layar memakai posisi absolut, bukan sekadar max-height: 100% pada
   item grid. Di dalam grid row yang tingginya mengikuti konten, persentase itu
   tidak punya acuan pasti sehingga gambar tetap tampil seukuran aslinya dan
   panelnya yang ikut scroll. Terhadap induk position:relative dengan tinggi
   pasti, persentasenya resolve dengan benar. */
.lb-stage.fit > img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto;
  max-width: calc(100% - 32px); max-height: calc(100% - 32px);
  object-fit: contain; cursor: zoom-in;
}
.lb-stage.actual > img {
  position: static; max-width: none; max-height: none; cursor: zoom-out;
}
.lb-stage img.loading { visibility: hidden; }
.lb-loading { grid-area: 1 / 1; color: light-dark(#f0f2f5, #c8ccd4); font-size: 14px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: var(--on-brand); padding: 11px 20px; border-radius: 9px;
  font-size: 14px; z-index: 90; max-width: 80vw; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* --- halaman masuk ------------------------------------------------------- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-wrap { width: 100%; max-width: 420px; padding: 24px; }
.login-card { padding: 26px 26px 20px; }
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.login-head .ico { color: var(--brand); }
.login-head h1 { font-size: 17px; margin-bottom: 2px; }
.login-head p { margin: 0; }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 14.5px;
}
.field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.login-error {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--err-bg); color: var(--err); border: 1px solid var(--err);
}
.login-submit { width: 100%; justify-content: center; padding: 10px; font-size: 14.5px; }
.login-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.login-foot code {
  background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1));
  padding: 1px 5px; border-radius: 4px;
}

@media (max-width: 700px) {
  .topbar { padding: 10px 14px; }
  main { padding: 14px; }
  .card { padding: 15px 14px; }
  .btn span { display: none; }        /* di layar sempit sisakan ikonnya saja */
  .btn-primary span, .docrow-actions span { display: inline; }
}