:root {
  --alr-green: #16a34a;
  --alr-green-dark: #15803d;
  --alr-yellow: #f59e0b;
  --alr-red: #dc2626;
  /* Token warna & bentuk mengikuti konsep ALR EcoVision v2.3 */
  --eco1: #0e7c47;
  --eco2: #16a34a;
  --eco3: #e8f6ec;
  --ink: #173b2b;
  --bg: #f3f8f4;
  --surface: #fff;
  --surface2: #f5faf6;
}
body { background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; color: var(--ink); }
.card { border: 0; border-radius: 20px; box-shadow: 0 5px 25px rgba(23,59,43,.07); }
.btn-success { background: var(--eco1); border-color: var(--eco1); }
.btn-success:hover { background: #0b5837; border-color: #0b5837; }
.btn-outline-success { color: var(--eco1); border-color: var(--eco1); }
.badge.bg-success { background: var(--eco1) !important; }
.navbar { background: var(--surface) !important; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.navbar-brand { color: var(--eco1) !important; }
.public-badge { background: var(--eco3); color: var(--eco1); border-radius: 999px; padding: 4px 12px; font-size: .75rem; font-weight: 600; letter-spacing: .03em; }

/* Halaman login: satu form terpadu, modern & responsif */
.login-wrap { max-width: 440px; position: relative; z-index: 1; }
.login-emoji { font-size: 2.5rem; line-height: 1; }
.login-card { border-radius: 24px; box-shadow: 0 20px 50px rgba(14,124,71,.15); }
.login-card .input-group-text { border-color: #dfe7e2; }
.login-card .form-control { border-color: #dfe7e2; }
.login-card .form-control:focus { box-shadow: none; border-color: var(--eco1); }
.login-body { min-height: 100vh; background: radial-gradient(circle at 15% 20%, #eafcf1 0%, #f3f8f4 45%, #f3f8f4 100%); overflow: hidden; position: relative; }
.login-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: 0; pointer-events: none; }
.login-blob-1 { width: 340px; height: 340px; background: #bbf7d0; top: -80px; left: -100px; }
.login-blob-2 { width: 300px; height: 300px; background: #86efac; bottom: -100px; right: -80px; }
@media (max-width: 480px) {
  .login-wrap { padding: 0 .5rem; }
  .login-card { border-radius: 18px; }
}

/* Grid berwarna untuk kesimpulan pemeriksaan (dipakai Fase 3) */
.grid-legend span { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: .82rem; color: #456; }
.grid-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hero-section { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); }
.hero-illustration { border: 1px dashed #bbf7d0; }

/* ===== Hero terpusat gaya ALR EcoVision v6.0 (halaman awal) =====
   Badge kecil "TANPA LOGIN" di atas judul besar, dengan stepper 3 langkah
   di bawahnya untuk menggambarkan alur Foto -> Preview -> Kesimpulan. */
.hero-centered { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); text-align: center; }
.hero-centered .public-badge { display: inline-block; }
.eco-stepper { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 560px; margin: 0 auto; }
.eco-stepper .step { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; width: 92px; }
.eco-stepper .step span { width: 34px; height: 34px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; }
.eco-stepper .step.active span { background: var(--eco1); color: #fff; }
.eco-stepper .step b { font-size: .8rem; margin-top: 4px; }
.eco-stepper .step small { color: #9ca3af; font-size: .68rem; }
.eco-stepper .step-line { flex: 1 1 auto; height: 2px; background: #e5e7eb; margin-top: -18px; min-width: 20px; }
@media (max-width: 480px) {
  .eco-stepper .step { width: 74px; }
  .eco-stepper .step b { font-size: .72rem; }
}
.step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--alr-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.upload-drop { border: 2px dashed #d1d5db; cursor: pointer; transition: .15s; }
.upload-drop:hover { border-color: var(--alr-green); background: #f0fdf4; }
.tab-pane-alr.d-none { display: none !important; }

/* ===== Kotak Kamera (perbaikan bug tampilan + gaya modern) =====
   Sebelumnya elemen <video>/<img> di dalam .ratio tidak diberi
   object-fit, sehingga gambar kamera tampak gepeng/melar dan tidak
   presisi mengikuti bingkai. Sekarang video selalu mengisi kotak
   secara proporsional (cover) baik di desktop maupun mobile. */
.camera-box { position: relative; }
.camera-box .ratio, .camera-box.ratio { background: #0b1512; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.camera-box video,
.camera-box img { width: 100%; height: 100%; object-fit: cover; background: #0b1512; display: block; }
.camera-box video.mirror { transform: scaleX(-1); }

/* Bug tampilan: memakai rasio Bootstrap murni (.ratio-4x3) membuat kotak
   kamera terlalu tinggi di layar lebar (tinggi mengikuti lebar kolom),
   sehingga halaman jadi harus discroll untuk melihat tombol di
   bawahnya. Di sini tinggi kotak kamera dibatasi langsung memakai satuan
   viewport (vh) supaya selalu pas dengan tinggi layar, di desktop maupun
   mobile, dan tombol aksi selalu terlihat tanpa scroll berlebih. */
.camera-box.ratio { height: min(44vh, 380px); }
.camera-box.ratio::before { content: none; padding-top: 0; }
@media (max-width: 576px) {
  .camera-box.ratio { height: min(36vh, 300px); }
}
/* Bingkai sudut ala "viewfinder" supaya terasa modern & jelas area bidiknya */
.camera-box .scan-frame { position: absolute; inset: 14px; pointer-events: none; z-index: 2; }
.camera-box .scan-frame::before,
.camera-box .scan-frame::after,
.camera-box .scan-frame span::before,
.camera-box .scan-frame span::after { content: ''; position: absolute; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.85); }
.camera-box .scan-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.camera-box .scan-frame::after { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.camera-box .scan-frame span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.camera-box .scan-frame span::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.camera-box .scan-line { position: absolute; left: 14px; right: 14px; height: 2px; background: linear-gradient(90deg, transparent, var(--alr-green), transparent); z-index: 2; animation: alr-scan 2.6s ease-in-out infinite; opacity: .85; }
@keyframes alr-scan { 0% { top: 14px; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { top: calc(100% - 16px); opacity: 0; } }
.camera-box .camera-status-pill { position: absolute; top: 10px; right: 10px; z-index: 3; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.camera-box .camera-status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.camera-box .camera-status-pill.live .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: alr-pulse 1.6s infinite; }
.camera-box .camera-status-pill .status-text { display: none; }
@keyframes alr-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
@media (max-width: 576px) {
  .camera-box .scan-frame { inset: 8px; }
  .camera-box .scan-frame::before, .camera-box .scan-frame::after,
  .camera-box .scan-frame span::before, .camera-box .scan-frame span::after { width: 18px; height: 18px; border-width: 2.5px; }
}

.score-circle {
  width: 130px; height: 130px; border-radius: 50%;
  border: 8px solid var(--alr-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 800; color: #1f2937;
}

/* Admin shell */
.admin-shell { min-height: 100vh; }
.sidebar { width: 250px; flex-shrink: 0; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
}
/* Bug: menu sidebar tidak bisa discroll saat daftar menu lebih panjang
   dari tinggi layar (mis. banyak menu di layar pendek/zoom besar).
   offcanvas-body diberi flex-column dengan tinggi tetap 100vh tapi tanpa
   overflow, sehingga item paling bawah terpotong & tidak terjangkau.
   Sekarang area menu (nav) scroll sendiri, sementara header & footer
   sidebar tetap terlihat (sticky). */
.sidebar .offcanvas-body { min-height: 0; }
.sidebar .nav.flex-column { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch; }
.sidebar .nav.flex-column::-webkit-scrollbar { width: 6px; }
.sidebar .nav.flex-column::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.sidebar .nav-link { border-radius: 12px; transition: .15s; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.12); }
.sidebar .nav-link.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.admin-content { min-width: 0; }
.stat-card {
  background: #fff; border-radius: 16px; padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.04);
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--stat-accent, #16a34a), transparent 140%);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.stat-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .5rem;
}
.stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-top: .15rem; }
.stat-sub { font-size: .74rem; color: #9ca3af; margin-top: .35rem; }

/* Sapaan singkat di atas dashboard - dibuat ringan (bukan card besar)
   supaya tidak menambah "berat" visual, sekadar konteks cepat: siapa
   yang login & kapan halaman terakhir dimuat. */
.dash-greeting { color: #6b7280; font-size: .85rem; }
.dash-greeting .dot-sep { margin: 0 .4rem; opacity: .5; }

#resultCanvas { background: #f3f4f6; }

/* ===== Panel Pemantauan Kamera (gaya CCTV) di Dashboard Admin ===== */
.cctv-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cctv-tile { background: #0b1512; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.cctv-tile .cctv-frame { position: relative; aspect-ratio: 4 / 3; background: #10201a; }
.cctv-tile .cctv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cctv-tile .cctv-offline { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; gap: 6px; }
.cctv-tile .cctv-offline i { font-size: 1.8rem; opacity: .6; }
.cctv-tile .cctv-badge { position: absolute; top: 8px; left: 8px; font-size: .68rem; padding: 3px 9px; border-radius: 999px; display: flex; align-items: center; gap: 5px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; }
.cctv-tile .cctv-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #6b7280; }
.cctv-tile .cctv-badge.live .dot { background: #22c55e; animation: alr-pulse 1.6s infinite; }
.cctv-tile .cctv-score { position: absolute; top: 8px; right: 8px; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 2; color: #fff; }
.cctv-tile .cctv-caption { padding: 10px 12px; background: #12241d; color: #e5f5ea; }
.cctv-tile .cctv-caption .name { font-weight: 700; font-size: .86rem; }
.cctv-tile .cctv-caption .meta { font-size: .72rem; color: #9db8a8; margin-top: 2px; }

/* ===== Kartu Titik Lokasi (menu terpadu Titik & Operasional) =====
   Menggabungkan Pemeriksaan, Lokasi & Peta, Penjadwalan, dan Tugas dalam
   satu kartu ringkas per titik: live kamera (kalau ada) + kontrol cepat. */
.point-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.point-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.point-cam { position: relative; aspect-ratio: 16 / 10; background: #10201a; }
.point-cam-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.point-cam-offline, .point-cam-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; gap: 4px; font-size: .72rem; }
.point-cam-empty { background: #f3f4f6; color: #9ca3af; }
.point-cam-offline i, .point-cam-empty i { font-size: 1.5rem; opacity: .6; }
.point-cam-badge { position: absolute; top: 8px; right: 8px; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.point-cam-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; }
.point-cam-badge.live .dot { background: #22c55e; animation: alr-pulse 1.6s infinite; }
.point-score { position: absolute; top: 8px; left: 8px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; z-index: 2; color: #fff; }
.point-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; }

/* ===== Sampel & Label AI (section: fitur admin - foto & label seperti
   di ALR AI Server, native di Core) ===== */
.ais-thumbs { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.ais-thumb { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; aspect-ratio: 4/3; background: #f3f4f6; }
.ais-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ais-thumb.active { border-color: #16a34a; }
.ais-thumb-check, .ais-thumb-final { position: absolute; top: 4px; font-size: .8rem; background: rgba(0,0,0,.6); color: #fff; border-radius: 999px; padding: 1px 6px; }
.ais-thumb-check { right: 4px; background: #16a34a; }
.ais-thumb-final { left: 4px; }
.ais-canvas-wrap { background: #f3f4f6; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.ais-canvas-wrap canvas { max-width: 100%; display: block; cursor: crosshair; }
.ais-class-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .78rem; cursor: pointer; }
.ais-class-btn.active { color: #fff; border-color: transparent; }

/* ===== Kolase Foto & Riwayat (panel detail titik di tab Peta) =====
   Grid foto kotak, meniru gaya kolase eco-amanah-ai: tiap foto punya
   skor + tanggal di bawahnya dan tautan "Detail". */
.point-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.point-collage-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; flex-direction: column; border: 1px solid #eef2f0; }
.point-collage-photo { position: relative; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.point-collage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.point-collage-score { position: absolute; top: 5px; left: 5px; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; z-index: 1; }
.point-collage-meta { padding: 6px 8px; font-size: .68rem; color: #6b7280; }
.point-collage-meta a { font-size: .68rem; }
.point-collage-ref-badge { position: absolute; bottom: 5px; right: 5px; font-size: .6rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; z-index: 1; }
@media (max-width: 576px) { .point-collage { grid-template-columns: repeat(2, 1fr); } }