/**
 * Penyelarasan tampilan Modul Buku Saku 3D dengan portal (css/buku-saku-portal.css)
 *
 * Dimuat SETELAH css/portal.css dan css/style.css. style.css (gaya asli modul 3D) tidak diubah;
 * lapisan ini memetakan token warnanya ke token portal sehingga modul mengikuti tema terang/gelap
 * dan tampil seragam dengan halaman lain (header, breadcrumb, kepala bab, kartu, badge, formulir).
 */

/* ── 1. Token: modul 3D → token portal (per tema) ─────────────────────────
   style.css mendefinisikan ulang beberapa nama yang sama dengan portal (--text-muted, --text-dim,
   --glass-border, --radius-*) pada :root. Nilai portal dikembalikan di sini dengan spesifisitas lebih tinggi. */
:root:not([data-theme="dark"]) {
  --text-muted: #456370;
  --text-dim: #52707c;
  --glass-border: rgba(0, 124, 133, 0.16);
}

:root[data-theme="dark"] {
  --text-muted: #94a3b8;
  --text-dim: #7c8da3;
  --glass-border: rgba(1, 184, 166, 0.2);
}

:root:not([data-theme="dark"]),
:root[data-theme="dark"] {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --bg-dark: var(--bg-main);
  --bg-navy: var(--bg-main);
  --bg-card: var(--surface-card);
  --bg-card-hover: var(--surface-card-hover);
  --glass-border-glow: var(--border-hover);
  --cyan-400: var(--brand-primary);
  --cyan-500: var(--brand-primary);
  --cyan-neon: var(--brand-primary);
  --emerald-400: var(--tone-ok);
  --emerald-500: var(--tone-ok);
  --amber-400: var(--tone-warn);
  --red-400: var(--tone-danger);
  --red-500: var(--tone-danger);
  --text-main: var(--text-primary);
  --font-body: var(--font-sans);
  --font-heading: var(--font-display);
  --shadow-glow: var(--shadow-card);
  --transition: var(--transition-smooth);
}

/* ── 2. Halaman & header ──────────────────────────────────────────────── */
body.bs-portal {
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* style.css memberi gaya ke elemen <header> secara global; kembalikan header portal ke bentuk aslinya */
.bs-portal .portal-header {
  position: sticky;
  top: 0;
  display: block;
  padding: 0;
  gap: 0;
  flex-wrap: nowrap;
  background: var(--bg-header);
  border-bottom: 1px solid var(--bg-header-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
}

/* ── 3. Baris bab: kepala bab, judul, sub-bab, pemilih kapal ──────────── */
.bs-chapterbar {
  position: relative;
  z-index: 20;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}

.bs-chapterbar-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 12px 24px 0;
}

.bs-chapterbar-title {
  padding-bottom: 10px;
  min-width: 0;
}

.bs-chapterbar-title .chapter-head {
  margin-bottom: 6px;
}

.bs-chapterbar h1 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Tab modul = sub-bab bernomor (gaya .chapter-subnav dari portal) */
.bs-portal .nav-tabs.chapter-subnav {
  flex: 1;
  align-self: flex-end;
  margin: 0;
  padding: 0;
  gap: 2px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
}

.bs-portal .nav-tabs .nav-tab-btn {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* sub-bab tetap satu baris; bila sempit, digulir horizontal */
.bs-portal .nav-tabs.chapter-subnav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  contain: inline-size;
}

.bs-portal .nav-tabs.chapter-subnav::-webkit-scrollbar {
  display: none;
}

.bs-portal .nav-tabs .nav-tab-btn svg {
  display: none;
}

.bs-portal .nav-tabs .nav-tab-btn.active {
  border: none;
  border-bottom: 2px solid var(--brand-primary);
  background: transparent;
  box-shadow: none;
  color: var(--brand-primary);
}

.bs-portal .vessel-selector-wrap {
  align-self: center;
  gap: 10px;
  padding: 0 0 10px;
  background: transparent;
  border: none;
}

.bs-portal .vessel-selector-wrap label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.bs-portal .vessel-select {
  width: min(300px, 32vw);
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-input);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
}

.bs-portal .vessel-select:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(1, 184, 166, 0.18);
}

.bs-portal .vessel-select optgroup,
.bs-portal .vessel-select option {
  background: var(--surface-modal);
  color: var(--text-primary);
}

.bs-portal .vessel-select optgroup {
  color: var(--brand-primary);
}

/* ── 4. Area kerja (desktop): tinggi terkunci, sidebar menggulir sendiri ─
   Tanpa ini .app-main (flex:1 + min-height:auto) memanjang mengikuti isi sidebar yang panjang
   sehingga kanvas 3D ikut meninggi dan model terpotong. */
@media (min-width: 769px) {
  body.bs-portal {
    height: 100dvh;
    overflow: hidden;
  }

  .bs-portal .app-main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
}

/* ── 5. Viewport 3D & HUD ─────────────────────────────────────────────── */
.bs-portal .viewport-container {
  background: var(--bg-main);
}

.bs-portal .hud-chip {
  border-radius: var(--radius-md);
}

.bs-portal .hud-chip,
.bs-portal .hud-btn {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
}

.bs-portal .hud-chip strong {
  color: var(--brand-primary);
}

.bs-portal .hud-btn:hover {
  background: var(--surface-card);
  border-color: var(--border-hover);
  color: var(--brand-primary);
}

.bs-portal .quick-hotspot-bar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}

.bs-portal .hotspot-chip-btn {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 8px;
}

.bs-portal .hotspot-chip-btn:hover {
  background: var(--surface-card);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.bs-portal .hotspot-chip-btn .chip-index {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--brand-primary);
  font-family: var(--font-mono);
}

.bs-portal .hotspot-chip-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
  box-shadow: none;
}

.bs-portal .hotspot-chip-btn.active .chip-index {
  background: rgba(255, 255, 255, 0.22);
  border-color: transparent;
  color: inherit;
}

/* ── 6. Sidebar & kartu ───────────────────────────────────────────────── */
.bs-portal .sidebar-container {
  background: var(--bg-main);
  border-left: 1px solid var(--border-subtle);
}

.bs-portal .glass-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bs-portal .glass-card:hover {
  border-color: var(--border-hover);
}

.bs-portal .card-header-compact h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

.bs-portal .info-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
}

.bs-portal .info-content {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* Penanda risiko & progres: teks berwarna saja, mengikuti komponen label portal (tanpa pil/titik) */
.bs-portal .badge-risk {
  --tone: var(--text-muted);
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  color: var(--tone);
}

.bs-portal .badge-risk.tinggi { --tone: var(--tone-danger); }
.bs-portal .badge-risk.sedang { --tone: var(--tone-warn); }
.bs-portal .badge-risk.rendah { --tone: var(--tone-ok); }

/* Label kategori/acuan (bukan status): teks redup bergaya catatan pinggir */
.bs-portal #anatomy-vessel-category,
.bs-portal #view-calculator .card-header-compact > .badge-risk {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bs-portal .action-btn-primary {
  min-height: 46px;
  background: var(--brand-primary);
  color: var(--brand-primary-text);
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px -10px rgba(0, 124, 133, 0.6);
}

.bs-portal .action-btn-primary:hover {
  background: var(--brand-primary-hover);
}

.bs-portal .vessel-photo-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.bs-portal .photo-caption {
  color: #e5edf5;
}

.bs-portal .anatomy-card-item {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.bs-portal .anatomy-card-item h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
}

.bs-portal .anatomy-card-item .role-text {
  color: var(--text-secondary);
}

.bs-portal .anatomy-card-item .sanitary-pill {
  display: block;
  padding: 2px 0 2px 10px;
  border: none;
  border-left: 3px solid var(--tone-danger);
  border-radius: 0;
  background: none;
  color: var(--tone-danger);
  font-size: 0.76rem;
}

/* Kalkulator */
.bs-portal .input-group label {
  color: var(--text-muted);
}

.bs-portal .input-group input {
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.bs-portal .input-group input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(1, 184, 166, 0.18);
}

.bs-portal .metric-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}

/* Checklist */
.bs-portal .checklist-item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.bs-portal .checklist-item:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-hover);
}

.bs-portal .checklist-item.checked {
  background: color-mix(in srgb, var(--tone-ok) 7%, var(--surface-card));
  border-color: color-mix(in srgb, var(--tone-ok) 35%, transparent);
}

.bs-portal .checklist-item input[type="checkbox"] {
  accent-color: var(--brand-primary);
}

/* Navigasi antarbab di akhir sidebar */
.bs-pager {
  padding: 0 18px 24px;
}

.bs-pager:empty {
  display: none;
}

.bs-pager .chapter-pager {
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
}

.bs-pager .pager-toc {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
}

.bs-pager .pager-empty {
  display: none;
}

/* ── 7. Ponsel ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bs-chapterbar-inner {
    padding: 10px 16px;
    gap: 8px;
  }

  .bs-chapterbar-title {
    padding-bottom: 0;
    width: 100%;
  }

  .bs-chapterbar h1 {
    font-size: 1.05rem;
  }

  .bs-portal .vessel-selector-wrap {
    width: 100%;
    padding: 0;
    background: transparent;
  }

  .bs-portal .vessel-select {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 44px;
    font-size: 16px; /* mencegah zoom otomatis iOS */
  }

  .bs-portal .mobile-bottom-nav {
    background: var(--bg-header);
    border-top: 1px solid var(--bg-header-border);
    box-shadow: 0 -8px 24px -12px rgba(7, 34, 44, 0.25);
  }

  .bs-portal .mobile-nav-btn {
    color: var(--text-muted);
  }

  .bs-portal .mobile-nav-btn.active {
    color: var(--brand-primary);
  }

  .bs-portal .mobile-nav-btn.active .nav-icon-wrap {
    background: var(--surface-subtle);
    box-shadow: none;
  }

  .bs-portal .sidebar-container {
    border-left: none;
  }

  /* tombol kembali ke atas tidak menimpa navigasi bawah */
  .bs-portal .portal-to-top {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .bs-pager {
    padding: 0 14px 24px;
  }
}