/* =============================================
   広告レポートダッシュボード - スタイルシート
   Phase 8: 実運用向けUI改善版
   =============================================
   【変更点まとめ】
   - サマリーカード: 数値の見やすさ向上・スケルトンローディング追加
   - テーブル: ヘッダー固定（sticky）・行の縞模様・最大高さ設定
   - エラーバナー: データ取得失敗時の目立つ通知
   - 空データ状態: 見やすいメッセージ表示
   - ローディング: 全画面スピナーの改善
   ============================================= */


/* -----------------------------------------------
   リセット & 基本設定
   ブラウザごとのデフォルトスタイルのばらつきをなくす
----------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding や border を width/height に含める */
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial,
               'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  background-color: #f0f2f5; /* ページ全体の薄グレー背景 */
  color: #333333;
  font-size: 14px;
  line-height: 1.5;
  /* 数値のガタつきを防ぐためのフォントレンダリング設定 */
  -webkit-font-smoothing: antialiased;
}


/* ================================================================
   ログイン画面
================================================================ */

/* 画面全体を縦横中央に配置 */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
}

/* ログインカード本体 */
.login-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ロゴ・タイトルエリア */
.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo .logo-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.login-logo .logo-icon svg {
  width: 36px;
  height: 36px;
  fill: white;
}

.login-logo h1 {
  font-size: 22px;
  font-weight: 700;
  color: #1a237e;
  margin-bottom: 6px;
}

.login-logo p {
  font-size: 13px;
  color: #888888;
}

/* フォームグループ（ラベル + 入力） */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555555;
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus {
  border-color: #3949ab;
}

/* ログインボタン */
.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  margin-top: 8px;
}

.btn-login:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

/* ログインエラーメッセージ */
.error-message {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none; /* 初期は非表示 */
}

.error-message.show { display: block; }

/* Googleログインボタン */
.btn-google {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  color: #3c4043;
  border: 2px solid #dadce0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-google:hover    { background: #f8f9fa; border-color: #c6c6c6; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.btn-google:active   { background: #f1f3f4; }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }

.google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 「または」区切り線 */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #cccccc;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e8e8;
}

/* デモ用ヒント */
.demo-hint {
  margin-top: 20px;
  padding: 12px 16px;
  background: #e8eaf6;
  border-radius: 8px;
  font-size: 12px;
  color: #5c6bc0;
  text-align: center;
}

.demo-hint strong {
  display: block;
  margin-bottom: 4px;
}


/* ================================================================
   ダッシュボード全体レイアウト
================================================================ */

/* サイドバー + メイン の左右分割レイアウト */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}


/* ================================================================
   サイドバー（左固定）
================================================================ */

.sidebar {
  width: 240px;
  min-width: 240px;
  background: #1a237e;
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;   /* スクロールしても常に左端に固定 */
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
}

.sidebar-logo {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo h2 {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.sidebar-logo p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto; /* ナビが多い場合にスクロール可能 */
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 20px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover { background: rgba(255,255,255,.08); color: white; }

.nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-right: 3px solid #7986cb;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* サイドバー下部：ユーザー情報 */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden; /* Google画像が丸くクリップされるように */
}

.user-details .user-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.user-details .user-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.btn-logout {
  width: 100%;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-logout:hover { background: rgba(255,255,255,.18); color: white; }


/* ================================================================
   メインコンテンツ（サイドバーの右側）
================================================================ */

.main-content {
  margin-left: 240px; /* サイドバー幅と同じ分だけ右にずらす */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* flex子要素のoverflow対策 */
}


/* ================================================================
   ヘッダー（アカウント・日付フィルター）
================================================================ */

.header {
  background: white;
  padding: 14px 28px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; /* ページをスクロールしてもヘッダーは画面上部に固定 */
  top: 0;
  z-index: 50;      /* サイドバー(100)より低く、ローディング(999)より低い */
  gap: 16px;
  flex-wrap: wrap;
}

.page-title h1 {
  font-size: 18px;
  font-weight: 700;
  color: #1a237e;
}

.page-title p {
  font-size: 12px;
  color: #888888;
  margin-top: 2px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* アカウント切り替えセレクト */
.account-select {
  padding: 8px 12px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 13px;
  color: #333;
  background: white;
  cursor: pointer;
  outline: none;
  min-width: 200px;
  transition: border-color 0.2s;
}

.account-select:focus { border-color: #3949ab; }

/* 日付入力 */
.date-input {
  padding: 8px 12px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 13px;
  color: #333;
  background: white;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.date-input:focus { border-color: #3949ab; }

.date-separator {
  color: #888888;
  font-size: 13px;
  font-weight: 500;
}

/* ボタン共通 */
.btn-search {
  padding: 9px 16px;
  background: #1a237e;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn-search:hover  { background: #283593; }
.btn-search:active { transform: scale(0.98); }

/* クイック日付ボタン（グレー系） */
.btn-quick {
  padding: 8px 12px;
  background: #f5f5f5;
  color: #546e7a;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-quick:hover { background: #eeeeee; }


/* ================================================================
   コンテンツ本体（サマリー + テーブル）
================================================================ */

.content-body {
  padding: 24px 28px;
  flex: 1;
}


/* ================================================================
   エラーバナー（データ取得失敗時に表示）

   使い方:
     表示: document.getElementById('errorBanner').classList.add('show')
     非表示: classList.remove('show')
================================================================ */

.error-banner {
  display: none; /* 初期状態は非表示 */
  align-items: flex-start;
  gap: 12px;
  background: #fff3f3;
  border: 1px solid #ffcdd2;
  border-left: 4px solid #e53935; /* 左側に赤いアクセントライン */
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #b71c1c;
}

.error-banner.show {
  display: flex; /* showクラスが付いたときだけ表示 */
}

/* バナーのアイコン部分 */
.error-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

/* バナーのテキスト部分 */
.error-banner-body {
  flex: 1;
}

.error-banner-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.error-banner-message {
  font-size: 12px;
  color: #c62828;
  opacity: 0.85;
}

/* バナーを閉じるボタン */
.error-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #e53935;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.error-banner-close:hover { opacity: 1; }


/* ================================================================
   サマリーカード（6枚のKPI表示）

   【Phase 8 改善点】
   - font-variant-numeric: tabular-nums
     → 数値の桁が変わっても幅が変わらないので読みやすい
   - カードの高さを統一
   - ローディング中のスケルトンアニメーション
================================================================ */

/* 3列グリッド */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* 各カード */
.summary-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* カードのアイコン部分 */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

/* カードアイコンの色テーマ */
.card-icon.blue   { background: #e8eaf6; color: #3949ab; }
.card-icon.green  { background: #e8f5e9; color: #2e7d32; }
.card-icon.red    { background: #fce4ec; color: #c62828; }
.card-icon.purple { background: #f3e5f5; color: #7b1fa2; }
.card-icon.orange { background: #fff3e0; color: #e65100; }
.card-icon.teal   { background: #e0f2f1; color: #00695c; }

/* カードのテキスト部分 */
.card-content {
  flex: 1;
  min-width: 0; /* 長い数値が親をはみ出さないように */
}

/* 指標名ラベル（例: "表示回数"） */
.card-label {
  font-size: 11px;
  color: #999999;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* 指標値（メインの数値） */
.card-value {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2;
  /*
   * tabular-nums = 数値の各桁を等幅で表示する
   * "1,234" と "9,999" で幅が変わらなくなる
   * 数値が変わっても隣の要素がずれない
   */
  font-variant-numeric: tabular-nums;

  /*
   * 長い数値（¥1,234,567 など）が1行に収まるように
   * 折り返しを許可するが、英数字は維持
   */
  word-break: break-all;
}

/* 補足テキスト（単位や説明、例: "前月比 +5%" など） */
.card-sub {
  font-size: 11px;
  color: #aaaaaa;
  margin-top: 4px;
}

/* ----------------------------------------------------------------
   スケルトンローディング
   データ取得中にカードの数値部分をグレーのバーで表示する
   ユーザーに「読み込み中です」と視覚的に伝えるため

   使い方: .card-value に .skeleton クラスを付ける
---------------------------------------------------------------- */

/* スケルトンのベースデザイン */
.skeleton {
  background: #e8e8e8;
  border-radius: 4px;
  color: transparent !important; /* テキストを見えなくする */
  user-select: none;
  /* シマーアニメーション（左→右に光が流れるように見える） */
  background: linear-gradient(90deg, #eeeeee 25%, #e0e0e0 50%, #eeeeee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/*
 * shimmer = 「光沢が流れる」アニメーション
 * background-position を左→右に動かすことで実現
 */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* スケルトン状態のカード数値（最低幅を指定して枠を見せる） */
.card-value.skeleton {
  display: inline-block;
  min-width: 80px;
  height: 28px;
  border-radius: 6px;
}


/* ================================================================
   テーブルセクション

   【Phase 8 改善点】
   - テーブルヘッダーを固定（sticky）
     → データが多くても列名が常に見える
   - 行に縞模様（ゼブラストライプ）を追加
     → 行を目で追いやすくなる
   - テーブルラッパーに最大高さ + スクロールを追加
================================================================ */

.table-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
  /*
   * overflow: clip は overflow: hidden と同じく要素の外にはみ出た部分を隠すが、
   * sticky positioning の妨げにならない（hidden だと妨げる場合がある）
   * テーブルの角丸をきれいに維持するために使用
   */
  overflow: clip;
}

/* テーブルタイトルと更新時刻 */
.table-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1a237e;
}

.table-header p {
  font-size: 12px;
  color: #999999;
  margin-top: 2px;
}

/*
 * テーブルのスクロール用ラッパー
 *
 * max-height を設定することで、データが多くても画面が長くなりすぎない。
 * overflow-y: auto でテーブル内でスクロールできるようになる。
 * この設定があることで thead の sticky が機能する。
 */
.table-wrapper {
  overflow-x: auto;  /* 横幅が足りない時は横スクロール */
  overflow-y: auto;  /* 縦に長い場合は縦スクロール */
  max-height: 540px; /* この高さを超えたらスクロールになる */
}

/* テーブル本体 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* 最低幅（これより狭い画面では横スクロール） */
}

/*
 * テーブルのヘッダー行を固定する（sticky）
 *
 * position: sticky + top: 0 にすることで、
 * テーブル内をスクロールしても列名が上部に固定される。
 *
 * これが機能するには .table-wrapper が scroll container
 * （overflow-y: auto ＋ max-height）である必要がある。
 */
.data-table thead th {
  padding: 11px 16px;
  background: #f8f9fa;
  font-size: 11px;
  font-weight: 700;
  color: #666666;
  text-align: left;
  white-space: nowrap;
  /* ↓ ヘッダーを固定する核心部分 */
  position: sticky;
  top: 0;
  z-index: 2; /* データ行より手前に表示されるように */
  /* スクロールした時にヘッダーの下に境界線が見えるようにする */
  box-shadow: 0 1px 0 #e8e8e8;
}

/* 数値列のヘッダーは右寄せ */
.data-table thead th.num { text-align: right; }

/* データ行のセル */
.data-table tbody td {
  padding: 13px 16px;
  font-size: 13px;
  color: #333333;
  border-bottom: 1px solid #f5f5f5;
  white-space: nowrap;
  /* 数値の桁が変わっても幅が変わらない */
  font-variant-numeric: tabular-nums;
}

/* 数値列のデータセルは右寄せ */
.data-table tbody td.num { text-align: right; }

/* 最終行の下線をなくす */
.data-table tbody tr:last-child td { border-bottom: none; }

/*
 * 行の縞模様（ゼブラストライプ）
 * nth-child(even) = 偶数行に薄い背景色をつける
 * 行が多いとき、どの行を見ているか分かりやすくなる
 */
.data-table tbody tr:nth-child(even) td {
  background-color: #fafbff;
}

/* 行のホバーエフェクト（マウスを乗せると色が変わる） */
.data-table tbody tr:hover td {
  background-color: #eff3ff !important; /* !important でゼブラより優先 */
  cursor: default;
}

/* キャンペーン名（太字・青色） */
.campaign-name {
  font-weight: 600;
  color: #1a237e;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 長い名前は「...」で省略 */
}

/* キャンペーン名のホバーで全文表示 */
.campaign-name:hover {
  overflow: visible;
  white-space: normal;
  word-break: break-all;
}

/* ステータスバッジ */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.active { background: #e8f5e9; color: #2e7d32; }
.status-badge.paused { background: #fff3e0; color: #e65100; }

/* テーブルフッター（件数表示） */
.table-footer {
  padding: 12px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #888888;
}

/* 最終更新時刻 */
.last-updated {
  font-size: 11px;
  color: #aaaaaa;
}


/* ----------------------------------------------------------------
   テーブル スケルトン行
   データ取得中にテーブルにグレーの「仮の行」を表示する

   使い方: renderTableSkeleton() から呼ばれる（JS側で制御）
---------------------------------------------------------------- */

/* スケルトン行全体 */
.data-table tbody tr.row-skeleton td {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

/* スケルトンのバー（行の中身）*/
.skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eeeeee 25%, #e4e4e4 50%, #eeeeee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* キャンペーン名列は少し長めのバー */
.skeleton-bar.wide  { width: 70%; }
.skeleton-bar.short { width: 40%; }
.skeleton-bar.tiny  { width: 25%; float: right; } /* 数値列は右端に */


/* ================================================================
   データなし状態（空データ）

   renderEmptyTable() がテーブルに挿入する要素のスタイル
================================================================ */

/* 空データセルのコンテナ */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: #bbbbbb;
}

.empty-state-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: #999999;
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: 13px;
  color: #bbbbbb;
  line-height: 1.6;
  white-space: pre-line; /* \n で改行できる */
}


/* ================================================================
   ローディングオーバーレイ（全画面スピナー）

   初回ページ読み込みや初回データ取得時に表示する
================================================================ */

.loading-overlay {
  position: fixed;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 の省略 */
  background: rgba(240, 242, 245, 0.85); /* ページ背景色に合わせた半透明 */
  display: none;               /* 初期は非表示 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(2px);  /* 背景をわずかにぼかす（対応ブラウザのみ）*/
}

.loading-overlay.show { display: flex; }

/* 回転するスピナー */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #c5cae9;
  border-top-color: #3949ab;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* スピナー下のテキスト */
.loading-text {
  margin-top: 16px;
  font-size: 13px;
  color: #5c6bc0;
  font-weight: 500;
  letter-spacing: 0.3px;
}


/* ================================================================
   トースト通知（右下に出る一時メッセージ）
================================================================ */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.25s ease;
  max-width: 320px;
  min-width: 180px;
}

@keyframes slideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.toast.success { background: #1b5e20; color: white; }
.toast.error   { background: #b71c1c; color: white; }
.toast.info    { background: #1a237e; color: white; }

/* トーストのアイコン */
.toast::before {
  font-size: 16px;
  flex-shrink: 0;
}
.toast.success::before { content: '✅'; }
.toast.error::before   { content: '❌'; }
.toast.info::before    { content: 'ℹ️'; }


/* ================================================================
   レスポンシブ対応
================================================================ */

/* 幅 1200px 以下: 3列維持（変更なし） */

/* 幅 900px 以下: 2列に変更 */
@media (max-width: 900px) {
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 幅 768px 以下: スマートフォン対応 */
@media (max-width: 768px) {
  /* サイドバーを非表示 */
  .sidebar { display: none; }
  .main-content { margin-left: 0; }

  /* カードを1列に */
  .summary-cards { grid-template-columns: 1fr; }

  /* ヘッダーを縦並びに */
  .header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
  }
  .header-controls { width: 100%; }

  /* コンテンツのpadding縮小 */
  .content-body { padding: 16px; }

  /* テーブルの最大高さをスマホ向けに調整 */
  .table-wrapper { max-height: 400px; }
}