@charset "UTF-8";

/* Custom Styling for Calorie Tracker - Minimalist Yazio / Duolingo Inspired */
:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --border-card: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent-emerald: #10b981;
  --accent-cyan: #0284c7;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
[role="button"],
.dashboard-tracking-btn,
.dashboard-date-display,
.today-meal-card,
.today-meal-card-content,
.tab-btn,
.mobile-nav-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Crisp Clean Minimalist Cards */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}

.glass-panel-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .glass-panel-hover:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 6px 10px -6px rgba(0, 0, 0, 0.03);
  }
}

/* Custom Fast-Fading Scrollbar System */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Smooth Floating Scroll Indicator (iOS native style) */
#app-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: 3px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background-color: rgba(71, 85, 105, 0.45);
  transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

html.dark #app-scroll-indicator,
.dark #app-scroll-indicator {
  background-color: rgba(255, 255, 255, 0.38);
}

/* Calorie Ring SVG */
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

/* Microphone voice wave animation */
.voice-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
}
.voice-wave-container.hidden {
  display: none !important;
}

.voice-bar {
  width: 4px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 4px;
  animation: soundWave 1.2s ease-in-out infinite alternate;
}

.voice-bar:nth-child(1) { animation-delay: 0.1s; height: 14px; }
.voice-bar:nth-child(2) { animation-delay: 0.3s; height: 24px; }
.voice-bar:nth-child(3) { animation-delay: 0.2s; height: 18px; }
.voice-bar:nth-child(4) { animation-delay: 0.4s; height: 26px; }
.voice-bar:nth-child(5) { animation-delay: 0.15s; height: 12px; }

@keyframes soundWave {
  0% { transform: scaleY(0.4); opacity: 0.6; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
}

.mic-recording-active {
  animation: pulseGlow 1.5s infinite;
}

/* ========================================================
   HIGH-PERFORMANCE HARDWARE-ACCELERATED SPINNERS
   ======================================================== */
@keyframes spinSmooth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-icon,
.animate-spin,
svg.animate-spin {
  animation: spinSmooth 0.75s linear infinite !important;
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
  transform-box: fill-box !important;
  will-change: transform;
  display: inline-block;
  vertical-align: middle;
}

.spinner-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Fallback CSS Arc Spinner with high-contrast dual-tone */
.spinner-circle {
  display: inline-block;
  border-radius: 9999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: currentColor;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  animation: spinSmooth 0.75s linear infinite !important;
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
  will-change: transform;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Tab indicator */
.tab-btn.active {
  background: #ffffff;
  color: #059669;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* Outlier Cards - Modern Minimalist */
.outlier-card,
.outlier-card-high,
.outlier-card-low {
  border-left-width: 1px;
}

/* Never show bottom nav or tracking bottom nav when unauthenticated / on login screen */
body:not(.is-authenticated) #app-bottom-nav,
body.not-authenticated #app-bottom-nav,
#app-bottom-nav.hidden,
body:not(.is-authenticated) #tracking-bottom-nav,
body.not-authenticated #tracking-bottom-nav,
#tracking-bottom-nav.hidden {
  display: none !important;
}

/* Mobile & iPad Floating Navigation Pills (iOS 17 Liquid Glass) */
#app-bottom-nav,
#tracking-bottom-nav {
  position: fixed;
  left: 50% !important;
  bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  background-color: rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  backdrop-filter: blur(16px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2);
  padding: 5px !important;
  height: 68px !important;
  box-sizing: border-box !important;
}

/* Main Navigation Pill: 0.58s luxurious inertia ease for scroll hide & show */
#app-bottom-nav {
  transform: translate3d(-50%, 0, 0) !important;
  transition: transform 0.58s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
  pointer-events: auto;
}

/* Sliding under screen edge on scroll down */
#app-bottom-nav.nav-pill-hidden {
  transform: translate3d(-50%, calc(100% + 4.5rem), 0) !important;
  pointer-events: none !important;
}

/* Tracking Bottom Nav is fixed and stays with tracking sheet */
#tracking-bottom-nav {
  transform: translate3d(-50%, 0, 0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease-out;
  will-change: transform, opacity;
  pointer-events: auto !important;
}

/* ==========================================
   iOS MODAL SHEET CARD ("Mahlzeit erfassen")
   ========================================== */
#view-tracking {
  touch-action: pan-x pan-y;
  overflow: hidden !important;
}

#view-tracking-card {
  height: calc(100dvh - env(safe-area-inset-top, 54px) - 10px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 54px) - 10px) !important;
  will-change: transform, opacity;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  box-shadow: 0 -12px 40px -10px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  #view-tracking-card {
    height: 88vh !important;
    max-height: 88vh !important;
  }
}

.dark #view-tracking-card {
  box-shadow: 0 -12px 40px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#tracking-sheet-top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: inherit;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

#tracking-sheet-handle-zone {
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

#tracking-sheet-handle-zone:active {
  cursor: grabbing;
}

#tracking-sheet-content {
  min-height: 0 !important;
  max-height: 100% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================
   FULLSCREEN VORLAGEN-BIBLIOTHEK MODAL
   ========================================== */
#templates-modal {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

#templates-modal .templates-modal-header {
  padding-top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 1.25rem)) !important;
}

@media (display-mode: standalone) and (max-width: 1023.98px),
       (display-mode: fullscreen) and (max-width: 1023.98px) {
  #templates-modal .templates-modal-header {
    padding-top: max(4rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
  }
}

html.is-standalone #templates-modal .templates-modal-header {
  padding-top: max(4rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
}

#templates-modal-list {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem)) !important;
}

body.templates-modal-active:has(#templates-modal:not(.hidden)) #tracking-sheet-content {
  overflow: hidden !important;
  touch-action: none !important;
  pointer-events: none !important;
}

body.templates-modal-active:has(#templates-modal:not(.hidden)) {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Fluid, buttery-smooth iOS sheet transitions */
.sheet-transition-spring {
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.36s ease-out !important;
  will-change: transform, opacity;
}

.sheet-backdrop-transition {
  transition: opacity 0.32s ease-out !important;
}

/* Background scroll-lock and touch-freeze when any modal/sheet is open */
html.modal-scroll-locked,
body.modal-scroll-locked,
html.tracking-sheet-open,
body.tracking-sheet-open,
html.templates-modal-active,
body.templates-modal-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}


body.modal-scroll-locked #app-main-layout,
body.tracking-sheet-open #app-main-layout,
body.templates-modal-active #app-main-layout {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.modal-scroll-locked #view-tracking,
body.modal-scroll-locked #legal-compliance-modal,
body.modal-scroll-locked #edit-meal-modal,
body.modal-scroll-locked #templates-modal,
body.modal-scroll-locked #barcode-confirm-modal,
body.modal-scroll-locked #barcode-not-found-modal,
body.modal-scroll-locked #webcam-modal,
body.tracking-sheet-open #view-tracking {
  pointer-events: auto !important;
}

#legal-compliance-modal {
  touch-action: none;
}
#legal-compliance-scroll-body,
#legal-compliance-modal .overflow-y-auto {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.edit-meal-scroll-body {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#tracking-sheet-content {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(14rem, calc(env(safe-area-inset-bottom, 34px) + 11rem)) !important;
}

#tracking-sheet-backdrop {
  background-color: transparent !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  touch-action: none !important;
}

/* Ensure upper tracking modes tabs are strictly hidden on mobile & iPad (< 1024px) */
@media (max-width: 1023.98px) {
  #tracking-modes-container {
    display: none !important;
  }
}

/* Solid, opaque red cancel button for tracking view */
.tracking-cancel-btn-solid {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tracking-cancel-btn-solid:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
  }
}
.tracking-cancel-btn-solid:active {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  transform: scale(0.95);
}
.tracking-cancel-btn-solid i,
.tracking-cancel-btn-solid svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Animated Sliding Pill Focus Indicator - Perfectly Symmetrical & Vertically Centered */
.nav-pill-indicator,
.tracking-pill-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-color: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 8px 0 rgba(16, 185, 129, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.36s cubic-bezier(0.34, 1.25, 0.64, 1),
              width 0.36s cubic-bezier(0.34, 1.25, 0.64, 1),
              opacity 0.2s ease;
  will-change: transform, width;
}

.mobile-nav-item,
.tracking-pill-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  gap: 3px !important;
  color: #64748b;
  transition: color 0.22s ease, transform 0.15s ease;
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
  font-weight: 600;
  border-radius: 9999px;
  padding: 3px 6px;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav-item:hover,
  .tracking-pill-item:hover {
    color: #0f172a;
  }
}

.mobile-nav-item:active,
.tracking-pill-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active,
.tracking-pill-item.active {
  color: #059669 !important;
  font-weight: 700 !important;
}

.mobile-nav-item.active i,
.mobile-nav-item.active svg,
.tracking-pill-item.active i,
.tracking-pill-item.active svg {
  color: #059669 !important;
  stroke: #059669 !important;
  transform: scale(1.08);
  transition: transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* View Transition on Swipe Navigation */
@keyframes viewSlideFadeIn {
  0% {
    opacity: 0.35;
    transform: translate3d(var(--view-slide-from, 0px), 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.view-slide-enter {
  animation: viewSlideFadeIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  will-change: transform, opacity;
}

/* Shimmer Loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.02) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

/* Hide scrollbar for clean UI in horizontal lists */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   DARK MODE STYLING (Yazio-Inspired: High Contrast, Crisp Typography & Emerald Accents)
   ========================================================================== */
html.dark {
  --bg-primary: #0c1017;
  --bg-secondary: #121824;
  --bg-card: #161f2e;
  --border-card: #25344d;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  color-scheme: dark;
}

html.dark body {
  background-color: #0c1017 !important;
  color: #f1f5f9 !important;
}

@media (max-width: 767px) {
  header.mobile-hidden,
  .mobile-hidden {
    display: none !important;
  }
}

/* ==========================================
   HEADER & MAIN DESKTOP NAVIGATION
   ========================================== */
html.dark header {
  background-color: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(30, 41, 59, 0.7) !important;
}

html.dark header nav {
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html.dark header nav .tab-btn {
  color: #94a3b8 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border-radius: 0.75rem !important;
  transition: all 0.18s ease-in-out !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark header nav .tab-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  html.dark header nav .tab-btn:hover i,
  html.dark header nav .tab-btn:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* High-Contrast Yazio Emerald Active Tab */
html.dark header nav .tab-btn.active,
html.dark header nav .tab-btn.active.bg-white,
html.dark header nav .tab-btn.active.text-emerald-700 {
  background-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}

html.dark header nav .tab-btn.active i,
html.dark header nav .tab-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Header Settings Button */
html.dark header button[title="Einstellungen"] {
  background-color: rgba(22, 32, 48, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(38, 53, 77, 0.6) !important;
  color: #cbd5e1 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark header button[title="Einstellungen"]:hover {
    background-color: rgba(34, 48, 72, 0.85) !important;
    border-color: rgba(59, 78, 111, 0.8) !important;
    color: #ffffff !important;
  }
}

/* Mobile Floating Navigation Pills (iOS 17 Floating Pill Dark Mode) */
html.dark #app-bottom-nav,
html.dark #tracking-bottom-nav {
  background-color: rgba(15, 23, 42, 0.20) !important;
  -webkit-backdrop-filter: blur(16px) saturate(200%) !important;
  backdrop-filter: blur(16px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark .nav-pill-indicator,
html.dark .tracking-pill-indicator {
  background-color: rgba(16, 185, 129, 0.26);
  border: 1px solid rgba(52, 211, 153, 0.40);
  box-shadow: 0 0 10px 0 rgba(16, 185, 129, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

html.dark .mobile-nav-item,
html.dark .tracking-pill-item {
  color: #94a3b8 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark .mobile-nav-item:hover,
  html.dark .tracking-pill-item:hover {
    color: #f8fafc !important;
  }
}

html.dark .mobile-nav-item.active,
html.dark .tracking-pill-item.active {
  color: #34d399 !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.dark .mobile-nav-item.active i,
html.dark .mobile-nav-item.active svg,
html.dark .tracking-pill-item.active i,
html.dark .tracking-pill-item.active svg {
  color: #34d399 !important;
  stroke: #34d399 !important;
  transform: scale(1.08);
}

/* ==========================================
   SUBTABS & SEGMENTED CONTROLS
   ========================================== */
/* 1. Tracking Mode Tabs */
html.dark #tracking-modes-container {
  background-color: #121824 !important;
  border-color: #25344d !important;
}
html.dark button[id^="track-tab-"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button[id^="track-tab-"]:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark button[id^="track-tab-"].bg-white,
html.dark button[id^="track-tab-"].active {
  background-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}
html.dark button[id^="track-tab-"].bg-white i,
html.dark button[id^="track-tab-"].bg-white svg,
html.dark button[id^="track-tab-"].active i,
html.dark button[id^="track-tab-"].active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 2. Statistics Time Horizon Selector & Advanced Stats Selector */
html.dark #stat-range-container,
html.dark #adv-stat-range-container {
  background-color: #121824 !important;
  border-color: #25344d !important;
}
html.dark button[id^="stat-range-"],
html.dark button[id^="adv-range-"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button[id^="stat-range-"]:hover,
  html.dark button[id^="adv-range-"]:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark button[id^="stat-range-"].active,
html.dark button[id^="stat-range-"].bg-white,
html.dark button[id^="adv-range-"].active,
html.dark button[id^="adv-range-"].bg-white {
  background-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

/* 3. Settings Subtabs Navigation */
html.dark #settings-subtabs-container {
  background-color: #121824 !important;
  border: 1px solid #25344d !important;
}
html.dark .settings-subtab-btn {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark .settings-subtab-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark .settings-subtab-btn.bg-white,
html.dark .settings-subtab-btn.active {
  background-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
}
html.dark .settings-subtab-btn.bg-white i,
html.dark .settings-subtab-btn.bg-white svg,
html.dark .settings-subtab-btn.active i,
html.dark .settings-subtab-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ==========================================
   DATE SELECTOR BAR
   ========================================== */
html.dark #dashboard-date-bar {
  background-color: #161f2e !important;
  border-color: #25344d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
html.dark #dashboard-date-label {
  color: #ffffff !important;
}
html.dark #dashboard-date-sub {
  color: #94a3b8 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #dashboard-date-bar button:hover {
    background-color: #222f46 !important;
    color: #ffffff !important;
  }
}
html.dark #dashboard-date-bar button.bg-slate-100 {
  background-color: #222f46 !important;
  border-color: #2e4060 !important;
  color: #ffffff !important;
}
#dashboard-date-picker {
  color-scheme: light;
}
html.dark #dashboard-date-picker-wrap {
  background-color: #111723 !important;
  border-color: #2b3a55 !important;
}
html.dark #dashboard-date-picker {
  color: #ffffff !important;
  color-scheme: dark;
}

/* ==========================================
   GLASS PANELS, CARDS & ELEVATION
   ========================================== */
html.dark .glass-panel {
  background: #161f2e !important;
  border-color: #25344d !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark .glass-panel-hover:hover {
    background: #1b2638 !important;
    border-color: #354768 !important;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ==========================================
   TYPOGRAPHY & TEXT CONTRASTS
   ========================================== */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #ffffff !important;
}
html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

/* Background Defaults */
html.dark .bg-white {
  background-color: #161f2e !important;
}
html.dark .bg-slate-50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 {
  background-color: #121926 !important;
}
html.dark .bg-slate-100,
html.dark .bg-slate-100\/90 {
  background-color: #1c263b !important;
}
html.dark .bg-slate-200,
html.dark .bg-slate-200\/80 {
  background-color: #25344d !important;
  color: #f1f5f9 !important;
}

/* Hover overrides for slate backgrounds so light themes never bleed into dark mode */
@media (hover: hover) and (pointer: fine) {
  html.dark .hover\:bg-slate-50\/70:hover,
  html.dark .hover\:bg-slate-50:hover {
    background-color: #1b2638 !important;
  }
  html.dark .hover\:bg-slate-100:hover {
    background-color: #222f46 !important;
  }
  html.dark .hover\:bg-slate-200:hover {
    background-color: #273752 !important;
  }
}

/* Borders */
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-100 {
  border-color: #25344d !important;
}

/* ==========================================
   FORM CONTROLS (INPUTS, SELECTS, TEXTAREAS)
   ========================================== */
/* Unified Minimalist Select Dropdowns with SVG Chevron */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem 1rem !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}

input[type="date"],
input[type="time"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  min-height: 1.2em !important;
  text-align: left !important;
}

html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background-color: #111723 !important;
  border-color: #2b3a55 !important;
  color: #ffffff !important;
}
html.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  outline: none !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}
html.dark select option {
  background-color: #111723 !important;
  color: #ffffff !important;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
  opacity: 0.75;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ==========================================
   YAZIO LUMINOUS MACRO BARS & HERO OVERVIEW
   ========================================== */
html.dark #hero-remaining-calories {
  color: #ffffff !important;
}
html.dark #hero-remaining-label {
  color: #34d399 !important;
}
html.dark #hero-consumed-calories,
html.dark #hero-target-calories {
  color: #ffffff !important;
}

/* Macro Bar Empty Track */
html.dark .w-full.h-2\.5.bg-slate-200\/80,
html.dark .w-full.bg-slate-200\/80,
html.dark div:has(> #macro-protein-bar),
html.dark div:has(> #macro-carbs-bar),
html.dark div:has(> #macro-fat-bar) {
  background-color: #233147 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Circular ring */
html.dark .circle-bg {
  stroke: #222f46 !important;
}

/* ==========================================
   TINTED FEATURE BOXES & BADGES
   ========================================== */
/* Emerald */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/80 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900 {
  color: #34d399 !important;
}
html.dark .border-emerald-100,
html.dark .border-emerald-200 {
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html.dark .bg-emerald-50 i,
html.dark .bg-emerald-50 svg {
  color: #34d399 !important;
  stroke: #34d399 !important;
}

/* Sky */
html.dark .bg-sky-50,
html.dark .bg-sky-50\/60 {
  background-color: rgba(14, 165, 233, 0.18) !important;
}
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800 {
  color: #38bdf8 !important;
}
html.dark .border-sky-100,
html.dark .border-sky-200 {
  border-color: rgba(14, 165, 233, 0.35) !important;
}
html.dark .bg-sky-50 i,
html.dark .bg-sky-50 svg {
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
}

/* Amber */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/60 {
  background-color: rgba(245, 158, 11, 0.18) !important;
}
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-amber-950 {
  color: #fbbf24 !important;
}
html.dark .border-amber-100,
html.dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark .bg-amber-50 i,
html.dark .bg-amber-50 svg {
  color: #fbbf24 !important;
  stroke: #fbbf24 !important;
}

/* Rose */
html.dark .bg-rose-50,
html.dark .bg-rose-50\/50,
html.dark .bg-rose-50\/60 {
  background-color: rgba(244, 63, 94, 0.18) !important;
}
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800 {
  color: #fb7185 !important;
}
html.dark .border-rose-100,
html.dark .border-rose-200 {
  border-color: rgba(244, 63, 94, 0.35) !important;
}
html.dark .bg-rose-50 i,
html.dark .bg-rose-50 svg {
  color: #fb7185 !important;
  stroke: #fb7185 !important;
}

/* Purple */
html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.18) !important;
}
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800 {
  color: #c084fc !important;
}
html.dark .border-purple-100,
html.dark .border-purple-200 {
  border-color: rgba(168, 85, 247, 0.35) !important;
}
html.dark .bg-purple-50 i,
html.dark .bg-purple-50 svg {
  color: #c084fc !important;
  stroke: #c084fc !important;
}

/* Indigo */
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.16) !important;
}
html.dark .text-indigo-700 {
  color: #818cf8 !important;
}
html.dark .border-indigo-200 {
  border-color: rgba(99, 102, 241, 0.35) !important;
}

/* Teal */
html.dark .text-teal-700 {
  color: #2dd4bf !important;
}

/* ==========================================
   DIARY MACRO STRIP & MEAL CARDS
   ========================================== */
html.dark .grid.grid-cols-4.bg-slate-50 {
  background-color: #121824 !important;
  border-color: #25344d !important;
}
html.dark .grid.grid-cols-4.bg-slate-50 > div {
  background-color: #182234 !important;
  border: 1px solid #26354d !important;
  border-radius: 0.75rem !important;
  padding: 0.35rem 0.25rem !important;
}
html.dark .grid.grid-cols-4.bg-slate-50 > div .text-slate-900 {
  color: #ffffff !important;
}

/* ==========================================
   BUTTONS (PRIMARY & SECONDARY)
   ========================================== */
/* Primary Buttons */
html.dark button.bg-emerald-500,
html.dark button.bg-emerald-600 {
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button.bg-emerald-500:hover,
  html.dark button.bg-emerald-600:hover {
    background: #059669 !important;
  }
}

/* Secondary slate buttons (excluding active tabs) */
html.dark button.bg-slate-100:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]) {
  background-color: #1e2a3e !important;
  border-color: #2c3d59 !important;
  color: #ffffff !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button.bg-slate-100:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]):hover {
    background-color: #273752 !important;
    border-color: #3b4e6f !important;
  }
}

/* White buttons (excluding active tabs) */
html.dark button.bg-white:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]) {
  background-color: #1a2436 !important;
  border-color: #2c3d59 !important;
  color: #ffffff !important;
}

/* Modals */
html.dark .bg-slate-900\/40 {
  background-color: rgba(0, 0, 0, 0.78) !important;
}

/* Outlier Cards */
html.dark .outlier-card,
html.dark .outlier-card-high,
html.dark .outlier-card-low {
  background-color: #121824 !important;
  border-color: #25344d !important;
  border-left-width: 1px !important;
}

/* Toast Notifications: Ultra-smooth, buttery entry & exit */
#toast {
  will-change: transform, opacity;
  transform: translate3d(0, -14px, 0) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#toast.toast-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease-out !important;
}

html.dark #toast {
  background-color: #1a2436 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================
   AI OCR SCANNER BANNER (MANUELL ERFASSEN)
   ========================================== */
html.dark #ocr-scanner-banner {
  background-color: #161f2e !important;
  background-image: none !important;
  border-color: #25344d !important;
}
html.dark #ocr-scanner-banner .w-10.h-10 {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}
html.dark #ocr-scanner-banner .w-10.h-10 i,
html.dark #ocr-scanner-banner .w-10.h-10 svg {
  color: #34d399 !important;
  stroke: #34d399 !important;
}
html.dark #ocr-scanner-banner h4 {
  color: #ffffff !important;
}
html.dark #ocr-scanner-banner h4 span {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}
html.dark #ocr-scanner-banner p {
  color: #94a3b8 !important;
}

/* ==========================================
   KALORIEN- & ABNEHMRECHNER (BMR / TDEE)
   ========================================== */
html.dark #calculator-card-container {
  background-color: #161f2e !important;
  background-image: none !important;
  border-color: #25344d !important;
}
html.dark #calculator-card-container h4 {
  color: #ffffff !important;
}
html.dark #calculator-card-container span.bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}
html.dark #calculator-card-container p {
  color: #94a3b8 !important;
}
html.dark #calculator-card-container label {
  color: #cbd5e1 !important;
}

/* Calculator Result Preview Card */
html.dark #calculator-result-card {
  background-color: #111723 !important;
  border-color: #25344d !important;
}
html.dark #calculator-result-card .border-b {
  border-color: #25344d !important;
}
html.dark #calc-res-diff-badge {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}
html.dark #calc-res-p,
html.dark #calc-res-c,
html.dark #calc-res-f {
  color: #ffffff !important;
}

/* Macro Preview Strip */
html.dark #macro-goals-preview-strip {
  background-color: #111723 !important;
  border-color: #25344d !important;
  color: #94a3b8 !important;
}
html.dark #macro-goals-calc-summary {
  color: #ffffff !important;
}

/* ==========================================
   GEFAHRENZONE (HIGH CONTRAST & READABLE)
   ========================================== */
html.dark #settings-danger-zone-card {
  background-color: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
}
html.dark #settings-danger-zone-card .text-rose-800 {
  color: #fb7185 !important;
}
html.dark #settings-danger-zone-card .text-rose-800 i,
html.dark #settings-danger-zone-card .text-rose-800 svg {
  color: #f43f5e !important;
  stroke: #f43f5e !important;
}
/* Explanatory text in clear, high-contrast light slate (NOT red on red!) */
html.dark #settings-danger-zone-card p,
html.dark #settings-danger-zone-card .text-rose-900\/80 {
  color: #cbd5e1 !important;
}
html.dark #settings-danger-zone-card button {
  background-color: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #fb7185 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-danger-zone-card button:hover {
    background-color: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
  }
}
html.dark #settings-danger-zone-card button i,
html.dark #settings-danger-zone-card button svg {
  color: #fb7185 !important;
  stroke: #fb7185 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-danger-zone-card button:hover i,
  html.dark #settings-danger-zone-card button:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* Demo Data Toggle Button in Dark Mode */
html.dark #settings-demo-toggle-btn.bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-demo-toggle-btn.bg-amber-50:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
  }
}
html.dark #settings-demo-toggle-btn.bg-amber-50 i,
html.dark #settings-demo-toggle-btn.bg-amber-50 svg {
  color: #fbbf24 !important;
  stroke: #fbbf24 !important;
}
html.dark #settings-demo-active-badge {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}
html.dark #demo-status-explanation {
  color: #94a3b8 !important;
}

/* Catch-all for any Tailwind light gradients */
html.dark [class*="bg-gradient-to"][class*="from-emerald-50"],
html.dark [class*="bg-gradient-to"][class*="from-teal-50"] {
  background-image: none !important;
  background-color: #161f2e !important;
}



/* ==========================================
   KI-ERNÄHRUNGSBERATER (DARK MODE ENHANCEMENTS)
   ========================================== */
html.dark #ai-advisor-card {
  background-color: #161f2e !important;
  border-color: #25344d !important;
}

/* Header hover */
@media (hover: hover) and (pointer: fine) {
  html.dark #ai-advisor-card > div:first-child:hover,
  html.dark div[onclick="toggleAdvisorCard()"]:hover {
    background-color: #1b2638 !important;
  }
}

/* Score pill in header */
html.dark #advisor-score-preview-badge {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

/* Advisor Summary & Score Banner */
html.dark #advisor-content-state > div:first-child {
  background-color: #111723 !important;
  border-color: #25344d !important;
}
html.dark #advisor-content-state > div:first-child .bg-white {
  background-color: #162030 !important;
  border-color: #25344d !important;
}
html.dark #advisor-score-val {
  color: #34d399 !important;
}
html.dark #advisor-score-label {
  color: #ffffff !important;
}
html.dark #advisor-summary-text {
  color: #cbd5e1 !important;
}

/* Strengths Column ("Was läuft schon super?") - Dark sleek container instead of light wash */
html.dark #advisor-collapsible-body .bg-emerald-50\/50 {
  background-color: #111d26 !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
}
html.dark #advisor-collapsible-body .bg-emerald-50\/50 h4 {
  color: #34d399 !important;
}
html.dark #advisor-collapsible-body .bg-emerald-50\/50 .border-emerald-100 {
  border-color: rgba(16, 185, 129, 0.2) !important;
}
html.dark #advisor-strengths-list > div {
  background-color: #162232 !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}
html.dark #advisor-strengths-list > div h5 {
  color: #ffffff !important;
}
html.dark #advisor-strengths-list > div p {
  color: #cbd5e1 !important;
}
html.dark #advisor-strengths-list .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
}

/* Improvements Column ("Optimierungspotenziale & Tipps") - Dark sleek container instead of light wash */
html.dark #advisor-collapsible-body .bg-amber-50\/50 {
  background-color: #1c1820 !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
html.dark #advisor-collapsible-body .bg-amber-50\/50 h4 {
  color: #fbbf24 !important;
}
html.dark #advisor-collapsible-body .bg-amber-50\/50 .border-amber-100 {
  border-color: rgba(245, 158, 11, 0.2) !important;
}
html.dark #advisor-improvements-list > div {
  background-color: #1f1b26 !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}
html.dark #advisor-improvements-list > div h5 {
  color: #ffffff !important;
}
html.dark #advisor-improvements-list > div p {
  color: #cbd5e1 !important;
}
/* Praxistipp box inside improvements */
html.dark #advisor-improvements-list .bg-amber-50\/80 {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}
html.dark #advisor-improvements-list .bg-amber-50\/80 strong {
  color: #fbbf24 !important;
}

/* Outdated Alert Banner in Dark Mode */
html.dark #advisor-outdated-alert {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}
html.dark #advisor-outdated-alert span,
html.dark #advisor-outdated-alert #advisor-outdated-text {
  color: #fef3c7 !important;
}
html.dark #advisor-outdated-alert strong {
  color: #fbbf24 !important;
}
html.dark #advisor-outdated-alert button {
  color: #fbbf24 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #advisor-outdated-alert button:hover {
    color: #fef08a !important;
  }
}

/* Macro Verdict Grid */
html.dark #advisor-macro-verdict-grid > div {
  background-color: #111723 !important;
  border-color: #25344d !important;
}
html.dark #advisor-macro-verdict-grid > div p {
  color: #e2e8f0 !important;
}

/* Recommended Foods Box */
html.dark #advisor-foods-box {
  background-color: #111723 !important;
  border-color: #25344d !important;
}
html.dark #advisor-recommended-foods span {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

/* ==========================================
   ERWEITERTE STATISTIKEN & FIBER (DARK MODE)
   ========================================== */
@media (hover: hover) and (pointer: fine) {
  html.dark #advanced-stats-card > button:first-child:hover,
  html.dark button[onclick="toggleAdvancedStats()"]:hover {
    background-color: #1b2638 !important;
  }
}
html.dark #advanced-stats-content .border-b {
  border-color: #25344d !important;
}
html.dark #advanced-stats-content .bg-slate-50\/80 {
  background-color: #121926 !important;
  border-color: #25344d !important;
}
/* Macro Donut rows */
html.dark #advanced-stats-content .bg-white.p-2\.5 {
  background-color: #162030 !important;
  border-color: #25344d !important;
}
html.dark #donut-stat-protein,
html.dark #donut-stat-carbs,
html.dark #donut-stat-fat {
  color: #ffffff !important;
}

/* Fiber Stats Card */
html.dark #fiber-stat-avg {
  color: #2dd4bf !important;
}
html.dark #fiber-stat-status.bg-teal-50 {
  background-color: rgba(45, 212, 191, 0.18) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #2dd4bf !important;
}
html.dark #fiber-stat-pct,
html.dark #fiber-stat-days-goal {
  color: #cbd5e1 !important;
}
html.dark #fiber-stat-meta {
  color: #94a3b8 !important;
}
html.dark #advanced-stats-content .bg-slate-200\/80 {
  background-color: #222f46 !important;
}

/* Outlier Card internal main meal box */
html.dark #outliers-container .bg-slate-50 {
  background-color: #111723 !important;
  border-color: #25344d !important;
}
html.dark #outliers-container .bg-slate-50 span.font-semibold {
  color: #e2e8f0 !important;
}

/* ==========================================
   EDIT MEAL FULLSCREEN VIEW (VOLLBILDMODUS & NO HORIZONTAL SCROLL)
   ========================================== */
#edit-meal-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #f8fafc !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  touch-action: pan-y !important;
}

#edit-meal-modal.hidden {
  display: none !important;
}

html.dark #edit-meal-modal {
  background-color: #0b0f19 !important;
}

/* Fullscreen Header Safe-Area Insets (Pushes below iOS Status Bar & Blur Zone) */
#edit-meal-modal header,
#edit-meal-fullscreen-header {
  padding-top: max(1.25rem, calc(env(safe-area-inset-top, 0px) + 0.75rem)) !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.dark #edit-meal-modal header,
html.dark #edit-meal-fullscreen-header {
  background-color: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

@media (max-width: 767.98px) {
  #edit-meal-modal header,
  #edit-meal-fullscreen-header {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
  }
}

/* Standalone Web App (PWA on iOS Home Screen): pushes completely clear of native status-bar blur */
@media (display-mode: standalone) and (max-width: 767.98px),
       (display-mode: fullscreen) and (max-width: 767.98px) {
  #edit-meal-modal header,
  #edit-meal-fullscreen-header {
    padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
  }
}

html.is-standalone #edit-meal-modal header,
html.is-standalone #edit-meal-fullscreen-header {
  padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
}

#edit-meal-modal .edit-meal-scroll-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

#edit-meal-modal * {
  box-sizing: border-box !important;
}

#edit-meal-modal input,
#edit-meal-modal select,
#edit-meal-modal textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#edit-meal-modal input.edit-item-weight {
  width: 56px !important;
  max-width: 56px !important;
  min-width: 48px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

#edit-meal-modal input[type="date"],
#edit-meal-modal input[type="time"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  line-height: normal !important;
  padding: 0.625rem 0.75rem !important;
  border-radius: 0.75rem !important;
  text-align: left !important;
}

#edit-meal-modal input[type="date"]::-webkit-date-and-time-value,
#edit-meal-modal input[type="time"]::-webkit-date-and-time-value {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  min-height: 1.2em !important;
  text-align: left !important;
}

html.dark #edit-meal-modal input[type="date"],
html.dark #edit-meal-modal input[type="time"] {
  color-scheme: dark !important;
}

html.dark #edit-meal-modal .bg-white {
  background-color: #111827 !important;
}

html.dark #edit-meal-modal .border-slate-200 {
  border-color: #1f293d !important;
}

html.dark #edit-meal-items-container .item-row {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark #edit-meal-items-container input {
  background-color: #0a0f1d !important;
  border-color: #27354f !important;
  color: #ffffff !important;
}

html.dark #edit-meal-items-container input:focus {
  border-color: #10b981 !important;
}

html.dark #edit-meal-ai-feedback-banner {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark button[onclick^="openEditMealModal"]:hover {
    background-color: #1b2638 !important;
    color: #34d399 !important;
  }
}

/* ==========================================
   WEBCAM MODAL (DARK MODE)
   ========================================== */
html.dark #webcam-modal {
  background-color: rgba(0, 0, 0, 0.78) !important;
}
html.dark #webcam-modal .glass-panel {
  background: #161f2e !important;
  border-color: #25344d !important;
}

/* ==========================================
   MINIMALIST INPUT CLEANUP (HIDE DEFAULT SPINNERS)
   ========================================== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* ===================================================
   iOS & MOBILE NOTCH / SAFE AREA SUPPORT (env(safe-area-inset-*))
   Fixes top content cut off by Dynamic Island / Status Bar
   and bottom content cut off by the Home Indicator Bar
   =================================================== */

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 1023.98px) {
  /* 1. Main Content Layout: Header is hidden on mobile & iPad, so main must push down below Notch / Dynamic Island and iOS status bar blur */
  main,
  #app-main-content {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.4rem)) !important;
    padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.75rem)) !important;
    padding-left: max(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.5rem)) !important;
    padding-right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem)) !important;
  }

  /* 2. Floating Pill Bottom Navigation Bar (iOS 17): Lift above the iOS Home Indicator */
  #app-bottom-nav,
  #tracking-bottom-nav {
    bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem)) !important;
  }

  /* 3. Modals Overlay: Align items to start so flexbox never clips the top header into the notch */
  #settings-modal,
  #webcam-modal {
    padding-top: max(1.25rem, calc(env(safe-area-inset-top, 0px) + 1rem)) !important;
    padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
    padding-left: max(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.5rem)) !important;
    padding-right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem)) !important;
    align-items: flex-start !important;
  }

  /* 4. Modal Cards: Constrain max-height so modal always fits cleanly within safe viewport */
  #settings-modal > div,
  #webcam-modal > div {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2.5rem) !important;
    margin-top: 0 !important;
    margin-bottom: auto !important;
    width: 100% !important;
  }

  /* 5. Toast Notifications: Keep below the Dynamic Island / Notch */
  #toast {
    top: max(1.5rem, calc(env(safe-area-inset-top, 0px) + 1.2rem)) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  /* 6. Auth / Login Screen: Safe padding at top and bottom */
  #view-auth {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.4rem)) !important;
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  }
}

/* Standalone Web App (PWA on iOS Home Screen): iOS applies a native status-bar blur across the top ~50-65px */
@media (display-mode: standalone) and (max-width: 1023.98px),
       (display-mode: fullscreen) and (max-width: 1023.98px) {
  main,
  #app-main-content {
    padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
  }
  #view-auth {
    padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
  }
  #settings-modal,
  #webcam-modal {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
  }
}

html.is-standalone main,
html.is-standalone #app-main-content {
  padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
}
html.is-standalone #view-auth {
  padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
}
html.is-standalone #settings-modal,
html.is-standalone #webcam-modal {
  padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
}

/* ==========================================
   SIMULATED IPHONE SAFE AREA & NOTCH INSETS
   Enables 100% pixel-faithful iPhone testing on desktop
   ========================================== */
html.mock-safe-area {
  --safe-area-top: 54px !important;
  --safe-area-bottom: 34px !important;
}
html.mock-safe-area main,
html.mock-safe-area #app-main-content {
  padding-top: calc(54px + 1.4rem) !important;
  padding-bottom: calc(34px + 4.75rem) !important;
}
html.mock-safe-area.is-standalone main,
html.mock-safe-area.is-standalone #app-main-content {
  padding-top: calc(54px + 1.75rem) !important;
}
html.mock-safe-area #app-bottom-nav,
html.mock-safe-area #tracking-bottom-nav {
  bottom: calc(34px + 0.25rem) !important;
}
html.mock-safe-area #edit-meal-modal header,
html.mock-safe-area #edit-meal-fullscreen-header {
  padding-top: calc(54px + 1.5rem) !important;
}
html.mock-safe-area #toast {
  top: calc(54px + 1.2rem) !important;
}
html.mock-safe-area #view-auth {
  padding-top: calc(54px + 1.85rem) !important;
}
html.mock-safe-area #settings-modal,
html.mock-safe-area #webcam-modal {
  padding-top: calc(54px + 1.35rem) !important;
}
html.mock-safe-area #barcode-confirm-modal {
  padding-bottom: calc(34px + 1rem) !important;
}
html.mock-safe-area #barcode-not-found-modal {
  padding-bottom: calc(34px + 1rem) !important;
}
html.mock-safe-area #templates-modal .templates-modal-header {
  padding-top: calc(54px + 1.5rem) !important;
}
html.mock-safe-area #templates-modal-list {
  padding-bottom: calc(34px + 1.5rem) !important;
}

/* ==========================================
   TODAY MEAL ACCORDION CARDS (NO SHIFTING)
   ========================================== */
.today-meal-card {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0 !important;
}

.today-meal-header {
  box-sizing: border-box;
}

.today-meal-header h4 {
  margin: 0 !important;
  padding: 0 !important;
}

.today-meal-card:hover,
.today-meal-card:active,
.today-meal-card:focus {
  box-shadow: none;
}

html.dark .today-meal-card:hover,
html.dark .today-meal-card:active,
html.dark .today-meal-card:focus {
  box-shadow: none;
}

/* ==========================================
   BARCODE SCANNER ANIMATIONS & VIEWPORT
   ========================================== */
@keyframes scanLaser {
  0% {
    top: 10%;
    opacity: 0.4;
  }
  50% {
    top: 86%;
    opacity: 1;
  }
  100% {
    top: 10%;
    opacity: 0.4;
  }
}

.animate-scan-laser {
  animation: scanLaser 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#barcode-scanner-viewport video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 1.25rem !important;
}

/* ==========================================
   EDIT MEAL: SEAMLESS WEIGHT & NUTRITION INPUTS
   ========================================== */
#edit-meal-total-weight,
#edit-meal-calories,
#edit-meal-protein,
#edit-meal-carbs,
#edit-meal-fat,
#edit-meal-sat-fat,
#edit-meal-unsat-fat,
#edit-meal-fiber {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: right !important;
  display: inline-block !important;
}

#edit-meal-total-weight {
  width: 3.5ch !important;
  max-width: 85px !important;
}

#edit-meal-calories {
  width: 4.2ch !important;
  max-width: 105px !important;
}

#edit-meal-protein,
#edit-meal-carbs,
#edit-meal-fat,
#edit-meal-sat-fat,
#edit-meal-unsat-fat,
#edit-meal-fiber {
  width: 3.2ch !important;
  max-width: 75px !important;
}

#edit-meal-total-weight:focus,
#edit-meal-calories:focus,
#edit-meal-protein:focus,
#edit-meal-carbs:focus,
#edit-meal-fat:focus,
#edit-meal-sat-fat:focus,
#edit-meal-unsat-fat:focus,
#edit-meal-fiber:focus {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.touch-manipulation {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

/* 1. Date display scoped hover & active to avoid sticky mobile hover */
@media (hover: hover) and (pointer: fine) {
  .dashboard-date-display:hover {
    background-color: rgba(241, 245, 249, 0.7);
  }
  html.dark .dashboard-date-display:hover {
    background-color: rgba(30, 41, 59, 0.5);
  }
}
.dashboard-date-display:active {
  background-color: rgba(226, 232, 240, 0.6);
}
html.dark .dashboard-date-display:active {
  background-color: rgba(51, 65, 85, 0.6);
}

/* 1b. Mobile / Touch: Prevent sticky hover & active highlights on buttons and cards */
@media (hover: none), (pointer: coarse) {
  button,
  [role="button"],
  .dashboard-tracking-btn,
  .dashboard-date-display,
  .today-meal-card,
  .today-meal-card-content,
  .tab-btn,
  .mobile-nav-item,
  a {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  /* Completely disable sticky hover transformations on touch devices */
  button:hover,
  [role="button"]:hover,
  .dashboard-tracking-btn:hover,
  .dashboard-tracking-btn.glass-panel-hover:hover,
  .glass-panel-hover:hover,
  .dashboard-date-display:hover,
  .today-meal-card:hover,
  .today-meal-card-content:hover,
  #dashboard-date-bar button:hover {
    transform: none !important;
  }

  /* Light mode: Keep normal card background on hover/focus */
  .dashboard-tracking-btn:hover,
  .dashboard-tracking-btn.glass-panel-hover:hover,
  .glass-panel-hover:hover {
    background-color: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
  }

  /* Dark mode: Ensure buttons and cards NEVER turn brighter on touch hover */
  html.dark .glass-panel-hover:hover,
  html.dark .dashboard-tracking-btn:hover,
  html.dark .dashboard-tracking-btn.glass-panel-hover:hover {
    background: #161f2e !important;
    background-color: #161f2e !important;
    border-color: #25344d !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
  }

  /* Date Bar buttons on touch: retain their natural slate-100/dark bg-slate-800 look */
  #dashboard-date-bar button:hover {
    background-color: rgba(241, 245, 249, 0.9) !important;
    color: #475569 !important;
  }
  html.dark #dashboard-date-bar button:hover,
  html.dark #dashboard-date-bar button:focus {
    background-color: #222f46 !important;
    border-color: #2e4060 !important;
    color: #cbd5e1 !important;
  }

  /* Date display: transparent background on hover/focus */
  .dashboard-date-display:hover,
  html.dark .dashboard-date-display:hover,
  .dashboard-date-display:focus,
  html.dark .dashboard-date-display:focus {
    background-color: transparent !important;
  }

  /* Focus outlines/glows never persist as a sticky active highlight on buttons */
  button:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  .dashboard-tracking-btn:focus,
  .dashboard-tracking-btn:focus-visible,
  .dashboard-date-display:focus {
    outline: none !important;
    box-shadow: inherit;
  }
}

/* 2. Tracking Bottom Nav hidden when on-screen keyboard is active */
#tracking-bottom-nav.nav-keyboard-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 60px, 0) !important;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out !important;
}

/* 3. Solid bottom bleed for tracking sheet to prevent background peek when keyboard opens */
#view-tracking-card::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 600px;
  background-color: inherit;
  pointer-events: none;
}