/* ══════════════════════════════════════��════
   Mobile-only Responsive Styles (extrahiert aus trips.css)
   Enthält: Haupt-Mobile-Breakpoint (768px),
   Klein-Mobile-Breakpoint (480px)
   ═══════════════════════════════════════════ */

/* ─── Responsive: Mobile (<=768px) ─── */
@media (max-width: 768px) {
  .trip-dashboard { padding: 1rem; }
  .trip-grid { grid-template-columns: 1fr; }

  .trip-detail-header { padding: 10px 12px; }
  .trip-hd-name { font-size: 15px; }

  /* Header Row2: Nur Datum + Kosten auf Mobile */
  .trip-hd-row2 {
    padding-left: 0;
    gap: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .trip-hd-dot,
  .trip-hd-stat,
  .trip-hd-hints-sep,
  .trip-hd-hint { display: none; }
  .trip-hd-stat.trip-hd-stat--editable,
  .trip-hd-stat.trip-hd-stat--accent { display: inline-flex; font-size: 12px; }

  /* Detail-Body: auf Mobile scrollbar statt overflow hidden */
  .trip-detail-body { overflow-y: auto; overflow-x: hidden; }
  .trip-detail-left { overflow-y: visible; padding: 10px; }

  /* Desktop-Aktionen verstecken, Overflow-Menü zeigen */
  .trip-hd-actions { display: none; }
  .trip-hd-overflow { display: block; }

  /* Warning-Bar + Map-Toggle auf Mobile sichtbar */
  .trip-hd-warn-bar { display: flex; }
  .trip-map-toggle { display: block; }

  /* Map: Default eingeklappt */
  .trip-detail-right {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    border-top: none;
  }
  .trip-detail-right.trip-map-expanded {
    height: 300px;
    border-top: 1px solid rgba(60,66,80,0.08);
  }

  .trip-dc-main { flex-direction: column; gap: 4px; }
  .trip-dc-hotel-col {
    min-width: unset;
    width: 100%;
    padding-left: 0;
    border-left: none;
    padding-top: 4px;
    border-top: 1px solid rgba(60,66,80,0.05);
  }
  .trip-dc-hotel-row { padding-left: 4px; }

  /* KPI-Strip: Horizontal scrollbar statt 2x3 Grid */
  .trip-cost-summary {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .trip-kpi {
    flex: 0 0 auto;
    min-width: unset;
    scroll-snap-align: start;
  }

  /* T-01: Hover-hidden Elemente auf Mobile immer sichtbar */
  .trip-dc-act-del { opacity: 0.5; }
  .trip-wp-remove { opacity: 0.5; }
  .trip-ex-del { opacity: 0.5; }

  /* T-03: Touch-Targets vergroessern (min ~33-35px) */
  .trip-dc-act-btn { padding: 8px; }
  .trip-hd-back { padding: 8px; }
  .trip-hd-action { padding: 8px; }
  .trip-expand-btn { padding: 8px; }
  .trip-ex-add { padding: 6px 10px; }
  .trip-ex-del { padding: 8px; }
  .trip-wp-remove { padding: 8px; }

  /* KPI-Border: horizontal layout behält border-right */
  .trip-kpi:last-child { border-right: none; }

  /* T-05: Detail-Panel Spalten (Waypoints + Notes) stapeln */
  .trip-dc-detail-cols { flex-direction: column; }

  /* T-08: Drag-Handles ausblenden (HTML5 DnD funktioniert nicht auf Touch) */
  .trip-wp-drag { display: none; }
}

/* ─── Responsive: Klein-Mobile (<=480px) ─── */
@media (max-width: 480px) {
  .trip-dc-route { flex-direction: column; gap: 2px; }
  .trip-dc-arrow { min-width: unset; justify-content: center; }
  .trip-dc-loc-end { text-align: left; }
  .trip-dc-date { width: 40px; padding: 0.35rem 0; }
  .trip-dc-daynum { font-size: 15px; }
}