/* Mobile-only overrides */
@media (max-width: 576px) {
  /* Cards: force single column */
  .trip-3col .row.trip-3col-wrapper > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Compact card paddings and fonts */
  .trip-item-card .card-body { padding: 12px; }
  .trip-item-card h6.card-title { font-size: 14px; }
  .trip-item-card small { font-size: 12px; }

  /* Timeline: reduce footprint */
  #timeline-container .timeline-item { margin-bottom: 12px; padding: 12px !important; margin-left: 0 !important; }
  #timeline-container .timeline-item .timeline-item-time { display: none !important; }
  #timeline-container .timeline-item .timeline-icon-container { display: none !important; }
  #timeline-container .btn-delete,
  #timeline-container .timeline-item .btn-outline-danger { display: none !important; }

  /* Icon-only action buttons for mobile card footers */
  .mobile-card-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .btn-square-sm { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
  .btn-square-sm i { font-size: 16px; line-height: 1; }
  .btn-square-sm .btn-label { display: none !important; }

  /* Hide view toggles (Table/Cards) in mobile dropdowns if present */
  #flights-table-btn-mobile,
  #flights-cards-btn-mobile,
  #hotels-table-btn-mobile,
  #hotels-cards-btn-mobile,
  #places-table-btn-mobile,
  #places-cards-btn-mobile { display: none !important; }
}

/* Mobile action buttons styling */
@media (max-width: 576px) {
  /* Mobile card action buttons - view, day, delete */
  .d-sm-none .btn-group .btn,
  .d-sm-none .d-flex .btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    border-width: 2px !important;
  }

  /* View button (external link) */
  .d-sm-none .btn-outline-secondary {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
  }
  
  .d-sm-none .btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
  }

  .d-sm-none .btn-outline-secondary:disabled {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
    opacity: 0.6 !important;
  }

  /* Day button (calendar) */
  .d-sm-none .btn-outline-primary {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #2196f3 !important;
  }
  
  .d-sm-none .btn-outline-primary:hover {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
  }

  /* Delete button */
  .d-sm-none .btn-outline-danger {
    background-color: #ffebee !important;
    border-color: #f44336 !important;
    color: #f44336 !important;
  }
  
  .d-sm-none .btn-outline-danger:hover {
    background-color: #f44336 !important;
    border-color: #f44336 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3) !important;
  }

  /* Ensure equal width for all buttons */
  .d-sm-none .d-flex.gap-2 .btn {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Icon styling */
  .d-sm-none .btn i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Active state for better touch feedback */
  .d-sm-none .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Small tablets */
@media (max-width: 768px) {
  .navbar-brand { font-size: 18px; }
  .card { margin-bottom: 12px; }
}


/* Desktop card action buttons (slightly larger, match timeline delete) */
@media (min-width: 577px) {
  .desktop-card-actions .btn-icon {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  .desktop-card-actions .btn-icon i { font-size: 16px; line-height: 1; }
}