/* ==========================================================================
   FollowLoop-Web 響應式佈局與微調 (responsive.css)
   Mobile-First & Media Queries for Mobile/Tablet
   ========================================================================== */

/* 平板與小型螢幕 (max-width: 1024px) */
@media (max-width: 1024px) {
  .ingestion-grid {
    grid-template-columns: 1fr;
  }

  .hitl-card-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* 手機裝置 (max-width: 768px) */
@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .nav-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .nav-tab-btn {
    padding: 8px 12px;
    font-size: 0.82rem;
    flex: 1;
    justify-content: center;
  }

  .liveview-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .search-input-box {
    max-width: 100%;
  }

  .hitl-actions {
    flex-direction: column;
  }

  .modal-card {
    padding: 20px;
    width: 95%;
  }
}