/* dark-mode.css - Zentrale Dark Mode Styles (nur Profil-gesteuert) - ÜBERARBEITET */
/* Buttons haben JETZT dieselben Farben wie Light Mode, Hover HELLER wie im Light Mode */

body.dark-mode {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  color: #e2e8f0 !important;
  transition: all 0.3s ease;
}

/* Container Styles für verschiedene Seiten */
/* Feeding-settings.html Styles */
body.dark-mode .container {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

body.dark-mode h1 {
  color: #ffffff !important;
}

/* Dark Mode für Kreis */
body.dark-mode .bg {
  stroke: #555;
}

body.dark-mode .last-feeding-date {
  color: #aaa;
}

/* === HAUPT-BUTTONS: Gleiche Farben wie Light Mode, Hover HELLER === */
/* Navigation Buttons & Manual Feed */
body.dark-mode .set-time-button,
body.dark-mode .schedule-button,
body.dark-mode .stats-button,
body.dark-mode .manual-feed-button {
  background: linear-gradient(135deg, #00A0FF, #0078FF, #0050FF) !important;
  color: #ffffff !important;
  box-shadow: 0px 0px 20px 5px #333 !important;
  transition: all 0.3s ease;
}

body.dark-mode .set-time-button:hover,
body.dark-mode .schedule-button:hover,
body.dark-mode .stats-button:hover,
body.dark-mode .manual-feed-button:hover {
  background: linear-gradient(135deg, #0EB4FF, #0E78FF, #0e4eff) !important;
  transform: scale(1.03);
  box-shadow: 0px 6px 20px rgba(0, 162, 255, 0.4) !important;
}

/* Form Inputs */
body.dark-mode input,
body.dark-mode select {
  background: #374151 !important;
  color: #e2e8f0 !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus {
  border-color: #00A0FF !important;
  box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.1) !important;
}

body.dark-mode .input-suffix {
  background: #374151 !important;
  color: #e2e8f0 !important;
  border: 2px solid #4b5563 !important;
}

/* Day Labels */
body.dark-mode .day-label {
  background: #374151 !important;
  border: 2px solid #4b5563 !important;
  color: #9ca3af !important;
}

body.dark-mode .day-label:hover {
  border-color: #6b7280 !important;
  background: #4b5563 !important;
}

body.dark-mode .days input[type="checkbox"]:checked + .day-label {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
  border-color: #00A0FF !important;
  color: white !important;
}

/* Day Times Container */
body.dark-mode .day-times {
  background: rgba(55, 65, 81, 0.95) !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .day-times input[type="time"] {
  background: #4b5563 !important;
  color: #e2e8f0 !important;
  border: 1px solid #6b7280 !important;
}

body.dark-mode .add-time-btn-small {
  background: #4b5563 !important;
  color: #e2e8f0 !important;
  border: 1px solid #6b7280 !important;
}

body.dark-mode .remove-time-btn {
  background: #ef4444 !important;
  color: white !important;
}

/* INTERVAL-SPECIFIC DARK MODE STYLES */
body.dark-mode .schedule-type-button {
  background: linear-gradient(135deg, #00A0FF, #0050FF) !important;
  color: #ffffff !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .schedule-type-button:hover {
  background: linear-gradient(135deg, #0EB4FF, #0e4eff) !important;
  border-color: #00A0FF !important;
}

body.dark-mode .schedule-type-button.active {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
  border-color: #00A0FF !important;
  color: white !important;
}

body.dark-mode .interval-settings {
  background: transparent !important;
}

body.dark-mode .interval-times {
  background: rgba(55, 65, 81, 0.95) !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .interval-times input[type="time"] {
  background: #4b5563 !important;
  color: #e2e8f0 !important;
  border: 1px solid #6b7280 !important;
}

body.dark-mode .interval-times .add-time-btn-small {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
  color: white !important;
  border: 1px solid #00A0FF !important;
}

body.dark-mode .interval-times .add-time-btn-small:hover {
  background: linear-gradient(135deg, #0EB4FF, #0E78FF) !important;
}

body.dark-mode input[type="number"] {
  background: #374151 !important;
  color: #e2e8f0 !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode input[type="date"] {
  background: #374151 !important;
  color: #e2e8f0 !important;
  border: 2px solid #4b5563 !important;
}

/* Labels */
body.dark-mode label {
  color: #d1d5db !important;
}

/* Submit & Back Buttons: Gleiche Farben wie Light */
body.dark-mode confirm-buttons {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
  color: white !important;
}

body.dark-mode confirm-buttons:hover {
  background: linear-gradient(135deg, #0EB4FF, #0E78FF) !important;
}

/* Day Cards */
body.dark-mode .day-card {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .day-card:hover {
  border-color: #00A0FF !important;
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.2) !important;
}

body.dark-mode .day-card.active {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
  border-color: #00A0FF !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.3) !important;
}

body.dark-mode .day-times-preview {
  color: #9ca3af !important;
}

body.dark-mode .day-card.active .day-times-preview {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .day-modal-content {
  background: #2a2a2a !important;
  color: #e2e8f0 !important;
}

body.dark-mode .modal-title {
  color: #00c4ff !important;
}

body.dark-mode .close-btn {
  color: #9ca3af !important;
}

body.dark-mode .close-btn:hover {
  background: #374151 !important;
  color: #00c4ff !important;
}

body.dark-mode .time-input-row input[type="time"] {
  background: #374151 !important;
  color: #e2e8f0 !important;
  border-color: #4b5563 !important;
}

body.dark-mode .time-input-row input[type="time"]:focus {
  border-color: #00A0FF !important;
}

body.dark-mode .add-time-btn {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
}

body.dark-mode .add-time-btn:hover {
  background: linear-gradient(135deg, #0EB4FF, #0E78FF) !important;
}

body.dark-mode .modal-btn.primary {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
}

body.dark-mode .modal-btn.primary:hover {
  background: linear-gradient(135deg, #0EB4FF, #0E78FF) !important;
}

body.dark-mode .modal-btn.secondary {
  background: #374151 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .modal-btn.secondary:hover {
  background: #4b5563 !important;
}

/* Stats.html Styles */
body.dark-mode .stats-grid .stat-card {
  background: #374151 !important;
  border: 2px solid #4b5563 !important;
  color: #e2e8f0 !important;
}

body.dark-mode .stat-value {
  color: #00c4ff !important;
}

body.dark-mode .stat-label {
  color: #9ca3af !important;
}

body.dark-mode .feeding-history {
  background: #374151 !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .history-item {
  border-bottom: 1px solid #4b5563 !important;
  color: #d1d5db !important;
}

body.dark-mode .history-time {
  color: #00c4ff !important;
}

body.dark-mode .chart-container {
  background: #374151 !important;
  border: 2px solid #4b5563 !important;
}

body.dark-mode .chart-bar {
  background: linear-gradient(135deg, #00A0FF, #0078FF) !important;
}

body.dark-mode .chart-label {
  color: #9ca3af !important;
}

body.dark-mode .no-data {
  color: #9ca3af !important;
}

body.dark-mode .clear-data-button {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* Scrollbar Styles für Dark Mode */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ===== DARK MODE SCHATTEN ANPASSUNGEN ===== */
/* Hauptseite (index.html) Schatten */
body.dark-mode .oval-container {
  box-shadow: 0px 0px 30px 15px rgba(0, 200, 255, 0.1) !important;
}

body.dark-mode .profile-button {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .profile-button:hover {
  box-shadow: 0px 6px 20px rgba(0, 162, 255, 0.6) !important;
}

/* feeding-settings.html und stats.html Schatten */
body.dark-mode .container {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .day-times {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .day-times input[type="time"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .add-time-btn-small {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus {
  box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.2) !important;
}

body.dark-mode button[type="submit"] {
  box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3) !important;
}

body.dark-mode button[type="submit"]:hover,
body.dark-mode .back-button:hover {
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.4) !important;
}

body.dark-mode .back-button {
  box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3) !important;
}

/* Stats.html spezifische Schatten */
body.dark-mode .stats-grid .stat-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .stats-grid .stat-card:hover {
  box-shadow: 0 8px 20px rgba(0, 200, 255, 0.15) !important;
}

body.dark-mode .feeding-history {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .chart-container {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .clear-data-button:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}

/* Auth System Schatten (auth.css) */
body.dark-mode .auth-modal {
  backdrop-filter: blur(10px) !important;
}

body.dark-mode .auth-modal-content,
body.dark-mode .profile-modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .auth-form button:hover {
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.4) !important;
}

body.dark-mode .profile-btn.secondary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .profile-btn.danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}

body.dark-mode .auth-notification {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* INTERVAL-SPECIFIC SHADOWS FOR DARK MODE */
body.dark-mode .schedule-type-button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .schedule-type-button:hover {
  box-shadow: 0 6px 12px rgba(0, 162, 255, 0.3) !important;
}

body.dark-mode .schedule-type-button.active {
  box-shadow: 0 4px 12px rgba(0, 162, 255, 0.4) !important;
}

body.dark-mode .interval-times {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .interval-times input[type="time"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="date"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.2) !important;
}

/* NEUE SCHATTEN FÜR WOCHENTAGE-KARTEN */
body.dark-mode .day-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .day-card:hover {
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.2) !important;
}

body.dark-mode .day-card.active {
  box-shadow: 0 8px 20px rgba(0, 162, 255, 0.3) !important;
}

/* MODAL SCHATTEN */
body.dark-mode .day-modal {
  backdrop-filter: blur(10px) !important;
}

body.dark-mode .day-modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .time-input-row input[type="time"] {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .add-time-btn:hover {
  box-shadow: 0 4px 8px rgba(0, 162, 255, 0.2) !important;
}

body.dark-mode .modal-btn.primary:hover {
  box-shadow: 0 4px 8px rgba(0, 162, 255, 0.3) !important;
}

/* Hover-Effekte beibehalten - nur Schatten anpassen */
body.dark-mode .day-label:hover {
  box-shadow: 0 4px 12px rgba(0, 200, 255, 0.1) !important;
}

body.dark-mode .days input[type="checkbox"]:checked + .day-label {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}