/* =========================================================================
   Sensus Produksi — Tema Tampilan (mengikuti gaya aplikasi Thinning Out / TO)
   Memberi tampilan modern & rapi pada seluruh aplikasi + peta & tracking.
   File ini dimuat paling akhir agar bisa menimpa CSS lama bila perlu.
   ========================================================================= */

:root{
  --sp-green:#16a34a;
  --sp-green-dark:#15803d;
  --sp-blue:#2563eb;
  --sp-ink:#0f172a;
  --sp-muted:#64748b;
  --sp-line:#e2e8f0;
  --sp-line-strong:#cbd5e1;
  --sp-bg:#f1f5f9;
  --sp-card:#ffffff;
  --sp-radius:14px;
  --sp-shadow:0 8px 24px rgba(15,23,42,.10);
  --sp-shadow-sm:0 2px 8px rgba(15,23,42,.06);
}

/* ---------- Dasar halaman ---------- */
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif !important;
  background:var(--sp-bg) !important;
  color:var(--sp-ink);
  padding:14px !important;
  max-width:1180px;
  margin:0 auto !important;
  line-height:1.45;
}

/* Judul aplikasi */
.judul{
  background:linear-gradient(135deg,var(--sp-green),var(--sp-green-dark));
  color:#fff;
  border-radius:var(--sp-radius);
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:var(--sp-shadow);
  text-align:center;
}
.judul h2{
  margin:0 !important;
  padding:1px !important;
  color:#fff !important;
  font-weight:700;
  letter-spacing:.3px;
}
.judul h2:first-child{ font-size:22px; }
.judul h2:last-child{ font-size:15px; font-weight:500; opacity:.92; }

/* ---------- Tab ---------- */
.tab{
  display:flex;
  gap:4px;
  overflow:hidden;
  border:none !important;
  background:var(--sp-card) !important;
  border-radius:var(--sp-radius) var(--sp-radius) 0 0;
  padding:6px 6px 0;
  box-shadow:var(--sp-shadow-sm);
  flex-wrap:wrap;
}
.tab button{
  flex:1 1 auto;
  background:transparent !important;
  color:var(--sp-muted) !important;
  border:none !important;
  border-radius:10px 10px 0 0 !important;
  padding:12px 14px !important;
  margin:0 !important;
  font-weight:600;
  font-size:14px;
  transition:.18s;
  min-width:90px;
}
.tab button:hover{ background:#f1f5f9 !important; color:var(--sp-ink) !important; }
.tab button.active{
  background:var(--sp-green) !important;
  color:#fff !important;
  box-shadow:0 -2px 0 var(--sp-green-dark) inset;
}

.tabcontent{
  display:none;
  padding:18px !important;
  border:none !important;
  background:var(--sp-card);
  border-radius:0 0 var(--sp-radius) var(--sp-radius);
  box-shadow:var(--sp-shadow-sm);
  margin-bottom:18px;
}

/* ---------- Section / Card ---------- */
.section,.card-form{
  margin-bottom:18px !important;
  padding:16px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:12px !important;
  background:#fff;
}
.section h4,.card-form .form-title,h3.form-title{
  margin-top:0;
  color:var(--sp-ink);
  font-size:15px;
}
h3,h4{ color:var(--sp-ink); }

/* ---------- Form grid & input ---------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.form-group{ margin-bottom:6px; }
label{ font-size:13px; color:#334155; font-weight:500; }

input[type="text"],input[type="number"],input[type="date"],select{
  width:100%;
  padding:10px 12px !important;
  margin:5px 0 !important;
  box-sizing:border-box;
  border:1px solid var(--sp-line-strong) !important;
  border-radius:10px !important;
  font-size:14px;
  background:#fff;
  transition:.15s;
}
input:focus,select:focus{
  outline:none;
  border-color:var(--sp-green) !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
}

.dynamic-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dynamic-row input{ flex:1 1 120px; }

/* ---------- Tombol ---------- */
button{
  background:var(--sp-green);
  color:#fff;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  margin:5px 4px 5px 0;
  font-weight:600;
  font-size:14px;
  transition:.15s;
  box-shadow:var(--sp-shadow-sm);
}
button:hover{ filter:brightness(.95); transform:translateY(-1px); }
button:active{ transform:translateY(0); }

.reset-btn,.imp-btn{ background:#f59e0b !important; color:#111 !important; }
.export-btn,.sync-btn{ background:#16a085 !important; }
.print-btn{ background:var(--sp-blue) !important; }
.delete-btn{ background:#dc2626 !important; }
.pull-btn{ background:#8e44ad !important; color:#fff !important; }
.small-btn{ background:var(--sp-blue) !important; padding:8px 12px; }
.table-toggle-btn{ background:#64748b !important; font-size:12px; padding:6px 12px; }

.btn-success{ background:#16a34a !important; }
.btn-warning{ background:#f59e0b !important; color:#111 !important; }
.btn-danger{ background:#dc2626 !important; }

.action-buttons{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }

/* ---------- Tabel ---------- */
table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  font-size:13.5px;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}
th,td{ border:1px solid var(--sp-line); padding:9px 10px; text-align:left; }
th{ background:#f8fafc; color:#334155; font-weight:700; }
tbody tr:nth-child(even){ background:#fafcff; }
tbody tr:hover{ background:#f0f7ff; }
table button{ padding:6px 10px; font-size:12px; }

.responsive-table{ overflow-x:auto; border-radius:10px; }
.summary-table{ font-size:12.5px; }

/* ---------- Info box / report / timestamp ---------- */
.info-box,.report{
  background:#f8fafc;
  border:1px solid var(--sp-line);
  border-radius:10px;
  padding:12px 14px;
  margin-top:10px;
}
.timestamp{ font-size:12px; color:var(--sp-muted); margin-top:5px; }
.search-container{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.search-container input[type="text"]{ flex:1 1 160px; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.pagination button{ padding:6px 11px; margin:0; background:#fff; color:var(--sp-ink); border:1px solid var(--sp-line-strong); }
.pagination button.active,.pagination button:hover{ background:var(--sp-green); color:#fff; border-color:var(--sp-green); }

/* ---------- Modal ---------- */
.modal{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:6000; overflow:auto; }
.modal-content{
  background:#fff; margin:40px auto; padding:22px;
  border-radius:14px; max-width:96%; width:920px; max-height:86vh;
  overflow:auto; position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.close-btn{ position:sticky; top:0; float:right; background:#dc2626 !important; }

/* =========================================================================
   PETA & TRACKING (gaya aplikasi TO / Thinning Out)
   ========================================================================= */
.sp-map-box{
  position:relative;
  background:#fff;
  z-index:10;
  border:1px solid #d5dde6;
  border-radius:var(--sp-radius);
  margin:18px 0 8px;
  overflow:hidden;
  box-shadow:var(--sp-shadow);
}
.sp-map-box.full{ position:fixed; inset:8px; z-index:5000; margin:0; }
.sp-map-box.full #geo-map{ height:calc(100vh - 78px) !important; }

#geo-map{
  height:360px !important;
  width:100%;
  background:#e9eef2;
  position:relative;
  pointer-events:auto !important;
  touch-action:auto !important;
}
.leaflet-container{ pointer-events:auto !important; touch-action:auto !important; font:inherit; }

#mapCenterMarker{
  position:absolute; z-index:800; left:50%; top:50%;
  width:30px; height:30px; margin-left:-15px; margin-top:-15px;
  pointer-events:none; font-size:30px; line-height:30px; text-align:center;
  color:#1976d2; user-select:none; font-weight:700;
}

/* Header peta */
.sp-map-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; background:linear-gradient(180deg,#fff,#f7fafc);
  border-bottom:1px solid var(--sp-line);
}
.sp-map-title{ font-weight:700; color:var(--sp-ink); display:flex; align-items:center; gap:7px; font-size:15px; }
.sp-map-title i{ color:var(--sp-green); }
.sp-map-status{ font-size:12px; color:var(--sp-muted); margin-top:2px; }
.sp-map-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

.sp-icon-btn,.sp-upload{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff !important; color:var(--sp-ink) !important;
  border:1px solid var(--sp-line-strong) !important;
  border-radius:10px !important; padding:8px 11px !important; margin:0 !important;
  box-shadow:none !important; font-weight:600; font-size:13px; cursor:pointer;
}
.sp-icon-btn:hover,.sp-upload:hover{ background:#f1f5f9 !important; transform:none; }
.sp-icon-btn i{ color:var(--sp-blue); }
.sp-upload i{ color:var(--sp-green); }
.sp-upload input{ display:none; }

/* Panel tracking */
.sp-track-panel{ display:none; background:#f8fafc; border-bottom:1px solid var(--sp-line); padding:12px 13px; }
.sp-track-panel.open{ display:block; }
.sp-track-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.sp-track-head b{ display:block; color:var(--sp-ink); }
.sp-track-head small{ display:block; color:var(--sp-muted); font-size:12px; }
.sp-mini-close{ background:#e2e8f0 !important; color:var(--sp-ink) !important; padding:6px 11px !important; margin:0 !important; border-radius:8px !important; box-shadow:none !important; }

.sp-track-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-track-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:7px !important; border-radius:12px !important; padding:11px 15px !important; margin:0 !important;
  font-weight:700; min-width:96px; color:#fff;
}
.sp-track-btn.start{ background:var(--sp-green) !important; }
.sp-track-btn.pause{ background:#f59e0b !important; color:#111 !important; }
.sp-track-btn.stop{ background:#dc2626 !important; }
.sp-track-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.sp-track-color{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--sp-line-strong);
  border-radius:12px; padding:7px 10px; background:#fff; color:#334155; font-weight:600; font-size:13px;
}
.sp-track-color input{ width:34px; height:28px; border:0; background:transparent; padding:0; margin:0; cursor:pointer; }

.sp-track-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.sp-track-stats>div{ background:#fff; border:1px solid var(--sp-line); border-radius:12px; padding:9px 11px; }
.sp-track-stats small{ display:block; color:var(--sp-muted); font-size:11px; margin-bottom:3px; }
.sp-track-stats b{ font-size:14px; color:var(--sp-ink); }

#tracking-status{
  margin-top:10px; background:#ecfdf5; border:1px solid #bbf7d0; color:#166534;
  border-radius:10px; padding:9px 11px; font-size:13px;
}
#tracking-status.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
#tracking-status.danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Storage bar */
#storage-info-section{ margin-top:16px; }
#storage-bar-wrapper{ width:100%; background:#eef2f7 !important; border-radius:8px; height:24px !important; overflow:hidden; }
#storage-bar{ height:100%; background:var(--sp-blue) !important; border-radius:8px 0 0 8px; transition:width .4s,background .4s; }
#storage-info-text{ margin-top:6px; font-size:13px; text-align:left; color:var(--sp-muted); }

/* Popup leaflet */
.leaflet-popup-content input,.leaflet-popup-content select{ width:100%; margin:4px 0; }
.leaflet-popup-content button{ width:100%; margin-top:6px; }

/* Tombol refresh pojok */
body>div[style*="flex-end"] button{ border-radius:10px !important; box-shadow:var(--sp-shadow-sm); }

/* ---------- Rapikan kontrol peta lama ---------- */
/* Judul "Peta Tracking & Placemark" bawaan disembunyikan (sudah ada di header peta). */
#map-section > h4{ display:none; }
/* Tombol Placemark lama redundan dgn toolbar; sembunyikan parent-nya bila hanya berisi tombol itu. */
#btnAddPlacemarkMap{ display:none; }
#tracking-section-legacy{ display:none !important; }
/* === Crosshair tengah peta untuk presisi placemark === */
#mapCenterMarker {
  display: block !important;
  position: absolute;
  z-index: 1000;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
#mapCenterMarker::before,
#mapCenterMarker::after {
  content: '';
  position: absolute;
  background: #000;
  opacity: 0.75;
}
/* Garis horizontal */
#mapCenterMarker::before {
  width: 22px;
  height: 2px;
  left: -11px;
  top: -1px;
}
/* Garis vertikal */
#mapCenterMarker::after {
  width: 2px;
  height: 22px;
  left: -1px;
  top: -11px;
}

/* Beri tampilan kartu rapi pada blok georeference manual (untuk peta gambar PNG/JPG). */
.sproduksi-map-actions{ margin-top:12px; }
.sproduksi-map-actions .section{ background:#f8fafc; }
.sproduksi-map-actions .section h4{ font-size:14px; color:var(--sp-muted); }

/* ---------- Responsif ---------- */
@media (max-width:760px){
  body{ padding:10px !important; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  #geo-map{ height:300px !important; }
  .sp-map-header{ flex-direction:column; align-items:flex-start; }
  .sp-map-actions{ justify-content:flex-start; width:100%; }
  .sp-icon-btn span{ display:none; }
  .sp-track-btn{ min-width:84px; flex:1; }
  .sp-track-stats{ grid-template-columns:repeat(2,1fr); }
  .judul h2:first-child{ font-size:19px; }
}
@media (max-width:480px){
  .form-grid{ grid-template-columns:1fr; }
}

/* Dark mode dasar (jika di-toggle script lama) */
body.dark-mode{ background:#0f172a !important; color:#e2e8f0; }
body.dark-mode .tabcontent,body.dark-mode .section,body.dark-mode .card-form,body.dark-mode table{ background:#1e293b; color:#e2e8f0; }
body.dark-mode th{ background:#334155; color:#e2e8f0; }
body.dark-mode td{ border-color:#334155; }
body.dark-mode input,body.dark-mode select{ background:#334155 !important; color:#e2e8f0; border-color:#475569 !important; }

/* Tombol toggle on/off di toolbar peta */
.sp-toggle-off {
  opacity: 0.45;
  filter: grayscale(60%);
}
.sp-icon-btn.sp-toggle-off:hover {
  opacity: 0.7;
  filter: grayscale(30%);
}