/* Penyesuaian kecil di atas AdminLTE 4 */
:root {
  --je-seal: #c8402d;
  --je-font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
}

/* Logo cap "日" */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px; height: 33px; border-radius: .5rem;
  background: var(--je-seal); color: #fff;
  font-family: var(--je-font-jp); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.app-sidebar .brand-image.brand-mark { opacity: 1; max-height: 33px; margin-top: 0; }
.brand-mark-lg { width: 44px; height: 44px; font-size: 1.4rem; }

/* Avatar inisial (pengganti foto) */
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-top: -2px; margin-right: .4rem;
  background: var(--bs-primary); color: #fff; font-weight: 600; font-size: .95rem;
  vertical-align: middle;
}
.user-header .user-avatar-lg {
  width: 72px; height: 72px; font-size: 2rem; margin: 0 auto .5rem; display: flex;
  background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.35);
}
.user-menu .user-header { height: auto; min-height: 150px; }

/* Teks Jepang */
.jp, ruby { font-family: var(--je-font-jp); }
rt { font-size: .55em; }

/* Kartu statistik dashboard */
.stat-card .stat-icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}

/* Lebar kotak installer */
.install-box { width: 100%; max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.login-page:has(.install-box) { height: auto; min-height: 100vh; }

.sidebar-menu .nav-link.disabled { pointer-events: none; }

/* ---------- Bank Soal ---------- */
.opt-row { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.opt-row textarea { resize: vertical; min-height: 2.4rem; overflow: hidden; }
.opt-marker {
  flex: 0 0 2.4rem; align-self: stretch; min-height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .375rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  font-family: var(--je-font-jp); font-weight: 600;
}
.opt-row.is-correct .opt-marker { background: #198754; color: #fff; border-color: #198754; }
.opt-row.is-correct textarea { border-color: #198754; }
.opt-correct { display: flex; align-items: center; gap: .3rem; white-space: nowrap; padding-top: .45rem; cursor: pointer; font-size: .875rem; }

.qa-question { font-size: 1.15rem; line-height: 1.9; }
.qa-options { display: grid; gap: .5rem; }
.qa-vertical { grid-template-columns: 1fr; }
.qa-horizontal { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.qa-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 575.98px) { .qa-grid, .qa-horizontal { grid-template-columns: 1fr 1fr; } }
.qa-option { display: flex; align-items: stretch; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; position: relative; background: var(--bs-body-bg); }
.qa-marker { flex: 0 0 2.6rem; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); font-family: var(--je-font-jp); font-weight: 600; }
.qa-text { padding: .55rem .8rem; flex: 1; }
.qa-option.is-correct { border-color: #198754; }
.qa-option.is-correct .qa-marker { background: #198754; color: #fff; }
.qa-check { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }

#question-form > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.ft-ruby { font-size: 1.5rem; line-height: 2.6; }
.ft-ruby rt { font-size: .5em; color: var(--bs-secondary-color); }

/* v0.6.0 — teks lebih panjang dalam bahasa lain */
.sidebar-menu .nav-link.disabled p { white-space: normal; }
.sidebar-menu .nav-link.disabled .nav-badge { position: static; margin-left: .35rem; vertical-align: middle; }
.stat-card .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .stat-note { font-size: .8rem; font-weight: 400; }
.lang-inline a, .lang-inline strong { white-space: nowrap; }

/* ---------------------------------------------------------------- v0.7.0 editor soal */
.je-ed { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.je-ed:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.je-ed.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.je-ed-bar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .35rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.je-ed-bar .btn { min-width: 2rem; }
.je-ed-area { min-height: 6rem; padding: .6rem .75rem; outline: none; line-height: 2; overflow-wrap: anywhere; }
.je-ed-compact .je-ed-area { min-height: 2.6rem; padding: .35rem .6rem; line-height: 1.9; }
.je-ed-compact .je-ed-bar { padding: .2rem; gap: .2rem; }
.je-ed-compact .je-ed-bar .btn { padding: .1rem .4rem; min-width: 1.8rem; }
.je-ed-area.is-empty:before, .je-ed-area:empty:before { content: attr(data-placeholder); color: var(--bs-secondary-color); pointer-events: none; }
.je-ed-area p { margin: 0 0 .25rem; }
.je-ed-area ruby { cursor: pointer; }
.je-ed-area ruby:hover { background: rgba(13,110,253,.08); border-radius: .2rem; }
.je-ed-source { border: 0; border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); }
.je-img-active { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* Isi soal (editor, pratinjau, tampilan peserta) */
.jp rt, .je-ed-area rt { font-size: .5em; color: var(--bs-secondary-color); }
.hide-furigana rt { visibility: hidden; }
.je-blank { display: inline-block; min-width: 3.2em; border-bottom: 2px solid currentColor; text-align: center; margin: 0 .15em; line-height: 1.3; user-select: none; }
.je-blank.je-star { min-width: 2.4em; color: #c0392b; font-weight: 700; }
.jp img, .je-ed-area img, .qa-text img { max-width: 100%; height: auto; border-radius: .25rem; vertical-align: middle; }
.je-img-s { max-width: min(160px, 100%) !important; }
.je-img-m { max-width: min(360px, 100%) !important; }
.je-img-l { max-width: min(640px, 100%) !important; }
.qa-option img { max-height: 180px; }

.opt-row { align-items: flex-start; }
.opt-body { flex: 1; min-width: 0; }
.opt-row.is-correct .je-ed { border-color: #198754; }
.opt-tr summary { cursor: pointer; }
.qa-tr { color: var(--bs-secondary-color); font-size: .95rem; border-left: 3px solid var(--bs-border-color); padding-left: .6rem; margin-top: .35rem; }
.qa-tr-opt { border: 0; padding: 0; font-size: .85rem; margin-top: .15rem; }
.qa-text { display: flex; flex-direction: column; justify-content: center; }
.qa-text > ruby, .qa-text > rt { display: ruby; } /* jaga-jaga bila isi tidak dibungkus */
.qa-hint summary { cursor: pointer; color: var(--bs-primary); }
.lp-frame { transition: max-width .2s; }

ruby { ruby-align: center; }
@media (max-width: 575.98px) {
  .opt-row { flex-wrap: wrap; }
  .opt-row .opt-body { order: 5; flex: 0 0 100%; }
  .opt-row .opt-correct { margin-right: auto; }
  #correct-hint { flex-basis: 100%; }
}

/* v0.8.0 furigana otomatis: tanda sumber (hilang setelah disimpan) */
.je-ed-area ruby.je-src-bank rt { color: #198754; }
.je-ed-area ruby.je-src-engine { background: rgba(255,193,7,.25); border-radius: .2rem; }
.je-badge-bank { background: #198754; color: #fff; }
.je-badge-engine { background: #ffc107; color: #000; }

/* v0.9.0 pratinjau paket: kontrol bantuan diatur sekali di atas */
.pkg-preview .qa-tools { display: none !important; }

/* Logo unggahan (Pengaturan → Umum) */
.brand-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; border-radius: .4rem; }
.brand-logo.brand-mark-lg { height: 48px; max-width: 180px; }
.app-sidebar .brand-image.brand-logo { opacity: 1; max-height: 33px; margin-top: 0; box-shadow: none !important; }
.media-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: .3rem; border: 1px solid var(--bs-border-color); }

/* Tipografi Jepang: kinsoku (。、ゃ っ ー tidak di awal baris), kata Latin panjang tetap dipenggal */
.jp, .q-text, .q-opt-text, .qa-question, .qa-text { line-break: strict; overflow-wrap: break-word; }
ruby { ruby-position: over; }

/* Aksesibilitas: abu-abu sekunder, tautan & tombol garis sedikit lebih gelap agar kontras ≥ 4,5:1 —
   HANYA mode terang. Di mode gelap warna bawaan Bootstrap/AdminLTE (terang) dipakai, jadi teks tetap terbaca. */
:root:not([data-bs-theme="dark"]) { --bs-secondary-rgb: 92, 99, 106; --bs-secondary-color: rgba(33, 37, 41, .78);
  --bs-link-color-rgb: 10, 88, 202; --bs-link-color: #0a58ca; --bs-link-hover-color: #084298; }
:root:not([data-bs-theme="dark"]) .btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a; }
:root:not([data-bs-theme="dark"]) .btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; }
:root:not([data-bs-theme="dark"]) .btn-outline-warning { --bs-btn-color: #8a6604; --bs-btn-border-color: #d39e00; --bs-btn-hover-color: #000; }
:root:not([data-bs-theme="dark"]) .btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }
:root:not([data-bs-theme="dark"]) .nav-tabs .nav-link:not(.active) { color: #0a58ca; }

/* Mode gelap: teks sekunder (#6c757d bawaan) terlalu samar di latar gelap → abu-abu terang (kontras ≥ 7:1) */
[data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-body-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--bs-warning-text-emphasis) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .text-info { color: var(--bs-info-text-emphasis) !important; }
[data-bs-theme="dark"] .link-secondary { color: var(--bs-secondary-color) !important; }
/* Mode gelap: warna yang tadinya ditulis tetap (hijau/merah gelap) diganti versi terang */
[data-bs-theme="dark"] .je-blank.je-star { color: #ff8a7a; }
[data-bs-theme="dark"] .je-ed-area ruby.je-src-bank rt { color: #75d6a0; }
[data-bs-theme="dark"] .je-ed-area ruby:hover { background: rgba(110,168,254,.18); }
[data-bs-theme="dark"] .je-ed-area ruby.je-src-engine { background: rgba(255,193,7,.22); }
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) { color: var(--bs-link-color); }
[data-bs-theme="dark"] textarea::placeholder, [data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] .form-control::placeholder { color: rgba(222, 226, 230, .55); opacity: 1; }
[data-bs-theme="dark"] .text-bg-light { background-color: #343a40 !important; color: #e9ecef !important; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #343a40; --bs-btn-color: #e9ecef; --bs-btn-border-color: #495057; --bs-btn-hover-bg: #495057; --bs-btn-hover-color: #fff; }

/* Teks tersembunyi (visually-hidden) di dalam tabel tidak boleh lolos dari area geser tabel */
.table-responsive { position: relative; }