/* ════════════════════════════════════════════════════════════
   GITHUB BYOK — styling tambahan minimal.
   Modal & form reuse habis-habisan class byok-* / qe-modal-*
   yang sudah ada di css/ai-byok.css & components.css. Di sini
   cuma nambah: tombol topbar + dot status, dan [FASE 7] kartu
   reminder backup/restore di sidebar kanan (auto-backup toggle
   sudah dihapus — lihat js/github-byok.js).
   ════════════════════════════════════════════════════════════ */

/* Tombol GitHub di topbar — posisi relative supaya dot bisa nempel */
#tb-github-byok-btn {
  position: relative;
}

/* Dot status kecil di pojok kanan-atas ikon */
#gh-byok-status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--bg2);
  pointer-events: none;
  transition: background var(--dur-base);
}

.gh-dot-gray   { background: #9ca3af; }
.gh-dot-yellow { background: #f5b400; }
.gh-dot-green  { background: #28c840; }

/* ── Kepala menu tunggal, 2 blok fitur (Backup Lokal / Sinkronisasi
   GitHub) dipisah lewat tab — reuse pola pill-segmented control
   yang sudah ada (.qe-result-tabs), tapi versi full-width + label teks ── */
.gh-byok-tabs {
  display: flex; gap: 3px; padding: 3px; margin: 12px 18px 0;
  background: var(--bg3); border-radius: 11px; border: 1px solid var(--border);
}
.gh-byok-tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 8px; border: none; background: transparent;
  color: var(--txt3); cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: all var(--dur-base);
}
.gh-byok-tab-btn svg { flex-shrink: 0; }
.gh-byok-tab-btn:hover { color: var(--txt); }
.gh-byok-tab-btn.active { background: var(--bg2); color: var(--txt); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }

/* Panel isi tiap blok fitur */
.gh-byok-panel { display: flex; }

/* ── Keterangan/deskripsi kini disembunyikan di balik toggle
   "Apa fungsinya?" (native <details>/<summary>, ringan & aksesibel)
   supaya body modal tidak dipenuhi paragraf terbuka sekaligus ── */
.gh-byok-info { margin-top: -4px; }
.gh-byok-info summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  user-select: none;
}
.gh-byok-info summary::-webkit-details-marker { display: none; }
.gh-byok-info summary::before {
  content: "ⓘ"; font-size: 11px; line-height: 1; flex-shrink: 0;
}
.gh-byok-info summary:hover { color: var(--txt); }
.gh-byok-info[open] summary { color: var(--txt); margin-bottom: 4px; }
.gh-byok-info p {
  font-size: 10.5px; color: var(--txt3); line-height: 1.45; margin: 0;
  padding: 8px 10px; background: var(--bg3); border-radius: var(--r8);
  border: 1px solid rgba(0,0,0,.06);
  text-align: justify; text-align-last: left;
}
html.dark .gh-byok-info p { border-color: rgba(255,255,255,.07); }
/* Link di dalam keterangan (mis. "ubah visibility repo di sini →") —
   tanpa garis bawah, cukup warna beda + hover supaya tetap kelihatan
   bisa diklik tanpa terasa berantakan di teks yang rata kiri-kanan. */
.gh-byok-info p a {
  color: var(--accent, #3b82f6); text-decoration: none; font-weight: 700;
}
.gh-byok-info p a:hover { opacity: .8; }
.gh-byok-info-security summary::before { content: none; }
.gh-byok-icon-lock { flex-shrink: 0; }

/* ── [FASE 3] Sub-panel daftar histori backup (commit history) ──
   Reuse token warna/radius yang sama dengan .gh-byok-info p supaya
   menyatu, bukan komponen baru yang terasa asing. */
.gh-byok-history-loading,
.gh-byok-history-error,
.gh-byok-history-empty {
  font-size: 11px; color: var(--txt3); line-height: 1.45;
  padding: 9px 10px; background: var(--bg3); border-radius: var(--r8);
  border: 1px solid rgba(0,0,0,.06); text-align: center;
}
html.dark .gh-byok-history-loading,
html.dark .gh-byok-history-error,
html.dark .gh-byok-history-empty { border-color: rgba(255,255,255,.07); }
.gh-byok-history-error { color: #e5484d; }

.gh-byok-history-items {
  display: flex; flex-direction: column; gap: 6px;
}
.gh-byok-history-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; background: var(--bg3); border-radius: var(--r8);
  border: 1px solid rgba(0,0,0,.06);
}
html.dark .gh-byok-history-item { border-color: rgba(255,255,255,.07); }
.gh-byok-history-item-meta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.gh-byok-history-item-date {
  font-size: 10.5px; font-weight: 800; color: var(--txt2);
}
.gh-byok-history-item-msg {
  font-size: 10px; color: var(--txt3); line-height: 1.4;
  white-space: normal; word-break: break-word;
}
.gh-byok-history-item-btn {
  flex-shrink: 0; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--border2); background: transparent;
  color: var(--txt2); font-size: 10.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-base);
}
.gh-byok-history-item-btn:hover { background: var(--bg2); color: var(--txt); }

/* [FIX SVG ICON] Tombol "Lihat & Pilih Backup Sebelumnya" sekarang
   pakai ikon jam SVG (bukan emoji 🕐) — samakan gaya align ikon+teks
   dengan .gh-byok-tab-btn yang sudah ada. */
.gh-byok-history-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.gh-byok-history-toggle-btn svg { flex-shrink: 0; }

/* ── [FASE 8 / FIX UX] Tombol "↻ Coba Lagi" inline di panel hasil
   (#gh-byok-test-result) saat backup/restore gagal — user retry
   langsung dari situ, tanpa perlu klik tombol utama di atas lagi. */
.byok-retry-btn {
  margin-left: 6px; padding: 3px 9px; border-radius: 7px;
  border: 1.5px solid currentColor; background: transparent;
  color: inherit; font-size: 10.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  vertical-align: middle;
}
.byok-retry-btn:hover { opacity: .8; }

/* ── [FASE 8 / FIX UX] Tombol ikon 🔄 refresh manual di sebelah
   "Lihat & Pilih Backup Sebelumnya" — gaya tombol ikon sama seperti
   .gh-byok-history-item-btn, supaya menyatu bukan komponen asing. */
.gh-byok-history-refresh-btn {
  flex-shrink: 0; width: 38px; border-radius: 8px;
  border: 1.5px solid var(--border2); background: transparent;
  color: var(--txt2); font-size: 13px; cursor: pointer;
  font-family: inherit; transition: all var(--dur-base);
  display: flex; align-items: center; justify-content: center;
}
.gh-byok-history-refresh-btn:hover { background: var(--bg2); color: var(--txt); }
.gh-byok-history-refresh-btn:active { transform: scale(.92); }
/* [FIX SVG ICON] Ganti emoji 🔄 dengan SVG — putar sesaat (0.5s) tiap
   diklik lewat class .gh-byok-refresh-spin (ditoggle dari JS), supaya
   tetap ada umpan balik "lagi refresh" walau ikonnya bukan emoji lagi. */
.gh-byok-history-refresh-btn svg { transition: transform .5s ease; }
.gh-byok-history-refresh-btn.gh-byok-refresh-spin svg { transform: rotate(360deg); }


/* Baris tombol aksi (Backup Sekarang / Restore) — hanya tampil
   kalau sudah terhubung */
#gh-byok-connected-actions {
  display: none;
  gap: 8px;
}

/* Keterangan kecil di bawah tombol download backup lokal */
.gh-byok-download-sub {
  font-size: 10.5px;
  color: var(--txt3);
  line-height: 1.4;
  margin-top: -6px;
}

/* Label backup terakhir */
#gh-byok-last-backup-label {
  font-size: 10.5px;
  color: var(--txt3);
  text-align: center;
}

/* Tombol "Putuskan Koneksi" — reuse tampilan .byok-clear-btn */
#gh-byok-disconnect-btn {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   [FASE 7] KARTU REMINDER BACKUP & RESTORE — sidebar kanan
   ----------------------------------------------------------------
   Sengaja MONOKROM (satu tone, ikut var(--txt3)/var(--bg4) yang
   sudah dipakai elemen sidebar lain seperti .rp-shortcut-item) —
   supaya terasa menyatu dengan sidebar, bukan seperti banner
   peringatan yang berteriak. Satu-satunya aksen warna (dot kuning
   kecil di header) HANYA nyala kalau backup memang sudah lama/
   belum pernah, jadi warna itu sendiri yang membawa arti "perlu
   diingat" — bukan dekorasi yang selalu ada.
   ════════════════════════════════════════════════════════════ */
.rp-backup-reminder {
  /* [BUG FIX 2026-08-15] Sebelumnya margin-bottom cuma 2px (vs margin-top
     10px) — bikin jarak ke "Content Funnel" di bawahnya kelihatan jauh
     lebih rapat dibanding jarak ke elemen di atasnya, padahal ada
     .rp-divider yang sama persis di kedua sisi (lihat markup di
     index.html: divider → kartu ini → divider → rp-collapsible-head).
     Disamakan jadi 10px di kedua sisi supaya renggang spacing-nya
     simetris, sama seperti yang di atas. */
  margin: 10px 14px;
  padding: 10px 11px 11px;
  border-radius: var(--r12);
  background: var(--bg2);
  border: 1px solid var(--border2);
}
.rp-backup-reminder-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; color: var(--txt2);
  margin-bottom: 8px; letter-spacing: -.1px;
}
.rp-backup-reminder-head svg { flex-shrink: 0; opacity: .75; }
.rp-backup-reminder-head-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: transparent; margin-left: auto; transition: background var(--dur-base);
}
.rp-backup-reminder-stale .rp-backup-reminder-head-dot { background: #f5b400; }

.rp-backup-reminder-group + .rp-backup-reminder-group { margin-top: 7px; }
.rp-backup-reminder-group-label {
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--txt3); opacity: .7; margin-bottom: 3px;
}
.rp-backup-reminder-row {
  display: flex; align-items: center; gap: 6px; min-height: 20px;
}
.rp-backup-reminder-row-label {
  font-size: 10.5px; color: var(--txt3); flex-shrink: 0; width: 40px;
}
.rp-backup-reminder-row-time {
  font-size: 10.5px; color: var(--txt2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* [FIX] Cuma ikon panah, tanpa "kotak" tombol (border/background) —
   biar menyatu dengan gaya monokrom kartu, bukan seperti tombol
   terpisah. Backup = panah ke ATAS (data keluar/naik jadi file/
   commit), Restore = panah ke BAWAH (data masuk lagi ke aplikasi). */
.rp-backup-reminder-row-btn {
  flex-shrink: 0; width: 20px; height: 20px; padding: 0;
  border-radius: 5px; border: none; background: transparent;
  color: var(--txt3); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur-base), color var(--dur-base);
}
.rp-backup-reminder-row-btn:hover { background: var(--bg4); color: var(--txt); }
.rp-backup-reminder-row-btn:active { background: var(--bg5); }
.rp-backup-reminder-row-btn svg { pointer-events: none; }
.rp-backup-reminder-row-btn:disabled,
.rp-backup-reminder-row-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .45; pointer-events: none; background: transparent;
}

/* ── [FASE 7] Gating Pro Mode ──────────────────────────────────────
   Kartu ini HARUS ikut status toggle "Backup Lokal" / "Sinkronisasi
   GitHub" di halaman Pro Mode (body.pm-off-backuplocal /
   body.pm-off-backupgh, di-set oleh js/qe-pro-mode.js). Saat sebuah
   grup OFF: baris tetap tampil (supaya user tahu fiturnya ADA, cuma
   nonaktif) tapi diredupkan + tombolnya dikunci — TIDAK dibiarkan
   tetap terlihat "normal aktif" (bisa bikin salah kira sudah jalan)
   dan TIDAK disembunyikan diam-diam tanpa penjelasan (bisa terlihat
   seperti bug tampilan hilang). Teks waktunya diganti jadi keterangan
   "Nonaktif di Pro Mode" lewat renderReminderWidget() di
   js/github-byok.js. Kalau KEDUA grup (Lokal & GitHub) mati, seluruh
   kartu ikut disembunyikan — konsisten dengan aturan ikon topbar
   #tb-github-byok-btn yang sudah ada. */
body.pm-off-backuplocal .rp-backup-reminder-group[data-pm-backup-group="local"] {
  opacity: .5; filter: grayscale(.4);
}
body.pm-off-backupgh .rp-backup-reminder-group[data-pm-backup-group="github"] {
  opacity: .5; filter: grayscale(.4);
}
body.pm-off-backuplocal .rp-backup-reminder-group[data-pm-backup-group="local"] .rp-backup-reminder-row-btn,
body.pm-off-backupgh .rp-backup-reminder-group[data-pm-backup-group="github"] .rp-backup-reminder-row-btn {
  cursor: not-allowed; pointer-events: none;
}
body.pm-off-backuplocal.pm-off-backupgh .rp-backup-reminder { display: none !important; }
body.pm-off-backuplocal.pm-off-backupgh .rp-backup-reminder + .rp-divider { display: none !important; }

/* Mode rail/fullview sidebar kanan (lihat aturan .right-panel-mini &
   .fullview di components.css) — kartu ini butuh lebar utk 2 kolom teks,
   jadi disembunyikan di rail-icon 58px, sama seperti .qnote-wrap. */
@media (min-width: 769px) {
  body.right-panel-mini .rp-backup-reminder,
  body.fullview .rp-backup-reminder { display: none !important; }
}