/* Voltas — reutiliza o tema e a linguagem visual do Rotas (../css/styles.css).
   Layout robusto: body flex-column (header em cima, corpo preenche). */
/* padding:0 anula o `body{padding-top:48px}` do styles.css (que existe p/ o header
   fixo do Rotas) — no Voltas o header está no fluxo, senão fica uma barra vazia no topo. */
body.voltas { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg-dark); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; }

/* ── Header (igual ao .app-header do Rotas) ── */
.v-header { flex: 0 0 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--bg-card); border-bottom: 1px solid var(--border); box-sizing: border-box; }
.v-header .app-brand { font-family: 'DM Serif Display', serif; font-size: 1.15rem; }
.v-title { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.v-user { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.v-header #topAuth { display: inline-flex; }
.v-header:has(.v-user:empty) #topAuth { margin-left: auto; }

/* CTA de login no sidebar (utilizador sem sessão) */
.v-login-cta { padding: 30px 20px; text-align: center; }
.v-login-t { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.v-login-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 18px; line-height: 1.5; }
.v-login-cta .v-add { width: 100%; }

/* ── Corpo: sidebar + mapa ── */
.v-body { flex: 1; display: flex; min-height: 0; }
.v-sidebar { width: 340px; min-width: 340px; display: flex; flex-direction: column;
  background: var(--bg-dark); border-right: 1px solid var(--border); }

.v-controls { padding: 14px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--border); }
.v-controls[hidden] { display: none; }   /* tem de vencer o display:flex acima */
.v-add { background: var(--accent); color: var(--bg-dark); border: none; border-radius: var(--radius);
  padding: 9px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.v-add:hover { background: var(--accent-light); }
.v-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-add-row[hidden] { display: none; }
.v-add-row .v-add { padding: 9px 6px; font-size: 0.82rem; }
.v-clear { background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px; font-family: inherit; font-size: 0.78rem; cursor: pointer; }
.v-clear:hover { border-color: #ef4444; color: #ef4444; }
.v-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 9px; font-family: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.v-share:hover { background: rgba(232,168,56,0.22); }
.v-share svg { width: 16px; height: 16px; }
.v-share[hidden] { display: none; }   /* tem de vencer o display:inline-flex acima */
.v-controls .search-box svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }

/* ── Ordenar: botões em vez de dropdown ── */
.v-sort-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; }
.v-sort-label { flex-shrink: 0; }
.v-sort-btns { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.v-sort-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px; font-family: inherit;
  font-size: 0.78rem; cursor: pointer; }
.v-sort-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.v-sort-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.v-sort-arrow { font-size: 0.75rem; }

/* ── Filtros: sliders duplos (distância/data) reutilizam .fd-* do Rotas (styles.css) ── */
.v-controls .filter-dist { padding: 4px 2px 2px; }
.v-controls .filter-dist + .filter-dist { margin-top: 2px; }

/* ── Lista ── */
.v-list { flex: 1; overflow-y: auto; }
.v-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.v-item:hover { background: var(--bg-card); }
.v-item.active { background: var(--accent-dim); }
.v-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.v-item-main { flex: 1; min-width: 0; }
.v-item-name { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.v-item-name-link { color: var(--text); text-decoration: none; cursor: pointer; }
.v-item-name-link:hover, .v-item:hover .v-item-name-link { color: var(--accent); text-decoration: underline; }
.v-item-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.v-item-acts { display: flex; gap: 2px; flex-shrink: 0; }
.v-item-acts button { background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.85rem; padding: 4px 6px; border-radius: var(--radius-sm); line-height: 1; }
.v-item-acts button:hover { background: var(--bg-card-hover); color: var(--text); }

/* ── Mapa ── */
.v-map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* menu central (.view-toggle) usa o CSS do Rotas; fica top-center sobre o mapa */

/* Botões flutuantes (localização + satélite) — absolute dentro do .v-map-wrap para
   ficarem sobre o MAPA em desktop e em mobile (onde o mapa é a secção de baixo). */
.voltas .float-locate-btn { position: absolute; top: 12px; right: 16px; }
.voltas .float-sat { top: 56px; }

/* ── Vista de UMA volta (mesmas classes .detail-card/.trail-stats/.elevation-container do styles.css,
   usadas na página de detalhe de uma Rota — mantém a UI consistente entre Voltas e Rota). ── */
.v-detail { flex: 1; overflow-y: auto; }
.v-detail[hidden] { display: none; }
.v-detail-back { display: flex; align-items: center; gap: 6px; background: transparent; border: none;
  color: var(--text-muted); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 14px 14px 4px; width: 100%; text-align: left; }
.v-detail-back:hover { color: var(--accent); }
.v-detail .detail-card { margin: 10px 14px 4px; }
.v-detail .trail-stats { padding: 12px 14px; }
.v-detail .elevation-container { margin: 0 14px 14px; }

/* ── Popup do mapa (nome/data/distância + ações) — estilizado no tema escuro do Rotas ── */
.leaflet-popup-content-wrapper { background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.leaflet-popup-tip { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; }
.leaflet-popup-content { margin: 12px 14px 12px; }
.leaflet-popup-close-button { color: var(--text-muted) !important; padding: 6px 7px 0 0 !important; }
.leaflet-popup-close-button:hover { color: var(--text) !important; }
.v-popup { font-family: 'DM Sans', system-ui, sans-serif; min-width: 210px; }
.v-popup-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; color: var(--accent); line-height: 1.25; }
.v-popup-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.v-popup-sep { opacity: 0.6; }
.v-popup-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.v-popup-acts button { border-radius: var(--radius-sm); padding: 7px 6px; font-size: 0.72rem;
  font-weight: 700; cursor: pointer; font-family: inherit; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.v-popup-acts button.v-popup-view { background: var(--accent); color: var(--bg-dark); }
.v-popup-acts button.v-popup-view:hover { background: var(--accent-light); }
.v-popup-acts button.v-popup-edit { background: transparent; color: var(--text); border-color: var(--border); }
.v-popup-acts button.v-popup-edit:hover { background: var(--bg-card-hover); border-color: var(--text-dim); }
.v-popup-acts button.v-popup-dl { background: transparent; color: var(--text); border-color: var(--border); }
.v-popup-acts button.v-popup-dl:hover { background: var(--bg-card-hover); border-color: var(--text-dim); }

/* ── Legenda (como o Rotas, sem quebrar linha) ── */
.v-legend { position: absolute; bottom: 16px; right: 16px; background: rgba(35,41,57,0.94);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
  font-size: 0.78rem; z-index: 500; box-shadow: var(--shadow); }
.v-legend .row { display: flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1.7; }
.v-legend .sw { width: 16px; height: 4px; border-radius: 2px; flex-shrink: 0; }

/* ── Toast / progresso ── */
.v-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--bg-card); color: var(--text); padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--accent-dim); display: none; z-index: 6000; box-shadow: var(--shadow); }
.v-progress { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  width: min(360px, 90vw); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; z-index: 6000; }
.v-progress-bar { height: 6px; background: var(--accent); border-radius: 3px; width: 0; transition: width 0.2s; }
#vProgressText { font-size: 0.76rem; color: var(--text-muted); }

/* ── Mobile: sidebar em cima, mapa em baixo ── */
@media (max-width: 768px) {
  .v-body { flex-direction: column; }
  .v-sidebar { width: 100%; min-width: 0; max-height: 46%; border-right: none;
    border-bottom: 1px solid var(--border); }
  .v-map-wrap { flex: 1; }
  .v-user { max-width: 30vw; }
}