/* ─────────────────────────────────────────────────────────────────────────────
   Intertidal — Frontend Styles
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --it-deep:       #011627;
  --it-ocean:      #0a3d62;
  --it-mid:        #0d6b9b;
  --it-surface:    #1da1c8;
  --it-foam:       #00d4e8;
  --it-seafoam:    #7ae8ef;
  --it-rising:     #00e5a0;
  --it-falling:    #1da1c8;
  --it-text:       #caf0f8;
  --it-text-dim:   #6ba8b8;
  --it-card:       rgba(1, 22, 39, 0.92);
  --it-border:     rgba(29, 161, 200, 0.18);
  --it-radius:     16px;
  --it-ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dashboard grid ────────────────────────────────────────────────────────── */

.intertidal-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.it-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.it-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* Full-width chart card (fleet overview) spans the whole charts grid */
.it-chart-card--full { grid-column: 1 / -1; }
.it-chart-card--full .it-graph {
  position: relative;
  height: 380px;
  padding-left: 36px;       /* reserve space for the fixed y-axis overlay */
}

/* Fixed y-axis: rendered as HTML by an external Chart.js plugin so the
   tick labels stay visible while the canvas scrolls horizontally. */
.it-graph__y-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.it-graph__y-tick {
  position: absolute;
  right: 6px;
  font-size: 9px;
  line-height: 1;
  color: #6ba8b8;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Horizontal scroll container for the 10-day fleet chart: viewport shows
   ~3 days at a time, inner canvas wrapper is 10/3 wider so the rest scrolls. */
.it-graph--scroll {
  height: 100%;       /* must inherit parent's 380px or the canvas collapses */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 161, 200, 0.4) transparent;
}
.it-graph--scroll::-webkit-scrollbar        { height: 8px; }
.it-graph--scroll::-webkit-scrollbar-track  { background: transparent; }
.it-graph--scroll::-webkit-scrollbar-thumb  {
  background: rgba(29, 161, 200, 0.35);
  border-radius: 4px;
}
.it-graph--scroll::-webkit-scrollbar-thumb:hover { background: rgba(29, 161, 200, 0.55); }

.it-graph-inner {
  width: calc(100% * 10 / 3);
  height: 100%;
}

/* ── Chart card ────────────────────────────────────────────────────────────── */

.it-chart-card {
  background: var(--it-card);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 20px 12px;
}

.it-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.it-chart-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--it-seafoam);
}

.it-chart-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--it-text-dim);
}

/* ── Car card ──────────────────────────────────────────────────────────────── */

.it-car {
  background: var(--it-card);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--it-ease), box-shadow 0.4s var(--it-ease);
}

.it-car:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 180, 216, 0.12), 0 0 0 1px rgba(0, 212, 232, 0.1);
}

/* ── Card header ───────────────────────────────────────────────────────────── */

.it-car-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
}

.it-car-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--it-seafoam);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.it-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.it-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.it-status-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.it-status--online  .it-status-dot   { background: var(--it-rising); box-shadow: 0 0 8px var(--it-rising); animation: it-pulse 2s infinite; }
.it-status--online  .it-status-label { color: var(--it-rising); }
.it-status--offline .it-status-dot   { background: #ff7675; }
.it-status--offline .it-status-label { color: #ff7675; }
.it-status--pending .it-status-dot   { background: var(--it-text-dim); }
.it-status--pending .it-status-label { color: var(--it-text-dim); }

.it-fallback-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f0a500;
  background: rgba(240, 165, 0, 0.1);
  border: 1px solid rgba(240, 165, 0, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
}

/* Confidence pill — how close our cosine interpolation tracks UKHO's
   full harmonic prediction. Set by JS based on |validation_drift_m|:
     < 5 cm   → good   (rising green)
     5–20 cm  → okay   (fallback amber)
     ≥ 20 cm  → poor   (offline red)
   Exact drift surfaced via the title attribute on hover. */
.it-confidence {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  cursor: help;
}
.it-confidence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.it-confidence--good .it-confidence-dot { background: var(--it-rising); box-shadow: 0 0 6px var(--it-rising); }
.it-confidence--okay .it-confidence-dot { background: #f0a500;          box-shadow: 0 0 6px rgba(240, 165, 0, 0.7); }
.it-confidence--poor .it-confidence-dot { background: #ff7675;          box-shadow: 0 0 6px rgba(255, 118, 117, 0.7); }

/* ── Aquarium ──────────────────────────────────────────────────────────────── */

.it-aquarium {
  position: relative;
  height: 180px;
  margin: 0 20px;
  background: var(--it-deep);
  /* clip-path instead of overflow:hidden + border-radius — the combination
     breaks CSS mask-position animation compositing in WebKit/Blink */
  clip-path: inset(0 round 12px);
  border: 1px solid var(--it-border);
  --it-wave-dur: 12s;
}

.it-aquarium-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--it-text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* Shimmer glass effect */
.it-aquarium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}


/* ── Wave-position custom props for keyframe mask-position animation ──────── */
/* @property typing required so @keyframes can interpolate length values */

@property --it-wx-1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --it-wx-2 {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* Composable Y-translation on the back wave: bob is the regular swell,
   nudge is an occasional upward kick. Both compose in transform: translateY. */
@property --it-bob-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --it-nudge-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ── Wave-edge mask technique ─────────────────────────────────────────────── */
/* Two overlapping radial gradients carve a sinusoidal top edge out of the
   water div. One radial draws crest arcs (black-filled circles below the
   midline), the other carves trough arcs (transparent circles above). Where
   they meet you get a smooth wave. Wavelength = 4 * --s, amplitude ≈ 0.5 * --s.
   See: css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/        */

/* ── Back wave layer ──────────────────────────────────────────────────────── */
/* LARGER --s = longer wavelength = bigger, gentler swells. Slower animation.
   Slight lighter top so the back wave reads as a distinct further layer
   without creating a dark "gap" band. */

.it-water.it-water--back {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /* 50% opacity over the dark aquarium ≈ rgb(1,117,136) — sits between
     the front cyan and the bg navy as the user requested */
  background: linear-gradient(
    180deg,
    rgba(0, 212, 232, 0.5) 0%,
    rgba(13, 107, 155, 0.6) 50%,
    rgba(10, 61, 98, 0.8)   100%
  );
  transition: height 2.5s var(--it-ease);
  z-index: 1;

  /* Ellipse mask: --sy controls amplitude (kept at 7px), --sx controls
     wavelength (set wider for gentle rolling swells behind the chop).
     Two-value radial-gradient = ellipse with independent x/y radii. */
  --sy: 5px;
  --sx: 5px;
  --ry: calc(var(--sy) * 1.28);
  --rx: calc(var(--sx) * 1.28);

  -webkit-mask:
    radial-gradient(var(--rx) var(--ry) at 50% calc(1.8 * var(--sy)), #000 99%, #0000 101%)
      calc(var(--it-wx-2) - 2 * var(--sx)) 0 / calc(4 * var(--sx)) 100% repeat-x,
    radial-gradient(var(--rx) var(--ry) at 50% calc(-0.8 * var(--sy)), #0000 99%, #000 101%)
      var(--it-wx-2) var(--sy) / calc(4 * var(--sx)) 100% repeat-x;
  mask:
    radial-gradient(var(--rx) var(--ry) at 50% calc(1.8 * var(--sy)), #000 99%, #0000 101%)
      calc(var(--it-wx-2) - 2 * var(--sx)) 0 / calc(4 * var(--sx)) 100% repeat-x,
    radial-gradient(var(--rx) var(--ry) at 50% calc(-0.8 * var(--sy)), #0000 99%, #000 101%)
      var(--it-wx-2) var(--sy) / calc(4 * var(--sx)) 100% repeat-x;

  transform: translateY(calc(var(--it-bob-y) + var(--it-nudge-y)));
  animation:
    it-wave-scroll-2 22s linear infinite reverse,
    it-bob 5s ease-in-out infinite,
    it-nudge 13s ease-in-out infinite;
}

/* ── Front wave layer ─────────────────────────────────────────────────────── */
/* SMALLER --s = shorter wavelength = quicker chop on the surface. Faster
   animation. Main bright cyan gradient. */

.it-water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(
    180deg,
    rgba(0, 212, 232, 0.95)  0%,
    rgba(13, 107, 155, 0.98) 45%,
    rgba(10, 61, 98, 1)      100%
  );
  transition: height 2.5s var(--it-ease);
  z-index: 3;

  --s: 5px;
  --R: calc(var(--s) * 1.28);

  /* Mask SHIFTED DOWN 2px so the stroke layer beneath shows through as a
     2px band at the wave's top edge. */
  -webkit-mask:
    radial-gradient(var(--R) at 50% calc(1.8 * var(--s)), #000 99%, #0000 101%)
      calc(var(--it-wx-1) - 2 * var(--s)) 2px / calc(4 * var(--s)) 100% repeat-x,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--s)), #0000 99%, #000 101%)
      var(--it-wx-1) calc(var(--s) + 2px) / calc(4 * var(--s)) 100% repeat-x;
  mask:
    radial-gradient(var(--R) at 50% calc(1.8 * var(--s)), #000 99%, #0000 101%)
      calc(var(--it-wx-1) - 2 * var(--s)) 2px / calc(4 * var(--s)) 100% repeat-x,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--s)), #0000 99%, #000 101%)
      var(--it-wx-1) calc(var(--s) + 2px) / calc(4 * var(--s)) 100% repeat-x;

  animation: it-wave-scroll-1 5s linear infinite;
}

/* ── White stroke layer ───────────────────────────────────────────────────── */
/* Sibling of front + back. Identical mask to where the front USED to be (no
   shift), with white background. The front's mask is shifted DOWN 2px, so the
   white peeks out as a 2px band exactly along the wave's top edge. z-index 2
   sits between back (1) and front (3). */

.it-water.it-water--stroke {
  background: var(--it-seafoam);
  z-index: 2;

  -webkit-mask:
    radial-gradient(var(--R) at 50% calc(1.8 * var(--s)), #000 99%, #0000 101%)
      calc(var(--it-wx-1) - 2 * var(--s)) 0 / calc(4 * var(--s)) 100% repeat-x,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--s)), #0000 99%, #000 101%)
      var(--it-wx-1) var(--s) / calc(4 * var(--s)) 100% repeat-x;
  mask:
    radial-gradient(var(--R) at 50% calc(1.8 * var(--s)), #000 99%, #0000 101%)
      calc(var(--it-wx-1) - 2 * var(--s)) 0 / calc(4 * var(--s)) 100% repeat-x,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--s)), #0000 99%, #000 101%)
      var(--it-wx-1) var(--s) / calc(4 * var(--s)) 100% repeat-x;
}

/* Speed everything up on hover — front + stroke chop quickens, back swell
   races, vertical bob shortens. Higher-specificity selectors so they win
   against the per-layer animation rules. */
.it-aquarium:hover .it-water {
  animation-duration: 2s;
}
.it-aquarium:hover .it-water.it-water--back {
  animation-duration: 8s, 2s, 5s;
}

.it-level-label {
  position: absolute;
  right: 14px;
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 4px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition: bottom 2.5s var(--it-ease);
  line-height: 1;
  pointer-events: none;
}

/* ── Stats row ─────────────────────────────────────────────────────────────── */

.it-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 14px 20px 0;
  background: var(--it-border);
  border-radius: 10px;
  overflow: hidden;
}

.it-stat {
  background: rgba(1, 22, 39, 0.7);
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.it-stat-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-text-dim);
  margin-bottom: 5px;
}

.it-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--it-text);
}

.it-tide-rising       { color: var(--it-rising); }
.it-tide-falling      { color: var(--it-falling); }
.it-stat-value--dim   { color: var(--it-text-dim); }

/* ── Sparkline ─────────────────────────────────────────────────────────────── */

.it-graph {
  height: 140px;
}

.it-graph canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Station footer ────────────────────────────────────────────────────────── */

.it-station {
  padding: 10px 20px 16px;
  font-size: 0.72rem;
  color: var(--it-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Moon phase ────────────────────────────────────────────────────────────── */

.it-moon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(10, 61, 98, 0.4);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.it-moon-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.it-moon-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--it-seafoam);
}

.it-moon-detail {
  font-size: 0.72rem;
  color: var(--it-text-dim);
  letter-spacing: 0.05em;
}

/* ── Map ───────────────────────────────────────────────────────────────────── */

.intertidal-map-wrap {
  width: 100%;
  height: 480px;
  border-radius: var(--it-radius);
  overflow: hidden;
  border: 1px solid var(--it-border);
}

/* Custom Leaflet popup */
.it-popup strong   { color: var(--it-seafoam); display: block; margin-bottom: 4px; font-size: 0.95rem; }
.it-popup small    { color: var(--it-text-dim); font-size: 0.75rem; }

/* ── Map pin blip ─────────────────────────────────────────────────────────── */
/* Container holds the dot + an expanding ring that "blips" whenever the
   car's logged_at timestamp changes (live check-in or fallback update). */

.it-pin-wrap {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.it-pin-blip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

.it-pin-blip.it-pin-blip--active {
  animation: it-pin-blip 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes it-pin-blip {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(5.5); opacity: 0;   }
}

/* ── Loading skeleton ──────────────────────────────────────────────────────── */

.it-skeleton {
  background: linear-gradient(90deg, var(--it-ocean) 25%, var(--it-mid) 50%, var(--it-ocean) 75%);
  background-size: 200% 100%;
  animation: it-shimmer 1.6s infinite;
  border-radius: 12px;
}

/* ── Animations ────────────────────────────────────────────────────────────── */

@keyframes it-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--it-rising); }
  50%       { box-shadow: 0 0 18px var(--it-rising), 0 0 36px rgba(0, 229, 160, 0.3); }
}

/* Shift mask-position by one full wavelength (4 * --s = 20px) for seamless loop.
   Both waves now share the same wavelength; only speed and direction differ. */
@keyframes it-wave-scroll-1 {
  from { --it-wx-1: 0px; }
  to   { --it-wx-1: -20px; }
}

@keyframes it-wave-scroll-2 {
  from { --it-wx-2: 0px; }
  to   { --it-wx-2: -20px; }
}

/* Gentle vertical bob for the back layer — like a slow swell rising and
   falling underneath the chop. Different period to the wave scroll so the
   two motions drift, never lock into a visible repeat. */
@keyframes it-bob {
  0%, 100% { --it-bob-y: 0px; }
  50%      { --it-bob-y: 4px; }
}

/* Occasional 2px upward kick — fires once per 13s cycle, held briefly so
   the back layer doesn't quite disappear behind the front. Long period
   relative to the 5s bob = irregular feel against the regular swell. */
@keyframes it-nudge {
  0%, 65%, 100% { --it-nudge-y: 0px;  }
  72%, 80%      { --it-nudge-y: -2px; }
}

@keyframes it-ripple-expand {
  to { transform: scale(5); opacity: 0; }
}

.it-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 212, 232, 0.45);
  transform: scale(0);
  animation: it-ripple-expand 0.7s ease-out forwards;
  pointer-events: none;
  z-index: 4;
}

@keyframes it-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .it-water,
  .it-water.it-water--back            { transition: none; animation: none; }
  .it-status-dot                      { animation: none; }
  .it-skeleton                        { animation: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .intertidal-dashboard { gap: 16px; }
  .it-status-grid,
  .it-charts-grid { grid-template-columns: 1fr; }
  .it-aquarium    { height: 140px; }
  .it-level-label { font-size: 1.2rem; }
}