/**
 * Titusville Stormwater Map — Styling
 *
 * Modern MUI-inspired design system with glass-morphic panels
 * Design tokens: custom properties for color, spacing, elevation, radius
 */

/* ============================================================================
   Design Tokens (CSS Custom Properties)
   ============================================================================ */

:root {
  /* Color Palette — drawn from the City of Titusville logo.
     Text-bearing tokens are darkened from the raw logo hues to hold
     WCAG AA (>=4.5:1) with white text; raw logo brights are reserved
     for decorative accents. */
  --color-primary: #0060c0;           /* logo royal blue (6.1:1 on white) */
  --color-primary-light: #1a70d4;     /* hover shade (4.9:1 on white) */
  --color-primary-lighter: #30a8d8;   /* logo wave blue — accents/borders only */
  --color-success: #507800;           /* logo lime, darkened (5.2:1 on white) */
  --color-success-light: #456800;     /* success hover (pressed, darker) */
  --color-warning: #d87800;           /* logo orange — decorative */
  --color-error: #c53000;             /* logo red-orange, darkened (5.5:1) */
  --color-error-dark: #9c2600;        /* error hover, darker */
  --color-info: #30a8d8;              /* logo wave blue — decorative */

  /* Surface & Text */
  --color-surface-primary: #ffffff;   /* primary surfaces */
  --color-surface-secondary: #f5f5f5; /* secondary bg */
  --color-surface-tertiary: #eeeeee;  /* tertiary bg */
  --color-text-primary: #1a1a1a;      /* primary text */
  --color-text-secondary: #555555;    /* secondary text */
  --color-text-tertiary: #888888;     /* tertiary text */
  --color-text-inverse: #ffffff;      /* text on dark */
  --color-border: #e0e0e0;            /* borders */
  --color-divider: #f0f0f0;           /* subtle dividers */

  /* Glass Morphism */
  --color-glass-bg: rgba(255, 255, 255, 0.85);
  --color-glass-border: rgba(255, 255, 255, 0.2);

  /* Spacing Grid (8px base) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows / Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --line-height-tight: 1.3;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-family-base);
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}

body {
  display: flex;
  flex-direction: column;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================================
   Banner
   ============================================================================ */

#banner {
  position: relative;
  z-index: 100;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-inverse);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  box-shadow: var(--shadow-md);
}

#status {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  display: block;
  margin-top: var(--spacing-xs);
}

/* ============================================================================
   Map Container
   ============================================================================ */

#map {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.maplibregl-canvas {
  display: block;
}

/* Enlarge default map control buttons to a ≥44px touch target */
.maplibregl-ctrl-group button {
  width: 44px !important;
  height: 44px !important;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--color-border);
}

/* ============================================================================
   Popup Styles
   ============================================================================ */

.popup-content {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  max-width: 300px;
}

.popup-content h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  font-weight: 600;
}

.popup-content h4 {
  margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 600;
}

.popup-content p {
  margin: var(--spacing-xs) 0;
  color: var(--color-text-secondary);
}

.report-item {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
}

.popup-photo {
  max-width: 100%;
  height: auto;
  margin-top: var(--spacing-xs);
  border-radius: var(--radius-sm);
  display: block;
}

/* ============================================================================
   Report Form Panel (Glass Morphism)
   ============================================================================ */

#report-panel {
  position: absolute;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 99;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;

  /* Glass morphism: translucent surface with backdrop blur */
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  #report-panel {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border);
  }
}

@media (max-width: 600px) {
  #report-panel {
    max-width: calc(100% - var(--spacing-lg));
    right: var(--spacing-sm);
    left: var(--spacing-sm);
  }
}

/* ============================================================================
   Report Button (Contained Variant)
   ============================================================================ */

#report-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  box-shadow: var(--shadow-md);
}

#report-btn:hover:not(:disabled) {
  background: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
}

#report-btn:active:not(:disabled) {
  transform: scale(0.98);
}

#report-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#report-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#report-btn.active {
  background: var(--color-error);
}

#report-btn.active:hover {
  background: var(--color-error-dark);
}

/* ============================================================================
   Report Form
   ============================================================================ */

#report-form {
  display: none;
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-divider);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: sheet-up var(--transition-slow);
}

/* Slide-up when the form flips from display:none → block */
@keyframes sheet-up {
  from { transform: translateY(var(--spacing-md)); opacity: 0.3; }
  to   { transform: none;                          opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  #report-form {
    animation: none;
  }
}

.form-section {
  margin-bottom: var(--spacing-md);
}

.form-section label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-section input[type="text"],
.form-section input[type="number"],
.form-section input[type="file"],
.form-section select,
.form-section textarea {
  width: 100%;
  padding: 10px var(--spacing-sm);
  /* 16px avoids iOS Safari auto-zoom-on-focus */
  font-size: 16px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-section input[type="text"]::placeholder,
.form-section input[type="number"]::placeholder,
.form-section select::placeholder,
.form-section textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-section input[type="text"]:focus,
.form-section input[type="number"]:focus,
.form-section input[type="file"]:focus,
.form-section select:focus,
.form-section textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 61, 92, 0.08);
}

.form-section textarea {
  resize: vertical;
  min-height: 80px;
}

/* ============================================================================
   Radio & Checkbox Groups
   ============================================================================ */

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: normal;
  margin-bottom: 0;
  cursor: pointer;
  /* Full-row tap target ≥44px for touch */
  min-height: 44px;
  font-size: 16px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
}

.radio-group label:hover,
.checkbox-group label:hover {
  background: var(--color-surface-secondary);
}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* ============================================================================
   Location Section
   ============================================================================ */

#location-section {
  display: none;
}

#location-display {
  display: block;
  padding: var(--spacing-sm);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  word-break: break-all;
}

#use-location-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 44px;
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base);
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

#use-location-btn:hover {
  background: var(--color-success-light);
  box-shadow: var(--shadow-md);
}

#use-location-btn:active {
  transform: scale(0.98);
}

#use-location-btn:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}

/* ============================================================================
   Turnstile Widget
   ============================================================================ */

#turnstile-widget {
  margin: var(--spacing-sm) 0;
  transform: scale(0.9);
  transform-origin: top left;
}

/* ============================================================================
   Privacy Note (Info Callout)
   ============================================================================ */

.privacy-note {
  padding: var(--spacing-sm);
  background: rgba(25, 118, 210, 0.04);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
}

.privacy-note strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ============================================================================
   Submit Button (Contained Variant)
   ============================================================================ */

#submit-btn {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  box-shadow: var(--shadow-md);
}

#submit-btn:hover:not(:disabled) {
  background: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
}

#submit-btn:active:not(:disabled) {
  transform: scale(0.98);
}

#submit-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.required::after {
  content: " *";
  color: var(--color-error);
  font-weight: 600;
}

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

@media (max-width: 600px) {
  #banner {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  #status {
    font-size: 11px;
    margin-top: var(--spacing-xs);
  }

  /* Docked, not floating: panel joins the flex column so the map pane
     shrinks to the leftover space (no dead overlay band). JS calls
     map.resize() on toggle so the canvas reflows to the new size. */
  #report-panel {
    position: static;
    max-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
    background: var(--color-surface-primary);
  }

  #report-btn {
    border-radius: 0;
  }

  /* Cap the docked form so the map pane keeps a usable slice. */
  #report-form {
    max-height: 45vh;
  }

  .popup-content {
    max-width: 250px;
    font-size: var(--font-size-sm);
  }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  #banner,
  #report-panel {
    display: none;
  }

  #map {
    position: static;
  }
}