/* Lapisan catatan review: penanda di atas halaman, menu klik kanan, popover detail, dan editor teks. */

.review-layer {
  position: fixed;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}

/* Penanda catatan di dalam dialog digambar di atas dialognya (modal z-index 50), sedangkan penanda
   halaman tetap di bawah dialog supaya tidak menutupi isinya. */
.review-layer--overlay {
  z-index: 55;
}

.review-point {
  position: fixed;
  width: 1px;
  height: 1px;
}

.review-marker {
  position: fixed;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: var(--radius-full);
  color: #fff;
  background: var(--ink-700);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--duration) var(--ease);
}

.review-marker:hover,
.review-marker:focus-visible {
  transform: scale(1.15);
}

.review-marker:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.review-marker .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.review-marker--red {
  background: var(--red-500);
}

.review-marker--orange {
  background: var(--orange-500);
}

.review-marker--green {
  background: var(--green-500);
}

.review-marker--blue {
  background: var(--blue-500);
}

.review-marker--neutral {
  background: var(--text-muted);
}

/* Catatan milik dialog yang sedang tertutup: penandanya parkir di tombol pembukanya dan diberi
   cincin tipis sebagai pembeda. */
.review-marker--parked {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px color-mix(in srgb, currentColor 35%, transparent),
    var(--shadow-sm);
}

.review-marker--parked .icon {
  width: 10px;
  height: 10px;
}

/* Efek radar saat dibuka dari halaman Task Review. */
.review-marker.is-radar::before,
.review-marker.is-radar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  color: inherit;
  animation: review-radar 1.4s var(--ease) infinite;
}

.review-marker.is-radar::after {
  animation-delay: 0.7s;
}

.review-marker.is-radar {
  z-index: 1;
  transform: scale(1.1);
}

@keyframes review-radar {
  from {
    opacity: 0.75;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-marker.is-radar::before,
  .review-marker.is-radar::after {
    animation-duration: 3s;
  }
}

/* Dok mengambang: sembunyikan penanda + pintas ke Task Review. */
/* Wadahnya tidak menangkap pointer: tombolnya saja. Dok melayang di atas halaman, dan kalau
   wadah/keterangannya ikut menerima klik ia akan menelan klik pada elemen di bawahnya. */
.review-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 37;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}

.review-dock__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--ink-800);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  pointer-events: auto;
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.review-dock__btn:hover {
  color: var(--gold-600);
  border-color: var(--gold-400);
}

.review-dock__btn[aria-pressed="true"] {
  color: var(--text-muted);
}

.review-dock__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: var(--red-500);
}

.review-dock__hint {
  max-width: 220px;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  text-align: right;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}

.review-dock__btn:hover ~ .review-dock__hint,
.review-dock__btn:focus-visible ~ .review-dock__hint {
  opacity: 1;
}

/* Popover detail catatan. */
.popover--note {
  /* Di atas modal (50): penanda di dalam dialog harus bisa dibaca tanpa menutup dialognya. */
  z-index: 56;
  width: 320px;
  padding: 14px;
}

.note-detail {
  display: grid;
  gap: 10px;
}

.note-detail__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.note-detail__title {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
}

.note-detail__body {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.note-detail__body p,
.note-detail__body ul,
.note-detail__body ol {
  margin: 0 0 8px;
}

.note-detail__body ul,
.note-detail__body ol {
  display: grid;
  gap: 5px;
  padding: 0;
  list-style: none;
  counter-reset: rich-num;
}

/* Daftar bersarang: beri jarak dan hilangkan margin ganda dari pembungkusnya. */
.note-detail__body li > ul,
.note-detail__body li > ol {
  margin: 5px 0 0;
  padding-left: 22px;
}

.note-detail__body > :last-child {
  margin-bottom: 0;
}

.rich-li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}

.rich-li__text {
  min-width: 0;
}

/* Bullet: titik bulat kecil sejajar baris pertama teks. */
.rich-li--bullet .rich-li__dot {
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* Checklist: kotak kosong / tercentang; yang selesai dicoret dan diredupkan. */
.rich-li__icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--text-muted);
}

.rich-li--task.is-done .rich-li__icon {
  color: var(--green-500);
}

.rich-li--task.is-done .rich-li__text {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Daftar bernomor: penanda angka memakai counter, bukan marker bawaan yang disembunyikan. */
.rich-li--num {
  counter-increment: rich-num;
}

.rich-li--num::before {
  content: counter(rich-num) ".";
  color: var(--gold-600);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

.note-detail__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
}

.note-detail__due {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.note-detail__due--overdue {
  color: var(--red-500);
}

.note-detail__due--today {
  color: var(--orange-600);
}

.note-detail__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
  border-top: 1px solid var(--border-soft);
}

.note-detail__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Chip & pil status, dipakai popover detail dan halaman Task Review. */
.note-status-chip,
.note-status-pill {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.note-status-chip {
  cursor: pointer;
}

.note-status-pill {
  color: var(--text-secondary);
  background: var(--surface-soft);
  cursor: pointer;
  transition:
    color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.note-status-chip--red,
.note-status-pill--red.is-active {
  color: var(--red-500);
  background: var(--red-100);
}

.note-status-chip--orange,
.note-status-pill--orange.is-active {
  color: var(--orange-600);
  background: var(--orange-100);
}

.note-status-chip--green,
.note-status-pill--green.is-active {
  color: var(--green-500);
  background: var(--green-100);
}

.note-status-chip--blue,
.note-status-pill--blue.is-active {
  color: var(--blue-500);
  background: var(--blue-100);
}

.note-status-chip--neutral,
.note-status-pill--neutral.is-active {
  color: var(--text-secondary);
  background: var(--surface-muted);
}

.note-status-pill:hover {
  color: var(--ink-800);
  background: var(--surface-active);
}

/* Form catatan. */
.note-form {
  display: grid;
  gap: 14px;
}

.note-form__location {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.note-form__location .icon {
  flex: none;
  margin-top: 2px;
  color: var(--gold-600);
}

.note-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-status-choice {
  position: relative;
  cursor: pointer;
}

.note-status-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.note-status-choice__face {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--surface);
  transition:
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.note-status-choice input:focus-visible + .note-status-choice__face {
  box-shadow: var(--focus-ring);
}

.note-status-choice--red input:checked + .note-status-choice__face {
  color: var(--red-500);
  border-color: var(--red-500);
  background: var(--red-100);
}

.note-status-choice--orange input:checked + .note-status-choice__face {
  color: var(--orange-600);
  border-color: var(--orange-500);
  background: var(--orange-100);
}

.note-status-choice--green input:checked + .note-status-choice__face {
  color: var(--green-500);
  border-color: var(--green-500);
  background: var(--green-100);
}

.note-status-choice--blue input:checked + .note-status-choice__face {
  color: var(--blue-500);
  border-color: var(--blue-500);
  background: var(--blue-100);
}

.note-status-choice--neutral input:checked + .note-status-choice__face {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--surface-muted);
}

/* Editor teks ala WhatsApp. */
.rich-text {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rich-text:focus-within {
  border-color: var(--gold-400);
  box-shadow: var(--focus-ring);
}

.rich-text__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.rich-text__glyph {
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
}

.rich-text__glyph--italic {
  font-weight: 600;
  font-style: italic;
}

.rich-text__hint {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
}

.rich-text__hint code {
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-2xs);
  background: var(--surface-soft);
}

.rich-text__area {
  border: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  resize: vertical;
}

.rich-text__area:focus,
.rich-text__area:focus-visible {
  outline: none;
  box-shadow: none;
}

.popover--review-menu {
  width: 272px;
}

.review-menu__title {
  display: block;
  overflow: hidden;
  max-width: 212px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .popover--note {
    width: calc(100vw - 32px);
  }

  .review-dock {
    right: 12px;
    bottom: 12px;
  }

  .review-dock__hint {
    display: none;
  }
}