/* ============================================================
   LA STRADA — NAVIGÁCIÓS CSATORNÁK (LS / Calimoto / Google Maps)
   v20260715_nav_channels_v2
   Közös stílusfájl a route_editor.html (feltöltő kártyák) és a
   route.html (publikus linkek) számára — egy helyen élnek a
   csatorna-színek, hogy a két oldal sose csússzon szét egymástól.
   ============================================================ */

:root {
  --nav-ls:       #0a8554;
  --nav-calimoto: #c14e00;
  --nav-gmaps:    #4285f4;
}

/* ────────────────────────────────────────────────────────────
   SZERKESZTŐ — feltöltő kártyák (route_editor.html)
   Az oldal saját (kompakt, 3px sugarú) design-nyelvét követi.
   ──────────────────────────────────────────────────────────── */

.gpx-block-intro {
  margin: 0 0 10px;
  color: var(--mid, #7a7468);
  font-size: .74rem;
  line-height: 1.5;
}

.gpx-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.gpx-channel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line, #d6cfb8);
  border-radius: var(--radius, 3px);
  background: var(--panel, #fff);
  padding: 9px;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.gpx-channel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}
.gpx-channel--ls::before       { background: var(--nav-ls); }
.gpx-channel--calimoto::before { background: var(--nav-calimoto); }
.gpx-channel--gmaps::before    { background: var(--nav-gmaps); }

.gpx-channel.is-dragover {
  border-color: currentColor;
  box-shadow: 0 0 0 2px rgba(10,133,84,.14);
}
.gpx-channel--ls.is-dragover       { box-shadow: 0 0 0 2px rgba(10,133,84,.16); }
.gpx-channel--calimoto.is-dragover { box-shadow: 0 0 0 2px rgba(193,78,0,.16); }
.gpx-channel--gmaps.is-dragover    { box-shadow: 0 0 0 2px rgba(66,133,244,.16); }

.gpx-channel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gpx-channel-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
}
.gpx-channel-icon svg { width: 100%; height: 100%; }
.gpx-channel-copy { min-width: 0; flex: 1; }
.gpx-channel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.15;
  color: var(--ink, #1a1a1a);
}
.gpx-channel-hint {
  margin-top: 1px;
  color: var(--mid, #7a7468);
  font-size: .66rem;
  line-height: 1.3;
}
.gpx-channel-status {
  margin: 8px 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--mid-soft, #bfb6a0);
}
.gpx-channel-status.has-file { color: var(--green-dark, #006b33); }
.gpx-channel--calimoto .gpx-channel-status.has-file { color: var(--nav-calimoto); }
.gpx-channel--gmaps .gpx-channel-status.has-file    { color: var(--nav-gmaps); }

.gpx-channel-upload-btn {
  width: 100%;
  min-height: 28px;
  border: 1px dashed var(--line, #d6cfb8);
  border-radius: var(--radius, 3px);
  background: var(--bg, #f6f1e3);
  color: var(--ink, #1a1a1a);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .02em;
  cursor: pointer;
  padding: 5px 6px;
}
.gpx-channel-upload-btn:hover:not(:disabled) { border-color: var(--ink, #1a1a1a); }
.gpx-channel-upload-btn:disabled { opacity: .5; cursor: not-allowed; }
.gpx-channel-drop-hint {
  display: block;
  margin-top: 5px;
  color: var(--mid-soft, #bfb6a0);
  font-size: .62rem;
  text-align: center;
}

/* fájllista szerepkör szerint csoportosítva */
.gpx-list { gap: 8px; }
.gpx-role-group {
  border: 1px solid var(--line-soft, #e6dfc9);
  border-radius: var(--radius, 3px);
  overflow: hidden;
}
.gpx-role-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  background: var(--bg, #f6f1e3);
  border-bottom: 1px solid var(--line-soft, #e6dfc9);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mid, #7a7468);
}
.gpx-role-group-count { font-weight: 600; text-transform: none; letter-spacing: 0; }
.gpx-role-group-files { display: flex; flex-direction: column; }
.gpx-role-group-files .gpx-row {
  border: 0;
  border-bottom: 1px solid var(--line-soft, #e6dfc9);
  border-radius: 0;
}
.gpx-role-group-files .gpx-row:last-child { border-bottom: 0; }

.gpx-role-switch {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.role-tag {
  border: 1px solid var(--line, #d6cfb8);
  background: var(--panel, #fff);
  color: var(--mid-soft, #bfb6a0);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius, 3px);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}
.role-tag:hover:not(:disabled) { color: var(--ink, #1a1a1a); border-color: var(--ink, #1a1a1a); }
.role-tag:disabled { opacity: .28; cursor: not-allowed; }
.role-tag--ls.active       { background: var(--nav-ls); border-color: var(--nav-ls); color: #fff; }
.role-tag--calimoto.active { background: var(--nav-calimoto); border-color: var(--nav-calimoto); color: #fff; }
.role-tag--gmaps.active    { background: var(--nav-gmaps); border-color: var(--nav-gmaps); color: #fff; }

@media (max-width: 900px) {
  .gpx-channel-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   PUBLIKUS OLDAL — napi navigációs linkek (route.html)
   A "cartolina" kártya-nyelvet követi (nagyobb tipó, lágyabb ívek).
   ──────────────────────────────────────────────────────────── */

.tour-day-nav-hub {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.tour-day-nav-group {
  --nc: var(--nav-ls);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  border: 1px solid rgba(45,33,26,.12);
  border-left: 4px solid var(--nc);
  border-radius: 10px;
  background: var(--cartolina-cream, #fffcf4);
  overflow: hidden;
}
.tour-day-nav-group--ls       { --nc: var(--nav-ls); }
.tour-day-nav-group--calimoto { --nc: var(--nav-calimoto); }
.tour-day-nav-group--gmaps    { --nc: var(--nav-gmaps); }

.tour-day-nav-mark {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 8px;
}
.tour-day-nav-mark svg { width: 30px; height: 30px; }

.tour-day-nav-content { min-width: 0; padding: 9px 10px 9px 0; }
.tour-day-nav-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: color-mix(in srgb, var(--nc) 82%, #111);
  margin-bottom: 6px;
}
.tour-day-nav-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.tour-nav-link {
  appearance: none;
  min-height: 35px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--nc) 55%, #fff);
  border-radius: 9px;
  background: color-mix(in srgb, var(--nc) 9%, #fff);
  color: color-mix(in srgb, var(--nc) 80%, #111);
  padding: 6px 11px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .12s, background .12s, color .12s;
}
.tour-nav-link--secondary { background: transparent; }
.tour-nav-link:hover {
  transform: translateY(-1px);
  background: var(--nc);
  color: #fff;
  text-decoration: none;
}
.tour-nav-link:disabled { opacity: .58; cursor: wait; transform: none; }
.tour-nav-link-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  flex: 0 0 20px;
  font-size: .8rem;
}
.tour-nav-link-copy { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.tour-nav-link-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.tour-nav-link-meta { font-size: .66rem; font-weight: 600; opacity: .7; }

.tour-day-nav-empty {
  color: var(--muted, #6b5e4c);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .76rem;
  padding: 8px 10px;
  border: 1px dashed var(--light-border, rgba(45,33,26,.18));
  border-radius: 8px;
  background: rgba(255,255,255,.5);
}

@media (max-width: 620px) {
  .tour-day-nav-group { grid-template-columns: 40px minmax(0, 1fr); }
  .tour-day-nav-mark { min-height: 48px; }
  .tour-day-nav-mark svg { width: 24px; height: 24px; }
  .tour-nav-link { width: 100%; }
  .tour-nav-link-title { max-width: calc(100vw - 170px); }
}