/* ========================================
   Dark Mode — Night-friendly Theme
   ======================================== */

/* Dark mode variables */
:root.dark-mode {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --card-bg: #1c2128;
  --cream: #0d1117;
  --cream-dark: #161b22;
  --text: #e6edf3;
  --text-light: #c9d1d9;
  --text-muted: #8b949e;
  --text-primary: #e6edf3;
  --border-color: #30363d;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Slightly muted accent colors for dark mode */
  --gold: #c4956a;
  --gold-light: #2d2620;
  --gold-dark: #b8896a;
  --gold-darker: #a67b5b;

  /* Muted status colors */
  --green: #3fb950;
  --green-light: #1a2e1f;
  --green-bg: #1a3d1f;
  --red: #f85149;
  --red-light: #2d1f1f;
  --red-bg: #3d1f1f;
  --blue: #58a6ff;
  --blue-light: #1f2d3d;
  --orange: #d29922;
  --orange-light: #2d2510;
  --purple: #bc8cff;
  --purple-light: #2d1f3d;
  --teal: #39c5bb;
  --teal-light: #1f2d2d;
}

/* Auto dark mode via system preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --card-bg: #1c2128;
    --cream: #0d1117;
    --cream-dark: #161b22;
    --text: #e6edf3;
    --text-light: #c9d1d9;
    --text-muted: #8b949e;
    --text-primary: #e6edf3;
    --border-color: #30363d;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --gold: #c4956a;
    --gold-light: #2d2620;
    --gold-dark: #b8896a;
    --gold-darker: #a67b5b;
    --green: #3fb950;
    --green-light: #1a2e1f;
    --green-bg: #1a3d1f;
    --red: #f85149;
    --red-light: #2d1f1f;
    --red-bg: #3d1f1f;
    --blue: #58a6ff;
    --blue-light: #1f2d3d;
    --orange: #d29922;
    --orange-light: #2d2510;
    --purple: #bc8cff;
    --purple-light: #2d1f3d;
    --teal: #39c5bb;
    --teal-light: #1f2d2d;
  }
}

/* ---- Dark mode overrides ---- */
:root.dark-mode body,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) body {
    background: var(--cream);
  }
}

/* Header in dark mode */
:root.dark-mode #app-header {
  background: linear-gradient(135deg, #2d2620 0%, #1c1917 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) #app-header {
    background: linear-gradient(135deg, #2d2620 0%, #1c1917 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Bottom nav in dark mode */
:root.dark-mode #bottom-nav {
  background: var(--card-bg);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) #bottom-nav {
    background: var(--card-bg);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Cards and white elements */
:root.dark-mode .potty-banner,
:root.dark-mode .timeline-event,
:root.dark-mode .timeline-card,
:root.dark-mode .pattern-card,
:root.dark-mode .stats-row-card,
:root.dark-mode .stats-hero,
:root.dark-mode .milestone-card,
:root.dark-mode .training-entry,
:root.dark-mode .home-skill-chip,
:root.dark-mode .home-stat,
:root.dark-mode .home-latest,
:root.dark-mode .planning-card,
:root.dark-mode .encouragement-card,
:root.dark-mode .date-nav,
:root.dark-mode .empty-hint {
  background: var(--card-bg);
  border-color: var(--border-color);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .potty-banner,
  :root:not(.light-mode) .timeline-event,
  :root:not(.light-mode) .timeline-card,
  :root:not(.light-mode) .pattern-card,
  :root:not(.light-mode) .stats-row-card,
  :root:not(.light-mode) .stats-hero,
  :root:not(.light-mode) .milestone-card,
  :root:not(.light-mode) .training-entry,
  :root:not(.light-mode) .home-skill-chip,
  :root:not(.light-mode) .home-stat,
  :root:not(.light-mode) .home-latest,
  :root:not(.light-mode) .planning-card,
  :root:not(.light-mode) .encouragement-card,
  :root:not(.light-mode) .date-nav,
  :root:not(.light-mode) .empty-hint {
    background: var(--card-bg);
    border-color: var(--border-color);
  }
}

/* Timeline special cards (accidents, milestones) */
:root.dark-mode .timeline-event.type-plassen-binnen .timeline-card,
:root.dark-mode .timeline-event.type-poepen-binnen .timeline-card {
  background: var(--red-bg);
}

:root.dark-mode .timeline-event.type-milestone .timeline-card {
  background: #3d3520;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .timeline-event.type-plassen-binnen .timeline-card,
  :root:not(.light-mode) .timeline-event.type-poepen-binnen .timeline-card {
    background: var(--red-bg);
  }
  :root:not(.light-mode) .timeline-event.type-milestone .timeline-card {
    background: #3d3520;
  }
}

/* Potty timer special states */
:root.dark-mode .potty-timer-soon {
  background: linear-gradient(135deg, var(--orange-light), var(--card-bg));
}

:root.dark-mode .potty-timer-overdue {
  background: linear-gradient(135deg, var(--red-bg), var(--card-bg));
}

:root.dark-mode .potty-timer-accident {
  background: linear-gradient(135deg, var(--red-bg), var(--card-bg));
}

:root.dark-mode .potty-timer-good {
  background: linear-gradient(135deg, var(--green-light), var(--card-bg));
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .potty-timer-soon {
    background: linear-gradient(135deg, var(--orange-light), var(--card-bg));
  }
  :root:not(.light-mode) .potty-timer-overdue {
    background: linear-gradient(135deg, var(--red-bg), var(--card-bg));
  }
  :root:not(.light-mode) .potty-timer-accident {
    background: linear-gradient(135deg, var(--red-bg), var(--card-bg));
  }
  :root:not(.light-mode) .potty-timer-good {
    background: linear-gradient(135deg, var(--green-light), var(--card-bg));
  }
}

/* Stats cards */
:root.dark-mode .stat-card,
:root.dark-mode .alltime-card {
  background: var(--card-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .stat-card,
  :root:not(.light-mode) .alltime-card {
    background: var(--card-bg);
  }
}

/* Week grid */
:root.dark-mode .week-grid {
  background: var(--card-bg);
}

:root.dark-mode .week-grid tbody td {
  background: var(--card-bg);
}

:root.dark-mode .week-grid tbody td.today {
  background: var(--gold-light);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .week-grid {
    background: var(--card-bg);
  }
  :root:not(.light-mode) .week-grid tbody td {
    background: var(--card-bg);
  }
  :root:not(.light-mode) .week-grid tbody td.today {
    background: var(--gold-light);
  }
}

/* Polaroid stack */
:root.dark-mode .polaroid {
  background: var(--card-bg);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .polaroid {
    background: var(--card-bg);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}

/* Training progress bar */
:root.dark-mode .training-progress-fill {
  background: var(--gold);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .training-progress-fill {
    background: var(--gold);
  }
}

/* Gallery grid images */
:root.dark-mode .gallery-item {
  background: var(--card-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .gallery-item {
    background: var(--card-bg);
  }
}

/* Loading skeleton */
:root.dark-mode .skeleton-bar,
:root.dark-mode .skeleton-card {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--card-bg) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .skeleton-bar,
  :root:not(.light-mode) .skeleton-card {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--card-bg) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
  }
}

/* Badges in dark mode */
:root.dark-mode .badge-buiten {
  background: var(--green-bg);
  color: var(--green);
}

:root.dark-mode .badge-binnen {
  background: var(--red-bg);
  color: var(--red);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .badge-buiten {
    background: var(--green-bg);
    color: var(--green);
  }
  :root:not(.light-mode) .badge-binnen {
    background: var(--red-bg);
    color: var(--red);
  }
}

/* Planning status colors */
:root.dark-mode .planning-status-sleep {
  background: #1f2d3d;
  color: #8b9fcd;
}

:root.dark-mode .planning-status-urgent {
  background: var(--red-bg);
  color: var(--red);
}

:root.dark-mode .planning-status-warn {
  background: var(--orange-light);
  color: var(--orange);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .planning-status-sleep {
    background: #1f2d3d;
    color: #8b9fcd;
  }
  :root:not(.light-mode) .planning-status-urgent {
    background: var(--red-bg);
    color: var(--red);
  }
  :root:not(.light-mode) .planning-status-warn {
    background: var(--orange-light);
    color: var(--orange);
  }
}

/* Sleep counter */
:root.dark-mode .sleep-counter {
  background: linear-gradient(135deg, #1f2d3d, #2d1f3d);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .sleep-counter {
    background: linear-gradient(135deg, #1f2d3d, #2d1f3d);
  }
}

/* Encouragement card */
:root.dark-mode .encouragement-card {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--card-bg) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .encouragement-card {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--card-bg) 100%);
  }
}

/* Pull indicator */
:root.dark-mode .pull-indicator {
  background: var(--gold-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .pull-indicator {
    background: var(--gold-dark);
  }
}

/* Training tag */
:root.dark-mode .training-tag {
  background: var(--purple-light);
  color: var(--purple);
}

:root.dark-mode .training-tag .tag-count {
  background: #8b5cf6;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .training-tag {
    background: var(--purple-light);
    color: var(--purple);
  }
  :root:not(.light-mode) .training-tag .tag-count {
    background: #8b5cf6;
  }
}

/* Refresh button */
:root.dark-mode .refresh-btn {
  background: rgba(255,255,255,0.1);
}

:root.dark-mode .refresh-btn:active {
  background: rgba(255,255,255,0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .refresh-btn {
    background: rgba(255,255,255,0.1);
  }
  :root:not(.light-mode) .refresh-btn:active {
    background: rgba(255,255,255,0.2);
  }
}

/* Lightbox */
:root.dark-mode .lightbox-overlay {
  background: rgba(0, 0, 0, 0.95);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .lightbox-overlay {
    background: rgba(0, 0, 0, 0.95);
  }
}

/* ========================================
   Dark Mode Toggle Button
   ======================================== */

.dark-mode-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.dark-mode-toggle:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.35);
}

/* ========================================
   Night Quick-Log Panel
   ======================================== */

.night-quicklog {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

.night-quicklog-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.night-quicklog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.night-quicklog-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px 8px;
  min-height: 80px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.night-quicklog-btn:active {
  transform: scale(0.95);
  background: var(--gold-light);
  border-color: var(--gold);
}

.night-quicklog-emoji {
  font-size: 28px;
  line-height: 1;
}

.night-quicklog-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

/* ========================================
   Toast Notifications
   ======================================== */

.toast-container {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--card-bg);
  color: var(--text);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.3s ease;
  border-left: 4px solid var(--green);
  pointer-events: auto;
}

.toast.toast-out {
  animation: toastOut 0.3s ease forwards;
}

.toast-emoji {
  font-size: 18px;
}

.toast-text {
  flex: 1;
}

.toast-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

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

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ========================================
   Unsynced Events Badge
   ======================================== */

.unsynced-badge {
  background: var(--orange);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.unsynced-badge:active {
  opacity: 0.8;
}

.unsynced-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Unsynced events modal */
.unsynced-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.unsynced-modal-content {
  background: var(--card-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.unsynced-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}

.unsynced-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.unsynced-event-emoji {
  font-size: 24px;
}

.unsynced-event-info {
  flex: 1;
}

.unsynced-event-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.unsynced-event-time {
  font-size: 12px;
  color: var(--text-muted);
}

.unsynced-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.unsynced-btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.unsynced-btn-copy {
  background: var(--gold);
  color: white;
}

.unsynced-btn-copy:active {
  opacity: 0.8;
}

.unsynced-btn-clear {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.unsynced-btn-clear:active {
  background: var(--red-light);
  color: var(--red);
}

.unsynced-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Overdue section dark mode */
@media (prefers-color-scheme: dark) {
  .planning-overdue-section {
    background: rgba(220, 53, 69, 0.1);
  }
  .planning-overdue-item {
    border-bottom-color: rgba(220, 53, 69, 0.15);
  }
}