/* ============================================
   TRAILbuddy · Views layout
   Top header, bottom nav, view switching.
   Každý view má svoju sekciu nižšie.
   ============================================ */

/* ===== HEADER ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3); /* 8px 12px — mobile-first, desktop zvýši */
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  background: rgba(26, 20, 16, 0.6);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  gap: var(--space-2); /* 8px medzi logo / header-nav / header-user */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-md); /* mobile-first; desktop zvýši na fs-lg */
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}
.logo-mark {
  width: 28px;
  height: 28px;
  background: var(--signal);
  clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0% 50%);
  transform: rotate(180deg);
}
.logo span:last-child { color: var(--signal); }

.header-nav {
  display: none; /* skrytá na mobile; desktop min-width query ju zobrazí */
  gap: var(--space-1);
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bone-dim);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  position: relative;
}
.nav-btn:hover {
  color: var(--bone);
  background: var(--surface-hover);
}
.nav-btn.active {
  color: var(--signal);
  border-color: var(--signal);
}

.nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--signal);
  color: var(--earth);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile base: icon-only tlačidlá (40×40px) — text a ikony sa riešia v media queries */
.header-user .nav-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-user .nav-btn-label { display: none; }
.header-user .nav-btn-icon  { display: block; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.avatar:hover { border-color: var(--signal); }

.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 120px; height: 120px; }

/* Placeholder avatar (no photo yet) */
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--earth-3);
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
}

/* ===== MAIN ===== */
.app-main {
  /* mobile-first: menší padding, odsadenie pre bottom-nav + iPhone safe area */
  padding: var(--space-4) var(--space-4)
    calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-5));
  min-height: calc(100vh - var(--header-height));
  min-width: 0;
  overflow-x: hidden;
}

/* ===== VIEW SWITCHING =====
   Všetky views sú v DOM. Router prepína .view-active.
   Skrýva ich `display: none` cez .hidden na sekcii. */
.view {
  animation: fadeIn var(--t-normal);
}

/* ===== BOTTOM NAV (mobile + tablet) ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(26, 20, 16, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: flex-start; /* zarovnanie hore, safe area padding dole */
  z-index: var(--z-sticky);
  padding: var(--space-1) var(--space-4) env(safe-area-inset-bottom, 0px);
}

.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--bone-dim);
  padding: var(--space-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--t-fast);
  min-width: 60px;
  position: relative;
}
.bottom-nav-btn:hover { color: var(--bone); }
.bottom-nav-btn.active { color: var(--signal); }

.bottom-nav-icon {
  font-size: var(--fs-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================
   VIEW: AUTH (§5.1)
   ================================================ */
[data-view="auth"] {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
[data-view="auth"] .card {
  background: transparent;
  border: none;
  padding: 0;
}

.auth-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--bone-dim);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast);
}
.auth-tab.active {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--bone-ghost);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Password visibility toggle */
.auth-pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.auth-pw-wrap .input {
  padding-right: 48px;
  display: block;
  width: 100%;
}
.auth-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--bone-dim);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.15s;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}
.auth-pw-toggle:hover,
.auth-pw-toggle:focus,
.auth-pw-toggle:active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--bone);
}
.auth-pw-toggle svg {
  display: block;
  pointer-events: none;
  stroke: currentColor;
}
.auth-pw-eye.hidden,
.auth-pw-eye-off.hidden {
  display: none;
}

/* Chrome autofill — zabráni modrému pozadiu ktoré prebíja náš dizajn */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--earth-2) inset !important;
  -webkit-text-fill-color: var(--bone) !important;
  caret-color: var(--bone) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ================================================
   VIEW: ONBOARDING (§5.2)
   ================================================ */
#view-onboarding {
  max-width: 640px;
  margin: 0 auto;
}

.onboarding-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.onboarding-dot {
  flex: 1;
  height: 3px;
  background: var(--earth-3);
  border-radius: var(--r-full);
  transition: background var(--t-normal);
}
.onboarding-dot.active { background: var(--signal); }
.onboarding-dot.done   { background: var(--success); }

.onboarding-step {
  margin-bottom: var(--space-8);
}
.onboarding-step-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-4);
}
.onboarding-step h1 {
  font-size: var(--fs-xl); /* mobile-first; tablet+ zvýši */
  margin-bottom: var(--space-3);
}
.onboarding-step h1 span { color: var(--signal); }
.onboarding-step-sub {
  color: var(--bone-dim);
  margin-bottom: var(--space-6);
  font-size: var(--fs-md);
}

.onboarding-footer {
  position: sticky;
  /* mobile: sticky bottom odsadený o výšku bottom-nav + safe area */
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

/* ================================================
   VIEW: SWIPE (§5.3)
   ================================================ */
#view-swipe {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.swipe-deck {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--earth-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.swipe-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
}

.swipe-action-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  border: 2px solid var(--border);
  background: var(--earth-2);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: all var(--t-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swipe-action-btn:hover {
  transform: translateY(-3px) scale(1.05);
}
.swipe-action-btn.pass    { border-color: var(--bone-ghost); color: var(--bone-ghost); }
.swipe-action-btn.like    { border-color: var(--success); color: var(--success); }
.swipe-action-btn.super   { border-color: var(--signal); color: var(--signal); }

/* ================================================
   VIEW: PROFILE (§5.4)
   ================================================ */
#view-profile {
  max-width: 720px;
  margin: 0 auto;
}

.profile-hero {
  display: flex;
  flex-direction: column; /* mobile-first: avatar nad textom */
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.profile-meta {
  flex: 1;
}
.profile-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-1);
}
.profile-location {
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.profile-section {
  margin-bottom: var(--space-8);
}
.profile-section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: var(--space-3);
}

/* ================================================
   VIEW: MATCHES (§5.5)
   ================================================ */
#view-matches {
  max-width: 720px;
  margin: 0 auto;
}

.match-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.match-item {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--earth-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.match-item:hover {
  background: var(--earth-3);
  border-color: var(--border-strong);
}

.match-preview {
  flex: 1;
  min-width: 0;
}
.match-name {
  font-weight: 700;
  margin-bottom: 2px;
}
.match-last-msg {
  color: var(--bone-dim);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-time {
  color: var(--bone-ghost);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}

/* ================================================
   VIEW: CHAT (§5.6)
   ================================================ */
#view-chat {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height) - var(--bottom-nav-h) - var(--space-16));
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--earth-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  position: sticky;
  top: var(--header-height);
  z-index: 10;
}

.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--earth-2);
  overflow-y: auto;
}

.chat-bubble {
  max-width: 75%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg);
  line-height: var(--lh-normal);
  word-wrap: break-word;
}
.chat-bubble.mine {
  align-self: flex-end;
  background: var(--signal);
  color: var(--earth);
}
.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--earth-3);
  color: var(--bone);
}

.chat-input-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--earth-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ================================================
   VIEW: TRAILS (§5.7)
   ================================================ */
#view-trails {
  max-width: var(--max-width);
}

.trails-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.trails-viewmode {
  display: flex;
  gap: 2px;
  background: var(--earth-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
}
.trails-viewmode button {
  background: transparent;
  border: none;
  color: var(--bone-dim);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
}
.trails-viewmode button.active {
  background: var(--signal);
  color: var(--earth);
}

#trails-map {
  width: 100%;
  height: 60vh;
  min-height: 280px; /* mobile-first; desktop query zvýši */
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--earth-2);
}

/* ================================================
   VIEW: TRAIL DETAIL (§5.8)
   ================================================ */
#view-trail-detail {
  max-width: 960px;
  margin: 0 auto;
}

.trail-hero {
  margin-bottom: var(--space-6);
}
.trail-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.trail-meta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ================================================
   VIEW: ADD TRAIL (§5.9)
   ================================================ */
#view-add-trail {
  max-width: 820px;
  margin: 0 auto;
}

.wizard-steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  counter-reset: wizard;
}
.wizard-step {
  flex: 1;
  padding: var(--space-2);
  background: var(--earth-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0; /* mobile: skryje text, zobrazí iba číslo cez ::before */
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  counter-increment: wizard;
  overflow: hidden;
  white-space: nowrap;
}
.wizard-step::before {
  content: counter(wizard, decimal-leading-zero);
  font-size: var(--fs-xs); /* ::before ignoruje font-size: 0 na rodiči */
  color: var(--bone-ghost);
  letter-spacing: 0;
}
.wizard-step.active {
  background: var(--signal);
  color: var(--earth);
  border-color: var(--signal);
}
.wizard-step.done {
  background: var(--success);
  color: var(--earth);
  border-color: var(--success);
}

/* ================================================
   VIEW: NOTIFICATIONS (§5.10)
   ================================================ */
#view-notifications {
  max-width: 720px;
  margin: 0 auto;
}

.notification-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.notification-item:hover {
  background: var(--surface-hover);
}
.notification-item.unread {
  background: rgba(255, 90, 31, 0.04);
}
.notification-item.unread::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--signal);
  align-self: center;
  flex-shrink: 0;
}

/* ================================================
   VIEW: SETTINGS (§5.11)
   ================================================ */
#view-settings {
  max-width: 640px;
  margin: 0 auto;
}

.settings-section {
  margin-bottom: var(--space-8);
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border: none; }

.settings-label { font-weight: 600; }
.settings-desc {
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  margin-top: 2px;
}

/* ===== RESPONSIVE (mobile-first) =====
   Základné štýly = mobile.
   min-width queries pridávajú komplexitu pre väčšie obrazovky. */

/* --- Tablet: 640px+ --- */
@media (min-width: 640px) {
  .app-header { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .app-main {
    padding: var(--space-6) var(--space-6)
      calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-6));
  }

  .logo { font-size: var(--fs-lg); }

  .onboarding-step h1 { font-size: var(--fs-2xl); }

  .profile-hero { flex-direction: row; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-8); }

  .wizard-step {
    padding: var(--space-3);
    font-size: var(--fs-xs);
  }
  .wizard-step::before {
    content: counter(wizard, decimal-leading-zero) " · ";
    letter-spacing: var(--ls-wide);
  }

  #trails-map { min-height: 400px; }
}

/* --- Tablet/Desktop: 768px+ — nav prepínač --- */
@media (min-width: 768px) {
  .header-nav  { display: flex; }
  .header-user { display: flex; }
  .bottom-nav  { display: none; }

  /* 768–1023px: icon-only štýl zdedený z base — žiadne zmeny potrebné */
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
  .app-header { padding: var(--space-4) var(--space-6); gap: var(--space-4); }
  .app-main   { padding: var(--space-8) var(--space-8) var(--space-8); }

  .onboarding-step h1 { font-size: var(--fs-3xl); }
  .onboarding-footer  { bottom: var(--space-5); }

  .profile-hero { margin-bottom: var(--space-8); }

  #trails-map { min-height: 500px; }
}