/* ==========================================================================
   layout.css
   Struktur layout halaman: Home, Notes List, Note (fullscreen, tanpa sidebar).
   ========================================================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Home / Notes List page ---- */

.home-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-content {
  flex: 1;
  padding: 0 var(--space-md) var(--space-5xl);
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
}

.home-greeting {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.section {
  margin-top: var(--space-lg);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

/* ---- Note (fullscreen editor) page ----
   Mobile-first: seluruh layar dipakai untuk menulis, tidak ada sidebar,
   tidak ada ribbon. Yang tampil hanya topbar tipis, toolbar mengambang,
   judul, dan isi. */

.note-page {
  /* dvh (dynamic viewport height) dipakai agar tinggi menyesuaikan saat
     address bar / keyboard mobile muncul-hilang. vh dipertahankan sebagai
     fallback untuk browser lama. */
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar: back button + floating toolbar jadi satu baris di ATAS layar.
   Posisi (left/right) di-set langsung oleh viewport-pin.js (px absolut
   mengikuti visualViewport), supaya selalu terlihat walau browser mobile
   menggeser halaman untuk menampilkan field yang fokus saat keyboard
   muncul. Nilai di bawah ini hanya fallback sebelum JS jalan / pada
   browser tanpa dukungan visualViewport.
   topbar-autohide.js menggeser baris ini keluar viewport (translateY)
   saat user scroll, lalu memunculkannya lagi setelah berhenti ~2 detik.

   Dulu ini dua "pill" terpisah, lalu jadi satu bar tapi masih mengambang
   dengan jarak dari tepi layar (top/left/right pakai var(--space-*)) dan
   sudut membulat. Sekarang benar-benar NEMPEL ke tepi atas+kiri+kanan
   (top/left/right: 0, tanpa border-radius/border kiri-kanan-atas) seperti
   header biasa — cuma border-bottom tipis sebagai pemisah dari konten.
   Safe-area notch/status-bar ditangani lewat padding-top (bukan `top`
   offset lagi), supaya bar-nya sendiri tetap betul-betul di y=0. */
.note-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toolbar);
  /* Sekarang kolom: baris pertama (back button + floating toolbar) lalu,
     kalau color picker/highlight lagi dibuka, baris kedua penuh lebar
     (.color-picker-bar) tepat di bawahnya. Safe-area kiri/kanan/atas
     dipindah ke sini (bukan lagi di baris pertama saja) supaya kedua
     baris sama-sama nempel rapi ke tepi layar. */
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.note-topbar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Baris pertama topbar: back button + floating toolbar (dulu style ini
   ada langsung di .note-topbar sebelum baris kedua/color bar ditambah). */
.note-topbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 5px;
}

/* Baris kedua topbar: dipakai untuk Warna Teks & Highlight (lihat
   color-picker.js / highlight-picker.js + openColorBar() di dom.js).
   Full-width, HANYA satu baris — kalau preset warnanya banyak, yang
   digeser adalah baris ini sendiri secara horizontal, persis seperti
   .floating-toolbar, bukan wrap ke baris berikutnya. */
.color-picker-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 5px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}
.color-picker-bar::-webkit-scrollbar { display: none; }

.color-picker-bar[hidden] { display: none; }

/* Muncul dengan fade + slide tipis, bukan langsung "nyentak" kepotong. */
.color-picker-bar {
  animation: colorBarIn var(--anim-scale) var(--ease-standard) both;
}

@keyframes colorBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Class sementara (ditambah/dilepas oleh openColorBar()/closeColorBar() di
   dom.js, cuma sekitar durasi transisinya) supaya --editor-header-space
   yang berubah gara-gara color bar buka/tutup ikut dianimasikan dengan
   halus (konten geser turun pelan-pelan), bukan "snap" instan yang
   kelihatan seperti kedorong/geter. TIDAK dipasang permanen di
   .note-scroll-area supaya tidak bentrok dengan update --editor-footer-space
   dari viewport-pin.js selama keyboard mobile buka/tutup (lihat komentar
   di bawah). */
.note-scroll-area.header-space-transition {
  transition: padding-top var(--duration-base) var(--ease-standard);
}

.note-back-btn {
  flex: 0 0 auto;
  padding: 5px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--color-text-primary);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-instant) var(--ease-out);
}

.note-back-btn:hover { background-color: var(--color-accent-soft); }
.note-back-btn:active { transform: scale(0.96); }

.note-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-top diberi ruang ekstra agar konten tidak tertutup topbar
     (back button + floating toolbar, sekarang jadi satu baris di ATAS).
     padding-bottom cuma perlu ruang aman untuk safe-area & keyboard mobile
     (tidak ada lagi elemen mengambang di bawah). Nilai persisnya
     (--editor-header-space, --editor-footer-space) dihitung & di-set oleh
     viewport-pin.js; nilai di bawah cuma fallback awal. */
  padding: var(--editor-header-space, 80px) var(--space-md) var(--space-5xl);
  /* --image-sheet-space & --scene-sheet-space ditulis/di-reset oleh
     toolbar/image-sheet.js dan toolbar/scene-sheet.js masing-masing, persis
     setinggi bottom sheet yang sedang terbuka (0px kalau tertutup), supaya
     konten paling bawah tetap bisa di-scroll sampai terlihat di atas sheet,
     bukan ketiban/ketutup olehnya. Keduanya dijumlahkan (bukan salah satu)
     karena masing-masing sheet punya var sendiri; dalam praktiknya cuma
     satu yang pernah non-zero di saat bersamaan (sheet lain sudah ditutup
     duluan lewat closeAnyOpenSheet() masing-masing modul). */
  padding-bottom: calc(var(--editor-footer-space, calc(var(--space-5xl) + env(safe-area-inset-bottom, 0px))) + var(--image-sheet-space, 0px) + var(--scene-sheet-space, 0px));
  /* SENGAJA tanpa transition di sini. viewport-pin.js sudah menulis ulang
     --editor-footer-space lewat requestAnimationFrame yang di-sync ke
     event visualViewport (yang sendirinya sudah "beranimasi" mengikuti
     animasi native keyboard/scroll). Kalau padding-bottom masih di-CSS-
     transition juga, dua animasi jalan bareng dan saling kejar: tiap kali
     JS nulis nilai baru (termasuk perubahan sub-pixel yang wajar terjadi
     SELAMA scroll, bukan cuma pas keyboard buka/tutup), transition CSS
     restart dari awal lagi → hasilnya kelihatan geter-geter/nyendat pas
     scroll sambil keyboard kebuka. Update dari JS dibiarkan "snap" instan
     karena sudah cukup halus (rAF + dibulatkan ke integer px + skip kalau
     nilainya belum berubah). */
}

.note-content {
  max-width: var(--editor-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Diaktifkan oleh toolbar/image-sheet.js maupun toolbar/scene-sheet.js
   selama bottom sheet masing-masing (gambar / Scene) terbuka. Menonaktifkan
   pointer-events di judul/isi catatan supaya tap di sana tidak lagi memicu
   fokus (=> keyboard tidak bisa muncul lagi), TANPA mematikan scroll —
   scroll ditangani .note-scroll-area (parent), bukan elemen ini, jadi tetap
   jalan normal. */
.note-content--sheet-locked #editorTitle,
.note-content--sheet-locked #editorBody {
  pointer-events: none;
}

/* ---- Responsive: Note page ---- */

@media (min-width: 640px) {
  .note-scroll-area {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* ---- Floating Add Button ---- */

.fab {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--z-fab);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: var(--weight-regular);
  line-height: 1;
  box-shadow: 0 6px 18px rgba(74, 85, 199, 0.35);
  transition: transform var(--anim-slide) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-out);
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(74, 85, 199, 0.4);
}

.fab:active {
  transform: scale(0.96);
}