/*
  Global starter styles.
  Add shared typography, layout, and component styles here.
*/

* {
  box-sizing: border-box;
}

/* Always reserve room for the vertical scrollbar.

   Profile is short enough to fit on screen while Dashboard, About, and Admin all
   scroll. Without this, the scrollbar disappears on Profile, the viewport gets
   ~15px wider, and every centered container slides right - which reads as the
   content jumping when you switch to Profile.

   scrollbar-gutter keeps the gutter reserved in modern browsers; the overflow-y
   fallback forces a permanent (disabled) scrollbar everywhere else. */
html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 2rem;
  background: #f7f7f7;
  color: #222;
}

/* ============================================================
   Home Page (Figma-Inspired Hero)
   ============================================================ */

.home-page {
  font-family: "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 0;
  min-height: 100vh;
  background-color: #5cbbeb;
}

.home-page main {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.home-shell {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: start center;
}

.home-artboard {
  position: relative;
  width: min(100vw, 1669px);
  aspect-ratio: 1669 / 933;
  overflow: hidden;
}

.home-artwork {
  width: 100%;
  height: 100%;
  display: block;
}

.home-cloud-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.home-cloud {
  position: absolute;
  left: -220px;
  width: 167px;
  height: auto;
  opacity: 0.95;
  --cloud-scale: 1;
  will-change: transform;
  animation-name: home-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.home-cloud.cloud-a {
  top: 9%;
  animation-duration: 46s;
  animation-delay: -9s;
}

.home-cloud.cloud-b {
  top: 15%;
  --cloud-scale: 0.9;
  animation-duration: 52s;
  animation-delay: -20s;
}

.home-cloud.cloud-c {
  top: 22%;
  --cloud-scale: 1.08;
  animation-duration: 60s;
  animation-delay: -31s;
}

.home-cloud.cloud-d {
  top: 28%;
  --cloud-scale: 0.84;
  animation-duration: 49s;
  animation-delay: -26s;
}

.home-cloud.cloud-e {
  top: 35%;
  --cloud-scale: 1.02;
  animation-duration: 56s;
  animation-delay: -39s;
}

.home-cloud.cloud-f {
  top: 42%;
  --cloud-scale: 0.78;
  animation-duration: 64s;
  animation-delay: -14s;
}

@keyframes home-cloud-drift {
  0% {
    transform: translateX(0) scale(var(--cloud-scale));
  }
  100% {
    transform: translateX(calc(100vw + 420px)) scale(var(--cloud-scale));
  }
}

.home-ball-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.home-ball {
  position: absolute;
  left: 46.3%;
  top: calc(34.8% + 20px);
  width: clamp(2.15rem, 4.7vw, 5.1rem);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16));
  cursor: pointer;
  pointer-events: auto;
}

.home-ball.home-ball-animate {
  animation: home-ball-arc 1800ms linear 1 both;
}

@keyframes home-ball-arc {
  0% {
    left: 46.3%;
    top: calc(34.8% + 20px);
    transform: translate(-50%, -50%) scale(1);
  }

  16% {
    left: calc(35.8% + 40px);
    top: calc(62.6% - 18px);
    transform: translate(-50%, -50%) scale(1);
  }

  /*24% {
    left: 40.3%;
    top: 57.8%;
    transform: translate(-50%, -50%) scale(1);
  }*/

  32% {
    left: 45.1%;
    top: 52.9%;
    transform: translate(-50%, -50%) scale(1);
  }

  40% {
    left: 50.1%;
    top: 49.6%;
    transform: translate(-50%, -50%) scale(1);
  }

  48% {
    left: 56.1%;
    top: 50.8%;
    transform: translate(-50%, -50%) scale(1);
  }

  56% {
    left: calc(67.8% + 22px);
    top: calc(55.5% - 10px);
    transform: translate(-50%, -50%) scale(1);
  }

  64% {
    left: 57.1%;
    top: 50.9%;
    transform: translate(-50%, -50%) scale(1);
  }

  72% {
    left: 50.2%;
    top: 49.6%;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    left: 45.3%;
    top: 53.2%;
    transform: translate(-50%, -50%) scale(1);
  }

  88% {
    left: calc(35.8% + 40px);
    top: calc(62.6% - 18px);
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: 46.3%;
    top: calc(34.8% + 14px);
    transform: translate(-50%, -50%) scale(1);
  }
}

.home-search-overlay {
  position: absolute;
  left: 50%;
  top: 43.5%;
  width: 42%;
  height: 6.7%;
  transform: translateX(-50%);
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(113, 171, 202, 0.62);
  backdrop-filter: blur(1.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.home-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.home-search-input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: rgba(239, 249, 255, 0.98);
  padding: 0 1.1rem;
  font-size: clamp(0.84rem, 1.1vw, 1.2rem);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.home-search-input:hover,
.home-search-input:focus,
.home-search-input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

.home-search-overlay:focus,
.home-search-overlay:focus-within {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.home-search-input::placeholder {
  color: rgba(227, 241, 251, 0.88);
}

/* POSITION CONTROLS for the four artwork icon buttons (desktop).
   - `top`   : smaller value moves the row UP
   - `right` : larger value moves the row LEFT (so a bigger number = further left)
   Currently offset by 10px from the original: top was calc(1.8% + 2px),
   right was 33px. */
/* --nav-w, --btn-gap, --btn-size drive all four button positions.
   Change only these three variables (or override per :nth-child) to move buttons. */
.home-icon-nav {
  --nav-w: calc(min(8.35vw, 134px) + 20px);
  --btn-gap: min(0.45vw, 7px);
  --btn-size: clamp(15px, calc(1.2vw + 5px), 21px);
  --col-w: calc((var(--nav-w) - 3 * var(--btn-gap)) / 4);
  --btn-offset: calc((var(--col-w) - var(--btn-size)) / 2);
  --col-step: calc(var(--col-w) + var(--btn-gap));
  position: absolute;
  top: calc(1.8% + 2px - 10px);
  right: 23px;
  width: var(--nav-w);
  height: var(--btn-size);
  z-index: 4;
}

/* SHAPE CONTROL for each individual button.
   Override `left` on a specific :nth-child rule below to reposition that button. */
.home-icon-hit {
  position: absolute;
  top: 0;
  height: var(--btn-size);
  width: var(--btn-size);
  cursor: pointer;
  border-radius: 4px;
  outline: none;
}

.home-icon-hit:nth-child(1) { left: calc(var(--btn-offset) + 4px); }
.home-icon-hit:nth-child(2) { left: calc(var(--col-step) + var(--btn-offset) + 2px); }
.home-icon-hit:nth-child(3) { left: calc(2 * var(--col-step) + var(--btn-offset)); }
.home-icon-hit:nth-child(4) { left: calc(3 * var(--col-step) + var(--btn-offset) - 3px); }

.home-icon-hit::before {
  content: "";
  position: absolute;
  inset: -3px;
}

.home-icon-hit:hover,
.home-icon-hit:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(47, 132, 184, 0.7);
}

.home-icon-hit-passive {
  pointer-events: none;
}

@media (max-width: 900px) {
  .home-page {
    min-height: auto;
  }

  .home-shell {
    min-height: auto;
  }

  .home-artboard {
    width: 100%;
  }

  .home-search-overlay {
    left: 50%;
    top: 44%;
    width: 42.5%;
    height: 7.2%;
    transform: translateX(-50%);
  }

  .home-ball-zone {
    inset: 0;
  }

  .home-ball {
    width: clamp(1.55rem, 4.4vw, 3rem);
  }

  .home-search-input {
    padding-left: 0.95rem;
    font-size: clamp(0.7rem, 2.45vw, 1rem);
  }

  /* POSITION CONTROLS for the icon buttons at <=900px. Same 10px offset as the
     desktop rule above (was top: calc(1.4% + 2px), right: 33px). */
  .home-icon-nav {
    --nav-w: calc(min(15vw, 92px) + 20px);
    --btn-gap: clamp(2px, 0.45vw, 5px);
    --btn-size: clamp(13px, calc(1.6vw + 5px), 17px);
    top: calc(1.4% + 2px - 10px);
    right: 23px;
  }
}

main {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
}

/* ============================================================
   Buttons and Forms
   ============================================================ */

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
}

.btn-primary {
  background-color: #4CAF50;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #45a049;
}

.btn-primary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #2196F3;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #0b7dda;
}

.btn-secondary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* ============================================================
   Authentication Container and Cards
   ============================================================ */

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.auth-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

.auth-card h1 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

.auth-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.auth-form {
  display: none;
}

.auth-form.active,
.auth-form[style*="display: block"] {
  display: block;
}

/* ============================================================
   Form Groups and Inputs
   ============================================================ */

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.form-group input::placeholder {
  color: #999;
}

/* ============================================================
   Error Messages
   ============================================================ */

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #c62828;
  display: none;
}

.error-message.show {
  display: block;
}

/* ============================================================
   Auth Toggle
   ============================================================ */

.auth-toggle {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.toggle-link {
  color: #2196F3;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.toggle-link:hover {
  text-decoration: underline;
}

/* ============================================================
   App Header and Navigation
   ============================================================ */

.app-header {
  background-color: #333;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.app-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

.app-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: #4CAF50;
}

/* ============================================================
   Dashboard and Profile Containers
   ============================================================ */

.dashboard-container {
  max-width: 1000px;
  margin: 0 auto;
}

.user-info-section {
  background: #f0f8ff;
  padding: 1.5rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  border-left: 4px solid #2196F3;
}

.user-info-section h2 {
  margin-top: 0;
  color: #333;
}

.user-info-section p {
  margin: 0.5rem 0;
}

.role-badge {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.dashboard-content,
.profile-container {
  background: #fff;
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.profile-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.profile-card h2 {
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.profile-field {
  margin-bottom: 1.5rem;
}

.profile-field label {
  display: block;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.profile-field p {
  margin: 0;
  padding: 0.75rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #2196F3;
}

.profile-field p.role-badge {
  display: inline-block;
  background-color: #4CAF50;
  color: #ffffff;
  border-left: none;
}

/* ============================================================
   Phase 2 Workstream B: Crowd Reporting and Busy Levels
   ============================================================ */

.crowd-report-container {
  margin-top: 1.5rem;
}

.crowd-report-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #d8e6f5;
  border-left: 4px solid #2196F3;
  border-radius: 8px;
  padding: 1.25rem;
}

.crowd-report-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.crowd-report-header h3,
.detail-section.crowd-report-summary h3 {
  margin-top: 0;
}

.crowd-report-busy-summary,
.crowd-report-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.crowd-report-meta {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

.crowd-report-message {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}

.crowd-report-error {
  background-color: #ffebee;
  color: #b71c1c;
  border-left: 4px solid #c62828;
}

.crowd-report-success {
  background-color: #e8f5e9;
  color: #1b5e20;
  border-left: 4px solid #2e7d32;
}

.crowd-report-form {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.crowd-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.busy-level-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.busy-level-score {
  opacity: 0.8;
}

.busy-level-unknown {
  background-color: #eceff1;
  color: #37474f;
  border-color: #cfd8dc;
}

.busy-level-low {
  background-color: #e8f5e9;
  color: #1b5e20;
  border-color: #c8e6c9;
}

.busy-level-moderate {
  background-color: #fff8e1;
  color: #8d6e00;
  border-color: #ffe082;
}

.busy-level-busy {
  background-color: #fff3e0;
  color: #e65100;
  border-color: #ffcc80;
}

.busy-level-very-busy {
  background-color: #ffebee;
  color: #b71c1c;
  border-color: #ef9a9a;
}

.park-busy-level {
  margin: 0.75rem 0;
}

.park-card .busy-level-pill {
  font-size: 0.8rem;
}

.crowd-report-summary-row p {
  margin: 0;
}

/* ============================================================
   Phase 3: Search and Filter Styles
   ============================================================ */

.search-filter-section {
  margin-bottom: 2rem;
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.search-box {
  margin-bottom: 1.5rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.filter-controls h3 {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #333;
}

.filter-group {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
  background: white;
}

.filter-group legend {
  font-weight: bold;
  color: #333;
  padding: 0 0.5rem;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
  cursor: pointer;
  width: auto;
  padding: 0;
}

.filter-checkbox span {
  color: #555;
  font-size: 0.95rem;
}

.filter-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.filter-btn {
  grid-column: 1 / -1;
  width: 100%;
}

/* ============================================================
   Phase 3: Results Section Styles
   ============================================================ */

.results-section {
  margin-top: 2rem;
}

.park-management-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.park-results-container {
  min-height: 200px;
}

.park-detail-container {
  min-height: 100px;
}

.park-form-container {
  margin-top: 1rem;
}

.dashboard-park-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow-y: auto;
  z-index: 95;
}

.dashboard-park-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 45, 0.5);
  backdrop-filter: blur(2px);
}

.dashboard-park-modal-content {
  position: relative;
  z-index: 1;
  width: min(1020px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  margin: auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d5e4ef;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.dashboard-park-modal-close {
  position: sticky;
  top: 0;
  z-index: 12;
  justify-self: end;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #e8f2fb;
  color: #24506a;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

body.dashboard-park-modal-open {
  overflow: hidden;
}

body.dashboard-park-modal-open .dashboard-park-modal {
  display: flex;
}

.park-action-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow-y: auto;
  z-index: 110;
}

.park-action-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 45, 0.65);
  backdrop-filter: blur(2px);
}

.park-action-modal-content {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  margin: auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d5e4ef;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.park-action-modal-close {
  position: sticky;
  top: 0;
  z-index: 12;
  float: right;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #e8f2fb;
  color: #24506a;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

body.park-action-modal-open .park-action-modal {
  display: flex;
}

body.park-action-modal-open {
  overflow: hidden;
}

.dashboard-cloud-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.dashboard-cloud {
  position: absolute;
  left: -220px;
  width: 167px;
  height: auto;
  opacity: 0.95;
  --cloud-scale: 1;
  will-change: transform;
  animation-name: dashboard-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.dashboard-cloud.cloud-a {
  top: 8vh;
  animation-duration: 44s;
  animation-delay: -7s;
}

.dashboard-cloud.cloud-b {
  top: 14vh;
  --cloud-scale: 0.92;
  animation-duration: 51s;
  animation-delay: -18s;
}

.dashboard-cloud.cloud-c {
  top: 20vh;
  --cloud-scale: 1.08;
  animation-duration: 58s;
  animation-delay: -30s;
}

.dashboard-cloud.cloud-d {
  top: 27vh;
  --cloud-scale: 0.86;
  animation-duration: 48s;
  animation-delay: -24s;
}

.dashboard-cloud.cloud-e {
  top: 34vh;
  --cloud-scale: 1.02;
  animation-duration: 55s;
  animation-delay: -37s;
}

.dashboard-cloud.cloud-f {
  top: 41vh;
  --cloud-scale: 0.8;
  animation-duration: 62s;
  animation-delay: -12s;
}

@keyframes dashboard-cloud-drift {
  0% {
    transform: translateX(0) scale(var(--cloud-scale));
  }
  100% {
    transform: translateX(calc(100vw + 420px)) scale(var(--cloud-scale));
  }
}

.dashboard-trees-footer {
  margin-top: 1.25rem;
  line-height: 0;
}

.dashboard-trees-footer img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.dashboard-butterfly-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 25;
}

#dashboard-butterfly {
  position: absolute;
  width: 74px;
  height: auto;
  will-change: transform;
  transform: translate3d(50vw, calc(100vh - 80px), 0);
}

.dashboard-butterfly-follower {
  position: absolute;
  width: 70px;
  height: auto;
  opacity: 0.92;
  will-change: transform;
  transform: translate3d(50vw, calc(100vh - 80px), 0) scale(var(--butterfly-scale, 1));
}

.butterfly-trail-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201, 182, 208, 0.95), rgba(156, 130, 173, 0.72) 55%, rgba(201, 182, 208, 0) 100%);
  animation: butterfly-trail-fade 520ms ease-out forwards;
}

@keyframes butterfly-trail-fade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.25) translateY(6px);
  }
}

.park-form-panel {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.5rem;
}

.park-form-panel h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.park-form {
  display: grid;
  gap: 1rem;
}

.park-form textarea,
.park-form input,
.park-form select {
  width: 100%;
  box-sizing: border-box;
}

.park-form-features {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.5rem;
}

.form-group-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.park-form-features legend {
  font-weight: bold;
  padding: 0 0.4rem;
}

.park-form-features label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.park-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.park-form-error {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #b71c1c;
  padding: 0.75rem;
  border-radius: 4px;
}

.park-form-success {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
  padding: 0.75rem;
  border-radius: 4px;
}

/* Loading State */
.state-loading {
  text-align: center;
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4CAF50;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.search-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.search-pagination .end-of-results {
  color: #555;
  font-size: 0.95rem;
  margin: 0.75rem 0;
}

.search-pagination .btn {
  min-width: 180px;
}

.state-empty {
  text-align: center;
  padding: 1.25rem;
  background: #fffde7;
  border-radius: 4px;
  border: 1px solid #ffe082;
}

.state-empty p {
  color: #f57f17;
  font-size: 0.95rem;
  margin: 0;
}

/* Error State */
.state-error {
  padding: 1.5rem;
  background: #ffebee;
  border-radius: 4px;
  border: 1px solid #ef5350;
}

.state-error .error-message {
  display: block;
  margin-bottom: 1rem;
}

.state-error .btn {
  margin-top: 1rem;
}

/* Results Header */
.results-header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.results-header p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
}

/* Park Results List */
.park-results-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Park Card */
.park-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.park-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  border-color: #4CAF50;
}

.park-card h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.2rem;
}

.park-location {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}

.park-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.amenity-tag {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

.park-status {
  margin: 0;
  color: #555;
  font-size: 0.9rem;
}

/* Park Detail */
.park-detail {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.park-detail h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 1rem;
}

.detail-location {
  font-size: 1rem;
  color: #666;
  margin: 0 0 1.5rem 0;
}

.detail-section {
  margin-bottom: 2rem;
}

.detail-section h3 {
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.detail-section p {
  margin: 0.5rem 0;
  color: #555;
  line-height: 1.6;
}

.detail-section ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  color: #555;
}

.detail-section li {
  margin: 0.5rem 0;
}

/* ============================================================
   Sprint 3 Community Features
   ============================================================ */

.detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.review-section,
.photo-upload-area {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
}

.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.review-item {
  padding: 0.8rem 0.95rem;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.review-item p {
  margin: 0.35rem 0 0;
}

.muted {
  color: #777;
  font-size: 0.95rem;
  margin: 0;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.photo-gallery img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.profile-button-group,
.profile-edit-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-edit-inline {
  margin-top: 1rem;
}

.profile-edit-inline .form-group {
  margin-bottom: 0;
}

.profile-message {
  width: 100%;
}

/* ============================================================
   Responsive Design
   ============================================================ */

@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  main {
    /* Vertical only: body already provides the outer gutter, so horizontal
       padding here would inset the content past the header edge. */
    padding: 1rem 0;
  }

  .app-header {
    flex-direction: column;
    gap: 1rem;
  }

  .app-header h1 {
    font-size: 1.2rem;
  }

  .app-nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .auth-card {
    padding: 1.5rem;
  }

  .dashboard-container,
  .profile-container {
    max-width: 100%;
  }

  .user-info-section,
  .dashboard-content,
  .profile-card,
  .search-filter-section {
    padding: 1rem;
  }

  .btn {
    width: 100%;
    padding: 1rem;
  }

  .filter-controls {
    grid-template-columns: 1fr;
  }

  .park-results-list {
    grid-template-columns: 1fr;
  }

  .park-management-controls {
    justify-content: stretch;
  }

  .park-management-controls .btn {
    width: 100%;
  }

  .park-form-actions {
    flex-direction: column;
  }

  .park-detail {
    padding: 1.5rem;
  }

  .profile-card {
    margin: 0 0 1rem;
  }

  .review-list,
  .photo-gallery {
    gap: 0.65rem;
  }

  /* Sprint 3: extend 768px breakpoint for new surfaces */
  .notification-panel,
  .equipment-panel,
  .review-section,
  .photo-upload-area,
  .crowd-history-panel,
  .admin-panel,
  .moderation-panel,
  .audit-log-panel {
    padding: 1rem;
  }

  .park-map-view {
    height: 320px;
  }

  .admin-panel-grid {
    grid-template-columns: 1fr;
  }

  .crowd-history-bars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-park-modal-content {
    width: calc(100vw - 0.75rem);
    max-height: calc(100vh - 0.75rem);
    margin: 0;
    padding: 0.85rem;
  }

  .park-action-modal-content {
    width: calc(100vw - 0.75rem);
    max-height: calc(100vh - 0.75rem);
    margin: 0;
    padding: 0.85rem;
  }
}

/* ============================================================
   Sprint 3 — Shared Component Classes
   All workstreams must use these classes rather than defining
   their own conflicting card, badge, modal, or form styles.
   ============================================================ */

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card + .card {
  margin-top: 0.75rem;
}

/* Inside a grid, spacing comes from `gap`. Leaving the stacking margin above in
   place pushes every card except the first down within its cell, which reads as
   the leading card being taller than its neighbours. */
[class*="-grid"] > .card + .card,
.about-workflow-stack > .card + .card {
  margin-top: 0;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.65em;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-operational {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-needs-repair {
  background: #fff8e1;
  color: #f57f17;
}

.badge-out-of-service {
  background: #ffebee;
  color: #c62828;
}

.badge-open {
  background: #e3f2fd;
  color: #1565c0;
}

.badge-in-review {
  background: #fff8e1;
  color: #f57f17;
}

.badge-resolved {
  background: #e8f5e9;
  color: #2e7d32;
}

.badge-closed {
  background: #f5f5f5;
  color: #616161;
}

.badge-unread {
  background: #e53935;
  color: #fff;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

/* ============================================================
   Welcome Popup (shown once per login)
   ============================================================ */

.welcome-popup-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 20, 60, 0.6);
  z-index: 9000;
  animation: welcome-fade 2.5s ease forwards;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.welcome-popup {
  background: linear-gradient(135deg, #1565c0 0%, #0277bd 50%, #00838f 100%);
  border-radius: 22px;
  padding: 2.8rem 4rem;
  text-align: center;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.18),
    0 0 60px rgba(26, 115, 232, 0.6),
    0 16px 64px rgba(0, 0, 0, 0.3);
  animation: welcome-pop 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
}

.welcome-popup::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: conic-gradient(
    transparent 0deg,
    rgba(255, 255, 255, 0.14) 50deg,
    transparent 110deg
  );
  animation: welcome-shine 1s ease 0.3s 1 forwards;
  transform-origin: center;
}

.welcome-popup h2 {
  margin: 0 0 0.6rem;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.welcome-popup p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}

@keyframes welcome-fade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes welcome-pop {
  0%   { transform: scale(0.65) translateY(24px); opacity: 0; }
  12%  { transform: scale(1.06) translateY(0);    opacity: 1; }
  20%  { transform: scale(0.97); }
  30%  { transform: scale(1.02); }
  40%  { transform: scale(1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes welcome-shine {
  0%   { transform: rotate(0deg);   opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: rotate(160deg); opacity: 0; }
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #616161;
  line-height: 1;
  padding: 0.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid #1976d2;
  outline-offset: 1px;
  border-color: #1976d2;
}

.form-group .field-error {
  font-size: 0.82rem;
  color: #c62828;
}

.notification-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid #fff;
}

.star-rating {
  display: flex;
  gap: 0.2rem;
}

.star-rating .star {
  font-size: 1.4rem;
  cursor: pointer;
  color: #ccc;
  transition: color 0.1s;
}

.star-rating .star.filled,
.star-rating .star:hover {
  color: #f9a825;
}

/* ============================================================
   Final Stage Visual Refresh — Non-Home Pages
   ============================================================ */

:root {
  --pp-sky-050: #f5fbff;
  --pp-sky-100: #e3f4ff;
  --pp-sky-200: #c8e8fb;
  --pp-sky-400: #76bfeb;
  --pp-sky-500: #5cbbeb;
  --pp-sky-700: #2a6f95;
  --pp-sun-100: #fff4bf;
  --pp-sun-300: #ffd76a;
  --pp-leaf-100: #e3f5dd;
  --pp-leaf-500: #58a96a;
  --pp-ink-900: #15354a;
  --pp-ink-700: #3d5b6c;
  --pp-ink-500: #6c8796;
  --pp-surface: rgba(255, 255, 255, 0.9);
  --pp-surface-strong: #ffffff;
  --pp-border: rgba(57, 116, 147, 0.16);
  --pp-shadow: 0 18px 40px rgba(43, 109, 144, 0.14);
  --pp-radius-lg: 24px;
  --pp-radius-md: 18px;
  --pp-radius-sm: 12px;
}

body:not(.home-page) {
  margin: 0;
  padding: 0;
  font-family: "Aptos", "Segoe UI", sans-serif;
  color: var(--pp-ink-900);
  background:
    radial-gradient(circle at top left, rgba(255, 244, 191, 0.95), transparent 24%),
    radial-gradient(circle at top right, rgba(118, 191, 235, 0.28), transparent 26%),
    linear-gradient(180deg, #eaf7ff 0%, #f8fdff 42%, #f5fbff 100%);
}

body.auth-page {
  position: relative;
  overflow-x: hidden;
}

body.auth-page::before,
body.auth-page::after,
body.app-shell-page::before {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

body.auth-page::before {
  width: 22rem;
  height: 22rem;
  left: -8rem;
  top: -6rem;
  background: rgba(255, 215, 106, 0.26);
}

body.auth-page::after {
  width: 18rem;
  height: 18rem;
  right: -5rem;
  bottom: -4rem;
  background: rgba(92, 187, 235, 0.2);
}

body.app-shell-page::before {
  width: 24rem;
  height: 24rem;
  top: -11rem;
  right: -9rem;
  background: rgba(92, 187, 235, 0.18);
}

main {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  background: transparent;
  /* Horizontal padding is 0 so the content edges line up exactly with the
     .app-header box above, which is also capped at 1120px. Any side padding here
     would inset the body blocks and make them read as narrower than the header. */
  padding: 1.5rem 0;
  border-radius: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 auto 1.5rem;
  max-width: 1120px;
  padding: 1rem 1.25rem;
  border-radius: 0 0 var(--pp-radius-md) var(--pp-radius-md);
  background: rgba(255, 255, 255, 0.82);
  color: var(--pp-ink-900);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 32px rgba(30, 88, 120, 0.12);
  backdrop-filter: blur(16px);
}

.app-header h1 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-nav {
  gap: 0.65rem;
}

/* First-paint auth button.

   The label is supplied by CSS from the cached hint on <html> (set synchronously
   by scripts/auth-paint-hint.js in <head>), so the correct text is painted on the
   very first frame instead of being written by JS after Firebase resolves. That
   asynchronous write is what caused the Login -> Logout flash.

   Once the real auth state arrives, updateAuthNavButton() drops the attribute and
   sets textContent normally. The rules below stop applying at that point, so the
   verified state always wins over the hint.

   The button ships with EMPTY text content, so ::after is the only thing that
   sizes it. That keeps the width correct without a font-size hack. */
[data-auth-hint="out"] #logout-btn[data-auth-pending]::after {
  content: "Login";
}

[data-auth-hint="in"] #logout-btn[data-auth-pending]::after {
  content: "Logout";
}

/* Same treatment for the Admin link so it does not pop in a moment later.
   Hidden by default and revealed only when the cached hint says the last known
   session was an admin. Uses a class rather than an inline style attribute so
   these rules can win; inline styles would override the stylesheet. */
#nav-admin-link[data-auth-pending] {
  display: none;
}

[data-admin-hint="yes"] #nav-admin-link[data-auth-pending] {
  display: inline-flex;
}

.nav-link {
  color: var(--pp-ink-700);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem 1rem;
}

.nav-link:hover {
  background-color: rgba(92, 187, 235, 0.12);
}

.nav-link.active {
  background: linear-gradient(135deg, var(--pp-sky-500), #79c9ef);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(92, 187, 235, 0.28);
}

.btn {
  border-radius: 999px;
  padding: 0.82rem 1.35rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(29, 93, 125, 0.08);
}

.btn-primary {
  background: linear-gradient(135deg, var(--pp-sky-500), #7cc9ef);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #50b1e4, #70c5ee);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--pp-ink-900);
  border: 1px solid rgba(92, 187, 235, 0.22);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(227, 244, 255, 0.96);
  color: var(--pp-sky-700);
}

.btn-secondary:disabled,
.btn-primary:disabled {
  background: #d7e4eb;
  color: #7a909b;
}

.auth-container {
  min-height: 100vh;
  padding: 2rem 1.25rem;
}

.auth-card,
.dashboard-content,
.profile-card,
.card,
.safety-report-panel,
.equipment-panel,
.crowd-history-panel,
.admin-panel,
.park-detail,
.park-form-panel,
.park-card,
.search-filter-section,
.notification-panel {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  backdrop-filter: blur(12px);
}

.auth-card {
  max-width: 460px;
  padding: 2.25rem;
}

.auth-card h1,
.auth-card h2,
.dashboard-content h2,
.profile-card h2,
.card h2,
.card h3,
.park-detail h2,
.detail-section h3 {
  color: var(--pp-ink-900);
}

.auth-card h1 {
  margin-bottom: 0.75rem;
  font-size: 2.1rem;
}

.auth-card h2 {
  margin-bottom: 1rem;
}

.auth-helper-text {
  color: var(--pp-ink-700);
  font-size: 0.96rem;
  line-height: 1.55;
}

.auth-intro {
  margin: 0 auto 1.75rem;
  text-align: center;
  max-width: 28rem;
}

.form-group label,
.filter-controls h3,
.filter-group legend,
.profile-field label {
  color: var(--pp-ink-900);
}

.form-group input,
.form-group select,
.form-group textarea,
.search-input,
.filter-select {
  border: 1px solid rgba(61, 91, 108, 0.16);
  border-radius: var(--pp-radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--pp-ink-900);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-input:focus,
.filter-select:focus {
  outline: 2px solid rgba(92, 187, 235, 0.35);
  outline-offset: 1px;
  border-color: rgba(92, 187, 235, 0.88);
  box-shadow: 0 0 0 5px rgba(92, 187, 235, 0.12);
}

.toggle-link {
  color: var(--pp-sky-700);
}

.error-message,
.park-form-error,
.crowd-report-error,
.state-error {
  border-radius: var(--pp-radius-sm);
}

.park-form-success,
.crowd-report-success {
  background: #eef9ea;
  border: 1px solid #cce8c4;
  color: #2f6f3d;
}

.role-badge,
.amenity-tag {
  background: linear-gradient(135deg, #67c97f, var(--pp-leaf-500));
  color: #ffffff;
  border: none;
}

.profile-field p {
  border-left: none;
  border-radius: var(--pp-radius-sm);
  background: rgba(245, 251, 255, 0.95);
}

.page-intro {
  margin-bottom: 1.25rem;
  padding: 1.4rem 1.5rem;
}

.page-intro h2 {
  margin: 0.15rem 0 0.45rem;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
}

.page-intro-copy {
  max-width: 50rem;
  margin: 0;
  color: var(--pp-ink-700);
  line-height: 1.65;
}

.eyebrow {
  margin: 0;
  color: var(--pp-sky-700);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-container,
.profile-container,
.admin-container {
  max-width: 1120px;
}

/* These are layout wrappers, not surfaces. The shared card rule above gives them
   a translucent background, shadow, and blur, which showed up as a faint panel
   behind the real cards nested inside. Clearing box-shadow and backdrop-filter
   too (not just background/border) makes the wrapper fully invisible. */
.dashboard-content,
.profile-container,
.admin-container {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
}

.profile-container,
.admin-container {
  display: grid;
  gap: 1.25rem;
}

.profile-page .profile-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.profile-page .profile-main-column {
  display: grid;
  gap: 1.25rem;
}

.profile-page .profile-side-column {
  display: grid;
  gap: 1.25rem;
}

.profile-page .profile-layout-grid .profile-card {
  max-width: none;
  margin: 0;
}

.profile-page .profile-image-card {
  padding: 0;
  overflow: hidden;
}

.profile-page .profile-side-image {
  display: block;
  width: 100%;
  height: auto;
}

.profile-page .profile-favorites-count-card {
  text-align: center;
  background: linear-gradient(180deg, rgba(227, 245, 221, 0.9) 0%, rgba(245, 251, 255, 0.96) 100%);
}

.profile-page .profile-favorites-count {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pp-ink-900);
  line-height: 1.45;
}

.profile-page .profile-favorite-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--pp-sky-700);
  text-decoration: none;
  cursor: pointer;
}

.profile-page .profile-favorite-link:hover,
.profile-page .profile-favorite-link:focus-visible {
  text-decoration: underline;
}

.profile-page .profile-main-column h3 {
  font-size: 1rem;
}

.profile-favorite-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 95;
}

.profile-favorite-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 45, 0.5);
  backdrop-filter: blur(2px);
}

.profile-favorite-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(840px, calc(100vw - 1.25rem));
  max-height: calc(100vh - 1.25rem);
  overflow: auto;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d5e4ef;
  padding: 1rem;
}

.profile-favorite-modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: #e8f2fb;
  color: #24506a;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

body.profile-favorite-modal-open {
  overflow: hidden;
}

body.profile-favorite-modal-open .profile-favorite-modal {
  display: block;
}

.profile-page #change-password-btn {
  font-size: 0.9rem;
}

.about-container {
  max-width: 1120px;
  display: grid;
  gap: 1.25rem;
}

.about-hero {
  padding: 1.8rem;
  background:
    radial-gradient(circle at top right, rgba(255, 215, 106, 0.28), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 251, 255, 0.94) 100%);
}

.about-hero h2 {
  margin: 0.35rem 0 0.75rem;
  max-width: clamp(16ch, 72vw, 26ch);
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.about-hero-copy,
.about-copy-card p,
.about-feature-card p,
.about-workflow-card p,
.about-retrospective-card p,
.about-lesson-card p,
.about-roadmap-card p,
.about-footer p {
  margin: 0;
  color: var(--pp-ink-700);
  line-height: 1.7;
}

.about-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.about-meta-row p {
  margin: 0;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(57, 116, 147, 0.14);
  color: var(--pp-ink-900);
  font-size: 0.95rem;
}

.about-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
}

.about-jump-nav a {
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(227, 244, 255, 0.84);
  color: var(--pp-sky-700);
  font-weight: 700;
  text-decoration: none;
}

.about-jump-nav a:hover {
  background: rgba(200, 232, 251, 0.96);
}

.about-section {
  display: grid;
  gap: 1.25rem;
  scroll-margin-top: 8.5rem;
}

.about-section-intro {
  margin-bottom: 0;
}

.about-overview-grid,
.about-feature-grid,
.about-retrospective-grid,
.about-lessons-grid,
.about-roadmap-grid {
  display: grid;
  gap: 1.1rem;
}

.about-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Single column, so each card should size to its own content. It must NOT get
   the equal-row treatment below, or a short card like "Intended Users" is
   stretched to match the very tall "Main Features" card stacked beneath it. */
.about-intro-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.about-feature-grid,
.about-retrospective-grid,
.about-roadmap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-lessons-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Equal heights across ALL rows, applied only to genuinely multi-column grids.
   Rows size independently by default, so a grid that wraps (5 lesson cards in a
   3-up layout) would otherwise give each row a different height. */
.about-feature-grid,
.about-retrospective-grid,
.about-roadmap-grid,
.about-lessons-grid {
  grid-auto-rows: 1fr;
}

.about-copy-card,
.about-feature-card,
.about-workflow-card,
.about-retrospective-card,
.about-lesson-card,
.about-roadmap-card,
.about-footer {
  padding: 1.35rem 1.45rem;
}

.about-copy-card,
.about-feature-card,
.about-retrospective-card,
.about-lesson-card,
.about-roadmap-card {
  display: grid;
  gap: 0.45rem;
}

.about-copy-card > h4 {
  margin: 0.1rem 0 0;
}

.about-copy-card > p,
.about-copy-card > ul,
.about-copy-card > ol {
  margin: 0;
}

.about-copy-card > ul,
.about-copy-card > ol {
  padding-left: 1.15rem;
}

.about-copy-card h3,
.about-feature-card h3,
.about-workflow-card h3,
.about-retrospective-card h3,
.about-lesson-card h3,
.about-roadmap-card h3,
.about-footer h2 {
  margin: 0;
}

.about-roadmap-card h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.about-feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 251, 255, 0.98) 100%);
}

.about-workflow-stack {
  display: grid;
  gap: 1rem;
}

.about-workflow-card {
  display: grid;
  gap: 1rem;
  padding: 1.45rem 1.5rem;
}

.about-workflow-heading {
  display: grid;
  gap: 0.25rem;
}

.about-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.about-workflow-grid section {
  padding: 1rem;
  border-radius: var(--pp-radius-md);
  background: rgba(245, 251, 255, 0.9);
  border: 1px solid rgba(57, 116, 147, 0.12);
}

.about-workflow-grid h4,
.about-roadmap-label {
  margin: 0 0 0.45rem;
  color: var(--pp-sky-700);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-roadmap-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 252, 255, 0.98) 100%),
    rgba(255, 255, 255, 0.96);
}

.about-footer {
  background: linear-gradient(135deg, rgba(227, 244, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.search-filter-section {
  padding: 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 251, 255, 0.96) 100%);
}

.filter-group,
.review-item,
.notification-item,
.safety-report-item,
.equipment-item,
.admin-lookup-table th,
.admin-lookup-table td {
  border-radius: var(--pp-radius-sm);
}

.filter-group,
.review-item,
.notification-item,
.safety-report-item,
.equipment-item,
.state-loading,
.state-empty {
  border-color: var(--pp-border);
}

.park-card:hover {
  border-color: rgba(92, 187, 235, 0.48);
  box-shadow: 0 22px 32px rgba(43, 109, 144, 0.16);
}

.results-header {
  border-bottom-color: rgba(92, 187, 235, 0.18);
}

.close-button,
.modal-close {
  border: 0;
  background: transparent;
  color: var(--pp-ink-700);
  font-size: 1.5rem;
  cursor: pointer;
}

.close-button:hover,
.modal-close:hover {
  color: var(--pp-ink-900);
}

@media (max-width: 768px) {
  .app-header {
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
  }

  .auth-container {
    padding: 1.25rem 0.9rem;
  }

  .auth-card,
  .dashboard-content,
  .profile-card,
  .card,
  .search-filter-section,
  .park-detail,
  .park-card {
    border-radius: 18px;
  }

  .page-intro {
    padding: 1.1rem 1rem;
  }

  .about-hero,
  .about-copy-card,
  .about-feature-card,
  .about-workflow-card,
  .about-retrospective-card,
  .about-lesson-card,
  .about-roadmap-card,
  .about-footer {
    padding: 1.1rem 1rem;
  }

  .about-overview-grid,
  .about-feature-grid,
  .about-workflow-grid,
  .about-retrospective-grid,
  .about-roadmap-grid {
    grid-template-columns: 1fr;
  }

  .about-jump-nav {
    padding: 0.9rem;
  }

  .about-jump-nav a {
    width: 100%;
    text-align: center;
  }

  .about-meta-row {
    flex-direction: column;
  }

  .about-hero h2 {
    max-width: none;
  }

  main {
    /* Vertical only, to stay flush with .app-header. */
    padding: 1rem 0;
  }

  .profile-page .profile-layout-grid {
    grid-template-columns: 1fr;
  }
}

.favorites-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.25rem;
  color: #9e9e9e;
  transition: color 0.15s;
}

.favorites-toggle.active {
  color: #e53935;
}

.dashboard-park-modal-content .favorites-toggle {
  font-size: 2.3rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
}

/* ============================================================
   Sprint 3 Workstream 1 + Workstream 4 UI
   ============================================================ */

.notification-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.notification-section {
  margin-bottom: 1rem;
}

.notification-panel-container {
  margin-bottom: 1rem;
}

.notification-panel {
  background: #f8fbff;
  border: 1px solid #d8e6f5;
  border-radius: 8px;
  padding: 1rem;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.notification-item {
  border: 1px solid #dfe8f2;
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  background: #fff;
}

.notification-item.read {
  opacity: 0.78;
}

.notification-item p {
  margin: 0.2rem 0;
}

.safety-report-container,
.equipment-panel-container,
.crowd-history-container {
  margin-top: 1.25rem;
}

/* Sits tight under .park-map-controls, which supplies the spacing above. */
.park-map-container {
  margin-top: 0.75rem;
}

.safety-report-panel,
.equipment-panel,
.crowd-history-panel,
.admin-panel {
  background: #fff;
  border: 1px solid #e0e0e0;
  /* Matches the shared card radius so these panels do not read as sharper-edged
     than every other surface in the app. */
  border-radius: var(--pp-radius-lg);
  padding: 1rem;
}

.safety-report-grid,
.equipment-grid {
  display: grid;
  gap: 0.75rem;
}

.safety-report-item,
.equipment-item {
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafafa;
}

.safety-report-item-header,
.equipment-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.status-action-row {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.status-action-row button {
  padding: 0.42rem 0.7rem;
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  background: #fff;
  cursor: pointer;
}

.admin-workspace .admin-note {
  margin-top: 0;
  color: #4f6170;
}

.admin-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.crowd-history-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: end;
  min-height: 180px;
}

.crowd-history-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.crowd-history-bar-wrap {
  width: 100%;
  min-height: 120px;
  background: #edf4fb;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.crowd-history-bar {
  width: 100%;
  background: #546e7a;
  border-radius: 6px 6px 0 0;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.crowd-history-date {
  font-size: 0.78rem;
  color: #526273;
}

.admin-lookup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.admin-lookup-table th {
  text-align: left;
  background: #f0f4f8;
  padding: 0.45rem 0.6rem;
  border-bottom: 2px solid #d5e2ef;
  font-weight: 700;
  white-space: nowrap;
}

.admin-lookup-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #e9eef4;
  word-break: break-all;
}

.admin-lookup-table tr:hover td {
  background: #f8fbff;
}

.admin-lookup-id {
  font-family: monospace;
  font-size: 0.8rem;
  color: #1a73e8;
  cursor: text;
  user-select: all;
}

.admin-help-text {
  margin-top: 0;
  color: var(--pp-ink-700);
  line-height: 1.55;
}

.admin-invite-result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--pp-radius-md);
  border: 1px solid rgba(92, 187, 235, 0.22);
  background: rgba(245, 251, 255, 0.95);
}

.admin-invite-result p {
  margin: 0 0 0.55rem;
}

.admin-link-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pp-ink-900);
}

.admin-link-box {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(61, 91, 108, 0.16);
  border-radius: var(--pp-radius-sm);
  background: #ffffff;
  color: var(--pp-ink-900);
  font: inherit;
  line-height: 1.45;
}

.admin-link-box:focus {
  outline: 2px solid rgba(92, 187, 235, 0.35);
  outline-offset: 1px;
}

/* Map toggle, positioned immediately above the map panel. */
.park-map-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Wrapper only. The map is rendered inside its own .card, so giving this a
   surface too produced a visible box behind the map panel. */
.park-map-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.park-map-view {
  width: 100%;
  height: 420px;
  border-radius: 8px;
  overflow: hidden;
}

.map-marker-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

.map-marker-badge.low {
  background: #e8f5e9;
  color: #2e7d32;
}

.map-marker-badge.moderate {
  background: #fff8e1;
  color: #f57f17;
}

.map-marker-badge.busy {
  background: #fff3e0;
  color: #e65100;
}

.map-marker-badge.very-busy {
  background: #ffebee;
  color: #c62828;
}

.map-marker-badge.unknown {
  background: #eceff1;
  color: #455a64;
}

/* ============================================================
   Sprint 3 — 375px Mobile Breakpoint
   Single-column stacking and touch-friendly sizing for all
   Sprint 3 surfaces. Desktop behavior is unchanged.
   ============================================================ */

@media (max-width: 375px) {
  body {
    padding: 0.75rem;
  }

  main {
    /* Vertical only, to stay flush with .app-header. */
    padding: 0.75rem 0;
  }

  .home-search-overlay {
    width: min(88%, 320px);
    height: 3rem;
    top: 44.5%;
  }

  .home-ball {
    width: clamp(1.25rem, 6vw, 2rem);
  }

  .home-artboard {
    aspect-ratio: 4 / 3;
  }

  .card {
    padding: 0.875rem;
    border-radius: 6px;
  }

  .modal {
    padding: 1.25rem;
    border-radius: 8px;
    max-height: 95vh;
  }

  .modal-header h2 {
    font-size: 1rem;
  }

  .btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    min-height: 44px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 1rem;
    padding: 0.75rem;
    min-height: 44px;
  }

  .filter-controls {
    grid-template-columns: 1fr;
  }

  .park-results-list {
    grid-template-columns: 1fr;
  }

  .app-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .app-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .app-nav a,
  .app-nav button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .notification-panel,
  .equipment-panel,
  .review-section,
  .photo-upload-area,
  .crowd-history-panel {
    padding: 0.75rem;
  }

  /* Admin panels: scrollable and operable on mobile */
  .admin-panel,
  .moderation-panel,
  .audit-log-panel {
    padding: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .park-map-view {
    height: 260px;
  }

  .crowd-history-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .star-rating .star {
    font-size: 1.75rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .badge {
    font-size: 0.72rem;
  }
}