/* ================================================
   css/responsive.css — ブレークポイント対応
   ================================================ */

/* ---- TABLET (≤900px) ---- */
@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .page { padding: 16px; }
  .three-col { grid-template-columns: 1fr 1fr; }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {

  /* Show mobile header */
  .mobile-header { display: flex; }

  /* Sidebar becomes drawer */
  .sidebar {
    transform: translateX(-100%);
    top: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }
  .sidebar.open { transform: translateX(0); }

  /* Main pushes down under header */
  .main-content {
    margin-left: 0;
    padding-top: var(--header-h);
    padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom));
  }

  /* Show bottom nav */
  .bottom-nav { display: flex; }

  /* Page padding */
  .page { padding: 14px 12px; }

  /* Stats grid — 2 cols on mobile */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Two-col → single */
  .two-col   { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }

  /* Page header wrap */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header-actions { width: 100%; }

  /* Table horizontal scroll */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Stat value smaller */
  .stat-value { font-size: 18px; }

  /* AI panel header wrap */
  .ai-panel-header { flex-wrap: wrap; gap: 6px; }

  /* Schedule calendar scroll */
  .sched-grid { min-width: 520px; }
  .sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Competitor stats — hide on very small */
  .comp-stats { gap: 8px; }

  /* Button group wrap */
  .btn-group { gap: 6px; }
  .btn { padding: 8px 12px; }
  .btn-lg { padding: 10px 16px; }

  /* Card padding */
  .card { padding: 13px; }

  /* Form full-width grid */
  .form-grid-2 { grid-template-columns: 1fr !important; }
}

/* ---- SMALL MOBILE (≤400px) ---- */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .three-col  { grid-template-columns: 1fr; }
  .comp-stats { display: none; }
  .data-table th:nth-child(n+4),
  .data-table td:nth-child(n+4) { display: none; }
}

/* ---- LARGE DESKTOP (≥1200px) ---- */
@media (min-width: 1200px) {
  :root { --sidebar-w: 240px; }
  .page { padding: 28px 32px; max-width: 1100px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- TOUCH DEVICE adjustments ---- */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-item, .tag, .bnav-btn { min-height: 40px; }
  .form-input { font-size: 16px; } /* prevent zoom on iOS */
  select.form-input { font-size: 16px; }
}

/* ---- PRINT ---- */
@media print {
  .sidebar, .mobile-header, .bottom-nav { display: none; }
  .main-content { margin: 0; }
  .page { padding: 0; }
}