/* =====================================================
   SIPPS Intelijen — Design System 2026
   ===================================================== */

:root {
  --sipps-primary: #0e6b3f;
  --sipps-primary-dark: #06432a;
  --sipps-primary-light: #17864f;
  --sipps-gold: #cc9f3b;
  --sipps-gold-light: #e0bc63;
  --sipps-bg: #f5f7f6;
  --sipps-card: #ffffff;
  --sipps-border: #e5e9e7;
  --sipps-text: #16211b;
  --sipps-muted: #6b7770;
  --sipps-danger: #c0392b;
  --sipps-shadow: 0 1px 2px rgba(15,40,25,.04), 0 8px 24px rgba(15,40,25,.06);
  --sipps-shadow-hover: 0 4px 10px rgba(15,40,25,.06), 0 16px 32px rgba(14,107,63,.12);
  --sipps-radius: 18px;
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6,.navbar-brand,.kpi-value,.fw-bold,.fw-semibold,strong,b,.btn { font-family: var(--font-display); }

body {
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(14,107,63,0.06), transparent 60%),
    radial-gradient(900px 400px at -5% 10%, rgba(204,159,59,0.07), transparent 55%),
    var(--sipps-bg);
  color: var(--sipps-text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.01em; font-weight: 800; }

/* ===== Navbar ===== */
.login-bg { background: linear-gradient(160deg, #0e6b3f 0%, #06432a 60%, #042d1c 100%); }
.navbar-top {
  background: linear-gradient(100deg, var(--sipps-primary) 0%, var(--sipps-primary-dark) 100%);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(204,159,59,.55), 0 6px 20px rgba(6,67,42,.18);
  position: sticky; top: 0; z-index: 1030; height: 62px;
}
.navbar-top .navbar-brand, .navbar-top .small, .navbar-top .btn { color: #fff !important; }
.navbar-top .navbar-brand { font-weight: 800; letter-spacing: -0.01em; }
.navbar-top .btn-outline-secondary { border-color: rgba(255,255,255,.35); border-radius: 10px; backdrop-filter: blur(6px); transition: all .15s; }
.navbar-top .btn-outline-secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); transform: translateY(-1px); }

/* ===== Sidebar ===== */
.sidebar {
  width: 232px; min-height: calc(100vh - 62px);
  background: var(--sipps-card);
  border-right: 1px solid var(--sipps-border);
  padding: 1.1rem 0.7rem;
  position: sticky; top: 62px;
}
.sidebar .nav-link {
  color: #4c5851; border-radius: 12px; padding: 0.62rem 0.85rem; margin-bottom: 3px;
  font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: .6rem;
  position: relative; transition: background .15s, color .15s, padding-left .15s;
}
.sidebar .nav-link i { font-size: 1.02rem; width: 18px; text-align: center; opacity: .85; }
.sidebar .nav-link:hover { background: #eef6f1; color: var(--sipps-primary-dark); padding-left: 1.05rem; }
.sidebar .nav-link.active {
  background: linear-gradient(95deg, var(--sipps-primary), var(--sipps-primary-light));
  color: #fff; box-shadow: 0 6px 16px rgba(14,107,63,.28);
}
.sidebar .nav-link.active i { opacity: 1; }
@media (max-width: 991px) {
  .sidebar { position: fixed; left: -250px; top: 62px; z-index: 1020; transition: left .25s cubic-bezier(.2,.8,.2,1); box-shadow: 8px 0 30px rgba(0,0,0,.15); }
  .sidebar.show { left: 0; }
}

/* ===== Cards ===== */
.card, .kpi-card {
  background: var(--sipps-card);
  border: 1px solid var(--sipps-border);
  border-radius: var(--sipps-radius);
  box-shadow: var(--sipps-shadow);
  animation: fadeInUp .35s ease both;
}
.kpi-card {
  padding: 1.15rem 1.3rem;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sipps-primary), var(--sipps-gold));
}
.kpi-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(14,107,63,.25), transparent);
  opacity: 0; transition: opacity .2s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--sipps-shadow-hover); }
.kpi-card:hover::after { opacity: 1; }
.kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--sipps-primary-dark); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .2s; }
.kpi-label { color: var(--sipps-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: .6rem; }
.bg-icon-green { background: rgba(14,107,63,.10); color: var(--sipps-primary); }
.bg-icon-gold { background: rgba(204,159,59,.15); color: #a67f22; }
.bg-icon-success { background: rgba(23,138,82,.10); color: #178a52; }
.bg-icon-warning { background: rgba(204,159,59,.15); color: #a67f22; }
.bg-icon-danger { background: rgba(192,57,43,.10); color: var(--sipps-danger); }

.dash-greeting { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; font-family: var(--font-display); }
.section-card-title { font-weight: 800; font-family: var(--font-display); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Tables ===== */
.table { color: var(--sipps-text); }
.table thead { background: #f0f5f2; }
.table thead th { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sipps-muted); border-bottom: none; }
.table-hover tbody tr { transition: background .12s; }
.table-hover tbody tr:hover { background: #f4f9f6; }

/* ===== Links & buttons ===== */
a { text-decoration: none; color: var(--sipps-primary-dark); transition: color .12s; }
a:hover { color: var(--sipps-primary); }
.btn { border-radius: 11px; font-weight: 700; font-size: .875rem; transition: all .15s ease; }
.btn-sm { border-radius: 9px; }
.btn-primary { background: linear-gradient(95deg, var(--sipps-primary), var(--sipps-primary-light)); border: none; box-shadow: 0 4px 12px rgba(14,107,63,.28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,107,63,.36); background: linear-gradient(95deg, var(--sipps-primary-dark), var(--sipps-primary)); }
.btn-outline-secondary { border-color: var(--sipps-border); color: var(--sipps-text); }
.btn-outline-secondary:hover { background: var(--sipps-primary-dark); border-color: var(--sipps-primary-dark); transform: translateY(-1px); color: #fff; }

/* ===== Forms ===== */
.form-control, .form-select { border-radius: 10px; border-color: var(--sipps-border); padding: .5rem .8rem; transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: var(--sipps-primary-light); box-shadow: 0 0 0 3px rgba(14,107,63,.13); }
.form-label { font-weight: 600; font-size: .82rem; color: #3a453e; }

/* ===== Tabs ===== */
.nav-tabs { border-bottom: 1px solid var(--sipps-border); gap: .25rem; }
.nav-tabs .nav-link { border: none; color: var(--sipps-muted); font-weight: 600; border-radius: 10px 10px 0 0; padding: .55rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--sipps-primary-dark); background: #f4f9f6; }
.nav-tabs .nav-link.active { color: var(--sipps-primary-dark); background: transparent; border-bottom: 3px solid var(--sipps-gold); font-weight: 800; }

/* ===== Misc ===== */
#map, #peta-full, #mini-map { border-radius: var(--sipps-radius); border: 1px solid var(--sipps-border); }
.badge { font-weight: 700; letter-spacing: .01em; border-radius: 8px; padding: .4em .65em; }
.badge.bg-success { background-color: #178a52 !important; }
.badge.bg-warning { background-color: var(--sipps-gold) !important; }
.badge.bg-danger { background-color: var(--sipps-danger) !important; }

.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; position:relative; top:-1px; }
.status-dot::after { content:''; position:absolute; inset:0; border-radius:50%; animation: pulseDot 1.8s ease-out infinite; }
.status-dot.dot-hijau { background:#178a52; } .status-dot.dot-hijau::after { background:#178a52; }
.status-dot.dot-kuning { background:var(--sipps-gold); } .status-dot.dot-kuning::after { background:var(--sipps-gold); }
.status-dot.dot-merah { background:var(--sipps-danger); } .status-dot.dot-merah::after { background:var(--sipps-danger); }
@keyframes pulseDot { 0% { transform: scale(1); opacity:.55; } 100% { transform: scale(2.4); opacity:0; } }

/* ===== Card Proyek (grid) ===== */
.proyek-card { border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.proyek-card:hover { transform: translateY(-4px); box-shadow: var(--sipps-shadow-hover); }
.proyek-card-photo { position: relative; height: 148px; background: linear-gradient(135deg,#eef4f0,#e4ede7); }
.proyek-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.proyek-card:hover .proyek-card-photo img { transform: scale(1.05); }
.proyek-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #b6c2bd; }
.proyek-card-badge { position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* ===== Site Visit Feed ===== */
.feed-item { border-radius: 18px; overflow: hidden; margin-bottom: 1rem; animation: fadeInUp .35s ease both; }
.feed-item-photo { width: 100%; max-height: 320px; object-fit: cover; background: #eef2f0; }
.feed-item-header { display:flex; align-items:center; gap:.6rem; padding: .9rem 1rem .4rem; }
.feed-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--sipps-primary),var(--sipps-primary-light)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.feed-item-body { padding: .6rem 1rem 1rem; }

/* ===== Early Warning ===== */
.ew-card { border-left: 4px solid var(--sipps-gold); transition: transform .15s; }
.ew-card.ew-danger { border-left-color: var(--sipps-danger); }
.ew-card:hover { transform: translateX(2px); }

/* ===== Monitoring PPS Timeline ===== */
.pps-timeline { position: relative; padding-left: 30px; }
.pps-timeline::before { content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: var(--sipps-border); }
.pps-step { position: relative; padding-bottom: 1.3rem; }
.pps-step:last-child { padding-bottom: 0; }
.pps-step-dot { position:absolute; left:-30px; top:4px; width:17px; height:17px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px var(--sipps-border), 0 2px 6px rgba(0,0,0,.08); }
.pps-step-content { background:#fafcfb; border:1px solid var(--sipps-border); border-radius:12px; padding:.75rem 1rem; transition: box-shadow .15s; }
.pps-step-content:hover { box-shadow: var(--sipps-shadow); }

/* ===== Dark Mode ===== */
[data-bs-theme="dark"] {
  --sipps-bg: #0d1310; --sipps-card: #171f1a; --sipps-border: #29342d; --sipps-text: #e7ede9; --sipps-muted: #90a099;
  --sipps-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --sipps-shadow-hover: 0 4px 10px rgba(0,0,0,.35), 0 16px 32px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] body {
  background: radial-gradient(1200px 500px at 90% -10%, rgba(14,107,63,0.12), transparent 60%), radial-gradient(900px 400px at -5% 10%, rgba(204,159,59,0.08), transparent 55%), var(--sipps-bg);
}
[data-bs-theme="dark"] .sidebar { background: var(--sipps-card); border-color: var(--sipps-border); }
[data-bs-theme="dark"] .sidebar .nav-link { color: #b7c2bb; }
[data-bs-theme="dark"] .sidebar .nav-link:hover { background: #1f2922; color: #fff; }
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .kpi-card { background: var(--sipps-card); border-color: var(--sipps-border); }
[data-bs-theme="dark"] .kpi-value { color: #6fd39c; }
[data-bs-theme="dark"] .table thead { background: #1c2620; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: #1a231d; }
[data-bs-theme="dark"] a { color: #6fd39c; }
[data-bs-theme="dark"] a:hover { color: #93e0b6; }
[data-bs-theme="dark"] .proyek-card-photo { background: #222a24; }
[data-bs-theme="dark"] .proyek-card-noimg { color: #4d5951; }
[data-bs-theme="dark"] .pps-step-content { background: #171d19; border-color: var(--sipps-border); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #171f1a; border-color: var(--sipps-border); color: var(--sipps-text); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #171f1a; color: var(--sipps-text); }
[data-bs-theme="dark"] .lp-navbar.scrolled { background: rgba(13,19,16,.92); }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { background: #1a231d; }
[data-bs-theme="dark"] .bg-icon-green { background: rgba(111,211,156,.14); }
[data-bs-theme="dark"] .bg-icon-gold, [data-bs-theme="dark"] .bg-icon-warning { background: rgba(224,188,99,.16); color: var(--sipps-gold-light); }
[data-bs-theme="dark"] .bg-icon-success { background: rgba(23,138,82,.18); }
[data-bs-theme="dark"] .bg-icon-danger { background: rgba(192,57,43,.18); }

/* ===== GIS Full-Screen ===== */
.gis-fullscreen { position: relative; margin: -1rem -1rem -1rem -1rem; height: calc(100vh - 62px); }
@media (min-width: 768px) { .gis-fullscreen { margin: -1.5rem -1.5rem -1.5rem -1.5rem; } }
#peta-full { width: 100%; height: 100%; border-radius: 0; border: none; }
.gis-toolbar { position: absolute; top: 16px; left: 16px; z-index: 500; background: var(--sipps-card); border: 1px solid var(--sipps-border); border-radius: 14px; padding: 1rem; width: 220px; box-shadow: var(--sipps-shadow-hover); }
.gis-legend { position: absolute; bottom: 20px; left: 16px; z-index: 500; background: var(--sipps-card); border: 1px solid var(--sipps-border); border-radius: 14px; padding: .85rem 1.05rem; box-shadow: var(--sipps-shadow-hover); width: 190px; }
.gis-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gis-live-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(192,57,43,.92); color:#fff; padding:.3rem .8rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.03em; }
.gis-live-badge .dot { width:8px; height:8px; border-radius:50%; background:#fff; animation: mapPulse 1.4s ease-out infinite; }
@keyframes mapPulse { 0% { transform: scale(0.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 767px) { .gis-toolbar, .gis-legend { width: calc(100% - 32px); } .gis-legend { display: none; } }

/* ===== Step Wizard ===== */
.wizard-steps { display: flex; justify-content: space-between; overflow-x: auto; padding-bottom: 4px; }
.wizard-step { flex: 1; min-width: 70px; text-align: center; position: relative; }
.wizard-step::after { content:''; position:absolute; top:15px; left:50%; width:100%; height:2px; background: var(--sipps-border); z-index:0; }
.wizard-step:last-child::after { display:none; }
.wizard-dot { width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--sipps-border); color:var(--sipps-muted); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; margin:0 auto 6px; position:relative; z-index:1; transition: all .25s cubic-bezier(.2,.8,.2,1); }
.wizard-label { font-size:.72rem; color:var(--sipps-muted); font-weight:600; }
.wizard-step.active .wizard-dot { background: linear-gradient(135deg,var(--sipps-primary),var(--sipps-primary-light)); border-color: var(--sipps-primary); color:#fff; box-shadow: 0 4px 12px rgba(14,107,63,.35); transform: scale(1.1); }
.wizard-step.active .wizard-label { color: var(--sipps-primary-dark); font-weight:800; }
.wizard-step.done .wizard-dot { background: var(--sipps-gold); border-color: var(--sipps-gold); color:#fff; }
.wizard-step.done .wizard-label { color: var(--sipps-primary-dark); }
[data-bs-theme="dark"] .wizard-dot { background: var(--sipps-card); }