:root {
  --ink: #17243a;
  --muted: #758297;
  --line: #e8edf3;
  --sidebar: #ffffff;
  --navy: #101d31;
  --accent: #9c0000;
  --gps: #d0021b;
  --shadow: 0 12px 48px rgba(25, 38, 57, .13);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; color: var(--ink); background: #f4f7fa; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(156,0,0,.25); outline-offset: 2px; }
[hidden] { display: none !important; }
.app { display: flex; flex-direction: column; height: 100dvh; min-height: 400px; overflow: hidden; }
.topbar { position: relative; z-index: 1200; display: flex; align-items: center; justify-content: space-between; height: 72px; min-height: 72px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #fbeaea; color: #9c0000; }
.brand-title { font-family: Outfit, system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.9px; color: #4d1616; }
.brand-title span { color: #9c0000; }
.brand-divider { height: 19px; width: 1px; background: #e3e9ef; margin: 0 3px 0 7px; }
.brand-sub { font-size: 12px; font-weight: 600; color: #9aa5b6; letter-spacing: .4px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.sync-pill { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: #42725f; padding: 10px 12px; background: #edf9f3; border-radius: 11px; white-space: nowrap; max-width: 250px; }
.sync-pill span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sync-dot { height: 7px; width: 7px; border-radius: 50%; background: #34bd77; flex-shrink: 0; }
.sync-pill.loading { color: #90712d; background: #fff7e6; }
.sync-pill.loading .sync-dot { background: #e6a52d; animation: pulse 1s infinite; }
.sync-pill.error { color: #a85c26; background: #fff3e5; }
.sync-pill.error .sync-dot { background: #e69b40; }
.action-button { border: 0; border-radius: 10px; min-height: 38px; padding: 0 14px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, background .15s; white-space: nowrap; }
.action-button:hover { transform: translateY(-1px); }
.action-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.action-button.primary { background: #9c0000; color: #fff; box-shadow: 0 3px 9px rgba(156,0,0,.17); }
.action-button.primary:hover { background: #7b0000; }
.action-button.secondary { background: #f0f5fa; color: #38506f; }
.action-button.gps-button { background: #fff; color: #9c0000; border: 1.5px solid #e9c4c4; }
.action-button.gps-button:hover { background: #fff5f5; }
.gps-icon { flex-shrink: 0; }
.btn-symbol { font-size: 17px; font-weight: 700; line-height: 0; }
.icon-btn { border: 0; background: transparent; color: #273c53; font-size: 22px; }
.mobile-menu { display: none; }
.main { flex: 1; display: flex; min-height: 0; }
.sidebar { z-index: 950; width: 320px; min-width: 320px; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); }
.sidebar-content { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 24px 22px; scrollbar-width: thin; }
.section-overline { font-size: 10px; font-weight: 800; color: #9c0000; letter-spacing: 1.45px; }
.sidebar-footer { padding: 12px 24px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 700; color: #a9b3bf; letter-spacing: .3px; }
.sidebar h1 { font-family: Outfit, system-ui, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.8px; margin: 8px 0 4px; }
.sidebar-intro { font-size: 12px; color: var(--muted); line-height: 1.75; margin: 0 0 22px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 27px; }
.stat-card { display: flex; flex-direction: column; gap: 7px; background: #fff5f5; border: 1px solid #f5e5e5; padding: 15px 14px; border-radius: 12px; }
.stat-label { color: #8393a9; font-size: 11px; }
.stat-card strong { font-size: 22px; line-height: 1; font-weight: 800; color: #192e49; font-family: Outfit, sans-serif; }
.sidebar-section { margin-top: 25px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #2a3d56; font-size: 12px; font-weight: 800; margin-bottom: 13px; }
.section-heading kbd { background: #f1f4f8; color: #9aa5b6; font-size: 11px; font-weight: 700; border: 1px solid #e7ebf1; padding: 2px 6px; border-radius: 5px; }
.tiny-tag { background: #eff3f7; color: #8797ad; font-size: 10px; border-radius: 6px; padding: 3px 7px; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 0 11px; background: #f8fafc; border: 1px solid #e5ebf2; border-radius: 10px; height: 42px; color: #9ba9bb; }
.search-box:focus-within { background: #fff; border-color: #d29d9d; box-shadow: 0 0 0 3px rgba(156,0,0,.07); }
.search-box input { border: none; outline: none; background: transparent; min-width: 0; flex: 1; width: 100%; font-size: 12px; color: #253c59; }
.search-box input::placeholder { color: #a9b3bf; }
.search-clear { font-size: 21px; padding: 0 2px; cursor: pointer; display: none; }
.search-box:focus-within .search-clear { display: block; }
.search-suggestions { margin-top: 8px; max-height: min(360px, 46dvh); overflow-y: auto; border: 1px solid #f0dada; border-radius: 10px; padding: 5px; background: #fff; box-shadow: 0 8px 26px rgba(74, 0, 0, .08); }
.search-suggestions .muted-empty { padding: 4px 8px; }
.result-item { width: 100%; text-align: left; padding: 11px 9px; border: 1px solid transparent; background: transparent; border-radius: 9px; }
.result-item:hover, .result-item.selected { background: #fff4f4; border-color: #f4dfdf; }
.result-item-top { display: flex; align-items: center; gap: 8px; }
.result-item strong { display: block; font-size: 11.5px; color: #304964; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.result-item small { display: block; margin: 6px 0 0 18px; color: #9aa9b9; font-size: 10px; }
.result-dot { width: 9px; height: 9px; flex-shrink: 0; border: 2px solid #9c0000; border-radius: 50%; background: #fff; }
.muted-empty { font-size: 12px; color: #a0acb9; line-height: 1.6; }
.map-shell { flex: 1; min-width: 0; position: relative; background: #e9eef2; }
#map { position: absolute; inset: 0; z-index: 1; }
.leaflet-container { background: #edf3f5; font-family: 'DM Sans',sans-serif; }
.leaflet-control-zoom { box-shadow: 0 2px 16px #152b4023 !important; border: 0 !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-control-zoom a { border-color: #eef1f5 !important; color: #315476 !important; }
.leaflet-control-attribution { font-size: 10px !important; }
/* Zoom di atas pil jumlah polygon (sebelumnya saling menimpa). */
.leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 20px 56px 0; transition: margin .2s; }
.bottom-right { transition: bottom .2s; }
/* Saat kotak GPS tampil, pil polygon & zoom naik agar tidak tertutup (semua lebar layar). */
.map-shell:has(.location-status:not([hidden])) .bottom-right { bottom: 98px; }
.map-shell:has(.location-status:not([hidden])) .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 126px; }
.map-chrome { position: absolute; z-index: 550; display: flex; gap: 8px; pointer-events: none; }
.map-chrome > * { pointer-events: auto; }
.top-left { top: 20px; left: 20px; max-width: calc(100% - 40px); align-items: center; }
.top-right { top: 20px; right: 20px; }
.bottom-right { bottom: 28px; right: 20px; }
.map-breadcrumb { flex-shrink: 0; display: flex; align-items: center; gap: 9px; color: #6e7e90; padding: 12px 15px; border-radius: 10px; background: #fffffff0; box-shadow: 0 2px 14px #24374b22; font-size: 12px; backdrop-filter: blur(12px); }
.map-breadcrumb strong { color: #2a4665; font-weight: 700; }
.crumb-icon { font-size: 16px; color: #9c0000; }
.separator { color: #d1d9e1; }
/* Kotak status GPS di tengah bawah peta (di bawah backdrop drawer mobile, z-index 800). */
.location-status { position: absolute; z-index: 790; left: 50%; bottom: 30px; transform: translateX(-50%); width: min(440px, calc(100% - 40px)); display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #f0dcdc; padding: 11px 12px; border-radius: 12px; box-shadow: 0 5px 22px #223d5b30; }
.location-live-dot { width: 9px; height: 9px; background: var(--gps); border-radius: 50%; box-shadow: 0 0 0 4px #fde6e8; flex-shrink: 0; animation: pulse 1.7s ease-in-out infinite; }
.location-status-text { display: flex; flex-direction: column; min-width: 0; gap: 3px; flex: 1; }
.location-status-text strong { font-size: 11px; color: #2d4766; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.location-status-text small { font-size: 10px; color: #8292a6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.location-status.paused .location-live-dot { background: #e6a52d; box-shadow: 0 0 0 4px #fff3dc; animation: none; }
.location-status-actions { display: flex; gap: 6px; flex-shrink: 0; }
.location-status button { border: 0; background: #f0f4f9; border-radius: 8px; padding: 8px 11px; color: #65778f; font-size: 11px; font-weight: 800; white-space: nowrap; }
.location-status button.follow { background: #fff; color: var(--gps); box-shadow: inset 0 0 0 1.5px #efc2c7; }
.location-status button.follow:hover { background: #fff3f4; }
.location-status button.follow.resume { background: var(--gps); color: #fff; box-shadow: 0 3px 9px rgba(208,2,27,.25); }
.location-status button.follow.resume:hover { background: #a80016; }
.user-position-icon { border: 0; background: transparent; }
/* Penanda posisi GPS: titik merah bulat kecil dengan cincin denyut. */
.user-position-dot { position: relative; display: block; width: 14px; height: 14px; border: 2.5px solid #fff; border-radius: 50%; background: var(--gps); box-shadow: 0 1px 6px #7a00107a; }
.user-position-dot::after { content: ''; position: absolute; inset: -8px; border: 1.5px solid #d0021b66; border-radius: 50%; animation: location-pulse 2.4s ease-out infinite; }
@keyframes location-pulse { 0% { transform: scale(.45); opacity: .95; } 100% { transform: scale(1.4); opacity: 0; } }
.viewport-pill { display: inline-block; background: #fffffff5; border: 1px solid #f0f3f6; border-radius: 9px; padding: 10px 13px; color: #5c728c; font-weight: 800; font-size: 11px; box-shadow: 0 2px 12px #1b304b20; }
.map-loading { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px 15px; border-radius: 10px; background: #fffffff0; box-shadow: 0 2px 14px #24374b22; backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; color: #58718e; }
.map-loading #loading-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.spinner { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2.5px solid #fbeaea; border-top-color: #9c0000; animation: spin .8s linear infinite; }
.map-notice { position: absolute; z-index: 1000; left: 50%; top: 83px; transform: translateX(-50%); border-radius: 9px; padding: 11px 15px; max-width: 420px; background: #192b40; box-shadow: var(--shadow); color: #fff; font-size: 12px; text-align: center; }
.detail-panel { position: absolute; z-index: 810; top: 20px; right: 20px; width: min(360px, calc(100% - 40px)); max-height: calc(100% - 160px); background: #fff; box-shadow: var(--shadow); border-radius: 15px; display: flex; flex-direction: column; overflow: hidden; }
/* Panel detail berhenti di atas kontrol zoom, termasuk saat zoom dinaikkan oleh kotak GPS. */
.map-shell:has(.location-status:not([hidden])) .detail-panel { max-height: calc(100% - 230px); }
.detail-header { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 21px 21px 16px; border-bottom: 1px solid #eaf0f5; }
.detail-header h2 { font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; margin: 8px 0 0; }
.detail-close { background: #f1f4f8; color: #71839b; border: 0; border-radius: 8px; font-size: 23px; width: 28px; height: 28px; line-height: 1; flex-shrink: 0; }
.detail-content { padding: 6px 21px 15px; overflow-y: auto; scrollbar-width: thin; }
.detail-row { display: grid; grid-template-columns: 100px 1fr; gap: 9px; align-items: start; border-bottom: 1px solid #f0f2f5; padding: 12px 0; font-size: 11px; }
.detail-row label { color: #9aa9b9; }
.detail-row span { color: #425874; font-weight: 700; overflow-wrap: anywhere; }
.detail-actions { padding: 15px 21px; border-top: 1px solid #eaf0f5; display: flex; gap: 9px; }
.detail-actions button { flex: 1; }
.mobile-backdrop { display: none; }
.skeleton { height: 14px; margin: 13px 0; border-radius: 5px; background: linear-gradient(90deg,#f2f4f7,#e7ebf1,#f2f4f7); background-size: 200%; animation: shimmer 1.6s infinite; }
.skeleton.short { width: 68%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .4; } }
@keyframes shimmer { to { background-position: -200%; } }
@media (max-width: 1140px) {
  .sidebar { width: 305px; min-width: 305px; }
  .sidebar-content { padding: 22px 18px; }
  .brand-sub { display: none; }
  .brand-divider { display: none; }
  .sync-pill { max-width: 200px; }
  .detail-panel { top: 76px; max-height: calc(100% - 216px); }
  .map-shell:has(.location-status:not([hidden])) .detail-panel { max-height: calc(100% - 290px); }
}
@media (max-width: 800px) {
  .topbar { height: 62px; min-height: 62px; padding: 0 13px; }
  .mobile-menu { display: inline-flex; }
  .brand-title { font-size: 19px; }
  .brand-mark { width: 32px; height: 32px; }
  .sync-pill { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .action-button { width: 34px; padding: 0; min-height: 34px; }
  .topbar-actions .button-label { display: none; }
  /* Label "Lokasi saya" dan "Sync Data" tetap terlihat di mobile. */
  .topbar-actions .gps-button, .topbar-actions #refresh-btn { width: auto; padding: 0 11px; gap: 6px; }
  .topbar-actions .gps-button .button-label, .topbar-actions #refresh-btn .button-label { display: inline; }
  .sidebar { position: absolute; top: 62px; bottom: 0; left: 0; width: min(340px, calc(100% - 50px)); min-width: 0; box-shadow: 8px 0 24px #0c233d2c; transform: translateX(-110%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .mobile-backdrop.open { display: block; position: absolute; z-index: 800; top: 62px; bottom: 0; left: 0; right: 0; background: #0b1a2a66; }
  .top-left { top: 13px; left: 12px; max-width: calc(100% - 24px); }
  .map-breadcrumb, .map-loading { padding: 10px 12px; font-size: 10px; }
  .location-status { left: 10px; right: 10px; bottom: 22px; width: auto; transform: none; }
  .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin: 0 12px 46px 0; }
  .map-shell:has(.location-status:not([hidden])) .bottom-right { bottom: 88px; }
  .map-shell:has(.location-status:not([hidden])) .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 112px; }
  .bottom-right { bottom: 22px; right: 12px; }
  .viewport-pill { font-size: 10px; padding: 9px 10px; }
  .detail-panel { top: 60px; left: 10px; right: 10px; width: auto; max-height: calc(100% - 200px); }
  .map-shell:has(.location-status:not([hidden])) .detail-panel { max-height: calc(100% - 270px); }
  .map-notice { top: 60px; max-width: calc(100% - 24px); }
}
@media (max-width: 440px) {
  .topbar { gap: 8px; }
  .brand { gap: 7px; }
  .brand-mark { display: none; }
  .topbar-actions .gps-button, .topbar-actions #refresh-btn { padding: 0 9px; gap: 5px; font-size: 11px; }
}
@media (max-width: 340px) {
  .brand-title { font-size: 17px; }
  .topbar-actions .gps-button { width: 34px; padding: 0; }
  .topbar-actions .gps-button .button-label { display: none; }
}