/**
 * components.css
 * Styling untuk komponen app kustom: modal.js & dropdown.js (Fase 2) dan
 * menu.js — popover action-menu "Aksi Project" di topbar (Fase 3). Style
 * card sidebar (sidebarSection.js) ada di app.css bersama layout lainnya.
 * Semua bergantung pada token di tokens.css (elevation, motion, z-index, overlay).
 */

/* ============== MODAL (modal.js) ============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay-bg);
  /* Tampilan di belakang modal dibuat blur (ikut memudar bersama overlay). */
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.modal-overlay.open { opacity: 1; }

.modal-panel {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-4);
  padding: var(--sp-5);
  overflow: hidden;
  transform: scale(0.94) translateY(6px);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.modal-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-signal);
}
.modal-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.modal-icon-danger { background: rgba(229, 72, 77, 0.12); color: var(--danger); }
.modal-icon-signal { background: var(--gradient-signal); color: #fff; box-shadow: var(--elevation-signal); }

.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.modal-message {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}
.modal-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.modal-input:focus { outline: 2px solid var(--signal); outline-offset: -1px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* Tombol "×" pojok kanan-atas, khusus dialog konten bebas (customDialog). */
.modal-close-btn {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  z-index: 1;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.modal-close-btn:hover { background: var(--panel-alt); color: var(--text); }

/* Toggle tema gelap/terang, khusus modal "Akun Saya" (accountModal.js) —
   pojok kanan-atas panel, di sebelah kiri tombol "×", pola posisinya sama
   persis seperti .modal-close-btn di atas. */
.modal-theme-toggle {
  position: absolute;
  top: var(--sp-3);
  right: 46px;
  z-index: 1;
}

/* Modal panel yang lebih lapang, dipakai untuk konten kustom seperti info akun. */
.modal-panel-wide { max-width: 420px; }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
.btn-danger:hover { background: #cf3d42; }

/* ============== CAMERA CAPTURE (cameraCapture.js) ==============
   Overlay full-screen sendiri (bukan lewat modal.js) karena butuh video
   full-bleed edge-to-edge + kontrol gaya "app kamera", beda jauh dari
   panel dialog kecil di tengah layar. Selalu di atas modal.js
   (z-toast, bukan z-modal) supaya tombol "Ambil Foto" yang dipicu dari
   dalam panel edit block (yang bisa duduk di atas sidebar) tetap ke-klik. */
.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: #000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.camera-overlay.open { opacity: 1; }

.camera-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-3) var(--sp-2);
}
.camera-title {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.camera-icon-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.camera-icon-btn:hover { background: rgba(255, 255, 255, 0.22); }

.camera-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.camera-viewfinder-wrap {
  width: 100%;
  max-width: 480px;
  display: flex;
}
.camera-viewfinder {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #111;
}
.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kamera depan dicerminkan supaya terasa seperti "cermin" (konvensi umum
     UI kamera selfie) — tidak berpengaruh ke hasil capture karena capture()
     membaca piksel video asli (belum di-mirror), bukan tampilan CSS-nya. */
}
.camera-video[data-facing="user"] { transform: scaleX(-1); }
.camera-viewfinder-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.001); /* jaga radius border tetap tajam di semua browser */
}
.camera-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  text-align: center;
  margin: 0;
  max-width: 320px;
}
.camera-error {
  color: #ffb4b4;
  font-size: 13px;
  text-align: center;
  max-width: 320px;
  margin: 0;
  background: rgba(229, 72, 77, 0.16);
  border: 1px solid rgba(229, 72, 77, 0.35);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}

.camera-bottombar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3) max(var(--sp-4), env(safe-area-inset-bottom));
}
.camera-capture-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.camera-capture-btn:active { transform: scale(0.9); }
.camera-capture-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============== DROPDOWN (dropdown.js) ============== */
.dd {
  position: relative;
  flex: 1;
  min-width: 0;
}

.dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--elevation-1);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.dd-trigger:hover { border-color: var(--text-faint); }
.dd.open .dd-trigger {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 16%, transparent), var(--elevation-1);
}

.dd-trigger-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow: hidden;
  color: var(--text-muted);
}
.dd-trigger-content .icon { color: var(--text-faint); flex-shrink: 0; }
.dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-caret {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.dd.open .dd-caret { transform: rotate(180deg); color: var(--signal); }

.dd-badge {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--spark);
  margin-left: 2px;
}

.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-4);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dd.open .dd-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dd-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.dd-option .icon:first-child { color: var(--text-faint); flex-shrink: 0; }
/* Logo brand (solid, berwarna) di opsi/trigger dropdown — mis. dropdown
   platform di block Link Sosial Media. Warna brand di-set inline oleh
   pemanggil; untuk logo hitam/putih dibiarkan mewarisi warna teks. */
.dd-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.dd-brand-icon svg { display: block; }
.dd-option:hover,
.dd-option.active { background: var(--panel-alt); }
.dd-option.selected { color: var(--signal); font-weight: 500; }
.dd-option.selected .icon:first-child { color: var(--signal); }
.dd-check { margin-left: auto; flex-shrink: 0; color: var(--signal); }

/* Label + tombol hapus ("x") di dalam opsi saran (attachTextSuggestions,
   lihat helpers.js) — dipakai mis. untuk saran kategori produk, supaya admin
   bisa menghapus satu nilai dari SEMUA tempat yang memakainya langsung dari
   panel saran, tanpa harus membuka satu-satu tiap produk. */
.dd-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-option-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.dd-option-delete:hover {
  background: rgba(229, 72, 77, 0.12);
  color: var(--danger);
}

/* ============== ACTION MENU (menu.js — "Aksi Project" di topbar) ============== */
.am { flex: 0 0 auto; }
.am-trigger { white-space: nowrap; }
.am-trigger-text { font-weight: 600; padding: 7px 12px; }
.am .dd-caret { margin-left: 2px; }

/* Menu di-portal ke <body> (lihat menu.js) supaya tidak ikut terpotong oleh
   ancestor yang overflow-nya dibatasi, mis. .topbar-actions yang diberi
   overflow-x:auto di layar mobile (Fase 6 QA responsif) — sebelumnya ini
   membuat menu "Aksi Project" terpotong/tak terlihat saat dibuka di HP.
   Posisi (top/left) dihitung & di-set manual lewat JS, jadi di sini cukup
   override position + visibility; jangan pakai top/left/right dari .dd-menu. */
.dd-menu-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  /* Menu ini bisa muncul saat berada DI DALAM sidebar drawer mobile
     (mis. field "Jenis Latar" di panel Profil) — drawer itu sendiri
     position:fixed dengan z-index: var(--z-sidebar) (200). Karena
     .app/.body (ancestor bersama) tidak membentuk stacking context
     sendiri, z-index keduanya bersaing langsung di root; tanpa override
     ini, .dd-menu-portal masih mewarisi z-index: var(--z-dropdown) (100)
     dari .dd-menu — kalah dari sidebar (200), jadi menu ke-render TAPI
     tersembunyi total di belakang panel sidebar (terlihat "kosong" saat
     trigger di-tap). Naikkan ke var(--z-overlay) (300) supaya selalu di
     atas sidebar, tapi tetap di bawah modal/toast. */
  z-index: var(--z-overlay);
}
.dd-menu-portal.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dd-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
  list-style: none;
}
.dd-option.danger { color: var(--danger); }
.dd-option.danger .icon { color: var(--danger); }
.dd-option.danger:hover,
.dd-option.danger.active { background: rgba(229, 72, 77, 0.1); }

/* Item "accent" (mis. "Publish" di menu "Aksi Project"): aksi penyelesaian
   utama yang tetap perlu menonjol dari opsi lain di menu yang sama, jadi
   dikapsulkan (rounded-full) + diberi warna oranye var(--signal), bukan
   cuma teks polos. */
.dd-option.accent {
  background: var(--signal-soft);
  color: var(--signal);
  font-weight: 600;
  border-radius: 999px;
  margin: 2px 0;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.dd-option.accent .icon:first-child { color: var(--signal); }
.dd-option.accent:hover,
.dd-option.accent.active {
  background: var(--gradient-signal);
  color: #fff;
  box-shadow: var(--elevation-signal);
}
.dd-option.accent:hover .icon:first-child,
.dd-option.accent.active .icon:first-child { color: #fff; }

/* ============== TOAST (toast.js, Fase 5) ============== */
.toast-stack {
  position: fixed;
  /* top dihitung dari BAWAH topbar (bukan dari 0/viewport), supaya toast
     tidak menumpuk/menutupi topbar app — sebelumnya cuma pakai var(--sp-4)
     dari atas viewport, jadi toast selalu tampil menabrak topbar (kelihatan
     "tidak pas" di layar, terutama di HP). */
  top: calc(var(--topbar-h) + var(--sp-3));
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  max-width: 340px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-4);
  padding: var(--sp-3);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.toast.open { opacity: 1; transform: translateY(0) scale(1); }
.toast.closing {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition: opacity var(--duration-fast) var(--ease-in), transform var(--duration-fast) var(--ease-in);
}

.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--signal); }

.toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
  color: var(--signal);
}
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--signal); }

.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toast-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.toast-message {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px;
  margin: -3px -3px 0 0;
  border-radius: 6px;
  display: inline-flex;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.toast-close:hover { background: var(--panel-alt); color: var(--text); }

/* ---- Toast ajakan instal PWA (pwaInstall.js) ----
   Satu baris ringkas: ikon | judul + keterangan | tombol Instal | tutup. */
.toast-pwa {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px 12px;
  border-left-width: 1px;
  border-radius: 14px;
}
.toast-pwa-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.toast-pwa .toast-body { gap: 0; }
.toast-pwa .toast-title { font-size: 13px; line-height: 1.3; }
.toast-pwa .toast-message { font-size: 11.5px; line-height: 1.35; }
.toast-pwa .toast-close {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  padding: 4px;
}
.toast-pwa-install {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: var(--gradient-signal);
  color: #fff;
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
}
.toast-pwa-install:hover { filter: brightness(1.06); }
.toast-pwa-install:active { transform: scale(0.96); }
.toast-pwa-install:disabled { opacity: 0.6; cursor: default; }
.toast-pwa-install:focus-visible,
.toast-pwa .toast-close:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Bar hitung mundur 9 detik di dasar toast; animationend-nya yang menutup toast. */
.toast-pwa-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--gradient-signal);
  transform-origin: left center;
  animation: toast-pwa-countdown var(--pwa-toast-duration, 9000ms) linear forwards;
}
.toast-pwa:hover .toast-pwa-progress,
.toast-pwa:focus-within .toast-pwa-progress { animation-play-state: paused; }
@keyframes toast-pwa-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition-duration: 1ms; }
}

@media (max-width: 720px) {
  .toast-stack {
    left: var(--sp-3);
    right: var(--sp-3);
    top: calc(var(--topbar-h) + max(var(--sp-3), env(safe-area-inset-top)));
    max-width: none;
    /* BUG lama: "width: 100%" dari rule dasar di atas tetap kebawa ke sini.
       Padahal "left" & "right" sudah sama-sama diisi (var(--sp-3)) — begitu
       "width" eksplisit 100% ikut aktif, box jadi over-constrained: browser
       mengabaikan "right" untuk perhitungan lebar dan tetap memaksa lebar
       = 100% LEBAR VIEWPORT dihitung dari "left", jadi box meluber ~12px
       melewati tepi kanan layar (ketutupan/kepotong browser di HP). Kunci
       ulang ke "auto" supaya lebar box betul-betul mengikuti left+right. */
    width: auto;
  }
}