/* siPESAN — tampilan publik */
:root {
  --sp-primary: #0b5ed7;
  --sp-primary-dark: #0a3d8f;
  --sp-accent: #ffc107;
  --sp-ink: #0f1f3d;
  --sp-muted: #5b6b84;
  --sp-surface: #f4f7fb;
  --sp-border: #e3e9f2;
  --sp-radius: 1rem;
  --sp-shadow: 0 1px 2px rgba(15, 31, 61, .04), 0 8px 24px rgba(15, 31, 61, .06);

  --bs-primary: var(--sp-primary);
  --bs-primary-rgb: 11, 94, 215;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #26344d;
  --bs-link-color: var(--sp-primary);
  --bs-link-color-rgb: 11, 94, 215;
  --bs-link-hover-color: var(--sp-primary-dark);
  --bs-border-color: var(--sp-border);
}

body {
  background: #fff;
}
.min-w-0 { min-width: 0; }
body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sp-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}

.text-muted { color: var(--sp-muted) !important; }

.btn {
  border-radius: .65rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
}
.btn-lg { padding: .8rem 1.5rem; border-radius: .8rem; }
.btn-sm { padding: .3rem .7rem; border-radius: .5rem; }
.btn-primary {
  --bs-btn-bg: var(--sp-primary);
  --bs-btn-border-color: var(--sp-primary);
  --bs-btn-hover-bg: var(--sp-primary-dark);
  --bs-btn-hover-border-color: var(--sp-primary-dark);
  --bs-btn-active-bg: var(--sp-primary-dark);
  --bs-btn-active-border-color: var(--sp-primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--sp-primary);
  --bs-btn-border-color: var(--sp-primary);
  --bs-btn-hover-bg: var(--sp-primary);
  --bs-btn-hover-border-color: var(--sp-primary);
}
.btn-accent {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: var(--sp-ink);
}
.btn-accent:hover { background: #ffcd39; border-color: #ffcd39; color: var(--sp-ink); }

.form-control, .form-select {
  border-radius: .65rem;
  border-color: #d5deea;
  padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: #86b0ee;
  box-shadow: 0 0 0 .25rem rgba(11, 94, 215, .15);
}
.form-label { font-weight: 600; font-size: .9rem; color: var(--sp-ink); }

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  background: #fff;
  padding: .5rem 1rem;
  border-radius: .5rem;
}

/* header */
.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sp-border);
}
.site-header .navbar { padding: .65rem 0; }
.brand-pu { height: 40px; width: 40px; object-fit: contain; }
.brand-logo { height: 36px; width: auto; }
.site-header .nav-link {
  color: var(--sp-ink);
  font-weight: 500;
  padding: .5rem .85rem !important;
  border-radius: .6rem;
}
.site-header .nav-link:hover { background: var(--sp-surface); color: var(--sp-primary); }
.site-header .nav-link.active { color: var(--sp-primary); background: rgba(11, 94, 215, .08); font-weight: 600; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sp-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

/* page header */
.page-hero {
  background:
    radial-gradient(1200px 400px at 90% -20%, rgba(255, 193, 7, .18), transparent 60%),
    linear-gradient(135deg, #0a3d8f 0%, #0b5ed7 100%);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.page-hero h1 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.4rem); margin-bottom: .5rem; }
.page-hero p { color: rgba(255, 255, 255, .85); margin-bottom: 0; max-width: 46rem; }
.page-hero .badge { background: #fff; font-size: .8rem; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6); margin-bottom: .75rem; font-size: .875rem; }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.page-hero .breadcrumb .active { color: #fff; }

.section { padding: 4rem 0; }
.section-sm { padding: 2.5rem 0; }
.section-alt { background: var(--sp-surface); }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-primary);
  margin-bottom: .5rem;
}
.section-title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: .75rem; }

/* home hero */
.home-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(115deg, rgba(10, 30, 70, .94) 0%, rgba(10, 61, 143, .86) 45%, rgba(11, 94, 215, .45) 100%), url(../img/banner8.jpg) center / cover no-repeat;
}
.home-hero .container { position: relative; padding-top: 5.5rem; padding-bottom: 6rem; }
.home-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; line-height: 1.12; }
.home-hero h1 .highlight { color: var(--sp-accent); }
.home-hero .lead { color: rgba(255, 255, 255, .88); max-width: 38rem; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* stat cards */
.stats-wrap { margin-top: -3.5rem; position: relative; z-index: 2; }
.stat-card {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: 1.35rem 1.5rem;
  height: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.stat-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(11, 94, 215, .1);
  color: var(--sp-primary);
}
.stat-icon.green { background: rgba(25, 135, 84, .1); color: #198754; }
.stat-icon.amber { background: rgba(255, 193, 7, .18); color: #a37500; }
.stat-icon.red { background: rgba(220, 53, 69, .1); color: #dc3545; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--sp-ink); line-height: 1.1; }
.stat-label { font-size: .875rem; color: var(--sp-muted); }

/* generic cards */
.card-soft {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}
.card-soft > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--sp-border);
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--sp-ink);
}
.card-soft > .card-body { padding: 1.25rem; }

.feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.feature-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: var(--sp-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.feature p { font-size: .925rem; color: var(--sp-muted); margin-bottom: 0; }

.about-img {
  border-radius: calc(var(--sp-radius) * 1.25);
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 320px;
  box-shadow: var(--sp-shadow);
}

.cta-band {
  border-radius: calc(var(--sp-radius) * 1.5);
  background: linear-gradient(135deg, #0a3d8f, #0b5ed7);
  color: #fff;
  padding: 2.5rem;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); }

/* map */
#home-map {
  height: 520px;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow);
  z-index: 1;
}
.map-legend {
  background: #fff;
  padding: .6rem .8rem;
  border-radius: .6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  font-size: .8rem;
  line-height: 1.8;
}
.map-legend img { height: 18px; margin-right: .35rem; vertical-align: -4px; }
.map-popup { min-width: 260px; max-width: 340px; font-family: var(--bs-body-font-family); }
.map-popup .title { font-weight: 700; color: var(--sp-ink); font-size: .95rem; }
.map-popup .sub { color: var(--sp-muted); font-size: .8rem; margin-bottom: .5rem; }
.map-popup table { width: 100%; font-size: .78rem; }
.map-popup th { color: var(--sp-muted); font-weight: 600; padding: .2rem .5rem .2rem 0; vertical-align: top; white-space: nowrap; }
.map-popup td { padding: .2rem 0; }
.leaflet-popup-content-wrapper { border-radius: .75rem; }

/* status badges (dipakai juga oleh helper model) */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; }
.badge-success { background: rgba(25, 135, 84, .12); color: #146c43; }
.badge-warning { background: rgba(255, 193, 7, .22); color: #8a6100; }
.badge-danger { background: rgba(220, 53, 69, .12); color: #b02a37; }
.badge-secondary { background: #eef1f5; color: #4a5568; }

/* tables */
.table-modern { margin-bottom: 0; font-size: .9rem; }
.table-modern thead th {
  background: var(--sp-surface);
  color: var(--sp-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  border-bottom: 1px solid var(--sp-border);
  white-space: nowrap;
  padding: .85rem 1rem;
}
.table-modern td { padding: .9rem 1rem; vertical-align: middle; border-color: var(--sp-border); }
.table-modern tbody tr:hover td { background: #fafcff; }
.cell-wide { min-width: 300px; }
.cell-mid { min-width: 200px; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sp-border);
}
.search-input { position: relative; min-width: 240px; flex: 1 1 260px; max-width: 420px; }
.search-input i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--sp-muted); }
.search-input input { padding-left: 2.4rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pills .btn { font-size: .825rem; padding: .35rem .8rem; border-radius: 999px; }
.empty-state { text-align: center; color: var(--sp-muted); padding: 3rem 1rem; }
.empty-state i { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* company cards */
.company-card {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: #fff;
  padding: 1.25rem;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.company-card:hover { box-shadow: var(--sp-shadow); transform: translateY(-2px); }
.company-card .icon {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: rgba(11, 94, 215, .1);
  color: var(--sp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.company-card h3 { font-size: 1rem; margin-bottom: .15rem; }
.company-card .meta { font-size: .85rem; color: var(--sp-muted); }

/* complaints */
.complaint-item { border: 1px solid var(--sp-border); border-radius: var(--sp-radius); background: #fff; overflow: hidden; }
.complaint-item .body { padding: 1.1rem 1.25rem; }
.complaint-item h3 { font-size: 1rem; margin-bottom: .35rem; }
.complaint-item p { margin-bottom: 0; white-space: pre-line; }
.complaint-reply {
  background: #f0f6ff;
  border-top: 1px solid #d9e7fb;
  padding: .9rem 1.25rem;
  font-size: .925rem;
}
.complaint-reply .who { font-size: .78rem; font-weight: 700; color: var(--sp-primary); text-transform: uppercase; letter-spacing: .04em; }

/* auth */
.auth-wrap { padding: 3.5rem 0; background: var(--sp-surface); }
.auth-card { border: 1px solid var(--sp-border); border-radius: calc(var(--sp-radius) * 1.25); background: #fff; box-shadow: var(--sp-shadow); overflow: hidden; }
.auth-aside {
  background: linear-gradient(160deg, rgba(10, 30, 70, .92), rgba(11, 94, 215, .85)), url(../img/bendungan-login.jpg) center / cover no-repeat;
  color: #fff;
  padding: 2.5rem;
  height: 100%;
}
.auth-aside h2 { color: #fff; }
.auth-aside p, .auth-aside li { color: rgba(255, 255, 255, .88); }
.auth-form { padding: 2.5rem; }
.password-toggle { cursor: pointer; }

/* account / permit detail */
.profile-card .profile-head { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--sp-border); }
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0a3d8f, #0b5ed7);
  color: #fff;
  font-weight: 800;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: .85rem 1.25rem; border-bottom: 1px solid var(--sp-border); }
.info-list li:last-child { border-bottom: 0; }
.info-list .label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); font-weight: 700; margin-bottom: .15rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; }
.detail-grid > div { padding: .85rem 1.25rem; border-bottom: 1px solid var(--sp-border); }
.detail-grid .label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); font-weight: 700; margin-bottom: .15rem; }
.permit-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--sp-border);
}
.permit-item:last-child { border-bottom: 0; }

.quarter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.quarter {
  border: 1px solid var(--sp-border);
  border-radius: .75rem;
  padding: .7rem .75rem;
  background: #fff;
  font-size: .85rem;
}
.quarter.done { border-color: rgba(25, 135, 84, .35); background: rgba(25, 135, 84, .05); }
.quarter .q-title { font-weight: 700; color: var(--sp-ink); display: flex; justify-content: space-between; align-items: center; }
.quarter .q-actions { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.quarter .q-actions .btn { font-size: .75rem; padding: .2rem .5rem; }
.year-block + .year-block { margin-top: 1rem; }
.year-block h4 { font-size: .9rem; color: var(--sp-muted); margin-bottom: .5rem; }

/* footer */
.site-footer { background: #0b1a33; color: rgba(255, 255, 255, .72); font-size: .925rem; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-logo { height: 52px; width: auto; background: #fff; padding: .45rem .75rem; border-radius: .65rem; }
.footer-title { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer-contact li { display: flex; gap: .65rem; margin-bottom: .6rem; }
.footer-contact i { color: var(--sp-accent); }
.footer-links li { margin-bottom: .45rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1030;
  box-shadow: 0 6px 18px rgba(11, 94, 215, .35);
}
.back-to-top.show { opacity: 1; visibility: visible; }

.prose p { line-height: 1.75; }
.prose ol li { margin-bottom: .5rem; line-height: 1.7; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse { border-top: 1px solid var(--sp-border); margin-top: .65rem; padding-top: .5rem; }
  .home-hero .container { padding-top: 3.5rem; padding-bottom: 5rem; }
  #home-map { height: 420px; }
}

@media (max-width: 575.98px) {
  .brand-logo { height: 30px; }
  .brand-pu { height: 34px; width: 34px; }
  .section { padding: 2.75rem 0; }
  .page-hero { padding: 2.5rem 0 2.25rem; }
  .auth-form, .auth-aside { padding: 1.75rem; }
  .cta-band { padding: 1.75rem; }
  .quarter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-input { min-width: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* daftar izin: tabel tanpa scroll horizontal, berubah jadi kartu di layar kecil */
.table-stack { table-layout: auto; width: 100%; }
.table-stack .col-no { width: 3.5rem; }
.table-stack .col-validity { width: 15rem; }
.table-stack .col-debit { width: 9rem; }
.table-stack .col-op { width: 6.5rem; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toolbar .search-input .btn { flex: 0 0 auto; }

.pagination-modern { gap: .3rem; }
.pagination-modern .page-link {
  border-radius: .55rem !important;
  border: 1px solid var(--sp-border);
  color: var(--sp-ink);
  min-width: 2.35rem;
  text-align: center;
  font-weight: 600;
  font-size: .875rem;
}
.pagination-modern .page-item.active .page-link { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.pagination-modern .page-item.disabled .page-link { color: #a0aec0; background: #fff; }

@media (max-width: 991.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100% !important; }
  .table-stack tr:not(.empty-row) { border-bottom: 1px solid var(--sp-border); padding: .75rem 0; }
  .table-stack td { border: 0; padding: .3rem 1.25rem; text-align: left !important; }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sp-muted);
    margin-bottom: .1rem;
  }
  .table-stack td.col-no { display: none; }
  .table-stack tbody tr:hover td { background: transparent; }
}