/* ==========================================================================
   components.css
   Komponen UI lepas yang dipakai lintas halaman: Floating Menu (speed dial
   dari tombol "+"), Theme Picker Panel, Toast, Modal Konfirmasi, dan aksi
   Sampah di note card / halaman Sampah.
   ========================================================================== */

/* ---- Floating Menu (speed dial) ---- */

.fab-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--anim-fade) var(--ease-standard);
}

.fab-menu.is-open .fab-menu__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.fab-menu__actions {
  position: fixed;
  /* Tombol child (.fab-action) berdiameter 44px, tombol utama (.fab)
     berdiameter 56px, dan keduanya sama-sama nempel ke `right`. Supaya
     ikon child benar-benar lurus (center-align) dengan ikon "+" utama,
     offset kanannya ditambah setengah selisih diameter: (56 - 44) / 2 = 6px. */
  right: calc(var(--space-lg) + 6px);
  bottom: calc(var(--space-lg) + 68px);
  z-index: 41;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-md);
  pointer-events: none;
}

.fab-menu.is-open .fab-menu__actions {
  pointer-events: auto;
}

/* Tiap item punya transisi opacity+transform sendiri (bukan keyframe
   sekali-jalan) supaya animasi mulus baik saat FAB dibuka MAUPUN saat
   ditutup — sebelumnya hanya animasi "muncul" yang halus, sedangkan
   menutup langsung `hidden` tanpa transisi sama sekali. */
.fab-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity var(--anim-slide) var(--ease-standard),
              transform var(--anim-slide) var(--ease-standard);
}

.fab-menu.is-open .fab-action-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger halus hanya saat MEMBUKA; saat menutup semua item balik
   bersamaan (tanpa delay) supaya terasa lebih responsif. */
.fab-menu.is-open .fab-action-item:nth-child(1) { transition-delay: 0ms; }
.fab-menu.is-open .fab-action-item:nth-child(2) { transition-delay: 30ms; }
.fab-menu.is-open .fab-action-item:nth-child(3) { transition-delay: 60ms; }
.fab-menu.is-open .fab-action-item:nth-child(4) { transition-delay: 90ms; }
.fab-menu.is-open .fab-action-item:nth-child(5) { transition-delay: 120ms; }

.fab-action__label {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(var(--shadow-color), 0.08);
}

.fab-action {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(var(--shadow-color), 0.08);
  transition: transform var(--duration-fast) var(--ease-out);
}

.fab-action:hover { transform: translateY(-1px); }
.fab-action:active { transform: scale(0.94); }

.fab-action--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

.fab-action__icon {
  width: var(--icon-md);
  height: var(--icon-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fab-action__icon svg { width: 100%; height: 100%; }

.fab-menu.is-open .fab {
  transform: rotate(45deg);
  z-index: 41;
}

/* ---- Theme Picker Panel (dibuka dari aksi "Ganti Tema") ---- */

/* .toolbar-panel (dari toolbar.css, dipakai lewat openPanel() di dom.js)
   punya z-index lebih rendah (--z-dropdown) daripada backdrop Floating Menu
   (--z-overlay). Override di sini supaya panel tema tetap tampil di atas. */
.theme-panel.toolbar-panel {
  z-index: 42;
}

.theme-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: 0 8px 24px rgba(var(--shadow-color), 0.12);
  min-width: 180px;
}

.theme-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-align: left;
}

.theme-panel__item:hover { background-color: var(--color-accent-soft); }

.theme-panel__item.is-active {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.theme-panel__swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ---- Toast ---- */

.toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-text-primary);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  box-shadow: 0 8px 24px rgba(var(--shadow-color), 0.18);
  max-width: 88vw;
}

.toast--danger { background-color: var(--color-danger); color: #FFFFFF; }

.toast--leaving {
  animation: fadeOutToast var(--duration-fast) var(--ease-in) both;
}

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

.toast__action {
  color: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  flex-shrink: 0;
}

/* ---- Modal konfirmasi (mis. Hapus Permanen dari Sampah) ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal-panel {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 28px rgba(var(--shadow-color), 0.12);
  z-index: var(--z-modal);
}

.modal-panel__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-sm);
}

.modal-panel__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-lg);
}

.modal-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.modal-btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  min-height: var(--touch-target-min);
}

.modal-btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}
.modal-btn--ghost:hover { background-color: var(--color-accent-soft); }

.modal-btn--primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.modal-btn--danger {
  background-color: var(--color-danger);
  color: #FFFFFF;
}

/* ---- Aksi "pindahkan ke Sampah" di note card (Home) ---- */

.note-card__trash-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.note-card__trash-btn:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-danger);
}

.note-card__trash-btn svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ---- Halaman Sampah (trash.html) ---- */

.trash-card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.trash-card__btn {
  flex: 1;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.trash-card__btn:hover { background-color: var(--color-accent-soft); }

.trash-card__btn--danger { color: var(--color-danger); }

/* ---- Responsive: FAB actions sedikit lebih dekat di layar sangat kecil ---- */

@media (max-width: 360px) {
  .fab-menu__actions {
    right: var(--space-md);
    bottom: calc(var(--space-md) + 64px);
  }
}