/* ==========================================================================
   editor.css
   Styling area menulis (contenteditable) — layout & tampilan saja.
   Logika format ada di editor/commands.js + editor/serializer.js.
   ========================================================================== */

.note-title-field,
.note-body-field {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  caret-color: var(--color-accent);
  -webkit-user-select: text;
  user-select: text;
}

.note-title-field {
  cursor: text;
}

.note-body-field {
  min-height: 40vh;
  cursor: text;
}

/* Placeholder untuk contenteditable kosong — via data-placeholder,
   bukan teks sungguhan, supaya tidak ikut tersimpan sebagai isi.
   note-title-field masih polos (:empty asli). note-body-field SELALU
   punya satu block anak (lihat serializer.js), jadi statusnya ditandai
   lewat class .is-empty yang dikelola editor.js, bukan :empty. */
.note-title-field:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-weight: var(--weight-regular);
}

.note-body-field.is-empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  pointer-events: none;
  position: absolute;
}

.note-body-field {
  position: relative;
}

/* Placeholder hilang saat sedang difokus & kosong (kursor tetap terlihat) */
.note-title-field:empty:focus::before,
.note-body-field.is-empty:focus::before {
  opacity: 0.6;
}

::selection {
  background-color: var(--color-accent-soft);
}

/* ---- Block dasar (paragraph/heading) hasil render model dokumen ---- */

.editor-block {
  /* Jarak bawaan antar block teks (mis. antar paragraf). Sengaja pakai
     angka tetap 10px, BUKAN var(--space-md) (16px) — --space-md dipakai
     luas di tempat lain (padding/gap komponen non-editor), jadi tidak
     boleh ikut diubah cuma untuk mengecilkan jarak antar paragraf di sini. */
  margin: 0 0 10px 0;
  outline: none;
  /* Supaya karakter tab (fitur "spasi 2x = tab") tampil sebagai indentasi
     sungguhan, bukan diciutkan jadi satu spasi seperti default HTML, dan
     spasi berurutan tidak diciutkan browser sebelum sempat dikonversi. */
  white-space: pre-wrap;
  tab-size: 4;
  -moz-tab-size: 4;
}

.editor-block:last-child {
  margin-bottom: 0;
}

.note-body-field p.editor-block {
  font-family: var(--font-document);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.note-body-field h1.editor-block,
.note-body-field h2.editor-block,
.note-body-field h3.editor-block,
.note-body-field h4.editor-block,
.note-body-field h5.editor-block,
.note-body-field h6.editor-block {
  font-family: var(--font-document);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-lg);
}

.note-body-field h1.editor-block { font-size: var(--text-5xl); }
.note-body-field h2.editor-block { font-size: var(--text-4xl); }
.note-body-field h3.editor-block { font-size: var(--text-3xl); }
.note-body-field h4.editor-block { font-size: var(--text-2xl); }
.note-body-field h5.editor-block { font-size: var(--text-xl); }
.note-body-field h6.editor-block { font-size: var(--text-lg); }

/* ---- Highlight (stabilo) — preset via CSS var agar kontras per tema ---- */
.run-highlight-amber { background-color: var(--highlight-amber); border-radius: 3px; }
.run-highlight-mint { background-color: var(--highlight-mint); border-radius: 3px; }
.run-highlight-sky { background-color: var(--highlight-sky); border-radius: 3px; }
.run-highlight-rose { background-color: var(--highlight-rose); border-radius: 3px; }
.run-highlight-lavender { background-color: var(--highlight-lavender); border-radius: 3px; }
.run-highlight-lime { background-color: var(--highlight-lime); border-radius: 3px; }
.run-highlight-peach { background-color: var(--highlight-peach); border-radius: 3px; }
.run-highlight-aqua { background-color: var(--highlight-aqua); border-radius: 3px; }
.run-highlight-grape { background-color: var(--highlight-grape); border-radius: 3px; }
/* Highlight warna kustom (hex dari input type="color") — background-color-nya
   di-set langsung lewat inline style di serializer.js (bukan class ini),
   class ini cuma menyamakan radius dengan preset lain. */
.run-highlight-custom { border-radius: 3px; }

/* ---- Hyperlink ---- */
.run-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  /* Klik biasa cuma menaruh kursor (perilaku default contenteditable);
     Ctrl/Cmd+klik yang benar-benar membuka URL-nya, seperti Google Docs. */
  cursor: text;
}

/* ---- List item (bulleted / numbered / checklist) ----
   Marker (bullet/nomor/kotak-centang) SENGAJA digambar lewat ::before, BUKAN
   elemen DOM sungguhan — supaya tidak ikut terhitung sebagai karakter oleh
   selection.js saat menghitung offset kursor (lihat block-model.js). Kotak
   centang checklist dideteksi lewat koordinat klik di editor.js
   (CHECKBOX_ZONE_PX), bukan lewat event pada elemen sungguhan. */
.editor-list-item {
  position: relative;
  /* flow-root supaya KOTAK block ini sendiri (bukan cuma baris teksnya)
     ikut membungkus di sisi float gambar kiri/kanan — tanpa ini, kotak li
     tetap mulai dari tepi kiri asli (tidak digeser float, cuma line box
     teksnya yang menyempit), jadi marker ::before yang absolute relatif ke
     kotak ini berakhir di bawah/ketiban gambar walau teksnya sendiri sudah
     kelihatan wrap dengan benar. */
  display: flow-root;
  padding-left: 1.7em;
  margin-bottom: var(--space-2xs);
}

.editor-list-item--bulleted-list-item::before {
  content: "•";
  position: absolute;
  left: 0.45em;
  top: 0;
  color: var(--color-text-secondary);
  font-size: 1.15em;
  line-height: var(--leading-relaxed);
}

.editor-list-item--numbered-list-item::before {
  content: attr(data-marker-number) ".";
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1.4em;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-relaxed);
}

.editor-list-item--checklist-item {
  padding-left: 1.9em;
}

.editor-list-item--checklist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.1em;
  height: 1.1em;
  border: 1.6px solid var(--color-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.editor-list-item--checklist-item[data-checked="true"]::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.editor-list-item--checklist-item[data-checked="true"]::after {
  content: "";
  position: absolute;
  left: 0.26em;
  top: 0.52em;
  width: 0.5em;
  height: 0.26em;
  border-left: 2px solid var(--color-surface);
  border-bottom: 2px solid var(--color-surface);
  transform: rotate(-45deg);
  pointer-events: none;
}

.editor-list-item--checklist-item[data-checked="true"] {
  color: var(--color-text-secondary);
  opacity: 0.75;
}

/* ---- Quote ---- */
.note-body-field blockquote.editor-block {
  /* flow-root: sama alasannya seperti .editor-list-item di atas — supaya
     border-left (bagian dari kotak blockquote sendiri) ikut membungkus di
     sisi float gambar, bukan tetap di tepi kiri asli sampai ketiban/ketutup
     gambar walau isi teksnya sendiri sudah wrap dengan benar. */
  display: flow-root;
  margin-left: 0;
  margin-right: 0;
  padding: var(--space-2xs) var(--space-md);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ---- Divider ----
   Void block (non-editable, lihat serializer.js/editor.js) — dirender lewat
   <hr> sungguhan supaya tidak ikut terhitung sebagai karakter oleh
   selection.js (yang cuma menjumlahkan textContent, dan <hr> tidak
   punya textContent). */
.editor-block--divider {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  cursor: default;
}

.editor-block--divider hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* ---- Gambar (block "image") ----
   Void block lain (non-editable, sama seperti Divider di atas). Ukuran,
   border-radius, posisi (kiri/tengah/kanan), dan wrap text diatur lewat
   CSS custom property + class yang di-set dari model (serializer.js) —
   atau dari pratinjau langsung bottom sheet (toolbar/image-sheet.js)
   sebelum di-commit ke model lewat "Terapkan". <img>-nya sendiri baru
   terisi `src` belakangan secara async (lihat services/image-service.js
   hydrateImageElements(), dipanggil editor.js setiap render). */
.editor-block--image {
  --img-w: 320px;
  --img-h: 200px;
  --img-radius: 12px;
  display: block;
  width: var(--img-w);
  max-width: 100%;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
}

/* Posisi tengah: block sendirian di barisnya, teks berikutnya SELALU jatuh
   di bawah (tidak pernah di-float, terlepas dari status toggle wrap). */
.editor-block--image-center {
  margin-left: auto;
  margin-right: auto;
}

/* Kiri/kanan TANPA wrap: gambar tetap block-level di posisinya sendiri,
   teks setelahnya tetap di baris baru di bawah (tidak di-wrap). */
.editor-block--image-left:not(.editor-block--image-wrap) {
  margin-left: 0;
  margin-right: auto;
}

.editor-block--image-right:not(.editor-block--image-wrap) {
  margin-left: auto;
  margin-right: 0;
}

/* Kiri/kanan DENGAN wrap ON: gambar di-float supaya block-block teks
   sesudahnya membungkus di sisi yang berlawanan — lebar bungkusnya
   otomatis mengikuti lebar+tinggi gambar plus margin (perilaku float CSS
   bawaan, tanpa perlu shape-outside). */
.editor-block--image-left.editor-block--image-wrap {
  float: left;
  margin: 0 var(--space-md) var(--space-sm) 0;
}

.editor-block--image-right.editor-block--image-wrap {
  float: right;
  margin: 0 0 var(--space-sm) var(--space-md);
}

.editor-image__frame {
  width: 100%;
  height: var(--img-h);
  border-radius: var(--img-radius);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.editor-image__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  border-style: dashed;
}

.editor-image__img {
  width: 100%;
  height: 100%;
  /* "kalo ratio nya di ubah gambar nya harus nge fit jangan gepeng" —
     object-fit: cover mengisi penuh kotak tanpa meregangkan/menggepengkan
     gambar, kelebihannya dipotong (di-crop), rasio asli tetap terjaga. */
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

/* Supaya float gambar tidak "bocor" ke luar area catatan saat jadi block
   terakhir dokumen (parent tidak otomatis ikut menghitung tinggi elemen
   yang di-float). */
.note-body-field::after {
  content: "";
  display: table;
  clear: both;
}

/* Heading & Divider selalu mulai di baris barunya sendiri — tidak ikut
   dibungkus di samping gambar yang sedang di-float. */
.note-body-field h1.editor-block,
.note-body-field h2.editor-block,
.note-body-field h3.editor-block,
.note-body-field h4.editor-block,
.note-body-field h5.editor-block,
.note-body-field h6.editor-block,
.editor-block--divider {
  clear: both;
}