/* ═══════════════════════════════════════════════════════════════
   VIANA ASSETS — Mobile UX  v1.0
   Bottom Navigation · Touch Targets · Safe Areas · Swipe · Haptic
   
   Prinzipien:
   - Bottom Nav nur auf Mobile (<768px) — Desktop bleibt Sidebar
   - Safe-Area-Insets für Notch + Home-Bar (iOS/Android)
   - Touch Target minimum 44×44px (WCAG 2.5.5)
   - CSS-only Swipe-Indikatoren (JS-Swipe in mobile.js)
   - Keine konkurrierende CSS — erbt alle Tokens aus tokens.css
═══════════════════════════════════════════════════════════════ */

/* ── Bottom Navigation Container ─────────────────────────────── */

.bottom-nav {
  display:          none; /* Hidden auf Desktop */
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  z-index:          var(--z-sticky, 100);

  /* Safe Area für iOS Home-Bar */
  padding-bottom:   env(safe-area-inset-bottom, 0px);

  background:       var(--color-bg-primary);
  border-top:       1px solid var(--color-border);
  backdrop-filter:  blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);

  /* GPU-Compositing erzwingen */
  transform:        translateZ(0);
  will-change:      transform;
}

.bottom-nav-inner {
  display:          flex;
  align-items:      stretch;
  height:           56px;
  max-width:        640px;
  margin:           0 auto;
}

/* ── Nav Items ───────────────────────────────────────────────── */

.bn-item {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              3px;
  position:         relative;
  cursor:           pointer;
  border:           none;
  background:       none;
  color:            var(--color-text-muted);
  padding:          6px 4px;
  transition:       color var(--duration-fast, 0.12s) var(--ease-default, ease);

  /* Touch-Highlight entfernen */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color:         transparent;
  touch-action:                manipulation;

  /* Mindest-Touch-Target */
  min-width:        44px;
  min-height:       44px;
}

.bn-item:active {
  transform: scale(0.9);
  transition: transform 0.08s ease;
}

.bn-item.active {
  color: var(--color-accent);
}

/* ── Icon Area ───────────────────────────────────────────────── */

.bn-icon-wrap {
  position:         relative;
  width:            26px;
  height:           26px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.bn-icon {
  font-size:        20px;
  line-height:      1;
  transition:       transform var(--duration-fast, 0.12s) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}

.bn-item.active .bn-icon {
  transform: scale(1.15) translateY(-1px);
}

/* Active Pill Indicator */
.bn-item.active .bn-icon-wrap::before {
  content:          '';
  position:         absolute;
  inset:            -4px -6px;
  background:       var(--color-accent-muted);
  border-radius:    10px;
  z-index:          -1;
  animation:        bnPillIn 0.2s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

@keyframes bnPillIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Badge / Dot ─────────────────────────────────────────────── */

.bn-badge {
  position:       absolute;
  top:            -3px;
  right:          -3px;
  min-width:      16px;
  height:         16px;
  padding:        0 4px;
  border-radius:  8px;
  background:     var(--color-danger);
  color: var(--color-text-on-color);
  font-size:      10px;
  font-weight:    700;
  line-height:    16px;
  text-align:     center;
  border:         2px solid var(--color-bg-primary);
  display:        none;
  pointer-events: none;
}

.bn-badge.visible {
  display: block;
  animation: badgePop 0.3s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Label ───────────────────────────────────────────────────── */

.bn-label {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.01em;
  line-height:    1;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      60px;
  transition:     color var(--duration-fast, 0.12s);
}

.bn-item.active .bn-label {
  font-weight: 600;
  font-size:   10px;
}

/* ── Mobile: Bottom Nav anzeigen ─────────────────────────────── */

@media (max-width: 767px) {
  .bottom-nav {
    display: block;
  }

  /* Content-Bereich: Platz für Bottom Nav lassen */
  .main-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Page Content Safe Area */
  .page-content {
    padding-bottom: calc(var(--content-padding-y, 20px) + 8px);
  }

  /* Toast nach oben schieben */
  #toast-container {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Safe Area Utilities ─────────────────────────────────────── */

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Topbar: Safe Area auf iOS ──────────────────────────────── */
@media (max-width: 767px) {
  .topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--topbar-height, 56px) + env(safe-area-inset-top, 0px));
  }
}

/* ── Touch Target Overrides ──────────────────────────────────── */
@media (max-width: 767px) {

  /* Alle Buttons mindestens 44×44 */
  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* Nav-Items in Sidebar größer auf Mobile */
  .nav-item {
    padding: 10px 12px;
    min-height: 44px;
  }

  /* Inputs größer */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    font-size: 16px; /* Verhindert iOS-Zoom */
  }

  /* Tabs größer */
  .tab-btn {
    min-height: 40px;
    padding: 10px 14px;
  }

  /* Close-Buttons in Modals */
  .modal-close,
  .drawer-close {
    width: 44px;
    height: 44px;
  }
}

/* ── Swipe Feedback ──────────────────────────────────────────── */

.swipe-container {
  position:   relative;
  overflow:   hidden;
  touch-action: pan-y;
}

/* Swipe-Left Indicator */
.swipe-container::after {
  content:     '';
  position:    absolute;
  right:       0;
  top:         0;
  bottom:      0;
  width:       3px;
  background:  linear-gradient(to right, transparent, rgba(124,92,252,0.3));
  opacity:     0;
  transition:  opacity 0.2s;
  pointer-events: none;
}

.swipe-container.swipe-hint-right::after {
  opacity: 1;
}

/* ── Pull-to-Refresh Indicator ───────────────────────────────── */

.ptr-indicator {
  position:     absolute;
  top:          -60px;
  left:         0;
  right:        0;
  height:       60px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  color:        var(--color-text-muted);
  font-size:    13px;
  gap:          8px;
  transition:   transform 0.2s ease;
  pointer-events: none;
}

.ptr-spinner {
  width:          20px;
  height:         20px;
  border:         2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius:  50%;
  animation:      spin 0.6s linear infinite;
  display:        none;
}

.ptr-indicator.loading .ptr-spinner {
  display: block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Haptic Feedback Classes (via JS) ────────────────────────── */
/* Diese Klassen triggern CSS-Transitions, die JS nutzt für Timing */

.haptic-light  { --haptic-intensity: 0.1; }
.haptic-medium { --haptic-intensity: 0.3; }
.haptic-heavy  { --haptic-intensity: 0.7; }

/* ── Scroll Snap für Tab-Inhalte ─────────────────────────────── */
@media (max-width: 767px) {
  .tab-panels-swipeable {
    display:              flex;
    overflow-x:           auto;
    scroll-snap-type:     x mandatory;
    scrollbar-width:      none;
    -ms-overflow-style:   none;
    touch-action:         pan-x;
  }

  .tab-panels-swipeable::-webkit-scrollbar {
    display: none;
  }

  .tab-panel-swipe {
    flex:             0 0 100%;
    scroll-snap-align: start;
    min-height:       200px;
  }
}

/* ── Bottom Sheet ─────────────────────────────────────────────── */
/* Für Mobile statt Modals/Drawers */

.bottom-sheet {
  position:   fixed;
  left:       0;
  right:      0;
  bottom:     0;
  z-index:    var(--z-modal, 300);
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  border-radius: 20px 20px 0 0;
  padding:    20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform:  translateY(100%);
  transition: transform 0.3s var(--ease-default, ease);
  will-change: transform;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bottom-sheet.open {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width:         40px;
  height:        4px;
  background:    var(--color-border-strong);
  border-radius: 2px;
  margin:        0 auto 20px;
}

/* Overlay für Bottom Sheet */
.bottom-sheet-overlay {
  position:   fixed;
  inset:      0;
  z-index:    calc(var(--z-modal, 300) - 1);
  background: rgba(8, 8, 16, 0.7);
  backdrop-filter: blur(4px);
  opacity:    0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.bottom-sheet-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Floating Action Button (FAB) ─────────────────────────────── */
/* Für schnellen Zugriff auf "+" Aktionen */

.fab {
  display:        none;
  position:       fixed;
  right:          20px;
  bottom:         calc(70px + env(safe-area-inset-bottom, 0px));
  z-index:        calc(var(--z-sticky, 100) - 1);
  width:          52px;
  height:         52px;
  border-radius:  16px;
  background:     var(--color-accent);
  color: var(--color-text-on-color);
  border:         none;
  cursor:         pointer;
  font-size:      24px;
  line-height:    1;
  box-shadow:     0 4px 20px rgba(124, 92, 252, 0.4);
  transition:     all 0.2s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  align-items:    center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px rgba(124, 92, 252, 0.3);
}

.fab.visible {
  display: flex;
  animation: fabIn 0.3s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

@keyframes fabIn {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 767px) {
  .fab { display: flex; }
}

/* ── Keyboard-Avoidance ───────────────────────────────────────── */
/* Wenn Tastatur offen: Bottom Nav ausblenden */

@media (max-height: 500px) and (max-width: 767px) {
  .bottom-nav {
    display: none;
  }
  .main-content {
    padding-bottom: 0;
  }
}

/* ── Orientation ─────────────────────────────────────────────── */

@media (max-width: 767px) and (orientation: landscape) {
  .bottom-nav {
    display: none; /* Landscape: mehr Platz = Sidebar-Modus */
  }

  /* Sidebar in Landscape einblenden */
  .sidebar {
    transform: translateX(0) !important;
    position: relative !important;
    width: 200px !important;
  }

  .main-content {
    margin-left: 200px;
    padding-bottom: 0;
  }

  .topbar {
    display: none;
  }
}

/* ── Active Area Highlight ─────────────────────────────────────── */
/* Visuelles Feedback welcher Bereich gerade aktiv */

@media (max-width: 767px) {
  .area-content {
    animation: areaFadeIn 0.2s ease both;
  }

  @keyframes areaFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Scrollbar auf Mobile ausblenden ─────────────────────────── */
@media (max-width: 767px) {
  body::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .page-content::-webkit-scrollbar {
    display: none;
  }

  body, .sidebar, .page-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Smooth Scrolling */
  .page-content {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ── Topbar Avatar Button (Settings-Zugang Mobile) ────────── */

.topbar-avatar-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       none;
  border:           none;
  padding:          2px;
  cursor:           pointer;
  border-radius:    50%;
  -webkit-tap-highlight-color: transparent;
  touch-action:     manipulation;
  transition:       opacity var(--duration-fast, 0.12s);
}

.topbar-avatar-btn:active { opacity: 0.7; }

.topbar-avatar {
  width:            32px !important;
  height:           32px !important;
  font-size:        13px !important;
  border-radius:    50% !important;
  flex-shrink:      0;
}