/* ============================================================
   MOBILE & TABLET RESPONSIVE STYLES
   Family Tree SaaS — Professional mobile layout
   ============================================================ */

/* ── Mobile Bottom Nav (hidden on desktop) ─────────────────── */
.mobile-nav {
  display: none;
  align-items: center;
  height: 56px;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
  z-index: var(--z-sticky);
  box-shadow: 0 -1px 0 var(--color-border-default);
}

.mobile-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__btn:active {
  background: var(--color-neutral-100);
}

.mobile-nav__btn.is-active {
  color: var(--color-brand-500);
}

.mobile-nav__icon {
  font-size: 20px;
  line-height: 1;
}

/* Mobile panel backdrop */
.mobile-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: calc(var(--z-modal) - 1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: backdropIn 200ms ease forwards;
}

.mobile-panel-backdrop.is-active {
  display: block;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Tablet (≤ 1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Narrower side panels */
  .side-panel { width: 240px; }

  /* Hide text labels on secondary topbar buttons */
  #btn-stats span,
  #btn-export-pdf span,
  #btn-export-png span {
    display: none;
  }

  /* Tighter topbar gap */
  .topbar { gap: var(--space-3); }
  .topbar__right { gap: var(--space-1); }

  /* Toolbar labels smaller */
  .toolbar__label { display: none; }
}


/* ── Mobile (≤ 767px) ───────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Variables ─────────────────────────────────── */
  :root {
    --mobile-topbar-h: 48px;
    --mobile-nav-h: 56px;
  }

  /* ── Topbar ────────────────────────────────────── */
  .topbar {
    height: var(--mobile-topbar-h);
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  /* Keep icon, hide brand text */
  .topbar__brand span:not(.topbar__brand-icon) {
    display: none;
  }

  .topbar__brand-icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-md);
  }

  /* Hide all topbar dividers */
  .topbar .topbar__divider { display: none; }

  /* Hide secondary topbar actions */
  #btn-stats,
  #btn-export-pdf,
  #btn-export-png { display: none; }

  /* Right group — tighter */
  .topbar__right { gap: var(--space-1); }

  /* Hide text in all topbar right buttons */
  .topbar__right .btn--ghost span { display: none; }

  /* Family name chip — shorter */
  .topbar__family-name {
    max-width: 90px;
    font-size: var(--font-size-xs);
    padding: 2px var(--space-2);
  }

  /* ── Toolbar ───────────────────────────────────── */
  .toolbar {
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* subtle indicator that toolbar scrolls */
    scroll-snap-type: x proximity;
  }

  .toolbar::-webkit-scrollbar { display: none; }

  .toolbar__label { display: none; }
  .toolbar__separator { margin: 0; }

  /* ── Side Panels → Mobile Overlay Drawers ─────── */
  .side-panel {
    position: fixed;
    top: var(--mobile-topbar-h, 48px);
    bottom: var(--mobile-nav-h, 56px);
    left: 0;
    width: min(85vw, 320px) !important;  /* override is-collapsed width:0 */
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    box-shadow: none;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    overflow: hidden;
  }

  .side-panel.is-mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-2xl);
  }

  /* Override desktop collapse so width doesn't become 0 */
  .side-panel.is-collapsed {
    overflow: hidden;
  }

  /* Right panel */
  .side-panel--right {
    left: auto;
    right: 0;
    transform: translateX(100%);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }

  .side-panel--right.is-mobile-open {
    transform: translateX(0);
  }

  /* RTL: flip which side each panel slides from */
  [dir="rtl"] .side-panel {
    left: auto;
    right: 0;
    transform: translateX(100%);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }

  [dir="rtl"] .side-panel.is-mobile-open {
    transform: translateX(0);
  }

  [dir="rtl"] .side-panel--right {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }

  [dir="rtl"] .side-panel--right.is-mobile-open {
    transform: translateX(0);
  }

  /* ── Tree Viewport ─────────────────────────────── */
  .tree-viewport {
    width: 100%;
    touch-action: none;  /* let JS handle all touch events */
  }

  /* Canvas controls — larger touch targets */
  .canvas-controls__group .btn {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-lg);
  }

  /* ── Statusbar → hidden on mobile ─────────────── */
  .statusbar { display: none; }

  /* ── Mobile Nav → show ─────────────────────────── */
  .mobile-nav { display: flex; }

  /* ── Modal → bottom sheet ──────────────────────── */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(20px) scale(1);  /* override desktop scale animation */
  }

  .modal-backdrop.is-open .modal {
    transform: translateY(0) scale(1);
  }

  /* ── Form grid → single column ─────────────────── */
  .form-row { grid-template-columns: 1fr; }

  /* ── Toast → above mobile nav ──────────────────── */
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--mobile-nav-h, 56px) + var(--space-3));
  }

  [dir="rtl"] .toast-container {
    left: var(--space-3);
    right: var(--space-3);
  }

  .toast {
    min-width: unset;
    max-width: 100%;
  }

  /* ── Touch target minimums ─────────────────────── */
  .btn--sm { min-height: 36px; }
  .btn--icon { min-width: 36px; min-height: 36px; }

  /* Person list items — easier to tap */
  .person-list-item {
    padding: var(--space-3);
    min-height: 48px;
  }
}


/* ── Landscape phones ───────────────────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  :root {
    --mobile-topbar-h: 40px;
    --mobile-nav-h: 44px;
  }

  .mobile-nav { height: 44px; }
  .mobile-nav__icon { font-size: 16px; }
  .topbar { height: 40px; }

  /* Panels fill most of screen height in landscape */
  .side-panel {
    top: var(--mobile-topbar-h, 40px);
    bottom: var(--mobile-nav-h, 44px);
  }
}


/* ── iPhone notch / home indicator safe area ────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .mobile-nav {
      height: calc(56px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    :root {
      --mobile-nav-h: calc(56px + env(safe-area-inset-bottom));
    }
  }
}