/* SI-JAJAN Custom Overrides (Tailwind handles most styling) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Leaflet overrides */
.leaflet-container { font-family: 'Inter', sans-serif; }
.leaflet-popup-content-wrapper { border-radius: .75rem; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.leaflet-popup-content { margin: 12px 16px; font-size: .875rem; }
.leaflet-bar a { background: #fff; color: #334155; border-color: #e2e8f0; }
.leaflet-bar a:hover { background: #f1f5f9; }

/* SPA page toggle */
.page { display: none; }
.page.active { display: block; }
#page-peta.active { display: flex; flex-direction: column; }

/* Toast */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { padding: .75rem 1.25rem; border-radius: .75rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); animation: toastIn .3s ease; font-size: .875rem; display: flex; align-items: center; gap: .5rem; min-width: 250px; }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to { opacity:0; transform:translateX(20px); } }
.toast-success { background: #ecfdf5; border-left: 4px solid #10b981; color: #065f46; }
.toast-error   { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }
.toast-info    { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.modal-overlay.open { display: grid; place-items: center; padding: 1rem; }
@keyframes modalIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.modal-overlay.open > div { animation: modalIn .25s ease; }

/* Map picker crosshair */
#kirim-map .leaflet-container { cursor: crosshair; }

/* Filter panel */
.filter-body.collapsed { display: none; }
.filter-chevron.collapsed { transform: rotate(-90deg); }