/* ファディー彦根 カスタムスタイル */

:root {
  /* ブランドカラー */
  --color-primary: #FF6B9D;
  --color-secondary: #4A5568;
  --color-accent: #FFA500;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  
  /* グラフの色 */
  --color-weight: #0ea5e9;      /* 体重 - sky-500 */
  --color-bodyfat: #f97316;     /* 体脂肪率 - orange-500 */
  --color-sleep: #a855f7;       /* 睡眠時間 - purple-500 */
  --color-calorie: #22c55e;     /* カロリー - green-500 */
  --color-exercise: #ec4899;    /* 運動時間 - pink-500 */
  
  /* 背景色 */
  --color-bg-light: #F9FAFB;
  --color-bg-white: #FFFFFF;
  --color-bg-dark: #1F2937;
  
  /* テキスト色 */
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-light: #9CA3AF;
  
  /* フォントサイズ統一基準 */
  --font-xs: 0.8125rem;    /* 13px - 最小テキスト */
  --font-sm: 0.875rem;     /* 14px - 小さめテキスト */
  --font-base: 0.9375rem;  /* 15px - 基本テキスト */
  --font-md: 1rem;         /* 16px - 中サイズ */
  --font-lg: 1.125rem;     /* 18px - 大きめテキスト */
  --font-xl: 1.25rem;      /* 20px - 見出し */
  --font-2xl: 1.5rem;      /* 24px - 大見出し */
  
  /* 共通padding基準 (情報量重視で少なめ) */
  --padding-xs: 0.375rem;  /* 6px */
  --padding-sm: 0.5rem;    /* 8px */
  --padding-md: 0.75rem;   /* 12px */
  --padding-lg: 1rem;      /* 16px */
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* スピナー */
.spinner {
  border: 3px solid rgba(255, 107, 157, 0.3);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.spinner-small {
  border-width: 2px;
  width: 20px;
  height: 20px;
}

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

/* ローディングオーバーレイ */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ボタンアニメーション */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #FF5282;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

/* カードホバー効果 */
.card-hover {
  transition: all 0.3s ease;
}

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

/* 横スクロールコンテナ */
.scroll-container {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1f1f1;
}

.scroll-container::-webkit-scrollbar {
  height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #FF5282;
}

/* アコーディオン */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 2000px;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* バッジ */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-primary {
  background-color: var(--color-primary);
  color: white;
}

.badge-success {
  background-color: var(--color-success);
  color: white;
}

.badge-warning {
  background-color: var(--color-warning);
  color: white;
}

.badge-error {
  background-color: var(--color-error);
  color: white;
}

/* モーダル */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 1rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* グラデーション背景 */
.gradient-bg {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

/* テーブル */
.table-container {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1f1f1;
}

.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #FF5282;
}

.table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.table th {
  background-color: var(--color-primary);
  color: white;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.table td {
  padding: 0.75rem;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}

.table tr:hover {
  background-color: #F9FAFB;
}

/* タブコンテンツ */
.tab-content {
  animation: fadeInTab 0.3s ease;
}

.main-tab-content {
  animation: fadeInTab 0.3s ease;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* タブボーダー */
.border-b-3 {
  border-bottom-width: 3px;
}

/* 統一フォントサイズクラス */
.text-unified-xs { font-size: var(--font-xs) !important; }
.text-unified-sm { font-size: var(--font-sm) !important; }
.text-unified-base { font-size: var(--font-base) !important; }
.text-unified-md { font-size: var(--font-md) !important; }
.text-unified-lg { font-size: var(--font-lg) !important; }
.text-unified-xl { font-size: var(--font-xl) !important; }
.text-unified-2xl { font-size: var(--font-2xl) !important; }

/* 統一paddingクラス */
.p-unified-xs { padding: var(--padding-xs) !important; }
.p-unified-sm { padding: var(--padding-sm) !important; }
.p-unified-md { padding: var(--padding-md) !important; }
.p-unified-lg { padding: var(--padding-lg) !important; }

/* 枠線の簡略化 */
.border-unified {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg-unified-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.bg-unified-container {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(16px);
}

/* 全ページ共通フォントサイズの上書き（情報量重視） */
body {
  font-size: var(--font-base);
}

/* Tailwindのtext-*クラスを上書き */
.text-xs { font-size: var(--font-xs) !important; }
.text-sm { font-size: var(--font-sm) !important; }
.text-base { font-size: var(--font-base) !important; }
.text-lg { font-size: var(--font-lg) !important; }
.text-xl { font-size: var(--font-xl) !important; }
.text-2xl { font-size: var(--font-2xl) !important; }

/* padding削減（情報量重視） */
.p-1 { padding: 0.375rem !important; }  /* 6px */
.p-1\.5 { padding: 0.5rem !important; }  /* 8px */
.p-2 { padding: 0.625rem !important; }  /* 10px */
.p-2\.5 { padding: 0.75rem !important; }  /* 12px */
.p-3 { padding: 0.875rem !important; }  /* 14px */
.p-4 { padding: 1rem !important; }      /* 16px */

/* 枠線・影の簡略化 */
.shadow-sm { box-shadow: none !important; }
.shadow-md { box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; }
.shadow-lg { box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important; }

/* ホバー効果を控えめに */
.hover\:shadow-lg:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important; }
.hover\:shadow-xl:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important; }

/* レスポンシブ */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 0.5rem;
    font-size: var(--font-sm);
  }
}