/* =========================================================================
   Key Population Mapping — App stylesheet
   Modern SaaS look: indigo accent, soft shadows, generous radius, Inter/Prompt
   type. Built on top of Bootstrap 5 utilities — most of the reskin happens
   by overriding Bootstrap's own CSS variables (--bs-*) so every .btn-primary,
   .bg-primary, .badge, card radius, etc. across all pages updates from here
   without touching each template.
   ========================================================================= */

:root {
  /* App-level tokens (used directly by our custom classes below) */
  --kpm-primary: #4f46e5;       /* indigo-600 */
  --kpm-primary-dark: #4338ca;  /* indigo-700 */
  --kpm-primary-light: #eef2ff; /* indigo-50 */
  --kpm-danger: #e11d48;
  --kpm-warning: #f59e0b;
  --kpm-success: #16a34a;
  --kpm-muted: #6b7280;
  --kpm-surface: #ffffff;
  --kpm-bg: #f7f8fb;
  --kpm-border: #e6e8f0;
  --kpm-shadow-sm: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
  --kpm-shadow-md: 0 4px 16px rgba(17, 24, 39, .08);
  --kpm-shadow-lg: 0 12px 32px rgba(17, 24, 39, .12);

  /* Bootstrap theme overrides — cascades to .btn-primary, .bg-primary,
     .text-primary, .badge.bg-primary, links, form-control focus rings, etc. */
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #e11d48;
  --bs-danger-rgb: 225, 29, 72;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-body-font-family: 'Inter', 'Prompt', system-ui, -apple-system, sans-serif;
  --bs-body-color: #1f2430;
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .875rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.25rem;
  --bs-box-shadow: 0 4px 16px rgba(17, 24, 39, .08);
  --bs-box-shadow-sm: 0 1px 3px rgba(17, 24, 39, .06);
}

html, body {
  height: 100%;
  background: var(--kpm-bg);
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold, .fw-semibold {
  letter-spacing: -.01em;
}

/* Subtle, modern scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d5d8e3; border-radius: 10px; border: 2px solid var(--kpm-bg); }
::-webkit-scrollbar-thumb:hover { background: #b9bdcc; }

/* Smooth, purposeful motion on interactive elements only */
.btn, .nav-link, .dropdown-item, .form-control, .form-select,
.stat-card, .detail-card, .chart-card, .pg-check label {
  transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---- Navbar ---------------------------------------------------------------
   Light, modern top bar (not a solid color block) with a brand icon chip,
   pill-style nav links, and an avatar + role badge for the current user. */
.app-navbar {
  position: relative;
  z-index: 1030; /* Above map filters (1000), below modal/offcanvas overlays. */
  background: var(--kpm-surface);
  border-bottom: 1px solid var(--kpm-border);
  box-shadow: var(--kpm-shadow-sm);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.app-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #1f2430;
  font-size: 1.05rem;
}
.app-navbar .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--kpm-primary), #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(79,70,229,.35);
}
.app-navbar .nav-link {
  color: #4b5060;
  font-weight: 500;
  border-radius: 8px;
  padding: .45rem .75rem;
  margin: 0 .15rem;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  background: var(--kpm-primary-light);
  color: var(--kpm-primary-dark);
}
.app-navbar .nav-link.active {
  background: var(--kpm-primary-light);
  color: var(--kpm-primary-dark);
  font-weight: 600;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kpm-primary-light);
  color: var(--kpm-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.role-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: .3rem .5rem;
  border-radius: 30px;
}
.role-badge-admin { background: var(--kpm-primary-light); color: var(--kpm-primary-dark); }
.role-badge-staff { background: #f1f2f6; color: #4b5060; }

.app-main {
  min-height: calc(100vh - 64px);
}

/* ---- Auth pages -------------------------------------------------------- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 15% 15%, #6366f1 0%, transparent 45%),
              radial-gradient(circle at 85% 85%, #7c3aed 0%, transparent 45%),
              linear-gradient(135deg, #4338ca 0%, #4f46e5 55%, #6d28d9 100%);
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  border: none;
  border-radius: 20px;
  box-shadow: var(--kpm-shadow-lg);
}
.auth-brand-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--kpm-primary), #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(79,70,229,.35);
}
.auth-input-group .input-group-text {
  background: var(--kpm-bg);
  border-color: var(--kpm-border);
  color: var(--kpm-muted);
  border-radius: .625rem 0 0 .625rem;
}
.auth-input-group .form-control {
  border-color: var(--kpm-border);
  border-radius: 0 .625rem .625rem 0;
}
.auth-input-group .form-control:focus {
  box-shadow: none;
  border-color: var(--kpm-primary);
}
.auth-input-group:focus-within .input-group-text {
  border-color: var(--kpm-primary);
}
.auth-submit-btn {
  background: linear-gradient(135deg, var(--kpm-primary), #7c3aed);
  border: none;
  border-radius: .625rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(79,70,229,.35);
}
.auth-submit-btn:hover {
  box-shadow: 0 10px 26px rgba(79,70,229,.45);
}

/* ---- Map page -----------------------------------------------------------
   Flexbox column so the map always fills exactly what's left of the
   viewport, however tall the toolbar actually renders (it wraps to 2 rows
   on many real widths — a fixed "navbar+toolbar px" height calc broke that
   and pushed the floating buttons below the fold). */
body.map-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.map-page .app-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.map-toolbar {
  flex: 0 0 auto;
  background: var(--kpm-surface);
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--kpm-border);
  position: relative;
  z-index: 1000;
}

.map-toolbar .form-control,
.map-toolbar .form-select {
  border-color: var(--kpm-border);
  background: var(--kpm-bg);
}
.map-toolbar .form-control:focus,
.map-toolbar .form-select:focus {
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
  border-color: var(--kpm-primary);
}

.map-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Floating Add Mapping button — absolute within .map-wrapper, which now
   (via the flexbox layout above) always has the correct remaining height,
   so this can never end up scrolled below the fold. */
.btn-add-mapping {
  position: absolute;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 900;
  border-radius: 50px;
  padding: .85rem 1.4rem;
  box-shadow: 0 8px 20px rgba(79,70,229,.4);
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--kpm-primary), #7c3aed);
}
.btn-add-mapping:hover {
  box-shadow: 0 10px 26px rgba(79,70,229,.5);
}

.btn-locate {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 900;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kpm-shadow-md);
  border: 1px solid var(--kpm-border);
}
/* Locked state: map is actively following the user's live GPS position */
.btn-locate.active {
  background: var(--kpm-primary);
  color: #fff;
  border-color: var(--kpm-primary);
}

/* Live GPS position marker: a solid dot with a soft pulsing halo */
.user-location-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kpm-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(79,70,229,.35);
  position: relative;
}
.user-location-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(79,70,229,.35);
  animation: kpm-pulse 2s ease-out infinite;
}
@keyframes kpm-pulse {
  0%   { transform: scale(0.4); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Marker popup */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: var(--kpm-shadow-lg);
}
.leaflet-popup-content {
  font-size: .9rem;
  min-width: 200px;
  margin: .85rem 1rem;
}
.popup-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
}
.popup-badges .badge { margin-right: 3px; }
.popup-row { margin-top: .35rem; }
.popup-actions { margin-top: .5rem; display: flex; gap: .4rem; }
.popup-actions .btn { border-radius: 8px; font-size: .8rem; }
.popup-actions-quick { margin-top: .65rem; padding-top: .55rem; border-top: 1px dashed var(--kpm-border); }
.popup-actions-quick .btn { background: var(--kpm-bg); border: 1px solid var(--kpm-border); color: #4b5060; }
.popup-actions-quick .btn:hover { background: var(--kpm-primary-light); color: var(--kpm-primary-dark); border-color: var(--kpm-primary-light); }

/* Status colored markers via CSS filter on divIcon */
.marker-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.marker-pin.status-active { background: var(--kpm-success); }
.marker-pin.status-need_update { background: var(--kpm-warning); }
.marker-pin.status-inactive { background: var(--kpm-muted); }
.marker-pin::after { content: ''; width: 10px; height: 10px; margin: 8px 0 0 8px; background: #fff; position: absolute; border-radius: 50%; }

/* ---- Add/Edit Mapping form (offcanvas) ---------------------------------- */
.offcanvas {
  box-shadow: var(--kpm-shadow-lg);
}

.population-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
@media (min-width: 576px) {
  .population-group-grid { grid-template-columns: repeat(3, 1fr); }
}

.pg-check {
  display: block;
}
.pg-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pg-check label {
  display: block;
  text-align: center;
  padding: .6rem .3rem;
  border: 2px solid var(--kpm-border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #495057;
  user-select: none;
}
.pg-check label:hover {
  border-color: #c7cbe0;
}
.pg-check input:checked + label {
  border-color: var(--kpm-primary);
  background: var(--kpm-primary-light);
  color: var(--kpm-primary-dark);
}

.pick-location-hint {
  border: 2px dashed #c7cbe0;
  border-radius: 10px;
  padding: .6rem .8rem;
  font-size: .85rem;
  color: var(--kpm-muted);
}
.pick-location-hint.picked {
  border-color: var(--kpm-success);
  color: var(--kpm-success);
  border-style: solid;
  background: #f0fdf4;
}

/* ---- Dashboard ---------------------------------------------------------- */
.stat-card {
  border: none;
  border-radius: 16px;
  color: #fff;
  padding: 1.15rem 1.3rem;
  box-shadow: var(--kpm-shadow-md);
  display: flex;
  align-items: center;
  gap: .9rem;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kpm-shadow-lg);
}
.stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; opacity: .92; }
.stat-card.bg-total { background: linear-gradient(135deg,#4f46e5,#4338ca); }
.stat-card.bg-online { background: linear-gradient(135deg,#0891b2,#0e7490); }
.stat-card.bg-kp { background: linear-gradient(135deg,#7c3aed,#6d28d9); }
.stat-card.bg-audience { background: linear-gradient(135deg,#ec4899,#db2777); }
.stat-card.bg-updated { background: linear-gradient(135deg,#16a34a,#15803d); }
.stat-card.bg-need { background: linear-gradient(135deg,#f59e0b,#d97706); }

.mini-stat {
  background: var(--kpm-surface);
  border: 1px solid var(--kpm-border);
  border-radius: 14px;
  padding: .9rem 1rem;
  text-align: center;
}
.mini-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--kpm-primary-dark); }
.mini-stat-label { font-size: .78rem; color: var(--kpm-muted); }

.chart-card {
  background: var(--kpm-surface);
  border-radius: 16px;
  padding: 1.1rem;
  box-shadow: var(--kpm-shadow-sm);
  border: 1px solid var(--kpm-border);
}

/* ---- Hotspot detail ------------------------------------------------------ */
.detail-card {
  background: var(--kpm-surface);
  border-radius: 16px;
  box-shadow: var(--kpm-shadow-sm);
  border: 1px solid var(--kpm-border);
}
.status-pill {
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 30px;
}
.status-pill.active { background: #dcfce7; color: #166534; }
.status-pill.need_update { background: #fef3c7; color: #92400e; }
.status-pill.inactive { background: #f1f2f6; color: #4b5060; }

/* ---- Utility -------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Online Mapping page --------------------------------------------------
   Normal scrolling page (no map), so the FAB must be position:fixed (there's
   no .map-wrapper positioning context to anchor an absolute one to here). */
body.online-page .btn-add-mapping {
  position: fixed;
}

.view-toggle .btn.active {
  background: var(--kpm-primary);
  color: #fff;
  border-color: var(--kpm-primary);
}

.online-card {
  background: var(--kpm-surface);
  border: 1px solid var(--kpm-border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--kpm-shadow-sm);
  display: flex;
  flex-direction: column;
}
.online-card:hover {
  box-shadow: var(--kpm-shadow-md);
  transform: translateY(-2px);
}
.online-card-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.online-card-row { margin-top: .15rem; }
.online-card-badges .badge { margin-right: 3px; }
.online-card-stat {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kpm-primary-dark);
}

/* Offline <-> Online relationship links (hotspot_detail.php / online_detail.php) */
.linked-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--kpm-border);
  border-radius: 10px;
  margin-bottom: .4rem;
}
.linked-item a { font-weight: 600; text-decoration: none; }
.linked-item .btn-unlink { margin-left: auto; padding: 0 .25rem; }

/* Mobile tweaks — #map's height comes from the flexbox layout above, no
   fixed calc() needed here regardless of how many rows the toolbar wraps to. */
@media (max-width: 575.98px) {
  .btn-add-mapping span { display: none; }
  .btn-add-mapping { padding: .85rem; }
}

/* Responsive navigation, forms and map controls. */
.app-navbar { flex-shrink: 0; }
.app-main, .page-heading > *, .linked-item > *, .stat-card > * { min-width: 0; }
.page-heading { flex-wrap: wrap; gap: .75rem; }
.page-heading > .d-flex { flex-wrap: wrap; }
.detail-card, .online-card, .linked-item { overflow-wrap: anywhere; }
.mobile-filter-toggle { display: none; }
.pg-check input:focus-visible + label { outline: 3px solid var(--kpm-primary); outline-offset: 2px; }
.map-pick-instructions {
  position: absolute; z-index: 1000; bottom: 1rem; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2rem); padding: .75rem;
  background: var(--kpm-primary-dark); color: white; border-radius: 12px;
  box-shadow: var(--kpm-shadow-md); text-align: center;
}
.map-pick-instructions .btn { display: block; margin: .5rem auto 0; }
.picking-location .btn-add-mapping { display: none; }
body.map-page { height: 100dvh; }
.auth-wrapper { min-height: 100dvh; }
@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse { max-height: 55dvh; overflow-y: auto; }
  .app-navbar .nav-link { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }
}
@media (max-width: 767.98px) {
  .btn, .form-control, .form-select, .dropdown-item { min-height: 44px; }
  .form-control, .form-select { font-size: 16px; }
  .btn-close { min-width: 24px; min-height: 24px; padding: 10px; }
  .mobile-filter-toggle { display: inline-flex; align-items: center; gap: .4rem; }
  .map-toolbar:not(.filters-expanded) .mapping-filter { display: none; }
  .map-toolbar { max-height: 42dvh; overflow: auto; }
  .map-toolbar:has(#searchResults:not([style*="display: none"]):not([style*="display:none"])) { overflow: visible; }
  #searchResults { max-height: 35dvh !important; }
  .offcanvas.offcanvas-end { width: 100% !important; max-width: 100%; }
  .offcanvas-body { padding-bottom: max(1rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .form-actions { position: sticky; bottom: 0; background: white; padding: .75rem 0; z-index: 2; }
  .btn-add-mapping { right: max(1rem, env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); min-width: 52px; min-height: 52px; }
  .btn-locate { width: 44px; height: 44px; }
  .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .leaflet-popup-content { min-width: 0; max-width: calc(100vw - 80px); overflow-wrap: anywhere; }
  .popup-actions { flex-wrap: wrap; }
  body.online-page .app-main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .table-responsive { max-width: 100%; overscroll-behavior-x: contain; }
  .table-responsive table { min-width: 600px; }
  .linked-item { flex-wrap: wrap; }
  .stat-card { padding: .85rem; gap: .5rem; flex-direction: column; align-items: flex-start; height: 100%; }
  .stat-card .stat-value { font-size: 1.5rem; overflow-wrap: anywhere; }
  .chart-card { padding: .75rem; }
  #kpmToastContainer { max-width: 100%; padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
  .app-navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* White surface for the updated project logo. */
.project-logo {
  display: block;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 10px;
}
.project-logo-nav { width: 190px; max-width: calc(100vw - 100px); }
.project-logo-auth { width: 100%; max-width: 310px; margin: 0 auto; padding: 12px; }