/* Brand/status colors (--ocean, --good, --fair, --poor, --none) stay constant
   across light and dark — only the neutral surface/text/border tokens below
   switch. Leaflet's map tiles are always light regardless of page theme, so
   anything drawn directly on the map (markers, the site-name tooltip) is
   deliberately left out of this too. */
:root {
  --ocean: #0a6e8c;
  --ocean-dark: #084f66;
  --good: #2e9e4f;
  --fair: #e0a800;
  --poor: #d1495b;
  --none: #9aa5ac;

  --bg: #f5f8f9;
  --surface: #ffffff;
  --surface-alt: #eef4f6;
  --surface-selected: #e3f2f7;
  --text: #1c2b30;
  --text-muted: #6b7a80;
  --border: #e5eaec;
  --border-strong: #c7d0d3;

  /* Headings/accents use this instead of --ocean-dark directly wherever
     they sit on a themed surface — --ocean-dark itself stays fixed (the
     nav bar's background, and the map's site-label text, are the same
     dark teal regardless of theme), but that exact color is too dark to
     read as *text on a dark surface*, so this lightens just for that case. */
  --ocean-text: #084f66;
}

/* Dark applies when the OS prefers it AND the visitor hasn't explicitly
   forced light on their profile page (data-theme="light"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10171a;
    --surface: #1b2528;
    --surface-alt: #223035;
    --surface-selected: #1f3a42;
    --text: #dce6e9;
    --text-muted: #8ea0a6;
    --border: #2c3a3e;
    --border-strong: #3c4d52;
    --ocean-text: #6fd0ea;
  }
}

/* Explicit override from the profile page's toggle, regardless of OS setting. */
:root[data-theme="dark"] {
  --bg: #10171a;
  --surface: #1b2528;
  --surface-alt: #223035;
  --surface-selected: #1f3a42;
  --text: #dce6e9;
  --text-muted: #8ea0a6;
  --border: #2c3a3e;
  --border-strong: #3c4d52;
  --ocean-text: #6fd0ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Generic form-control theming — covers every text/number/date/etc. input,
   select, and textarea site-wide (admin filters, the date picker, report
   forms...) without needing per-page overrides. Checkboxes/radios are
   excluded since re-coloring native checkbox chrome tends to look worse, not
   better; buttons have their own explicit ocean-colored styling below. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font: inherit;
}

.topnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  padding: 0.7rem 1rem;
  background: var(--ocean-dark);
  color: white;
}
.topnav a { color: #d8f0f7; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav strong { margin-right: auto; font-size: 1.1rem; }

.units-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  overflow: hidden;
}
.units-toggle .unit-btn {
  background: none;
  color: #d8f0f7;
  border: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.units-toggle .unit-btn:hover { background: rgba(255,255,255,0.15); }
.units-toggle .unit-btn.active {
  background: white;
  color: var(--ocean-dark);
}
.units-toggle .unit-btn.active:hover { background: white; }

/* "Today's conditions" strip — see includes/conditions.php. Sits between the
   nav and .controls, so it's the first thing a diver sees before checking
   the map itself. */
.conditions-strip {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.conditions-stat { display: flex; flex-direction: column; line-height: 1.15; }
.conditions-value { font-weight: 700; color: var(--ocean-text); font-size: 0.95rem; }
.conditions-label {
  color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.conditions-forecast-text { color: var(--text-muted); font-size: 0.82rem; flex: 1 1 200px; }

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.controls label { font-weight: 600; font-size: 0.9rem; }
.controls input[type="date"] { margin-left: 0.4rem; padding: 0.3rem; }
.controls select { margin-left: 0.4rem; padding: 0.3rem; font: inherit; font-size: 0.85rem; }
.hint { color: var(--text-muted); font-size: 0.85rem; }

.btn-reset-view {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ocean-text);
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-reset-view:hover { background: var(--surface-alt); border-color: var(--ocean); }
.btn-reset-view.active { background: var(--ocean); color: white; border-color: var(--ocean); }
.btn-reset-view.active:hover { background: var(--ocean-dark); }

#map { height: 60vh; width: 100%; }

/* "Show my location" marker (assets/js/app.js) — a pulsing blue dot, the
   same visual language as Google/Apple Maps' own "you are here" marker, kept
   visually distinct from the diamond/dot site markers around it. */
.user-location-marker {
  width: 14px; height: 14px;
  background: #1a73e8;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  position: relative;
}
.user-location-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: rgba(26, 115, 232, 0.45);
  border-radius: 50%;
  animation: user-location-pulse 2s ease-out infinite;
}
@keyframes user-location-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}

.legend {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--surface);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
  font-size: 0.85rem;
  z-index: 1000;
}
.legend-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.legend-caret { color: var(--ocean); font-size: 0.7rem; }

/* Collapsed by default on narrow screens — it otherwise eats a chunk of an
   already-small mobile map view. Expanded by default everywhere else.
   force-expanded/force-collapsed (assets/js/app.js) override this default
   for the rest of the session once the toggle is clicked, either direction. */
.legend-body { display: block; }
@media (max-width: 600px) {
  .legend-body { display: none; }
}
.legend-body.force-expanded { display: block !important; }
.legend-body.force-collapsed { display: none !important; }

.legend-body > div { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.swatch { width: 12px; height: 12px; display: inline-block; transform: rotate(45deg); }
.vis-good { background: var(--good); }

/* Permanent site-name labels — override Leaflet's bulkier default tooltip
   chrome (padding/shadow/border) for something that reads more like a map
   label than a popup. */
.leaflet-tooltip.site-label {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ocean-dark);
  white-space: nowrap;
  pointer-events: none; /* clicks pass through to the marker underneath */
}
.leaflet-tooltip.site-label::before {
  border-right-color: rgba(255, 255, 255, 0.9);
}
.vis-fair { background: var(--fair); }
.vis-poor { background: var(--poor); }
.vis-none { background: var(--none); }

.reports-panel { max-width: 900px; margin: 1rem auto; padding: 0 1rem; }
.reports-panel h2 { font-size: 1rem; color: var(--ocean-text); margin: 0 0 0.6rem; }

/* The trailing 6rem here (rather than on .reports-panel, the last one of
   which used to carry it) is what keeps this clear of the fixed-position
   .legend box in the bottom-right corner, now that footer is the actual
   last thing on the page. */
footer {
  max-width: 900px;
  margin: 1rem auto 6rem;
  padding: 0 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
footer a { color: var(--ocean-text); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.report-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.report-row:hover { background: var(--surface-alt); border-color: var(--ocean); }
.report-row-selected, .report-row-selected:hover {
  background: var(--surface-selected); border-color: var(--ocean-text); border-width: 2px;
  padding: calc(0.6rem - 1px) calc(0.9rem - 1px); /* offset the extra 1px border so layout doesn't shift */
}
.report-row-main { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.report-time { font-weight: 600; color: var(--ocean-text); }
.vis-pill { padding: 2px 9px; border-radius: 10px; font-size: 0.75rem; color: white; font-weight: 600; }

.prior-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 0.5rem; overflow: hidden;
}
.prior-day-toggle {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none; padding: 0.6rem 0.9rem; text-align: left; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ocean-text);
}
.prior-day-toggle:hover { background: var(--surface-alt); }
.prior-day-caret { display: inline-block; width: 0.8em; color: var(--ocean); }
.prior-day-body { padding: 0 0.9rem 0.7rem; }

.diamond-marker {
  width: 16px; height: 16px;
  transform: rotate(45deg);
  border: 2px solid white;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dot-marker {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--none);
  border: 1px solid white;
  transition: transform 0.15s ease;
}
.marker-highlight, .marker-selected { z-index: 10000 !important; }
.marker-highlight .diamond-marker, .marker-selected .diamond-marker {
  transform: rotate(45deg) scale(1.6);
  box-shadow: 0 0 0 4px rgba(10, 110, 140, 0.35), 0 0 4px rgba(0,0,0,0.6);
}
.marker-highlight .dot-marker, .marker-selected .dot-marker { transform: scale(1.8); }
.marker-selected .diamond-marker, .marker-selected .dot-marker {
  box-shadow: 0 0 0 4px rgba(10, 110, 140, 0.55), 0 0 5px rgba(0,0,0,0.7);
}

.auth-box {
  max-width: 420px;
  margin: 3rem auto;
  background: var(--surface);
  padding: 1.6rem;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
.auth-box h1 { margin-top: 0; font-size: 1.3rem; color: var(--ocean-text); }
.auth-box form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-box label { font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.auth-box input, .auth-box select, .auth-box textarea {
  padding: 0.5rem; font-weight: normal;
}
.checkbox-row { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
button {
  background: var(--ocean); color: white; border: none; padding: 0.6rem;
  border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 1rem;
}
button:hover { background: var(--ocean-dark); }
.error { color: var(--poor); font-weight: 600; }
.notice { color: var(--good); font-weight: 600; }

/* Honeypot: visually hidden but present in the DOM/tab order avoided via tabindex="-1"
   in the markup. Off-screen rather than display:none, since some bots skip display:none. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Leaflet's popup chrome (.leaflet-popup-content-wrapper) is always white —
   it's its own default styling, unaffected by [data-theme], which makes
   sense since it floats over the map's tiles (also always light regardless
   of page theme). So popup content is deliberately pinned to light-mode
   colors here rather than using the (possibly dark-mode) --text/--hint
   tokens, which would otherwise go near-white-on-white in dark mode. */
.leaflet-popup-content { color: #1c2b30; }
.leaflet-popup-content .hint { color: #6b7a80; }
.popup-report { border-top: 1px solid #e0e5e7; padding-top: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; }
.popup-report:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.popup-badge { font-size: 0.7rem; background: var(--ocean); color: white; padding: 1px 5px; border-radius: 3px; }

.admin-wrap { max-width: 1000px; margin: 1.5rem auto; padding: 0 1rem; }

.admin-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.2rem;
}
.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* sit on top of .admin-tabs' own border so the active underline replaces it */
  padding: 0.6rem 1rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active { color: var(--ocean-text); border-bottom-color: var(--ocean); }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }
.admin-filters { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.admin-filters label { font-weight: 600; font-size: 0.9rem; }
.admin-filters select, .admin-filters input { margin-left: 0.4rem; padding: 0.3rem; font: inherit; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.admin-table th, .admin-table td {
  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.admin-table th { background: var(--surface-alt); }
.admin-table form { margin: 0; }
.btn-danger { background: var(--poor); padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-danger:hover { background: #a83648; }
.btn-approve { background: var(--good); padding: 0.3rem 0.7rem; font-size: 0.85rem; margin-right: 0.4rem; }
.btn-approve:hover { background: #227a3d; }
.btn-edit-report { background: var(--ocean); padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-edit-report:hover { background: var(--ocean-dark); }
.admin-actions form { display: flex; gap: 0.4rem; }

.site-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.9rem 1rem; margin-bottom: 0.9rem;
}
.site-card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.site-hint-text { font-size: 0.88rem; color: var(--text); background: var(--surface-alt); padding: 0.5rem 0.7rem; border-radius: 4px; margin: 0.4rem 0; }
.site-publish-form, form.site-publish-form {
  display: flex; align-items: end; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.site-publish-form label {
  display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--text);
}
.site-publish-form input { padding: 0.35rem; width: 130px; }
.site-publish-form input[name="name"] { width: 220px; }

.site-page { max-width: 900px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
.site-page h1 { color: var(--ocean-text); margin-bottom: 0.3rem; }
.site-page h2 { font-size: 1rem; color: var(--ocean-text); margin: 1.6rem 0 0.6rem; }
.site-chart-wrap { position: relative; height: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem; }

/* Light/Dark/System toggle on profile.php — same idea as .units-toggle in
   the nav, but themed with the surface tokens since it sits on a card
   background instead of the always-dark-teal nav bar. */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
}
.theme-btn {
  background: none;
  color: var(--text);
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.theme-btn:hover { background: var(--surface-alt); }
.theme-btn.active { background: var(--ocean); color: white; }
.theme-btn.active:hover { background: var(--ocean); }

/* 12-hour/24-hour toggle on profile.php — same idea as .theme-toggle above. */
.time-format-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
}
.time-format-btn {
  background: none;
  color: var(--text);
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.time-format-btn:hover { background: var(--surface-alt); }
.time-format-btn.active { background: var(--ocean); color: white; }
.time-format-btn.active:hover { background: var(--ocean); }