/* ---------- Dasar ---------- */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) { body { font-size: 14px; } }
button, .btn { min-height: 44px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 1rem; border-radius: .6rem; font-weight: 600; transition: background .15s; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #dc2626; color: #fff; } .btn-primary:hover { background: #b91c1c; }
.btn-dark { background: #1f2937; color: #fff; } .btn-dark:hover { background: #111827; }
.btn-light { background: #fff; color: #1f2937; border: 1px solid #d1d5db; } .btn-light:hover { background: #f3f4f6; }
.btn-ghost { background: transparent; color: #374151; } .btn-ghost:hover { background: #f3f4f6; }
.btn-danger { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; } .btn-danger:hover { background: #fef2f2; }
.btn-sm { min-height: 36px; padding: 0 .75rem; font-size: .875rem; }
.input, .select, .textarea { width: 100%; min-height: 44px; border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem; background: #fff; font-size: 1rem; }
.textarea { min-height: 80px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #dc2626; outline-offset: 1px; border-color: transparent; }
.label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .25rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 999px; }

/* ---------- Header halaman user (grid responsif) ---------- */
.hdr { display: grid; padding: .4rem .75rem; column-gap: .6rem; row-gap: .35rem; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo title summary" "map map reset"; }
.hdr-logo { grid-area: logo; }
.hdr-title { grid-area: title; }
.hdr-map { grid-area: map; }
.hdr-summary { grid-area: summary; justify-self: end; }
.hdr-reset { grid-area: reset; justify-self: end; }
.hdr-map .map-select { flex: 1 1 auto; max-width: none; }
.hdr-map #map-title { display: none; }
@media (min-width: 768px) {
  .hdr { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo title summary reset" "logo map summary reset"; row-gap: .15rem; padding: .45rem 1rem; }
  .hdr-map .map-select { flex: 0 1 auto; max-width: 340px; }
  .hdr-map #map-title { display: inline; }
}

/* ---------- Identitas / header ---------- */
.brand-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; flex: none; }
@media (min-width: 768px) { .brand-logo { height: 44px; max-width: 160px; } }
.brand-instansi { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b91c1c; line-height: 1.2; }
@media (min-width: 768px) { .brand-instansi { font-size: .72rem; } }
.brand-instansi-dark { color: #fca5a5; }
.brand-sub { font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }
.brand-logo-dark { background: #fff; border-radius: .35rem; padding: 2px; }
.map-select { font-size: .78rem; border: 1px solid #d1d5db; border-radius: .4rem; padding: .15rem 1.4rem .15rem .4rem; min-height: 30px; max-width: 52vw; background: #fff; color: #111827; font-weight: 600; }
@media (min-width: 768px) { .map-select { max-width: 320px; } }

/* ---------- Peta ---------- */
.leaflet-container { background: #e5e7eb; font: inherit; }
.leaflet-container img.leaflet-image-layer { image-rendering: auto; }
.karhutla-pin { background: none !important; border: 0 !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.karhutla-pin svg { display: block; }
.karhutla-pin.pin-active svg { transform: scale(1.18); transform-origin: 50% 100%; }
.karhutla-pin.pin-dim { opacity: .25; }
.karhutla-pin.pin-drag { filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); cursor: grab; }
.karhutla-pin.pin-drag svg { animation: bob 1s ease-in-out infinite alternate; }
.karhutla-pin.pin-new svg { filter: saturate(1.2); }
@keyframes bob { from { transform: translateY(0) } to { transform: translateY(-4px) } }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
.leaflet-tooltip.pin-label { font-weight: 600; font-size: .8rem; padding: 2px 8px; }

/* Titik kontrol kalibrasi */
.cp-marker { background: none !important; border: 0 !important; }
.cp-marker .cp-ring { width: 26px; height: 26px; border-radius: 999px; border: 3px solid #0ea5e9; background: rgba(14,165,233,.15); box-shadow: 0 0 0 2px #fff; position: relative; }
.cp-marker .cp-ring::before, .cp-marker .cp-ring::after { content: ""; position: absolute; background: #0ea5e9; }
.cp-marker .cp-ring::before { left: 50%; top: -6px; width: 2px; height: 32px; transform: translateX(-50%); }
.cp-marker .cp-ring::after { top: 50%; left: -6px; height: 2px; width: 32px; transform: translateY(-50%); }
.cp-marker .cp-label { position: absolute; left: 30px; top: 2px; background: #0ea5e9; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.kal-panel { position: absolute; left: 4rem; top: .75rem; z-index: 940; background: rgba(255,255,255,.97); border-radius: .75rem; padding: .75rem; width: min(340px, calc(100vw - 1.5rem)); max-height: 45dvh; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
@media (max-width: 767px) { .kal-panel { left: .75rem; top: auto; bottom: 6rem; max-height: 35dvh; } }

/* Crosshair mode letakkan titik (admin) */
.crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 800; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #dc2626; box-shadow: 0 0 0 1px #fff; }
.crosshair::before { left: -1px; top: -24px; width: 2px; height: 48px; }
.crosshair::after { top: -1px; left: -24px; height: 2px; width: 48px; }
.crosshair .ring { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border: 2px solid #dc2626; border-radius: 999px; box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #fff; }
.map-cursor-crosshair .leaflet-container { cursor: crosshair; }

/* Pemilih lapisan peta (citra / thermal) */
.layer-switch { position: absolute; left: .75rem; top: 7.25rem; z-index: 800; background: rgba(255,255,255,.96); border-radius: .7rem; padding: .4rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: .35rem; max-width: 200px; }
.layer-switch .layer-chip { min-height: 36px; justify-content: flex-start; font-size: .78rem; padding: .25rem .6rem; }
.layer-switch .layer-chip.active { background: #dc2626; color: #fff; }
.layer-switch .layer-chip:disabled { opacity: .45; cursor: not-allowed; }
.layer-switch .layer-opacity { display: flex; flex-direction: column; font-size: .7rem; color: #4b5563; padding: 0 .25rem; }
.layer-switch .layer-opacity input { width: 100%; accent-color: #dc2626; }

/* ---------- Panel detail / sidebar ---------- */
.panel { position: absolute; z-index: 900; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,.18); display: flex; flex-direction: column; transition: transform .25s ease; will-change: transform; }
.panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel-handle { display: none; }
@media (min-width: 768px) {
  .panel { top: 0; right: 0; bottom: 0; width: 32%; min-width: 340px; max-width: 520px; transform: translateX(105%); }
  .panel.open { transform: translateX(0); }
}
@media (max-width: 767px) {
  .panel { left: 0; right: 0; bottom: 0; height: 62dvh; border-radius: 1.1rem 1.1rem 0 0; transform: translateY(105%); }
  .panel.open { transform: translateY(0); }
  .panel.full { height: 94dvh; }
  .panel-handle { display: flex; justify-content: center; padding: .5rem 0 .25rem; cursor: grab; touch-action: none; }
  .panel-handle span { width: 44px; height: 5px; border-radius: 999px; background: #d1d5db; }
}

/* Foto before/after */
.photo-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .photo-grid { grid-template-columns: 1fr 1fr; } }
.photo-card { border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; background: #f9fafb; }
.photo-card .ph-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .4rem .6rem; color: #fff; }
.photo-card .ph-label.before { background: #7f1d1d; } .photo-card .ph-label.after { background: #14532d; }
.photo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; background: #e5e7eb; }
.photo-card .ph-empty { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: .85rem; }
.photo-card .ph-cap { padding: .5rem .6rem; font-size: .9rem; color: #374151; white-space: pre-wrap; }

/* ---------- Lightbox ---------- */
#lightbox { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; }
#lightbox[hidden] { display: none; }
#lightbox .lb-top { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; color: #fff; background: rgba(0,0,0,.6); z-index: 2; }
#lightbox .lb-caption { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lightbox .lb-close { width: 44px; height: 44px; font-size: 32px; line-height: 1; color: #fff; }
#lightbox .lb-map { flex: 1; }
#lightbox .lb-map .leaflet-container { background: #000; }
#lightbox .lb-hint { position: absolute; bottom: .75rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .8rem; pointer-events: none; }
#lightbox .lb-loading { color: #fff; display: flex; align-items: center; justify-content: center; height: 100%; }
body.lb-open { overflow: hidden; }

/* ---------- Toast ---------- */
#toast-wrap { position: fixed; left: 50%; top: 4.5rem; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { background: #111827; color: #fff; padding: .7rem 1.1rem; border-radius: .6rem; font-size: .9rem; opacity: 0; transform: translateY(-8px); transition: all .25s; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: #b91c1c; } .toast-success { background: #15803d; }

/* ---------- Misc ---------- */
.fab { position: absolute; right: 1rem; bottom: 1.25rem; z-index: 950; width: 60px; height: 60px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 34px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(220,38,38,.45); }
.fab:hover { background: #b91c1c; }
.map-toolbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.25rem; z-index: 950; display: flex; gap: .5rem; background: #fff; padding: .5rem; border-radius: .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.legend { position: absolute; left: .75rem; bottom: .75rem; z-index: 800; background: rgba(255,255,255,.95); border-radius: .6rem; padding: .4rem .6rem; font-size: .78rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: flex; flex-direction: column; gap: .2rem; }
.chip { display: inline-flex; flex: none; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; border: 2px solid transparent; background: #f3f4f6; font-size: .8rem; font-weight: 600; cursor: pointer; min-height: 36px; user-select: none; }
.chip.off { opacity: .4; }
.chip .n { font-size: .95rem; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.tbl th { text-align: left; font-weight: 600; color: #6b7280; padding: .5rem .4rem; border-bottom: 1px solid #e5e7eb; }
table.tbl td { padding: .5rem .4rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
table.tbl tr.active td { background: #fef2f2; }
.overlay-dim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1500; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .overlay-dim { align-items: center; } }
.modal { background: #fff; width: 100%; max-width: 560px; max-height: 92dvh; border-radius: 1rem 1rem 0 0; display: flex; flex-direction: column; }
@media (min-width: 768px) { .modal { border-radius: 1rem; } }
.modal-body { overflow-y: auto; padding: 1rem; }
.file-btn { display: flex; align-items: center; gap: .6rem; border: 2px dashed #d1d5db; border-radius: .6rem; padding: .6rem .8rem; cursor: pointer; background: #fafafa; min-height: 60px; }
.file-btn:hover { border-color: #dc2626; }
.file-btn img { width: 64px; height: 48px; object-fit: cover; border-radius: .3rem; background: #e5e7eb; }
.file-btn input { display: none; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 999px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- Sidebar admin ---------- */
@media (max-width: 767px) { body.sheet-open .fab { display: none; } }
@media (min-width: 768px) {
  .sidebar { width: 30%; min-width: 340px; max-width: 480px; background: #fff; border-left: 1px solid #e5e7eb; display: flex; flex-direction: column; }
  .sidebar .panel-handle { display: none; }
  #btn-sheet { display: none; }
}
@media (max-width: 767px) {
  .sidebar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 900; height: 62dvh; background: #fff; border-radius: 1.1rem 1.1rem 0 0; box-shadow: 0 0 24px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
  .sidebar.open { transform: translateY(0); }
  .sidebar.full { height: 94dvh; }
}
.btn.needs-kal { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.tab { flex: 1; min-height: 44px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; }
.tab.active { color: #dc2626; border-bottom-color: #dc2626; }