/* ========================================
   ベースレイアウト - 共通の基本レイアウト
   ======================================== */

/* メインレイアウト構造 */
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  position: relative;
}

/* メインコンテンツエリア */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 64px; /* ヘッダーの高さ分 */
}

.app-content {
  flex: 1;
  padding: var(--space-8) 0;
}

/* ========================================
   共通ヘッダー
   ======================================== */
/* ヘッダーのスタイルは components/header.css で管理 */

/* ========================================
   共通フッター
   ======================================== */
/* フッターのスタイルは footer.css で管理 */

/* ========================================
   テーマ別色設定
   ======================================== */

/* 利用者テーマ設定 */
body[data-theme="user"] {
    --theme-primary: var(--primary-user);
    --theme-primary-light: var(--primary-user-light);
    --theme-secondary: var(--secondary-user);
    --theme-accent: var(--accent-user);
    --theme-gradient: var(--gradient-primary-user);
    --theme-shadow: var(--shadow-user);
    --theme-shadow-hover: var(--shadow-user-hover);
    --theme-glow: var(--glow-user);
}

/* ========================================
   ページコンテンツレイアウト
   ======================================== */

/* 共通ページ構造（幅指定なし） */
.page-container {
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* コンテンツ幅クラス */
.content-narrow {
  max-width: 800px;     /* フォーム・設定画面 */
}

.content-medium {
  max-width: 1200px;    /* ダッシュボード */
}

.content-wide {
  max-width: 1600px;    /* データ管理画面 */
}

.content-full {
  max-width: none;      /* 全幅レイアウト */
}

/* ページヘッダー統一 */
.page-header {
  margin-bottom: var(--space-8);
}

/* ページタイトル統一スタイル */
.page-title {
  font-size: var(--text-h2);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
}

/* ページタイトル装飾（テーマ対応縦線） */
.page-title::before {
  content: '';
  width: 6px;
  height: 32px;
  background: var(--theme-gradient, var(--gradient-primary-user));
  border-radius: var(--radius-full);
  box-shadow: var(--theme-shadow, 0 0 20px rgba(102, 126, 234, 0.3));
  position: relative;
  overflow: hidden;
}

/* ========================================
   共通アニメーション
   ======================================== */

@keyframes lightSweep {
  0% {
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }
}

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

@media (max-width: 768px) {
  .app-content {
    padding: var(--space-6) 0;
  }
  
  /* ページコンテンツレイアウト */
  .page-container {
    padding: 0 var(--space-4);
  }
  
  /* 全コンテンツ幅クラスでモバイル最適化 */
  .content-narrow,
  .content-medium,
  .content-wide {
    max-width: none;  /* モバイルでは全幅 */
  }
  
  .page-header {
    margin-bottom: var(--space-6);
  }
  
  .page-title {
    font-size: var(--text-h3);
  }
}

/* ========================================
   ダッシュボードグリッドレイアウト
   ======================================== */

/* ダッシュボード固有のグリッドレイアウト */
.dashboard-modern-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.dashboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* 旧グリッドシステム（フォールバック） */
.dashboard-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  margin-bottom: var(--space-6);
}

.dashboard-full {
  grid-column: 1 / -1;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .dashboard-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  .dashboard-modern-grid {
    gap: var(--space-4);
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ========================================
   プリファードモーション設定
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* モーション関連の設定は各コンポーネントCSSで管理 */
}