:root {
  --bg: #0b0d10;
  --bg-alt: #101319;
  --surface: #161a21;
  --surface-2: #1c212a;
  --border: #262c37;
  --border-soft: #1f2530;
  --text: #e7eaef;
  --text-dim: #9aa4b2;
  --text-faint: #6b7383;
  --accent: #ff7a45;
  --accent-2: #ffa869;
  --teal: #2dd4bf;
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.16);
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.14);
  --yellow: #fbbf24;
  --yellow-bg: rgba(251, 191, 36, 0.14);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Elements toggled via the `hidden` attribute set their own `display` value
   elsewhere in this file (flex/inline-block for layout), which otherwise
   silently overrides the browser's built-in `[hidden] { display: none }`
   rule. This keeps `hidden` authoritative no matter what. */
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(255, 122, 69, 0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(45, 212, 191, 0.06), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: rgba(16, 19, 25, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  padding: 0.85rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.brand { display: flex; align-items: center; gap: 0.55rem; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a0f08;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(255, 122, 69, 0.35);
}
.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; }

.auth-area { display: flex; align-items: center; gap: 0.7rem; font-size: 0.83rem; }
.auth-status { color: var(--text-dim); }

.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.btn-outline { color: var(--text); background: var(--surface); }
.btn-outline:hover { background: var(--surface-2); border-color: #3a4252; }
.btn-outline:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a0f08;
  border-color: transparent;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-small { padding: 0.3rem 0.7rem; font-size: 0.75rem; }

main { max-width: 1240px; margin: 0 auto; padding: 1.25rem; }

.banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fde68a;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.start-time-controls { display: flex; gap: 0.5rem; align-items: center; }
.start-time-controls input[type="datetime-local"] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-family: inherit;
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 0.6rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}
.chart-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.chart-card h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.chart-current-label { font-size: 0.8rem; color: var(--accent-2); font-weight: 600; }

.elevation-chart { position: relative; }
.elevation-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.elevation-chart .ec-axis-label { fill: var(--text-faint); font-size: 9px; font-family: var(--font); }
.elevation-chart .ec-station-label { fill: var(--text-faint); font-size: 8px; font-family: var(--font); }
.elevation-chart .ec-point { transition: r 0.15s ease; cursor: pointer; }
.elevation-chart .ec-point:hover { r: 8; }
.elevation-chart .ec-current-ring {
  animation: ec-pulse 1.8s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ec-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

.pace-chart { position: relative; }
.pace-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pace-chart .pc-axis-label { fill: var(--text-faint); font-size: 9px; font-family: var(--font); }
.pace-chart .pc-bar-label { fill: var(--text-faint); font-size: 8px; font-family: var(--font); }
.pace-chart .pc-value-label { font-size: 9px; font-family: var(--font-mono); font-weight: 700; }
.pace-chart .pc-bar { transition: opacity 0.15s ease; cursor: pointer; }
.pace-chart .pc-bar:hover { opacity: 0.8; }
.pace-chart .pc-empty { color: var(--text-faint); font-size: 0.85rem; padding: 1.5rem 0.5rem; text-align: center; }

.dashboard {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}
.dashboard h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.pace-model-control { display: flex; align-items: center; gap: 0.5rem; }
.pace-model-control label { font-size: 0.72rem; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.pace-model-control select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0.75rem;
}
.dash-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  position: relative;
  overflow: hidden;
}
.dash-icon { font-size: 0.95rem; opacity: 0.75; margin-bottom: 0.3rem; }
.dash-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 600; }
.dash-value { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-top: 0.2rem; font-family: var(--font-mono); letter-spacing: -0.02em; }
.dash-footer {
  margin-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { padding: 0.65rem 0.7rem; text-align: center; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th {
  background: var(--bg-alt);
  position: sticky;
  top: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 700;
}
td { color: var(--text); }
td.items-cell, th.items-cell { white-space: normal; max-width: 220px; text-align: left; color: var(--text-dim); }
tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
tr.row-start td, tr.row-finish td { font-weight: 700; background: var(--bg-alt); }

td.cutoff-exceeded { background: var(--red-bg); color: #fecaca; }
td.pace-ahead { background: var(--green-bg); color: #bbf7d0; }
td.pace-behind { background: var(--yellow-bg); color: #fde68a; }

.status-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.status-badge.badge-red { background: rgba(248, 113, 113, 0.22); color: #fca5a5; }
.status-badge.badge-green { background: rgba(74, 222, 128, 0.2); color: #86efac; }
.status-badge.badge-yellow { background: rgba(251, 191, 36, 0.2); color: #fde68a; }

.actual-cell { display: flex; gap: 0.4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.actual-cell input[type="datetime-local"] {
  /* 16px minimum — anything smaller makes mobile Safari/Chrome zoom the
     whole page in on focus, which is disruptive inside a modal. */
  font-size: 1rem;
  padding: 0.45rem 0.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  font-family: inherit;
  color-scheme: dark;
}
/* Shows a suggested (planned) time that hasn't actually been saved yet —
   distinct from a real recorded value, which uses the normal solid text. */
.actual-cell input[type="datetime-local"].input-defaulted {
  color: var(--text-faint);
  font-style: italic;
  border-style: dashed;
}
.save-status { font-size: 0.68rem; color: var(--text-faint); min-width: 3.5rem; text-align: left; }
.time-in-station-note { font-size: 0.68rem; color: var(--text-faint); width: 100%; margin-top: 0.15rem; }

/* ---------- Arrival / Time in Aid cells (collapsed from 5 columns) ---------- */
.arr-single { font-weight: 700; }

.arrival-cell-v3, .aid-cell-v3 { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.arr-toggle, .aid-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
.tap-target { cursor: pointer; }
.tap-target:hover .arr-main, .tap-target:hover .aid-main { text-decoration: underline dotted; text-underline-offset: 3px; }

.arr-main, .aid-main { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.arr-main.projected, .aid-main.projected { color: var(--text-faint); font-style: italic; font-weight: 500; }
.arr-main.ahead, .aid-main.ahead { color: var(--green); }
.arr-main.behind, .aid-main.behind { color: var(--yellow); }
.arr-main.exceeded { color: var(--red); }
.arr-main.ontime, .aid-main.ontime { color: var(--text); }
.aid-main.dash { color: var(--text-faint); font-weight: 500; }

.flag { font-size: 0.85rem; }

.pill {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.ahead { background: var(--green-bg); color: #bbf7d0; }
.pill.behind { background: var(--yellow-bg); color: #fde68a; }
.pill.exceeded { background: var(--red-bg); color: #fecaca; }
.pill.dim { background: rgba(255, 255, 255, 0.06); color: var(--text-faint); }

.eta-line { font-size: 0.68rem; color: var(--text-dim); }
.eta-line.overdue { color: var(--red); font-weight: 600; }

.reveal-line { display: none; margin-top: 0.3rem; }
.revealed .reveal-line { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.reveal-text { font-size: 0.7rem; color: var(--text-faint); white-space: normal; }

.planned-minutes-cell { display: inline-flex; align-items: center; gap: 0.3rem; }
.planned-minutes-cell input[type="number"] {
  width: 4.2rem;
  /* Same 16px-minimum reasoning as the datetime input above. */
  font-size: 1rem;
  padding: 0.45rem 0.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  font-family: inherit;
}

.next-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a0f08;
  white-space: nowrap;
}
tr.row-next td {
  background: rgba(255, 122, 69, 0.06);
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.row-next:hover td { background: rgba(255, 122, 69, 0.1); }
.clear-btn {
  font-size: 0.75rem;
  color: var(--red);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
}
.clear-btn:hover { background: rgba(248, 113, 113, 0.2); }

.loading-row { padding: 1.5rem; color: var(--text-faint); }

.legend { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.9rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 4px; }
.swatch-red { background: var(--red); }
.swatch-green { background: var(--green); }
.swatch-yellow { background: var(--yellow); }

.photos-cell { display: flex; justify-content: center; }
.photos-btn { white-space: nowrap; }
.photos-btn:disabled { opacity: 0.4; cursor: default; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 8, 0.7);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.1rem 1.25rem 1.4rem;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; gap: 0.6rem; }
.modal-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.modal-close {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.station-edit-btn { margin-left: 0.6rem; vertical-align: middle; }
.station-edit-fields { display: flex; flex-direction: column; gap: 1.1rem; }
/* Always label-above-field, full width — a row that sometimes wraps and
   sometimes doesn't (depending on label length vs. available width) looks
   inconsistent from field to field. Stacking unconditionally means every
   field looks the same regardless of screen size or label length, and
   gives the datetime/number inputs their full width to work with instead
   of being squeezed next to a label. */
.station-edit-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.station-edit-label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.station-edit-row .actual-cell,
.station-edit-row .planned-minutes-cell {
  width: 100%;
  justify-content: flex-start;
}
.station-edit-row .actual-cell input[type="datetime-local"],
.station-edit-row .planned-minutes-cell input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
}

.photo-upload-area { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.photo-upload-label { cursor: pointer; }
.photo-upload-status { font-size: 0.78rem; color: var(--text-faint); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.photo-thumb-wrap { position: relative; }
.photo-thumb-link { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-soft); }
.photo-thumb {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg-alt);
  transition: transform 0.15s ease;
}
.photo-thumb-link:hover .photo-thumb { transform: scale(1.04); }
.photo-empty-msg { color: var(--text-faint); font-size: 0.85rem; margin: 0.5rem 0 0; }

.photo-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(11, 13, 16, 0.75);
  color: var(--red);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.photo-delete-btn:hover { background: rgba(248, 113, 113, 0.25); color: #fecaca; }

/* Larger touch targets on touch devices */
@media (pointer: coarse) {
  .btn { padding: 0.6rem 1.05rem; }
  .clear-btn { width: 30px; height: 30px; font-size: 0.85rem; }
  .actual-cell input[type="datetime-local"] { padding: 0.5rem; font-size: 0.95rem; }
  #refreshBtn { padding: 0.55rem 0.95rem; }
}

@media (max-width: 640px) {
  .topbar h1 { font-size: 1rem; }
  main { padding: 0.85rem; }
}

/* Below this width, the 12-column table doesn't fit a phone screen even with
   horizontal scroll being usable, so turn each row into a stacked card. */
@media (max-width: 760px) {
  .table-wrap { overflow-x: visible; border: none; background: none; box-shadow: none; }

  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  #stationsTable tbody tr {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    padding: 0.4rem 0;
    box-shadow: var(--shadow);
  }
  tr.row-start td, tr.row-finish td { background: transparent; }
  tr.row-start, tr.row-finish { background: var(--surface-2); }

  #stationsTable td {
    text-align: right;
    white-space: normal;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
  }
  #stationsTable td:last-child { border-bottom: none; }

  #stationsTable td::before {
    content: attr(data-label);
    float: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-right: 0.75rem;
  }

  #stationsTable td[data-label="Name"] {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    background: var(--bg-alt);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  #stationsTable td[data-label="Name"]::before { display: none; }

  .actual-cell { justify-content: flex-end; }
  .actual-cell input[type="datetime-local"] { flex: 1 1 auto; min-width: 0; }

  #stationsTable .arrival-cell-v3, #stationsTable .aid-cell-v3 { align-items: flex-end; }
  #stationsTable .arr-toggle, #stationsTable .aid-toggle { justify-content: flex-end; }

  tr.row-next td[data-label="Name"] { box-shadow: none; }
  tr.row-next { box-shadow: inset 3px 0 0 var(--accent); }
}