/* ============================================================
   Lapor UBBG — Design System v2.0
   Color tokens terpusat + Dark mode + Typography scale
   Brand: Biru (#1c84c6) + Oranye aksen (#d97706) — OPENSIMKA style
   ============================================================ */

/* ===== FONTS (Google Fonts CDN — konsisten dengan Bootstrap/jQuery/SweetAlert/FA yang sudah CDN) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== DESIGN TOKENS — LIGHT ===== */
:root {
  /* Brand */
  --brand-50:  #eef6fc;
  --brand-100: #d6eafb;
  --brand-200: #aed7f6;
  --brand-300: #7cbedf;
  --brand-400: #3fa3d8;
  --brand-500: #1c84c6;   /* primary */
  --brand-600: #1772b0;
  --brand-700: #0a5dbb;   /* primary dark */
  --brand-800: #0a3a78;
  --brand-900: #07234a;

  --accent-50:  #fef3e2;
  --accent-100: #fde9d3;
  --accent-200: #fbcf9a;
  --accent-300: #f5b062;
  --accent-400: #e89229;
  --accent-500: #d97706;   /* accent */
  --accent-600: #b85e00;
  --accent-700: #924a00;

  /* Semantic */
  --success-500: #16a34a;
  --success-600: #15803d;
  --warning-400: #f59e0b;
  --warning-500: #d97706;
  --danger-500:  #dc2626;
  --danger-600:  #b91c1c;
  --info-500:    #2563eb;

  /* Neutral (light) */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  /* Semantic aliases */
  --bg:           var(--white);
  --bg-soft:      var(--ink-50);
  --bg-elevated:  var(--white);
  --surface:      var(--white);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --text:         var(--ink-900);
  --text-soft:    var(--ink-600);
  --text-muted:   var(--ink-500);
  --heading:      var(--ink-900);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.55;

  /* Spacing (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 8px rgba(28, 132, 198, .08);
  --shadow-md: 0 8px 24px rgba(28, 132, 198, .12);
  --shadow-lg: 0 16px 48px rgba(28, 132, 198, .18);
  --shadow-xl: 0 24px 64px rgba(28, 132, 198, .22);

  /* Motion */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--brand-400) 100%);
  /* Navbar pakai gradien lebih gelap/pekat (brand-800 → brand-600) — lebih tegas dari hero */
  --grad-navbar: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 50%, var(--brand-600) 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-400) 100%);
  --grad-mesh: radial-gradient(at 20% 10%, var(--brand-600) 0px, transparent 50%),
               radial-gradient(at 80% 0%, var(--brand-500) 0px, transparent 50%),
               radial-gradient(at 60% 90%, var(--accent-500) 0px, transparent 40%);
}

/* ===== ADMIN DARK MODE =====
   Diaktifkan hanya oleh navbar admin melalui data-bs-theme="dark". */
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-soft: #101827;
  --bg-elevated: #172033;
  --surface: #172033;
  --border: #2b3950;
  --border-strong: #3b4b63;
  --text: #e5edf7;
  --text-soft: #c2cede;
  --text-muted: #94a3b8;
  --heading: #f8fafc;
  --brand-50: #122840;
  --brand-100: #183653;
  --brand-200: #225277;
  --accent-50: #332415;
  --accent-100: #49311a;
  --ink-50: #101827;
  --ink-100: #1d293b;
  --ink-200: #2b3950;
  --ink-300: #3b4b63;
  --ink-400: #718198;
  --ink-500: #94a3b8;
  --ink-600: #c2cede;
  --ink-700: #d8e2ee;
  --ink-800: #e5edf7;
  --ink-900: #f8fafc;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .24);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .32);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .4);
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .bg-soft { background-color: var(--bg-soft) !important; color: var(--text); }
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light { background-color: var(--surface) !important; }
html[data-bs-theme="dark"] .text-dark { color: var(--text) !important; }
html[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; }
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom { border-color: var(--border) !important; }
html[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--brand-50);
  --bs-table-hover-color: var(--text);
}
html[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bg-soft);
  --bs-table-color: var(--text-soft);
  --bs-table-border-color: var(--border);
}
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled { background-color: var(--ink-100); color: var(--text-muted); }
html[data-bs-theme="dark"] .input-group-text { background: var(--ink-100); color: var(--text-soft); border-color: var(--border); }
html[data-bs-theme="dark"] .page-link { background: var(--surface); color: var(--brand-300); border-color: var(--border); }
html[data-bs-theme="dark"] .page-item.active .page-link { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .select2-dropdown {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-bs-theme="dark"] .select2-search__field { color: var(--text) !important; }
html[data-bs-theme="dark"] .select2-results__option { color: var(--text); }
html[data-bs-theme="dark"] .select2-results__option--highlighted { background: var(--brand-600) !important; color: #fff !important; }
html[data-bs-theme="dark"] .swal2-popup { background: var(--surface); color: var(--text); }
html[data-bs-theme="dark"] .swal2-title,
html[data-bs-theme="dark"] .swal2-html-container { color: var(--text); }
html[data-bs-theme="dark"] .apexcharts-text,
html[data-bs-theme="dark"] .apexcharts-legend-text { fill: var(--text-soft) !important; color: var(--text-soft) !important; }
html[data-bs-theme="dark"] .apexcharts-gridline { stroke: var(--border); }
html[data-bs-theme="dark"] .apexcharts-tooltip,
html[data-bs-theme="dark"] .apexcharts-tooltip-title { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ===== BASE ===== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--heading);
  letter-spacing: -0.02em;
}

a { color: var(--brand-600); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--brand-700); }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--accent-500);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary {
  color: var(--brand-600);
  border-color: var(--brand-300);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand-50);
  border-color: var(--brand-500);
  color: var(--brand-700);
}

/* On-color (di atas background gelap/biru) — putih solid + teks brand */
.btn-on-color {
  background: #fff;
  border: 1px solid rgba(255,255,255,.4);
  color: var(--brand-700);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.btn-on-color:hover, .btn-on-color:focus {
  background: #fff;
  color: var(--brand-800);
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.7);
  color: #fff;
  transform: translateY(-1px);
}

.btn-light {
  background: rgba(255,255,255,.9);
  border-color: transparent;
  color: var(--brand-800);
}
.btn-light:hover { background: #fff; color: var(--brand-700); }

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.5);
  animation: ripple .6s var(--ease-decelerate);
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.card.shadow-soft { box-shadow: var(--shadow-sm); }
.card.shadow-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--brand-200);
}

.card-header.bg-brand {
  background: var(--grad-brand) !important;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  border-bottom: none;
}

/* ===== SECTION ===== */
.section-title h2 {
  font-weight: 800;
  color: var(--heading);
  font-size: var(--fs-3xl);
}
.section-title .underline {
  display: inline-block;
  width: 56px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  margin-top: 0.75rem;
}

/* ===== FORMS ===== */
.form-label {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}
.form-label .req { color: var(--accent-500); margin-left: 2px; }
.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 0.65rem 0.9rem;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-500) 22%, transparent);
  background: var(--surface);
}
.form-control::placeholder { color: var(--text-muted); }
.form-text { color: var(--text-muted); font-size: var(--fs-xs); }
.form-check-input:checked {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.form-check-input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.form-check-label {
  flex: 1;
  min-width: 0;
}

/* Subtle indicator pada checkbox Pernyataan Keaslian jika belum dicentang (invalid) */
.pernyataan-wrap {
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.pernyataan-wrap:has(.form-check-input:invalid:not(:checked)) {
  border-color: color-mix(in srgb, var(--danger-500) 60%, transparent);
  background: color-mix(in srgb, var(--danger-500) 3%, transparent);
}
.pernyataan-wrap .form-check-input:invalid:not(:checked) {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-500) 22%, transparent);
}

/* ===== ALERTS ===== */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
}
.alert-info {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-800);
}
.alert-warning {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
}

/* ===== BADGES / STATUS ===== */
.badge {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.35em 0.8em;
}

/* ===== SWEETALERT BRAND ===== */
.swal-confirm-btn {
  background: var(--brand-500) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent) !important;
}
.swal-confirm-btn:hover { background: var(--brand-600) !important; }

/* ===== LOGIN BRAND LINK ===== */
.login-brand-link { transition: opacity .15s ease, transform .15s ease; }
.login-brand-link:hover { opacity: .82; transform: translateY(-1px); }
.login-brand-link:hover .bg-primary { box-shadow: var(--shadow-md); }

/* ===== UTILITY ===== */
.bg-soft { background: var(--bg-soft) !important; }
.text-accent { color: var(--accent-500) !important; }
.bg-accent-soft { background: var(--accent-50) !important; }
.kbd {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .8em;
  font-family: var(--font-mono);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== RESPONSIVE FONT SCALE ===== */
@media (max-width: 768px) {
  :root {
    --fs-5xl: 2.25rem;
    --fs-4xl: 1.875rem;
    --fs-3xl: 1.5rem;
  }
}


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- HERO ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- NAVBAR ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- FOOTER ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- PAGE_WRAP ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- STEPPER ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- TIMELINE ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK (will move to components.css in FASE 5)
   ============================================================================ */
/* ----- LOGIN ----- */


/* ============================================================================
   BACKWARD-COMPAT FALLBACK: full components.css inlined
   (akan dipindah ke /public/assets/css/components.css di FASE 5)
   ============================================================================ */

/* ============================================================
   Lapor UBBG — Reusable Components (Design System v2)
   .ds-* namespace — dipakai publik + admin
   ============================================================ */

/* ===== LAYOUT SHELL (admin) ===== */
.ds-main {
  min-height: calc(100vh - 64px);
  background: var(--bg-soft);
  padding: var(--sp-8) var(--sp-6);
}
@media (min-width: 768px) {
  .ds-main { padding: var(--sp-10) var(--sp-8); }
}
@media (min-width: 1200px) {
  .ds-main { padding: var(--sp-12) var(--sp-12); }
}

/* ===== UNIVERSAL NAVBAR ===== */
.navbar-lapor {
  background: var(--grad-navbar);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.navbar-lapor > .container,
.navbar-lapor > .container-fluid { padding: 0 var(--sp-6); }
@media (min-width: 768px) {
  .navbar-lapor > .container,
  .navbar-lapor > .container-fluid { padding: 0 var(--sp-8); }
}
@media (min-width: 1200px) {
  .navbar-lapor > .container,
  .navbar-lapor > .container-fluid { padding: 0 var(--sp-10); }
}
.navbar-lapor.is-scrolled {
  box-shadow: var(--shadow-md);
}
.navbar-lapor .navbar-brand { color: #fff; }
.navbar-lapor .brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
}
.navbar-lapor .brand-logo {
  height: 40px; width: auto;
}
.brand-logo-footer {
  height: 44px; width: auto;
}
.navbar-lapor .brand-text strong {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: .2px; line-height: 1; font-weight: 800;
}
.navbar-lapor .brand-sub {
  font-size: .72rem; color: rgba(255,255,255,.75); letter-spacing: .3px;
}
.navbar-lapor .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500; padding: .5rem .9rem !important; border-radius: var(--radius-sm);
  font-family: var(--font-display);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.navbar-lapor .nav-link:hover,
.navbar-lapor .nav-link.active {
  color: #fff !important;
  background-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.55) !important;
}
.navbar-lapor .navbar-toggler { color: #fff; border: none; }
.navbar-lapor .navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255,255,255,.3); }
.navbar-lapor .navbar-login-icon {
  min-width: 34px;
  height: 34px;
  padding: 0 .65rem;
  gap: .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
}
.navbar-lapor .navbar-login-icon:hover,
.navbar-lapor .navbar-login-icon:focus {
  color: var(--brand-800);
  background: var(--brand-50);
}
.navbar-lapor .admin-theme-toggle {
  min-width: 78px;
  justify-content: center;
}
.navbar-lapor .admin-theme-toggle i { width: 1rem; text-align: center; }

/* Topnav admin compact untuk layar laptop. Logo sengaja tidak diubah. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar-lapor.navbar-admin > .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .navbar-lapor.navbar-admin .navbar-brand {
    margin-right: .65rem;
  }
  .navbar-lapor.navbar-admin .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar-lapor.navbar-admin .navbar-nav > .nav-item {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .navbar-lapor.navbar-admin .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .45rem .48rem !important;
    font-size: .84rem;
    white-space: nowrap;
  }
  .navbar-lapor.navbar-admin .navbar-collapse > .d-flex {
    gap: .35rem !important;
    white-space: nowrap;
  }
  .navbar-lapor.navbar-admin .navbar-collapse > .d-flex .btn {
    padding: .48rem .68rem;
    gap: .3rem;
    font-size: .82rem;
  }
  .navbar-lapor.navbar-admin .admin-theme-toggle {
    min-width: 68px;
  }
}

@media (max-width: 991.98px) {
  .navbar-lapor .navbar-collapse > .d-flex {
    align-items: stretch !important;
    flex-wrap: wrap;
    padding-top: var(--sp-3);
  }
  .navbar-lapor .admin-theme-toggle { min-width: auto; }
}

/* ===== FORM (publik: form pengaduan) ===== */
.report-captcha-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--sp-2);
  max-width: 420px;
}
.report-captcha-code {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .18em;
  user-select: none;
}
@media (max-width: 575.98px) {
  .report-captcha-row { grid-template-columns: 96px minmax(0, 1fr); }
}

.form-section {
  padding: var(--sp-12) 0;
  background: var(--bg-soft);
  position: relative;
  z-index: 1;
}

/* Flatpickr default — tidak ada plugin confirmDate lagi (date-only picker) */

/* ===== HERO (publik) ===== */
.hero-lapor {
  position: relative;
  background: var(--grad-brand);
  color: #fff;
  padding: var(--sp-10) 0 var(--sp-16);
  min-height: 50vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.hero-lapor > .container { width: 100%; }
@media (min-width: 992px) {
  .hero-lapor { padding: 70px 0 200px 0; }
  #form-pengaduan { padding: 0 0 var(--sp-12) 0; }
}
.hero-lapor::before {
  /* mesh gradient overlay */
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-mesh);
  opacity: .45;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-lapor > .container { position: relative; z-index: 1; }
.hero-lapor h1 {
  font-weight: 800;
  font-size: var(--fs-5xl);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 2px 12px rgba(7,35,74,.6), 0 1px 2px rgba(0,0,0,.3);
}
.hero-lapor .lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  max-width: 680px;
  font-size: var(--fs-lg);
  text-shadow: 0 1px 6px rgba(7,35,74,.55), 0 1px 2px rgba(0,0,0,.2);
}
.hero-lapor .hero-badge {
  color: #ffffff !important;
}
.hero-lapor .hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.15);
  padding: .4rem 1rem; border-radius: var(--radius-full);
  font-size: var(--fs-sm); letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.hero-lapor .stat-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  color: #fff;
  transition: transform var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard);
}
.hero-lapor .stat-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.16);
}
.hero-lapor .stat-card .num {
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 800; line-height: 1;
}
.hero-lapor .stat-card .lbl {
  font-size: var(--fs-xs); opacity: .85; letter-spacing: .4px; text-transform: uppercase;
}

/* ===== STAT / KPI CARD (admin) ===== */
.ds-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.ds-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand);
}
.ds-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ds-stat .stat-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 600;
}
.ds-stat .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-4xl); font-weight: 800; line-height: 1.1;
  color: var(--heading); margin-top: .25rem;
}
.ds-stat.is-total::before { background: var(--ink-500); }
.ds-stat.is-waiting::before { background: var(--danger-500); }
.ds-stat.is-forwarded::before { background: var(--warning-400); }
.ds-stat.is-process::before { background: var(--info-500); }
.ds-stat.is-done::before { background: var(--success-500); }
.ds-stat.is-waiting .stat-value { color: var(--danger-500); }
.ds-stat.is-forwarded .stat-value { color: var(--warning-400); }
.ds-stat.is-process .stat-value { color: var(--info-500); }
.ds-stat.is-done .stat-value { color: var(--success-500); }

/* ===== EMPTY STATE ===== */
.ds-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-muted);
}
.ds-empty .empty-icon {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: var(--sp-4);
}
.ds-empty h5 { color: var(--text-soft); font-family: var(--font-display); }
.ds-empty p { max-width: 380px; margin: .5rem auto 0; }

/* ===== SECTION HEADER (admin page title) ===== */
.ds-section-header {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.ds-section-header h1, .ds-section-header h2, .ds-section-header h4 {
  margin: 0; font-weight: 800;
}
.ds-section-header .subtitle { color: var(--text-soft); font-size: var(--fs-sm); margin: .25rem 0 0; }

/* ===== TABLE ===== */
.ds-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ds-table { margin: 0; }
.ds-table thead th {
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--border);
}
.ds-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}
.ds-table tbody tr { transition: background var(--duration-fast); }
.ds-table tbody tr:hover { background: var(--brand-50); }
.ds-table tbody tr:last-child td { border-bottom: none; }
.admin-table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.admin-table td { vertical-align: middle; font-size: .9rem; }

/* ===== BADGE / STATUS (reusable) ===== */
.status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); font-weight: 600;
  border-radius: var(--radius-full); padding: .3rem .75rem; font-size: var(--fs-xs);
  white-space: nowrap;
}
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-menunggu   { background: color-mix(in srgb, var(--danger-500) 12%, transparent); color: var(--danger-500); }
.s-menunggu .dot { background: var(--danger-500); }
.s-diteruskan { background: color-mix(in srgb, var(--warning-400) 12%, transparent); color: var(--warning-400); }
.s-diteruskan .dot { background: var(--warning-400); }
.s-diproses, .s-ditanggapi { background: var(--brand-50); color: var(--brand-700); }
.s-diproses .dot, .s-ditanggapi .dot { background: var(--info-500); }
.s-selesai    { background: color-mix(in srgb, var(--success-500) 12%, transparent); color: var(--success-600); }
.s-selesai .dot { background: var(--success-500); }
.s-aktif      { background: color-mix(in srgb, var(--success-500) 12%, transparent); color: var(--success-600); }
.s-nonaktif   { background: var(--ink-100); color: var(--text-muted); }
.bg-status-warning { background-color: var(--warning-400) !important; color: #fff !important; }

/* ===== AVATAR ===== */
.ds-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  object-fit: cover; border: 2px solid var(--border);
  background: var(--brand-50);
}
.ds-avatar-sm { width: 32px; height: 32px; }

/* ===== TOGGLE SWITCH ===== */
.ds-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.ds-switch input { opacity: 0; width: 0; height: 0; }
.ds-switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--ink-300); border-radius: var(--radius-full);
  transition: background var(--duration-base) var(--ease-standard);
}
.ds-switch .slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.ds-switch input:checked + .slider { background: var(--brand-500); }
.ds-switch input:checked + .slider::before { transform: translateX(22px); }
.ds-switch input:focus-visible + .slider { outline: 3px solid var(--brand-200); outline-offset: 2px; }

/* ===== FILTER BAR ===== */
.ds-filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
}
.ds-filter-bar .form-group { margin: 0; flex: 1 1 200px; }

/* ===== CARD GRID ITEM (unit/kategori) ===== */
.ds-grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
  height: 100%;
}
.ds-grid-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--brand-200);
}
.ds-grid-card .grid-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--brand-50); color: var(--brand-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: var(--sp-3);
}
.ds-grid-card h5 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .25rem; }
.ds-grid-card .grid-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ===== INFO BANNER ===== */
.ds-info-banner {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--brand-800);
  display: flex; gap: .75rem; align-items: flex-start;
}
.ds-info-banner .bi-icon { color: var(--brand-500); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.ds-info-banner code {
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  padding: .1rem .35rem; border-radius: 4px; font-family: var(--font-mono); font-size: .85em;
}

/* ===== FOOTER (publik) ===== */
.footer-lapor {
  background: linear-gradient(180deg, var(--brand-900) 0%, #061a36 100%);
  color: rgba(255,255,255,.85);
  padding: var(--sp-12) 0 var(--sp-6);
}
.footer-lapor h5, .footer-lapor h6 { color: #fff; font-family: var(--font-display); }
.footer-lapor .footer-link { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--duration-fast); }
.footer-lapor .footer-link:hover { color: #fff; }
.footer-divider { border-color: rgba(255,255,255,.12); margin: var(--sp-6) 0 var(--sp-4); }
.footer-lapor .brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.15); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}

/* ===== PAGE WRAPPER (publik) ===== */
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrap > main { flex: 1; }

/* ===== STEPPER ===== */
.step-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand-50); color: var(--brand-700);
  border-radius: var(--radius-full); padding: .35rem .85rem;
  font-size: var(--fs-base); font-weight: 600; letter-spacing: .3px;
  font-family: var(--font-display);
}

/* ===== TIMELINE (tracker / detail) ===== */
.timeline-item { position: relative; padding-left: 2.25rem; padding-bottom: 1.5rem; }
.timeline-item::before {
  content: ''; position: absolute; left: .6rem; top: 1.6rem; bottom: -.5rem;
  width: 2px; background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-item .dot {
  position: absolute; left: 0; top: .25rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .7rem;
}

/* ===== LOGIN PAGE ===== */
.login-page {
  min-height: 100vh;
  background: var(--grad-mesh), var(--grad-brand);
  background-attachment: fixed;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-10);
}
.login-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(7, 35, 74, .35), 0 8px 24px rgba(28, 132, 198, .2);
  padding: var(--sp-10) var(--sp-8);
  width: 100%; max-width: 440px;
  border: 1px solid var(--border);
  position: relative;
}
.login-card::before {
  /* accent bar on top of card */
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 4px; border-radius: 0 0 4px 4px;
  background: var(--grad-brand);
}
.login-card .login-icon {
  width: 64px; height: 64px; border-radius: var(--radius-lg);
  background: var(--grad-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-md);
}
.login-input-group { position: relative; }
.login-input-group .input-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .95rem; pointer-events: none;
}
.login-input-group .form-control { padding-left: 2.75rem; padding-right: 2.75rem; }
.login-input-group .toggle-pwd {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); cursor: pointer; background: none; border: none;
}
.login-input-group .toggle-pwd:hover { color: var(--brand-500); }

/* ===== DETAIL PANEL (admin detail.php) ===== */
.detail-label { color: var(--text-muted); font-weight: 500; font-size: var(--fs-sm); }
.detail-value { font-weight: 600; color: var(--text); }
.detail-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }

/* ===== SKELETON ===== */
.ds-skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .ds-main { padding: var(--sp-4) var(--sp-3); }
  .ds-table-wrap { overflow-x: auto; }
  .ds-table { min-width: 700px; }
}
@media (max-width: 575.98px) {
  .hero-lapor { padding: var(--sp-10) 0 var(--sp-12); }
  .hero-lapor h1 { font-size: var(--fs-3xl); }
  .login-card { padding: var(--sp-5); }
  .ds-section-header { flex-direction: column; align-items: flex-start; }
  .ds-section-header .actions { width: 100%; }
  .ds-section-header .actions .btn { width: 100%; justify-content: center; }
}

/* Lampiran link di detail.php — seluruh row bisa diklik, hover kasih background halus */
.lampiran-link {
  cursor: pointer;
  border-radius: var(--radius-sm, 8px);
  padding: 0.35rem 0.6rem;
  margin-left: -0.6rem;
  transition: background-color var(--duration-fast, 140ms) ease;
}
.lampiran-link:hover,
.lampiran-link:focus {
  background-color: rgba(28, 132, 198, 0.08);
  text-decoration: none !important;
}
.lampiran-link:hover strong,
.lampiran-link:focus strong {
  color: var(--brand-700, #0a5dbb);
}