/* ============================================================
   FAMILY TRACKER — DESIGN SYSTEM
   Palette: Biru (trust) / Putih (clarity) / Hijau (aman & online)
   Signature: radar pulse pada marker anggota online + kartu glass mengambang
   ============================================================ */

:root{
  --blue-600:#2F6FED;
  --blue-700:#2557C7;
  --blue-100:#E8F0FE;
  --green-500:#22C55E;
  --green-100:#E4F9EE;
  --red-500:#EF4444;
  --amber-500:#F59E0B;

  --ink-900:#0E1626;
  --ink-700:#33415C;
  --ink-500:#6B7A99;
  --ink-300:#AEB9CC;

  --surface-0:#F5F8FC;
  --surface-1:#FFFFFF;
  --surface-glass: rgba(255,255,255,0.68);
  --border-soft: rgba(14,22,38,0.08);

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;

  --shadow-soft: 0 10px 30px -12px rgba(20,40,90,0.18);
  --shadow-card: 0 4px 18px -6px rgba(20,40,90,0.12);

  --font-display:'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  color-scheme: light;
}

[data-theme="dark"]{
  color-scheme: dark;
  --ink-900:#EEF2FA;
  --ink-700:#C7D0E0;
  --ink-500:#8C99B3;
  --ink-300:#4B5670;

  --surface-0:#0B111E;
  --surface-1:#141C2E;
  --surface-glass: rgba(20,28,46,0.72);
  --border-soft: rgba(255,255,255,0.08);

  --blue-100: rgba(47,111,237,0.16);
  --green-100: rgba(34,197,94,0.14);

  --shadow-soft: 0 10px 30px -10px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 18px -6px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }

body{
  font-family: var(--font-body);
  background: var(--surface-0);
  color: var(--ink-900);
  transition: background .3s ease, color .3s ease;
  min-height:100vh;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a, button{ touch-action:manipulation; }

h1,h2,h3,h4,h5, .font-display{ font-family: var(--font-display); letter-spacing:-0.02em; }
.font-mono{ font-family: var(--font-mono); }

a{ text-decoration:none; }

/* ---------------- Auth Pages ---------------- */
.auth-wrapper{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(47,111,237,0.16), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(34,197,94,0.14), transparent 45%),
    var(--surface-0);
}
.auth-card{
  width:100%;
  max-width:440px;
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding:40px 36px;
}
.auth-logo{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue-600),var(--green-500));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;
  box-shadow:0 8px 20px -6px rgba(47,111,237,0.5);
}
.brand-title{ font-weight:800; font-size:1.15rem; }
.brand-sub{ color:var(--ink-500); font-size:.85rem; }

.form-control, .form-select{
  background: var(--surface-1);
  border:1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding:.65rem .9rem;
  color:var(--ink-900);
  font-size:.92rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7A99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:12px 8px;
}
[data-theme="dark"] .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238C99B3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.form-select option{ background:var(--surface-1); color:var(--ink-900); }
.form-control:focus, .form-select:focus{
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-100);
  background:var(--surface-1);
  color:var(--ink-900);
}
.form-control::placeholder{ color:var(--ink-300); }
.form-label{ font-size:.82rem; font-weight:600; color:var(--ink-700); margin-bottom:.35rem; }

.btn-primary-tracker{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700));
  border:none; color:#fff; font-weight:700;
  border-radius: var(--radius-sm);
  padding:.7rem 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 18px -8px rgba(47,111,237,0.6);
}
.btn-primary-tracker:hover{ transform:translateY(-1px); box-shadow:0 12px 22px -8px rgba(47,111,237,0.7); color:#fff; }
.btn-primary-tracker:active{ transform:scale(.97); box-shadow:0 6px 14px -8px rgba(47,111,237,0.6); }

.btn-outline-tracker{
  background:transparent; border:1.5px solid var(--border-soft);
  color:var(--ink-700); font-weight:600; border-radius:var(--radius-sm);
  padding:.6rem 1rem; transition:background .15s ease, color .15s ease, transform .12s ease;
}
.btn-outline-tracker:hover{ background:var(--surface-1); color:var(--ink-900); }
.btn-outline-tracker:active{ transform:scale(.97); }

.divider-text{
  display:flex; align-items:center; gap:12px; color:var(--ink-500); font-size:.8rem; margin:1.2rem 0;
}
.divider-text::before, .divider-text::after{ content:''; flex:1; height:1px; background:var(--border-soft); }

/* ---------------- App Shell (Sidebar + Topbar) ---------------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0;
  background:var(--surface-1);
  border-right:1px solid var(--border-soft);
  padding:22px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:0 8px 20px; }
.sidebar .brand-icon{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue-600),var(--green-500));
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:.65rem .9rem; border-radius:12px;
  color:var(--ink-700); font-weight:600; font-size:.9rem;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.nav-item i{ font-size:1.05rem; width:20px; text-align:center; }
.nav-item:hover{ background:var(--surface-0); color:var(--ink-900); }
.nav-item.active{ background:var(--blue-100); color:var(--blue-700); }
.nav-item:active{ transform:scale(.97); }

.main-content{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:var(--surface-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:50;
  transition:box-shadow .25s ease;
}
/* Elevasi halus ala aplikasi native — hanya muncul ketika konten sudah discroll,
   menggantikan garis border statis yang kaku di tepi topbar */
.topbar.is-scrolled{
  box-shadow:0 6px 18px -12px rgba(20,40,90,0.28);
}
[data-theme="dark"] .topbar.is-scrolled{ box-shadow:0 6px 18px -12px rgba(0,0,0,0.55); }

.icon-btn{
  width:40px;height:40px; border-radius:12px; border:1px solid var(--border-soft);
  background:var(--surface-1); display:flex; align-items:center; justify-content:center;
  color:var(--ink-700); position:relative; transition:background .15s ease, transform .12s ease;
}
.icon-btn:hover{ background:var(--surface-0); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn .badge-dot{
  position:absolute; top:-4px; right:-4px; background:var(--red-500);
  color:#fff; font-size:.62rem; padding:1px 5px; border-radius:20px; font-weight:700;
}

/* ---------------- Cards / Glass panels ---------------- */
.glass-card{
  background:var(--surface-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.stat-card{
  background:var(--surface-1); border:1px solid var(--border-soft);
  border-radius: var(--radius-md); padding:18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}
.stat-card:hover{ transform:translateY(-2px); }
.stat-icon{
  width:44px;height:44px; border-radius:13px; display:flex; align-items:center;justify-content:center;
  font-size:1.15rem;
}
.stat-icon.blue{ background:var(--blue-100); color:var(--blue-600); }
.stat-icon.green{ background:var(--green-100); color:var(--green-500); }
.stat-icon.red{ background:rgba(239,68,68,0.12); color:var(--red-500); }
.stat-icon.amber{ background:rgba(245,158,11,0.14); color:var(--amber-500); }

/* ---------------- Map & floating panels ---------------- */
.map-page-wrapper{ position:relative; flex:1; }
/* #map dipakai di beberapa halaman: peta fullscreen (Peta Langsung) & peta di dalam kartu
   (Dashboard, Geofence, Riwayat). min-height khusus fullscreen HARUS discope supaya tidak
   memaksa peta di dalam kartu jadi lebih tinggi dari kartunya sendiri (menyebabkan peta
   terpotong/tidak pas pada mode kartu, terutama di layar mobile yang lebih pendek). */
#map{ width:100%; height:100%; }
.map-page-wrapper #map{ min-height:calc(100vh - 68px); min-height:calc(100dvh - 68px); }

.map-floating-panel{
  position:absolute; z-index:20;
  background:var(--surface-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.member-list-panel{ top:16px; left:16px; width:300px; max-height:calc(100% - 32px); overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.map-controls{ bottom:110px; right:16px; display:flex; flex-direction:column; gap:8px; }
.map-controls .icon-btn{ background:var(--surface-1); }

.member-row{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.member-row:hover{ background:var(--surface-0); }
.member-row:active{ transform:scale(.98); background:var(--surface-0); }
.member-avatar-wrap{ position:relative; width:44px; height:44px; flex-shrink:0; }
.member-avatar{ width:44px;height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--surface-1); }
.status-dot{
  position:absolute; bottom:0; right:0; width:12px;height:12px; border-radius:50%;
  border:2px solid var(--surface-1);
}
.status-dot.online{ background:var(--green-500); }
.status-dot.offline{ background:var(--ink-300); }

/* Radar pulse — signature element untuk marker anggota online di peta */
.marker-pulse{
  position:absolute; inset:0; border-radius:50%;
  background:var(--green-500); opacity:.55;
  animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(0.6); opacity:.55; }
  70%{ transform:scale(2.1); opacity:0; }
  100%{ transform:scale(2.1); opacity:0; }
}

/* ---------------- SOS Button ---------------- */
.sos-fab{
  position:fixed; bottom:26px; right:26px; z-index:1000;
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,#FF5B5B,var(--red-500));
  color:#fff; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; font-size:.72rem; box-shadow:0 12px 26px -8px rgba(239,68,68,0.65);
  animation: sos-breathe 2.4s ease-in-out infinite;
}
.sos-fab i{ font-size:1.3rem; }
@keyframes sos-breathe{
  0%,100%{ box-shadow:0 12px 26px -8px rgba(239,68,68,0.65); }
  50%{ box-shadow:0 12px 34px -4px rgba(239,68,68,0.85); }
}

/* ---------------- Chat ---------------- */
.chat-wrapper{ display:flex; flex-direction:column; height:calc(100vh - 68px); height:calc(100dvh - 68px); }
.chat-messages{
  flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.bubble{
  max-width:65%; padding:10px 14px; border-radius:16px; font-size:.9rem; position:relative;
}
.bubble.mine{ align-self:flex-end; background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; border-bottom-right-radius:4px; }
.bubble.theirs{ align-self:flex-start; background:var(--surface-1); border:1px solid var(--border-soft); border-bottom-left-radius:4px; }
.bubble img{ max-width:220px; border-radius:10px; margin-top:6px; }
.chat-input-area{
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border-soft);
  background:var(--surface-1); display:flex; gap:8px; align-items:center;
}
.chat-input-area .form-control{
  border-radius:24px; background:var(--surface-0); border-color:transparent;
}
.chat-input-area .form-control:focus{ background:var(--surface-1); }
.chat-input-area button[type="submit"]{
  width:42px;height:42px; border-radius:50%; padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

/* ---------------- Timeline (Riwayat) ---------------- */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--border-soft); }
.timeline-item{ position:relative; padding-bottom:22px; }
.timeline-item::before{
  content:''; position:absolute; left:-28px; top:4px; width:14px;height:14px; border-radius:50%;
  background:var(--blue-600); border:3px solid var(--surface-0);
}
.timeline-item.geo::before{ background:var(--green-500); }

/* ---------------- Misc ---------------- */
.badge-soft-green{ background:var(--green-100); color:var(--green-500); font-weight:700; padding:.3rem .6rem; border-radius:20px; font-size:.72rem; }
.badge-soft-blue{ background:var(--blue-100); color:var(--blue-600); font-weight:700; padding:.3rem .6rem; border-radius:20px; font-size:.72rem; }
.badge-soft-red{ background:rgba(239,68,68,0.12); color:var(--red-500); font-weight:700; padding:.3rem .6rem; border-radius:20px; font-size:.72rem; }

.role-badge{ font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:20px; background:var(--surface-0); color:var(--ink-500); }

/* ---------------- Bottom nav (mobile) ---------------- */
.bottom-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:var(--surface-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top:1px solid transparent;
  box-shadow:0 -6px 18px -14px rgba(20,40,90,0.28);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around;
}
[data-theme="dark"] .bottom-nav{ box-shadow:0 -6px 18px -14px rgba(0,0,0,0.55); }
.bottom-nav a, .bottom-nav button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--ink-500); font-size:.62rem; font-weight:600; padding:4px 8px; border-radius:10px;
  background:none; border:none; font-family:inherit; flex:1;
  transition:color .18s ease, transform .12s ease;
}
.bottom-nav a:active, .bottom-nav button:active{ transform:scale(.92); }
.bottom-nav a.active, .bottom-nav button.active{ color:var(--blue-600); }
.bottom-nav i{
  font-size:1.1rem; width:38px; height:24px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.bottom-nav a.active i, .bottom-nav button.active i{ background:var(--blue-100); }

/* ---------------- PWA: Install banner & offline bar ---------------- */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:-120px; z-index:1200;
  display:flex; align-items:center; gap:12px;
  background:var(--surface-1); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:12px 14px; transition:bottom .35s cubic-bezier(.2,.9,.3,1.2);
}
.install-banner.show{ bottom:calc(16px + env(safe-area-inset-bottom)); }
.install-banner-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-600),var(--green-500));
  color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
@media (min-width:576px){ .install-banner{ left:auto; right:20px; width:360px; } }

.offline-bar{
  position:fixed; top:0; left:0; right:0; z-index:1300;
  background:var(--amber-500); color:#fff; text-align:center;
  font-size:.78rem; font-weight:700; padding:7px 12px calc(7px + env(safe-area-inset-top));
  transform:translateY(-100%); transition:transform .3s ease;
}
.offline-bar.show{ transform:translateY(0); }

/* ---------------- Mobile "Lainnya" bottom sheet ---------------- */
.more-nav-overlay{
  position:fixed; inset:0; background:rgba(6,10,20,.5); z-index:1400;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.more-nav-overlay.show{ opacity:1; pointer-events:auto; }
.more-nav-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  background:var(--surface-1); border-radius:20px 20px 0 0;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  max-height:70vh; overflow-y:auto; box-shadow:0 -10px 30px -12px rgba(20,40,90,0.25);
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.more-nav-sheet.show{ transform:translateY(0); }
.more-nav-sheet .sheet-handle{
  width:40px;height:4px;border-radius:20px;background:var(--border-soft);
  margin:4px auto 12px;
}
.more-nav-sheet .nav-item{ padding:.8rem .9rem; font-size:.95rem; }

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px){
  .sidebar{ display:none; }
  .bottom-nav{ display:flex; }
  .main-content{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

  /* Peta Langsung: tumpuk panel mengambang secara vertikal, jangan bertabrakan */
  .map-page-wrapper{ display:flex; flex-direction:column; }
  #map{ min-height:56vh; }
  .member-list-panel{ position:static; width:auto; margin:12px; max-height:220px; order:2; }
  .map-page-wrapper > .map-floating-panel.map-share-panel{
    position:static !important; width:auto !important; margin:0 12px 12px; order:1;
  }
  .map-floating-panel#memberDetailPanel{
    left:12px !important; right:12px !important; width:auto !important;
    bottom:calc(64px + env(safe-area-inset-bottom) + 12px) !important;
  }
  .map-controls{ bottom:calc(64px + env(safe-area-inset-bottom) + 16px); }
  .sos-fab{ bottom:calc(64px + env(safe-area-inset-bottom) + 14px); }

  /* Chat: sisakan ruang untuk bottom-nav supaya kolom ketik tidak tertutup */
  .chat-wrapper{ height:calc(100vh - 68px - 64px - env(safe-area-inset-bottom)); height:calc(100dvh - 68px - 64px - env(safe-area-inset-bottom)); }

  /* Topbar sedikit lebih rapat di layar sempit */
  .topbar{ padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); }
  .topbar h5{ font-size:1rem; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width: 575.98px){
  .auth-card{ padding:28px 22px; }
  .sos-fab{ width:62px;height:62px; }
  .sos-fab i{ font-size:1.1rem; }
  .stat-card{ padding:14px 14px; }
  .stat-icon{ width:38px;height:38px; font-size:1rem; }
  .glass-card{ border-radius:16px; }
  .p-4{ padding:1rem !important; }
  .bubble{ max-width:82%; }
  .install-banner{ padding:10px 12px; gap:8px; }
  .install-banner .btn-sm{ padding:.4rem .7rem; font-size:.78rem; }
}

/* Tap target lebih nyaman untuk layar sentuh */
@media (hover: none) and (pointer: coarse){
  .icon-btn{ width:42px; height:42px; }
  .nav-item, .bottom-nav a{ min-height:44px; }
  .btn{ min-height:40px; }
}

/* Jaga-jaga: komponen navigasi mobile (bottom-nav & sheet "Lainnya") tidak boleh pernah
   muncul di lebar desktop, walau statusnya "show" tertinggal (mis. jendela browser
   diperkecil lalu dilebarkan lagi tanpa reload halaman). */
@media (min-width: 992px){
  .bottom-nav, .more-nav-overlay, .more-nav-sheet{ display:none !important; }
}

/* ---------------- Modal konfirmasi (pengganti confirm() bawaan browser) ---------------- */
.ft-modal-overlay{
  position:fixed; inset:0; z-index:2100;
  background:rgba(6,10,20,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.ft-modal-overlay.show{ opacity:1; pointer-events:auto; }
.ft-modal{
  width:100%; max-width:340px; background:var(--surface-1); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:26px 22px 22px;
  text-align:center;
  transform:translateY(14px) scale(.96); transition:transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.ft-modal-overlay.show .ft-modal{ transform:translateY(0) scale(1); }
.ft-modal-icon{
  width:52px;height:52px;border-radius:16px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.ft-modal-icon.danger{ background:rgba(239,68,68,.12); color:var(--red-500); }
.ft-modal-icon.info{ background:var(--blue-100); color:var(--blue-600); }
.ft-modal h6{ font-weight:800; margin-bottom:6px; font-size:1.02rem; }
.ft-modal p{ color:var(--ink-500); font-size:.85rem; margin-bottom:22px; line-height:1.5; }
.ft-modal-actions{ display:flex; gap:10px; }
.ft-modal-actions button{ flex:1; }
.ft-modal-actions .btn-danger-tracker{
  background:linear-gradient(135deg,#FF5B5B,var(--red-500)); border:none; color:#fff; font-weight:700;
  border-radius:var(--radius-sm); padding:.7rem 1rem; transition:transform .12s ease;
}
.ft-modal-actions .btn-danger-tracker:active{ transform:scale(.97); }

/* Di layar mobile, modal konfirmasi tampil sebagai bottom sheet (slide dari bawah)
   selaras dengan pola sheet "Lainnya" yang sudah ada — bukan lagi kotak popup
   mengambang di tengah layar ala confirm() bawaan browser. */
@media (max-width: 991.98px){
  .ft-modal-overlay{ align-items:flex-end; padding:0; }
  .ft-modal{
    max-width:100%; width:100%;
    border:none; border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px -12px rgba(20,40,90,0.28);
    padding:10px 22px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(100%) scale(1);
    transition:transform .32s cubic-bezier(.2,.9,.3,1.2);
  }
  .ft-modal-overlay.show .ft-modal{ transform:translateY(0) scale(1); }
  .ft-modal::before{
    content:''; display:block; width:40px; height:4px; border-radius:20px;
    background:var(--border-soft); margin:6px auto 16px;
  }
  [data-theme="dark"] .ft-modal{ box-shadow:0 -10px 30px -12px rgba(0,0,0,0.5); }
}

/* ---------------- Tempat Favorit (geofence.php) — chip pin cepat ---------------- */
.quick-place-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-1); border:1.5px solid var(--border-soft);
  border-radius:999px; padding:.5rem .95rem; font-size:.82rem; font-weight:700;
  color:var(--ink-700); transition:background .15s ease, transform .12s ease, border-color .15s ease;
}
.quick-place-chip i{ font-size:.95rem; color:var(--blue-600); }
.quick-place-chip:hover{ border-color:var(--blue-600); background:var(--blue-100); color:var(--blue-700); }
.quick-place-chip:active{ transform:scale(.95); }
.quick-place-chip.is-loading{ opacity:.65; pointer-events:none; }
.quick-place-chip .spin{ animation:ft-spin .8s linear infinite; display:inline-block; }
@keyframes ft-spin{ to{ transform:rotate(360deg); } }

/* ---------------- Dropdown (mis. pemilih emoji chat) ---------------- */
.dropdown-menu{
  background:var(--surface-1); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:10px;
}
.dropdown-menu.emoji-menu{
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
}
.emoji-pick{
  border:none; background:none; font-size:1.25rem; line-height:1;
  padding:6px; border-radius:10px; transition:background .15s ease, transform .12s ease;
}
.emoji-pick:hover{ background:var(--surface-0); }
.emoji-pick:active{ transform:scale(.85); }

/* Scrollbar disembunyikan di seluruh halaman (kesan aplikasi native) — scroll tetap berfungsi normal */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }