/* 🗓️ カレンダー表示修正: イベントを1日内に収める */

/* 🎯 全カレンダーイベントを1日内で完結させる */
.fc-event {
  /* イベントの最大幅を日付セル内に制限 */
  max-width: 100% !important;
  width: auto !important;
  
  /* イベントが日付境界を超えないようにする */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  
  /* 縦積み配置を確実にする */
  display: block !important;
  position: relative !important;
  
  /* イベント間のマージン調整 */
  margin-bottom: 2px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  
  /* 📱 モバイル対応 - 統合されたスタイル */
  border: none !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 12px !important;
  margin-bottom: 1px !important;
}

/* 📱 タッチターゲット（モバイルUIの改善） */
.touch-target {
  min-height: 44px !important; /* Appleガイドライン準拠 */
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important; /* タッチ遅延削除 */
}

/* 📱 統一モーダル（レスポンシブ対応・横幅調整済み） */
.unified-event-modal {
  padding: 16px !important;
}

.unified-event-modal .bg-white {
  max-width: 95vw !important;
  max-height: 90vh !important;
}

@media (min-width: 768px) {
  .unified-event-modal .bg-white {
    max-width: 900px !important;
    max-height: 85vh !important;
  }
}

@media (min-width: 1024px) {
  .unified-event-modal .bg-white {
    max-width: 1024px !important;
    max-height: 85vh !important;
  }
}

/* カレンダーモーダル（食事記録サマリー用） */
.calendar-modal {
  padding: 16px !important;
}

.calendar-modal .bg-white {
  max-width: 95vw !important;
  max-height: 90vh !important;
}

@media (min-width: 768px) {
  .calendar-modal .bg-white {
    max-width: 900px !important;
    max-height: 85vh !important;
  }
}

@media (min-width: 1024px) {
  .calendar-modal .bg-white {
    max-width: 1024px !important;
    max-height: 85vh !important;
  }
}

/* 🎨 強化されたイベントスタイル */
.calendar-event-enhanced {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.calendar-event-enhanced:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 10 !important;
}

/* ドラッグ中のスタイル */
.fc-event-dragging {
  opacity: 0.7 !important;
  transform: scale(1.05) !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ドロップゾーンのハイライト */
.fc-day-today.fc-drop-highlight {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border: 2px dashed #3b82f6 !important;
}

/* イベント高さの改善 */
.fc-daygrid-event {
  min-height: 24px !important;
  line-height: 1.3 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
}

/* モーダル・ポップアップ表示の改善 */
.fc-popover {
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

.fc-popover-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* 📱 モバイルユーザビリティの大幅改善 */

/* タブレット対応 (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  #filter-sidebar {
    width: 100% !important;
    margin-bottom: 1rem !important;
    padding: 16px !important;
  }
  
  .touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
  
  /* カレンダーヘッダーのボタンサイズ改善 */
  .fc-button {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  
  .fc-event {
    font-size: 12px !important;
    padding: 4px 6px !important;
    min-height: 28px !important;
  }
}

/* モバイル対応 (最大767px) */
@media (max-width: 767px) {
  /* 🚨 重要：サイドバーをモバイルで完全に折りたたみ */
  #filter-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    padding: 20px !important;
  }
  
  #filter-sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  
  /* モバイル専用ヘッダー */
  #filter-sidebar .flex.lg\\:hidden {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    padding: 16px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
  }
  
  /* 🎯 タッチターゲット最適化（Appleガイドライン準拠） */
  .touch-target {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    margin: 4px 0 !important;
  }
  
  /* 🔘 大きなトグルスイッチ */
  .w-9.h-5, .w-12.h-7 {
    width: 3.5rem !important;
    height: 2.2rem !important;
    border-radius: 1.1rem !important;
  }
  
  .w-9.h-5::after, .w-12.h-7::after {
    width: 1.8rem !important;
    height: 1.8rem !important;
    border-radius: 50% !important;
  }
  
  /* 📱 カレンダーヘッダーの完全モバイル最適化 */
  .fc-header-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  
  /* 🎯 大きなツールバーボタン */
  .fc-button {
    font-size: 16px !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
  }
  
  .fc-button:hover, .fc-button:focus {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* 📱 大きなビューセレクター */
  #calendar-view-selector {
    font-size: 16px !important;
    padding: 12px 40px 12px 16px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 2px solid #3b82f6 !important;
    background-color: #3b82f6 !important;
    color: white !important;
    font-weight: 600 !important;
  }
  
  /* 🎨 大きなイベントボタン */
  .fc-event {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  /* 📅 日付セルの改善 */
  .fc-daygrid-day {
    min-height: 100px !important;
    padding: 4px !important;
  }
  
  .fc-daygrid-day-number {
    font-size: 16px !important;
    padding: 8px !important;
    font-weight: 600 !important;
  }
  
  /* 🎯 モバイル専用フローティングアクションボタン */
  .mobile-fab {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4) !important;
    z-index: 1000 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mobile-fab:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.5) !important;
  }
  
  /* モバイル専用サイドバートグルボタン */
  .mobile-sidebar-toggle {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: white !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-size: 20px !important;
    z-index: 10000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: none !important;
  }
  
  /* ポップアップとモーダルの改善 */
  .fc-popover {
    max-width: 95vw !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  }
  
  .fc-popover-header {
    padding: 16px !important;
    font-size: 16px !important;
  }
  
  .fc-popover-body {
    padding: 16px !important;
  }
  
  .fc-popover .fc-event {
    margin: 8px 0 !important;
    padding: 12px !important;
    min-height: 44px !important;
  }
}

/* 小さなモバイル画面 (最大480px) */
@media (max-width: 480px) {
  .fc-header-toolbar {
    padding: 12px !important;
  }
  
  .fc-button {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
  }
  
  .fc-event {
    font-size: 12px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
  }
  
  .touch-target {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  
  #filter-sidebar {
    padding: 16px !important;
  }
}

/* 🎨 統合されたFullCalendarスタイル（パフォーマンス最適化済み） */

/* 個人イベントの基本スタイル（動的色は別途インラインで適用） */
.fc-event.personal-event {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3) !important;
}

/* 家族グループ・個人イベントのスタイル */
.fc-event.family-event {
  border: 3px solid !important;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding-right: 40px !important; /* アイコン用のスペース */
}

.fc-event.personal-event {
  border: 2px solid !important;
  position: relative;
}

/* 家族グループアイコン */
.fc-event.family-event::before {
  content: "👥";
  position: absolute;
  top: 2px;
  right: 22px;
  font-size: 10px;
  opacity: 0.8;
  background-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 時間帯アイコン（家族グループイベント用） */
.fc-event.family-event::after {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  opacity: 0.9;
  background-color: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.fc-event.family-event.calendar-event-breakfast::after {
  content: "🌅";
}

.fc-event.family-event.calendar-event-lunch::after {
  content: "🌞";
}

.fc-event.family-event.calendar-event-dinner::after {
  content: "🌙";
}

.fc-event.family-event.calendar-event-snack::after {
  content: "🍪";
}

/* 個人イベントアイコン */
.fc-event.personal-event::before {
  content: "👤";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  opacity: 0.8;
  background-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 🎨 追加のFullCalendarスタイル */
/* カレンダーヘッダー */
.fc-header-toolbar {
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background-color: #f8fafc !important;
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.fc-button {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  font-size: 14px !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.fc-button:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.fc-button:disabled {
  background-color: #9ca3af !important;
  border-color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* 今日の日付ハイライト */
.fc-day-today {
  background-color: #eff6ff !important;
}

/* 週末のスタイル */
.fc-day-sun {
  background-color: #fef2f2 !important;
}

.fc-day-sat {
  background-color: #f0f9ff !important;
}

/* 日付セルのスタイル */
.fc-daygrid-day {
  min-height: 80px !important;
}

.fc-daygrid-day-number {
  color: #374151 !important;
  font-weight: 500 !important;
}

/* 選択可能な日付のホバー */
.fc-daygrid-day:hover {
  background-color: #f3f4f6 !important;
  cursor: pointer;
}

/* イベントドラッグ中のスタイル */
.fc-event-dragging {
  opacity: 0.75 !important;
  z-index: 999 !important;
}

/* ホバー効果 */
.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

/* カスタムビューセレクターのスタイル */
#calendar-view-selector {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.375rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1rem 1rem !important;
  padding-right: 1.75rem !important;
  min-width: 3rem !important;
  max-width: 4rem !important;
  height: 2rem !important;
  vertical-align: middle !important;
}

#calendar-view-selector:focus {
  outline: none !important;
  ring: 2px solid rgba(59, 130, 246, 0.5) !important;
  border-color: #3b82f6 !important;
}

.fc-customViewSelector-button {
  height: 2rem !important;
  line-height: normal !important;
  padding: 0 !important;
  min-width: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ローディング後にカレンダーを表示 */
.fc-view-harness {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 📅 FullCalendar日付セルの調整 */
.fc-daygrid-day {
  /* 日付セル内のイベント配置を最適化 */
  overflow: visible !important;
  
  /* セル内の垂直配置 */
  vertical-align: top !important;
}

.fc-daygrid-day-events {
  /* イベントコンテナを日付セル内に制限 */
  max-width: 100% !important;
  overflow: hidden !important;
  
  /* 縦積み配置を強制 */
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* 🔧 複数イベントがある日の縦積み表示 */
.fc-daygrid-event {
  /* 各イベントを独立したブロックとして表示 */
  display: block !important;
  width: 100% !important;
  
  /* 日付境界を超えないよう制限 */
  box-sizing: border-box !important;
  
  /* テキストの省略表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  
  /* 最小高さ設定（読みやすさ確保） */
  min-height: 18px !important;
  line-height: 18px !important;
  
  /* パディング調整 */
  padding: 2px 4px !important;
}

/* 🍽️ 食事ログ専用イベントのスタイル */
.meal-log-only-event {
  /* 食事ログイベントの特別スタイル */
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  
  /* 1日内で完結する表示 */
  width: 100% !important;
  max-width: 100% !important;
  
  /* アイコンとテキストの配置 */
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* 🏠 家族グループイベントの色分け */
.family-event {
  /* 家族イベントの枠線強調 */
  border-width: 2px !important;
  
  /* 1日内配置確保 */
  width: 100% !important;
  max-width: 100% !important;
}

.personal-event {
  /* 個人イベントのスタイル */
  border-width: 1px !important;
  
  /* 1日内配置確保 */
  width: 100% !important;
  max-width: 100% !important;
}

/* ✅ 記録済みイベントの特別表示 */
.calendar-event-recorded {
  /* 記録済みアイコン表示エリア */
  position: relative !important;
}

.calendar-event-recorded::after {
  /* チェックマークアイコン */
  content: "✓" !important;
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #10b981 !important;
  font-weight: bold !important;
  font-size: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 📱 モバイル対応 */
@media (max-width: 768px) {
  .fc-event {
    /* モバイルでの最小高さ確保 */
    min-height: 20px !important;
    font-size: 10px !important;
    padding: 1px 2px !important;
  }
  
  .fc-daygrid-event {
    min-height: 16px !important;
    line-height: 16px !important;
    font-size: 10px !important;
  }
  
  .meal-log-only-event {
    font-size: 9px !important;
  }
}

/* 🔄 繰り返しイベントの識別 */
.recurring-event {
  /* 繰り返しイベントの左側に小さな印 */
  border-left: 3px solid rgba(139, 69, 19, 0.6) !important;
  padding-left: 6px !important;
}

/* 🌅🌞🌆🌙 時間帯別イベントの微調整 */
.calendar-event-breakfast {
  /* 朝食イベント */
  order: 1 !important;
}

.calendar-event-lunch {
  /* 昼食イベント */
  order: 2 !important;
}

.calendar-event-dinner {
  /* 夕食イベント */
  order: 3 !important;
}

.calendar-event-snack {
  /* おやつイベント */
  order: 4 !important;
}

/* 🔧 FullCalendarグリッドの最適化 */
.fc-daygrid-day-number {
  /* 日付番号と重ならないようマージン確保 */
  margin-bottom: 2px !important;
}

.fc-daygrid-day-top {
  /* 日付表示エリアとイベントエリアを分離 */
  padding-bottom: 2px !important;
}

/* 🚀 パフォーマンス最適化 */
.fc-view-harness {
  /* GPU加速とスムーズレンダリング */
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
}