/* CSS variables for dynamic theme color */
:root {
  --brand-color: 37 99 235; /* Tailwind blue-600 as default */
}

[data-theme-color="blue"] { --brand-color: 37 99 235; }
[data-theme-color="indigo"] { --brand-color: 79 70 229; }
[data-theme-color="violet"] { --brand-color: 124 58 237; }
[data-theme-color="purple"] { --brand-color: 147 51 234; }
[data-theme-color="pink"] { --brand-color: 236 72 153; }
[data-theme-color="rose"] { --brand-color: 244 63 94; }
[data-theme-color="red"] { --brand-color: 220 38 38; }
[data-theme-color="orange"] { --brand-color: 234 88 12; }
[data-theme-color="amber"] { --brand-color: 217 119 6; }
[data-theme-color="yellow"] { --brand-color: 202 138 4; }
[data-theme-color="lime"] { --brand-color: 101 163 13; }
[data-theme-color="green"] { --brand-color: 22 163 74; }
[data-theme-color="emerald"] { --brand-color: 5 150 105; }
[data-theme-color="teal"] { --brand-color: 13 148 136; }
[data-theme-color="cyan"] { --brand-color: 8 145 178; }
[data-theme-color="sky"] { --brand-color: 2 132 199; }
[data-theme-color="slate"] { --brand-color: 71 85 105; }
[data-theme-color="gray"] { --brand-color: 107 114 128; }
[data-theme-color="zinc"] { --brand-color: 113 113 122; }

/* Example usage classes (if needed):
   bg-brand/ text-brand via tailwind config color 'brand' mapping */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* モバイルタッチフィードバック */
@import url('./components/mobile-touch-feedback.css');

/* カラーパレットUIのアクセシビリティ向上 */
.theme-swatch {
  position: relative;
  outline: none;
}
.theme-swatch:focus-visible span {
  box-shadow: 0 0 0 3px rgba(59,130,246,.6); /* focus ring */
}

/* ダークモードの可読性向上（ベース） */
.dark .text-gray-700 { color: #e5e7eb; }
.dark .text-gray-800 { color: #f3f4f6; }
.dark .text-gray-900 { color: #f9fafb; }
.dark .border-gray-300 { border-color: #374151; }
.dark .bg-gray-50 { background-color: #111827; }
.dark .text-gray-600 { color: #d1d5db; }
.dark .text-gray-500 { color: #9ca3af; }
.dark .text-gray-400 { color: #6b7280; }
.dark .hover\:bg-gray-100:hover { background-color: #374151; }
.dark .hover\:bg-gray-50:hover { background-color: #374151; }
.dark .border { border-color: #374151; }

/* ページコンテンツのダークモード対応 */
.dark .bg-white { background-color: #1f2937; }

/* モーダルオーバーレイの背景を修正 */
.dark #genericModal,
.dark #confirmModal,
.dark #infoModal,
.dark #urlCopyModal,
.dark #passkeyRegisterModal {
  background-color: rgba(0, 0, 0, 0.75) !important;
}



/* お知らせページ専用のダークモード対応 */
.dark .bg-gray-800 { background-color: #1f2937; }
.dark .hover\:bg-gray-700:hover { background-color: #374151; }
.dark .divide-gray-700 { border-color: #374151; }
.dark .border-gray-600 { border-color: #4b5563; }
.dark .text-gray-300 { color: #d1d5db; }
.dark .text-gray-100 { color: #f3f4f6; }
.dark .hover\:text-blue-400:hover { color: #60a5fa; }

/* 組織ページのダークモード対応 */
.dark .bg-gray-200 { background-color: #374151; }
.dark .bg-gray-700 { background-color: #374151; }
.dark .text-gray-200 { color: #e5e7eb; }
.dark .bg-green-900 { background-color: #14532d; }
.dark .text-green-200 { color: #bbf7d0; }

/* グループページのダークモード対応 */
.dark .border-gray-600 { border-color: #4b5563; }
.dark .hover\:bg-gray-600:hover { background-color: #4b5563; }
.dark .hover\:bg-gray-500:hover { background-color: #6b7280; }
.dark .bg-gray-600 { background-color: #4b5563; }
.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-600:hover { background-color: #2563eb; }
.dark .text-blue-200 { color: #bfdbfe; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .text-red-400 { color: #f87171; }
.dark .hover\:text-red-300:hover { color: #fca5a5; }

/* アクションボタンの高コントラスト対応 */
.dark .text-white { color: #ffffff !important; }
.dark .bg-gray-600 { background-color: #4b5563 !important; }
.dark .bg-blue-700 { background-color: #1d4ed8 !important; }

/* CSS変数でダークモードの文字色を定義 */
:root {
  --text-color: inherit;
}

.dark {
  --text-color: #ffffff;
}

/* アクションボタン専用のスタイル */
.dark .action-button {
  color: #ffffff !important;
  font-weight: 500;
}

.dark .action-button:hover {
  color: #ffffff !important;
}

/* より具体的なセレクタでダークモードのアクションボタンを強制 */
.dark .action-button.dark\:text-white {
  color: #ffffff !important;
}

/* モーダル内のメンバー選択のダークモード対応 */
.dark .member-item {
  background-color: transparent;
  border-color: #4b5563;
}

.dark .member-item:hover {
  background-color: #374151 !important;
}

.dark .member-item.bg-blue-50 {
  background-color: #1e3a8a !important;
  border-color: #3b82f6 !important;
}

.dark .placeholder-gray-400::placeholder {
  color: #9ca3af;
}

.dark .placeholder-gray-500::placeholder {
  color: #6b7280;
}

/* アイコンの高コントラスト対応 */
.dark .bg-gray-400 {
  background-color: #6b7280 !important;
}

.dark .bg-gray-500 {
  background-color: #6b7280 !important;
}

/* アイコン内の文字を確実に白にする */
.dark .text-white {
  color: #ffffff !important;
}

/* メンバーアイコン専用のスタイル */
.member-avatar {
  background-color: #6b7280 !important; /* gray-500 */
  color: #ffffff !important;
  font-weight: 600;
}

.dark .member-avatar {
  background-color: #4b5563 !important; /* gray-600 */
  color: #ffffff !important;
  font-weight: 600;
}

/* より具体的なセレクタでアイコンの色を強制 */
.member-avatar span,
.member-avatar {
  color: #ffffff !important;
}

/* イベントページのダークモード対応 */
.dark .bg-gray-200 { background-color: #4b5563; }
.dark .hover\:bg-gray-300:hover { background-color: #6b7280; }
.dark .text-gray-800 { color: #f3f4f6; }

/* 組織アイコンの高コントラスト対応 */
.dark .bg-gray-400 { background-color: #6b7280; }
.dark .bg-gray-500 { background-color: #6b7280; }
.dark .text-gray-700 { color: #e5e7eb; }

/* ダークモードのフォーム要素（見やすい背景・枠・文字・プレースホルダー） */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark select,
.dark textarea {
  background-color: #0f172a; /* slate-900 */
  color: #e5e7eb;            /* gray-200 */
  border-color: #334155;     /* slate-700 */
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #94a3b8; /* slate-400 */
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline: none;
  border-color: #60a5fa;     /* blue-400 */
  box-shadow: 0 0 0 3px rgba(96,165,250,.35); /* focus ring */
}
/* 参加者一覧の可読性向上 */
.participant-card {
  background-color: #f0fdf4; /* light green background */
  border: 1px solid #bbf7d0;
}

.dark .participant-card {
  background-color: #1f2937 !important; /* dark gray background */
  border-color: #4b5563 !important;
}

.participant-name {
  color: #111827 !important; /* very dark text */
  font-weight: 600;
}

.dark .participant-name {
  color: #ffffff !important; /* pure white text in dark mode */
  font-weight: 600;
}

.participant-comment {
  color: #374151 !important;
}

.dark .participant-comment {
  color: #e5e7eb !important; /* light gray text in dark mode */
}/* 日時入力フィ
ールドの可読性向上 */
input[type="date"], input[type="time"] {
  color-scheme: light;
}

.dark input[type="date"], .dark input[type="time"] {
  color-scheme: dark;
  background-color: #374151 !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}

/* プレースホルダーの可読性向上 */
.dark input::placeholder,
.dark textarea::placeholder {
  color: #9ca3af !important;
}

/* PWA Pull-to-Refresh Styles */
.pull-to-refresh-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(var(--brand-color), 0.9) 0%, rgba(var(--brand-color), 0.7) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
  z-index: 9999;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
}

.pull-to-refresh-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pull-to-refresh-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.refresh-arrow {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.refresh-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 1s linear infinite;
}

.refresh-spinner circle {
  animation: dash 1.5s ease-in-out infinite;
}

.pull-to-refresh-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.refreshing .refresh-arrow {
  display: none;
}

.refreshing .refresh-spinner {
  display: block !important;
}

.can-refresh .refresh-arrow {
  transform: rotate(180deg);
}

.can-refresh .pull-to-refresh-text {
  opacity: 1;
}