/* ===========================
   Responsive
   =========================== */

/* ---- 非PC共通 (≤ 1024px): ハンバーガーメニュー ---- */
@media (max-width: 1024px) {

  /* モバイルヘッダー表示 */
  .mobile-header { display: flex; }

  /* メインをヘッダー分下げ、左マージン解除 */
  .main-content {
    margin-left: 0 !important;
    padding: 68px 20px 28px;
  }

  /* サイドバーをオフキャンバスに */
  .sidebar {
    left: -260px;
    z-index: 300;
  }

  /* サイドバー内のテキスト・セクションラベルを常に表示 */
  .sidebar-header,
  .nav-section-label,
  .nav-item span,
  .sidebar-footer .user-info,
  .sidebar-logo span {
    display: revert !important;
  }

  .nav-item         { justify-content: flex-start; padding: 8px 10px; }
  .sidebar-footer   { justify-content: flex-start; padding: 12px 16px; }

  /* コンテンツ調整 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* balance hero: ランクを絶対配置から通常フローに */
  .balance-rank {
    position: static;
    transform: none;
    text-align: left;
    margin-top: 14px;
  }

  /* テーブル: 補助列を非表示 */
  .tx-table-mobile-hide { display: none; }

  /* ツールバー */
  .toolbar     { flex-wrap: wrap; }
  .search-box  { min-width: 140px; }

  /* フィルターチップ: 横スクロール */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .chip { flex-shrink: 0; }

  .summary-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---- グリッド追加調整 (≤ 768px) ---- */
@media (max-width: 768px) {
  .stats-grid  { grid-template-columns: 1fr 1fr; }
  .server-grid { grid-template-columns: 1fr; }

  .balance-hero   { padding: 24px; }
  .balance-amount { font-size: 2.25rem; }
  .rank-value     { font-size: 2rem; }
}

/* ---- モバイル (≤ 480px) ---- */
@media (max-width: 480px) {
  .main-content {
    padding: 64px 14px 28px;
  }

  /* ページヘッダー */
  .page-header h1 { font-size: 1.375rem; }
  .page-header    { margin-bottom: 16px; }

  /* ログイン */
  .login-card     { padding: 32px 18px; border-radius: var(--radius); }
  .login-title    { font-size: 1.25rem; }
  .login-logo     { width: 64px; height: 64px; margin-bottom: 16px; }
  .login-logo svg { width: 32px; height: 32px; }
  .login-subtitle { font-size: 0.85rem; margin-bottom: 24px; }

  /* 残高ヒーロー */
  .balance-hero     { padding: 20px 18px; }
  .balance-amount   { font-size: 2rem; }
  .balance-currency { font-size: 1rem; }
  .rank-value       { font-size: 1.75rem; }

  /* スタットグリッド */
  .stats-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value  { font-size: 1.5rem; }
  .stat-card   { padding: 14px; }

  /* サーバーグリッド */
  .server-grid { grid-template-columns: 1fr; gap: 10px; }

  /* ツールバー: 縦積み */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 0;
  }
  .chip              { flex-shrink: 0; padding: 4px 10px; font-size: 0.72rem; }
  .search-box        { min-width: unset; width: 100%; flex: unset; }
  select.filter-select { width: 100%; }

  /* サマリーバナー */
  .summary-banner     { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 16px; }
  .summary-text h2    { font-size: 1.05rem; }
  .summary-text p     { font-size: 0.78rem; }
  .summary-stats      { gap: 12px; flex-wrap: wrap; }
  .s-stat-val         { font-size: 1.25rem; }
  .section-header     { margin-bottom: 12px; }

  /* サーバーヘッダー */
  .server-header-card { padding: 14px; gap: 10px; margin-bottom: 16px; }
  .server-header-icon { width: 48px; height: 48px; font-size: 1.25rem; }
  .server-header-name { font-size: 1rem; }
  .server-header-meta { font-size: 0.75rem; gap: 6px; flex-wrap: wrap; }

  /* カード */
  .card { padding: 16px; }

  /* ページネーション */
  .page-btn { width: 32px; height: 32px; font-size: 0.8rem; }

  /* トースト */
  .toast-container { left: 12px; right: 12px; bottom: 16px; }
  .toast           { min-width: unset; max-width: 100%; }

  /* パンくず */
  .breadcrumb { font-size: 0.75rem; }
}