/* ============================================================
   TEMA — mengikuti gaya Salesforce Lightning.

   Terang, biru, kartu putih berbayang tipis, sudut membulat kecil.
   Nama kelasnya sama persis dengan tema sebelumnya, jadi file pane.js
   tiap report tidak perlu diubah sama sekali.

   Tema konsol yang lama disimpan di assets/theme-konsol-cadangan.css.
   Kalau mau balik, ganti satu baris <link> di index.html.
   ============================================================ */
:root {
  /* ---- warna dasar ----
     Diambil dari palet Lightning Design System. */
  --bg:        #f3f3f3;   /* latar halaman */
  --panel:     #ffffff;   /* permukaan kartu */
  --panel-2:   #f3f3f3;   /* permukaan lebih redup, kepala kartu */
  --line:      #e5e5e5;   /* garis kartu */
  --line-2:    #c9c9c9;   /* garis isian dan tombol */
  --line-3:    #a8a8a8;   /* garis saat disorot */
  --text:      #181818;   /* teks utama */
  --text-dim:  #444444;   /* teks sekunder */
  --text-mute: #5c5c5c;   /* teks lemah, sudah dicek kontrasnya */
  --accent:    #0176d3;   /* biru merek */
  --accent-1:  #0176d3;
  --accent-d:  #014486;   /* biru saat ditekan */

  /* ---- warna status ----
     Dua lapis: warna kuat untuk garis dan angka, warna teks yang lebih gelap
     supaya tetap terbaca di atas latar putih. */
  --on-prog:   #747474;
  --done:      #2e844a;
  --resched:   #a86403;
  --return:    #0176d3;
  --cancel:    #ba0517;
  --hold:      #8c4b02;
  --new:       #5867e8;

  --ok-text:   #194e31;
  --warn-text: #6b3d00;
  --err-text:  #8c0c15;

  --radius:    4px;
  --shell-w:   1240px;
  --shadow:    0 2px 2px 0 rgba(0,0,0,.05);
  --font: 'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', ui-monospace, 'Consolas', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 13px; line-height: 1.5; min-height: 100vh;
}

/* ---- kepala halaman ----
   Baris putih di paling atas, seperti bilah global Lightning. */
.topbar {
  background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 22px; max-width: none;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; color: var(--text); }
.brand img {
  display: block; width: 40px; height: 40px; flex: none; object-fit: contain;
}
.topbar .right {
  display: flex; align-items: center; gap: 14px; flex: none;
  font-size: 12px; color: var(--text-mute);
}
.topbar .clock { font-variant-numeric: tabular-nums; }

/* Bilah tab, meniru bilah navigasi aplikasi Lightning: nama aplikasi tebal
   di kiri, lalu tab mendatar. Yang aktif diberi garis biru di bawahnya. */
.rule2 { display: none; }
.tabs {
  background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; gap: 0;
  padding: 0 22px; overflow-x: auto; scrollbar-width: none;
  box-shadow: var(--shadow);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-dim);
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; padding: 13px 18px 10px; cursor: pointer; white-space: nowrap; flex: none;
  transition: color .1s linear, background .1s linear, border-color .1s linear;
}
.tab:hover { color: var(--accent); background: #f3f3f3; }
/* Teks tab aktif memakai biru yang lebih gelap, bukan biru merek.
   Biru merek di atas latar abu cuma dapat rasio kontras 4,17, sedangkan
   yang dibutuhkan 4,5. Garis bawahnya tetap biru merek, jadi tampilannya
   tidak berubah tapi tulisannya terbaca. */
.tab.on {
  color: var(--accent-d); font-weight: 600;
  border-bottom-color: var(--accent); background: #f3f3f3;
}
.pane { display: none; }
.pane.on { display: block; }

.shell { max-width: var(--shell-w); margin: 0 auto; padding: 0 22px; }
main { padding: 22px 0 44px; }

/* ---- judul bagian ---- */
.lead { margin-bottom: 18px; }
.lead h1 { font-size: 22px; font-weight: 400; letter-spacing: -.01em; line-height: 1.3; color: var(--text); }
.lead p { font-size: 13px; color: var(--text-mute); margin-top: 6px; max-width: 70ch; line-height: 1.6; }

/* ---- legenda lambang, dipakai tab Nexa ---- */
.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.legend .lg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; background: #f3f3f3;
}
.legend .lg i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legend .lg span { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.legend .lg.s-onprog i { background: var(--on-prog); }
.legend .lg.s-done    i { background: var(--done); }
.legend .lg.s-resched i { background: var(--resched); }
.legend .lg.s-return  i { background: var(--return); }
.legend .lg.s-cancel  i { background: var(--cancel); }

/* ---- kotak seret ---- */
.dropzone {
  position: relative; display: block; text-align: center; cursor: pointer;
  background: #fff; border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 30px 22px; transition: border-color .1s linear, background .1s linear;
}
.dropzone:hover { border-color: var(--accent); background: #f6fbff; }
.dropzone.drag { border-color: var(--accent); background: #eaf5fe; }
.dz-icon {
  width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  background: #eaf5fe; color: var(--accent); display: grid; place-items: center;
}
.dz-icon svg { width: 17px; height: 17px; }
.dropzone .dz-main { font-size: 14px; font-weight: 400; color: var(--text-dim); }
.dropzone .dz-main u { text-decoration: none; color: var(--accent); font-weight: 600; }
.dropzone .dz-sub { font-size: 12px; color: var(--text-mute); margin-top: 5px; }

/* Input file bawaan browser disembunyikan, yang diklik dropzone-nya.
   Punya tab Plan dan XL Satu diatur di style.css masing-masing. */
#fileInput, #upFileInput { display: none; }

/* ---- kartu file terpilih ---- */
.filechip {
  display: none; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.filechip .fc-ico {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius);
  background: #eaf5fe; color: var(--accent);
  display: grid; place-items: center; font-size: 13px;
}
.filechip .fc-body { flex: 1; min-width: 0; }
.filechip .fc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filechip .fc-meta { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.filechip .fc-x {
  color: var(--text-mute); cursor: pointer; padding: 6px; border-radius: var(--radius);
  line-height: 0; transition: color .1s, background .1s;
}
.filechip .fc-x:hover { color: var(--accent); background: #f3f3f3; }

/* ---- tombol ---- */
.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.btn {
  font-family: var(--font); font-size: 13px; font-weight: 400; line-height: 1;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 9px 16px; cursor: pointer; background: #fff; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .1s linear, border-color .1s linear, color .1s linear;
}
.btn:hover:not(:disabled) { background: #f3f3f3; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-d); border-color: var(--accent-d); }
/* Tombol mati sengaja tidak mengikuti Salesforce apa adanya. Bawaan mereka
   teks putih di atas abu, rasio kontrasnya cuma 1,66 dan tulisannya praktis
   tidak terbaca. Aturan kontras memang membebaskan tombol mati, tapi pengguna
   tetap perlu tahu tombolnya bertuliskan apa. Dibuat abu terang dengan teks
   abu gelap: jelas mati, tetap terbaca. */
.btn:disabled,
.btn-primary:disabled,
.btn-ghost:disabled {
  background: #f3f3f3; border-color: var(--line-2); color: #6b6b6b; cursor: not-allowed;
}
.btn-ghost { background: #fff; color: var(--accent); }
.btn-ghost.ok { color: var(--done); border-color: var(--done); }

/* ---- baris status ---- */
.statusline { font-size: 12.5px; color: var(--text-mute); margin-top: 12px; min-height: 16px; }
.statusline.err { color: var(--err-text); font-weight: 600; }
.statusline.ok  { color: var(--ok-text);  font-weight: 600; }

/* ---- panel hasil ---- */
.results { display: none; margin-top: 26px; }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.results-head h2 { font-size: 16px; font-weight: 700; color: var(--text); }
.results-head .count { font-size: 12px; color: var(--text-mute); }

/* ---- kotak angka besar ---- */
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px;
}
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 12px; text-align: center;
}
.stat .num { font-size: 26px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.stat .lbl {
  font-size: 11px; color: var(--text-mute); margin-top: 7px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.stat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stat.s-onprog  .num { color: var(--on-prog); } .stat.s-onprog  .dot { background: var(--on-prog); }
.stat.s-done    .num { color: var(--done); }    .stat.s-done    .dot { background: var(--done); }
.stat.s-resched .num { color: var(--resched); } .stat.s-resched .dot { background: var(--resched); }
.stat.s-return  .num { color: var(--return); }  .stat.s-return  .dot { background: var(--return); }
.stat.s-cancel  .num { color: var(--cancel); }  .stat.s-cancel  .dot { background: var(--cancel); }

/* ---- keluaran teks ---- */
.output-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.output-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.output-bar .dots { display: none; }
.output-bar .fname { font-size: 12px; color: var(--text-mute); font-weight: 600; }
#output {
  font-family: var(--mono); font-size: 12px; line-height: 1.8; white-space: pre-wrap; word-break: break-word;
  color: var(--text-dim); padding: 16px; max-height: 540px; overflow-y: auto;
}
#output::-webkit-scrollbar { width: 10px; }
#output::-webkit-scrollbar-track { background: transparent; }
#output::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 5px; border: 3px solid #fff; }

/* ---- kartu slot file ---- */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.slot {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px;
  display: flex; align-items: center; gap: 11px; transition: border-color .1s linear;
}
.slot.filled { border-left: 3px solid var(--done); }
.slot.empty { border-style: dashed; background: transparent; box-shadow: none; }
.slot.empty .sl-ico { font-size: 11px; font-variant-numeric: tabular-nums; }
.slot .sl-file.kosong { color: var(--text-mute); font-style: italic; }
.slot.bad { border-left: 3px solid var(--cancel); }
.slot.bad .sl-ico { color: var(--cancel); background: #fef1ee; }
.slot .sl-ico {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: #f3f3f3; color: var(--text-mute);
  display: grid; place-items: center; font-size: 12px;
}
.slot.filled .sl-ico { color: var(--done); background: #cdefc4; }
.slot .sl-body { min-width: 0; flex: 1; }
.slot .sl-key { font-size: 11px; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.slot .sl-file { font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.slot.filled .sl-file { color: var(--text); font-weight: 600; }
.slot .fc-x {
  color: var(--text-mute); cursor: pointer; padding: 5px; border-radius: var(--radius);
  font-size: 12px; line-height: 1; flex-shrink: 0; transition: color .1s, background .1s;
}
.slot .fc-x:hover { color: var(--accent); background: #f3f3f3; }
.sl-sel {
  margin-top: 5px; width: 100%; cursor: pointer;
  background: #fff; color: var(--text); border: 1px solid var(--line-2);
  border-radius: var(--radius); font-family: var(--font); font-size: 12px; padding: 5px 8px;
}
.sl-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Dropzone menciut jadi baris tipis setelah ada file masuk */
#upDrop.compact { padding: 11px 15px; display: flex; align-items: center; gap: 11px; text-align: left; }
#upDrop.compact .dz-icon { width: 24px; height: 24px; margin: 0; flex-shrink: 0; }
#upDrop.compact .dz-icon svg { width: 12px; height: 12px; }
#upDrop.compact .dz-txt { flex: 1; min-width: 0; }
#upDrop.compact .dz-main { font-size: 12.5px; }
#upDrop.compact .dz-sub { margin-top: 1px; font-size: 11px; }

/* ---- kotak keterangan ---- */
.note {
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.6; border: 1px solid; border-left-width: 3px;
}
.note.warn { background: #fef1e0; border-color: #e0b458; color: var(--warn-text); }
.note.good { background: #ebfce9; border-color: #82d17a; color: var(--ok-text); }
.note b { font-weight: 700; }
.note ul { margin: 8px 0 0 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; }
.note li { font-family: var(--mono); font-size: 11.5px; padding: 3px 0; border-top: 1px solid rgba(0,0,0,.08); }
.note li:first-child { border-top: 0; }

/* ---- rincian angka ---- */
.brk {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.brk > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px;
}
.brk .k { font-size: 11px; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.brk .v { font-size: 20px; font-weight: 300; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--text); }

footer {
  max-width: var(--shell-w); margin: 22px auto 0; padding: 14px 22px 34px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-mute);
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .stat { padding: 12px 6px; }
  .stat .num { font-size: 20px; }
  .stat .lbl { font-size: 9.5px; }
  .stat .lbl span:not(.dot) { display: none; }
  .lead h1 { font-size: 19px; }
  .slots, .brk { grid-template-columns: 1fr; }
  .tab { padding: 12px 12px 9px; }
  .shell, footer, .topbar, .tabs { padding-left: 14px; padding-right: 14px; }
}