/* ==============================
   notice / alert ダークモード
   ============================== */
.dark .notice {
  background-color: #78350f;
  color: #ffecb5;
  border-color: #b45309;
}

.dark .alert {
  background-color: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

/* ==============================
   header ダークモード
   ============================== */
.dark .site-header {
  background-color: #111827;
  border-bottom: 1px solid #374151;
  color: #f9fafb;
}

.dark .header-nav {
  background-color: #1f2937;
  border-radius: 6px;
  padding: 6px 10px;
}

.dark .nav-btn {
  background-color: transparent;
  color: #f9fafb;
  border: 1px solid #4b5563;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.dark .nav-btn:hover {
  background-color: #2563eb;
  color: #f9fafb;
  border-color: #1d4ed8;
}

.dark #dark-mode-toggle {
  background-color: #374151;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

.dark #dark-mode-toggle:hover {
  background-color: #2563eb;
  border-color: #1d4ed8;
}

.dark .notification-link {
  color: #f9fafb;
  position: relative;
}

.dark .notification-link:hover {
  color: #60a5fa;
}

.dark .notification-link .fa-bell {
  color: #f9fafb;
}

/* 「＋作成する」のドロップダウン */
.dark #record-icons {
  background-color: #111827;
  border-color: #374151;
}

.dark #record-icons a,
.dark #record-icons i {
  color: #fff;
}

.dark #record-icons a:hover {
  background-color: #1b2236;
}

/* アカウントアイコンのドロップダウン */
.dark #account-menu,
.dark #theme-menu {
  background-color: #111827;
  border-color: #374151;
}

.dark #account-menu a {
  color: #fff;
  background: #111827;
}

.dark #account-menu a:hover,
.dark #account-menu form:hover,
.dark #account-menu button:hover {
  background-color: #1b2236;
}

/* ベルマークのドロップダウン */
.dark .notification-dropdown,
.dark .notification-item {
  background-color: #111827;
}

.dark .notification-item:hover {
  background-color: #1b2236;
}

.dark .notification-kind.reminder {
  background-color: #8aff8a;
}

.dark .notification-kind.alert {
  background-color: #ff8a8a;
}

.dark .notification-title,
.dark .notification-message,
.dark .notification-time {
  color: #fff;
}

.dark .notification-dropdown-header {
  background-color: #111827;
  color: #fff;
}

/* ==============================
   スマホ用ナビゲーション ダークモード
   ============================== */
.dark .mobile-bottom-nav {
  background-color: #111827;
  border-top: 1px solid #374151
}

.dark .mobile-bottom-nav a,
.dark .mobile-bottom-nav i {
  color: #fff;
}

.dark .mobile-bottom-nav .mobile-nav-create {
  background: #1F2937;
}

.dark .mobile-modal-content {
  background-color: #111827;
  border: 1px solid #374151;
}

.dark #mobile-modal-title,
.dark .mobile-modal-item-text {
  color: #fff;
}

/* ==============================
   フィルターバー（一覧ページ上部の操作用UI）
   ============================== */
.dark .filter-bar {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

/* ==============================
   sidebar ダークモード
   ============================== */
.dark #sidebar-toggle svg {
  color: #fff;
}

.dark .sidebar {
  background-color: #111827; /* ダーク背景 */
  border-right: 1px solid #374151;
  color: #f9fafb;
}

.dark .sidebar h3,
.dark .sidebar h4,
.dark .sidebar h5,
.dark .sidebar i {
  color: #f9fafb;
}

.dark .sidebar ul li a,
.dark .sidebar ul li button.nav-btn {
  background-color: transparent;
  color: #f9fafb;
}

.dark .sidebar ul li a:hover,
.dark .sidebar ul li button.nav-btn:hover {
  background-color: #2563eb; /* 青系ホバー */
  color: #f9fafb;
  border-color: #1d4ed8;
}

/* ==============================
   footer ダークモード
   ============================== */
.dark .site-footer {
  background-color: #111827;
  border-top: 1px solid #374151;
}

.dark .footer-links a,
.dark .footer-bottom a,
.dark .footer-bottom p {
  color: #fff;
}

/* ==============================
   dashboard.css ダークモード
   ============================== */
/* --- 共通 --- */
.dark .dashboard-title {
  color: #fff;
}

/* カードビュー */
.dark .stat-card {
  background-color: #111827;
  border: 1px solid #374151;
}

/* カードタイトル */
.dark .stat-card h3 {
  color: #fff;
}

/* カード内容 */
.dark .stat-value {
  color: #fff;
}

/* カードのステータス情報 */
.dark .stat-diff.up { color: #4ade80; }
.dark .stat-diff.down { color: #ef4444; }

.dark .stat-diff-label {
  color: #fff;
}

/* テーブルのボーダー */
.dark .dashboard-table td {
  border-color: #fff;
}

/* 「スケジュール/記録がありません」の表示 */
.dark .no-record-card {
  background-color: #111827;
  color: #fff;
}

.dark .no-record-card {
  border-color: #374151;
}

/* --- scheduleレコード行 --- */
/* レコードの中身 */
.dark .dashboard-schedule-col-date,
.dark .dashboard-schedule-col-title,
.dark .dashboard-schedule-col-detail,
.dark .dashboard-col-chevron i {
  color: #fff;
}

/* レコードホバー時 */
.dark .dashboard-table tr:hover {
  background-color: #1b2236;
}

/* --- recordレコード行 --- */
/* ナビゲーション（テキストだけはtailwindで実装） */
.dark .nav-date-controller .fa-chevron-left,
.dark .nav-date-controller .fa-chevron-right {
  color: #fff;
}

/* レコードの中身 */
.dark .dashboard-col-date,
.dark .dashboard-col-detail,
.dark .dashboard-col-item,
.dark .dashboard-col-memo,
.dark #dashboard-records span {
  color: #fff;
}

/* ==============================
   child.css ダークモード
   ============================== */
/* タイトル */
.dark .child-title {
  color: #fff;
}

/* --- index --- */
/* カードビュー */
.dark .child-card {
  background-color: #111827;
  border-color: #374151;
}

.dark .child-card p,
.dark .child-card span {
  color: #fff;
}

/* 表示ボタン */
.dark .view-btn {
  background-color: #1b2236;
  color: #60a5fa;
  border: 1px solid #2563eb;
}

.dark .view-btn:hover {
  background-color: #2563eb;
  color: #fff;
}

/* 編集ボタン */
.dark .edit-btn {
  background-color: #1b2236;
  color: #facc15;
  border: 1px solid #b58900;
}

.dark .edit-btn:hover {
  background-color: #b58900; 
  color: #fff;
}

/* 削除ボタン */
.dark .delete-btn {
  background-color: #1b2236;
  color: #f87171; /* 赤系で目立たせる */
  border: 1px solid #d32f2f;
}

.dark .delete-btn:hover {
  background-color: #d32f2f;
  color: #fff;
}

/* 新規作成ボタン */
.dark .new-child-btn {
  background-color: #6fcf97;
  color: #fff;
}

.dark .new-child-btn:hover {
  background-color: #fff;
  color: #4caf50;
}

/* --- show --- */
.dark .child-container {
  background-color: #111827;
  border: 1px solid #374151;
}

.dark .child-image,
.dark .child-item,
.dark .child-container strong {
  color: #fff;
}

/* new/edit */
.dark .child-form-container {
  background-color: #111827;
  border-color: #374151;
}

.dark .form-label {
  color: #fff;
}

/* --- switch_page --- */
/* 全体 */
.dark .switch-child-page-box {
  background-color: #111827;
  border-color: #374151;
}

/* タイトル */
.dark .switch-child-page-title {
  color: #fff;
}

/* 子供カードビュー */
.dark .switch-child-page-child-item {
  background-color: #111827;
  border-color: #fff;
}

.dark .switch-child-page-child-item:hover {
  background-color: #1b2236;
}

/* 中身（名前） */
.dark .switch-child-page-child-name {
  color: #fff;
}

/* ==============================
   record.css ダークモード
   ============================== */
/* タイトル・日付セクションタイトル */
.dark .responsive-title,
.dark .date-heading {
  color: #fff;
}

/* レコード内容 */
.dark .responsive-table td,
.dark .responsive-table span,
.dark .record-col-chevron i,
.dark .date-section {
  border-color: #fff;
  color: #fff;
}

/* レコード行ホバー */
.dark .responsive-table tr:hover {
  background-color: #1b2236;
}

/* 「新規作成」ボタン */
.dark .record-create-btn {
  background-color: #6fcf97;
  color: #fff;
}

.dark .record-create-btn:hover {
  background-color: #fff;
  color: #6fcf97;
}

.dark .checkbox-wrapper {
  color: #fff;
}

.dark .form-container {
  background: #1f2937;
  border-color: #374151;
}

.dark .form-input {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

.dark .animal-image {
  display: none;
}

/* ==============================
   diary.css ダークモード
   ============================== */
/* --- index --- */
/* タイトル */
.dark .responsive-diary-title {
  color: #fff;
}

/* カードビュー */
.dark .diary-index-item {
  background-color: #111827;
  border: 1px solid #374151;
}

/* 中身 */
.dark .diary-index-title,
.dark .diary-index-date,
.dark .diary-index-content {
  color: #fff;
}

/* 写真・動画アイコン */
.dark .diary-index-media-icons {
  color: #fff;
}

/* --- show --- */
/* タイトル */
.dark .responsive-diary-show-title {
  color: #fff;
}

/* カードビュー */
.dark .diary-show-card {
  background-color: #111827;
  border: 1px solid #374151;
}

/* 中身 */
.dark .diary-show-title,
.dark .diary-show-content {
  color: #fff;
}

/* 日付 */
.dark .diary-show-date {
  color: #6B7280 ;
}

/* --- new/edit --- */
/* モーダル */
.dark .no-record-modal-container {
  background-color: #111827;
}

/* 「削除する」ラベル */
.dark .remove-media-label {
  color: #fff;
}

/* ==============================
   schedule.css ダークモード
   ============================== */
.dark .calendar-container {
  background-color: #111827;
  color: #f9fafb;
}

.dark .btn-nav {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark .btn-nav:hover {
  background: #2563eb;
  color: #f9fafb;
}

.dark .day-cell {
  background-color: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark .day-cell.other-month {
  background-color: #111827;
  color: #6b7280;
}

.dark .event {
  background-color: #2563eb;
  color: #f9fafb;
}

.dark .event-link {
  background-color: #3b82f6;
  color: #fff;
}

.dark .event-link:hover {
  background-color: #2563eb;
}

.dark .event-link.child-color-0 { background-color: #d97706; }
.dark .event-link.child-color-1 { background-color: #059669; }
.dark .event-link.child-color-2 { background-color: #6d28d9; }
.dark .event-link.child-color-3 { background-color: #be123c; }
.dark .event-link.child-color-4 { background-color: #ca8a04; }
.dark .event-link.user-event { background-color: #4b5563; }

/* --- index --- */
/* タイトル・日付セクションタイトル */
.dark .schedule-title {
  color: #fff;
}

/* レコード内容 */
.dark .schedule-table td,
.dark .schedule-table span {
  border-color: #fff;
  color: #fff;
}

/* レコード行ホバー */
.dark .schedule-table tr:hover {
  background-color: #1b2236;
}

/* --- show ---*/
.dark .schedule-show-modern {
  background-color: #111827;
}

.dark .schedule-show-title,
.dark .schedule-show-detail p,
.dark .schedule-show-detail strong,
.dark .schedule-show-detail span {
  color: #fff;
}

.dark .schedule-show-detail i {
  color: #4ade80;
}

/* --- new/edit --- */
/* 「新規作成」ボタン */
.dark .schedule-create-btn {
  background-color: #6fcf97;
  color: #fff;
}

.dark .schedule-create-btn:hover {
  background-color: #fff;
  color: #6fcf97;
}

.dark .schedule-form-input {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

/* ==============================
   growth.css ダークモード
   ============================== */
/* タイトル */
.dark .growth-title {
  color: #fff;
}

/* レコード内容 */
.dark .growth-table td,
.dark .growth-table span {
  border-color: #fff;
  color: #fff;
}

/* レコード行ホバー */
.dark .growth-table tr:hover {
  background-color: #1b2236;
}

/* 「新規作成」ボタン */
.dark .growth-create-btn {
  background-color: #6fcf97;
  color: #fff;
}

.dark .growth-create-btn:hover {
  background-color: #fff;
  color: #6fcf97;
}

.dark .growth-form-container {
  background: #1f2937;
  border-color: #374151;
}

.dark .growth-form-input {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

/* ==============================
   profile.css ダークモード
   ============================== */
.dark .profile-title {
  color: #fff;
}

.dark .profile-form-container {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark .profile-form-btn-danger {
  background-color: #e11d48;
  color: #f9fafb;
}

.dark .profile-form-btn-danger:hover {
  background-color: #be123c;
}

/* ==============================
   notification.css ポップアップ/通知設定 ダークモード
   ============================== */
/* --- ポップアップ ---*/
/* 全体 */
.dark .notification-popup {
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 10px;
}

/* アラートごとの背景色に応じた文字色 */
.dark .notification-popup.reminder {
  background-color: #059669;
  color: #e5e7eb;
  border-color: #065f46;
}

.dark .notification-popup.alert {
  background-color: #be123c;
  color: #fce7f3;
  border-color: #991b1b;
}

/* 未読件数バッジ */
.dark .notification-count {
  background: #ef4444;
  color: #fff;
}

/* --- 通知設定 --- */
/* モーダル全体 */
.dark .sidebar-modal-content {
  background-color: #111827;
}

/* 中身（ヘッダーとカードビュー） */
.dark .notification-modal-header,
.dark .notification-setting {
  background-color: #374151;
  color: #fff;
  border-color: #4b5563;
}

/* 「×」閉じるボタン */
.dark .header-close-btn {
  color: #fff;
}

.dark .header-close-btn:hover {
  color: #111827;
}

/* 中身のテキスト */
.dark .notification-setting label,
.dark .notification-setting h5 {
  color: #fff;
}

.dark .notification-number,
.dark .notification-time,
.dark .child-goal {
  background-color: #1f2937;
  color: #fff;
  border-color: #4b5563;
}

.dark .notification-option:hover {
  background-color: #1b2236;
}

/* ==============================
   tips.css ダークモード
   ============================== */
/* 共通タイトル */
.dark .responsive-tip-title {
  color: #fff;
}

/* --- show ページ用 --- */
.dark .tip-container {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
}

.dark .tip-container h2 {
  border-bottom: 2px solid #facc15;
  color: #f9fafb;
}

.dark .tip-content-show {
  color: #e5e7eb;
}

.dark .tip-content-show h2 {
  color: #facc15;
  border-left: 4px solid #facc15;
}

.dark .tip-actions .nav-btn {
  background: #4CAF50;
  color: #f9fafb;
  border: 1px solid #45a049;
}

.dark .tip-actions .nav-btn:hover {
  background: #45a049;
}

/* --- index ページ用 --- */
.dark .tips-list {
  background-color: transparent;
}

.dark .tip-item {
  background-color: #1f2937;
  border: 1px solid #374151;
  color: #f9fafb;
}

.dark .tip-title a {
  color: #f9fafb;
}

.dark .tip-title a:hover {
  color: #6fcf97;
}

.dark .tip-category {
  color: #9ca3af;
}

.dark .tip-content-index {
  color: #d1d5db;
}

/* ==============================
   static_pages ダークモード
   ============================== */
.dark .static_pages-container {
  background-color: #111827;
  color: #fff;
}

/* ==============================
   modal ダークモード
   ============================== */
.dark .modal-background {
  background-color: rgba(0, 0, 0, 0.7);
}

.dark .modal-container {
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 1rem;
}