/* ═══════════════════════════════════════════════════════
   Balance – "The Precision Atelier" Design System
   ═══════════════════════════════════════════════════════ */

/* ── Inter via Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --balance-font: 'Inter', system-ui, sans-serif;

  /* Surface tokens – light */
  --surface:                  #f4f6f8;
  --surface-container-low:    #eef0f3;
  --surface-container:        #ffffff;
  --surface-container-high:   #e9ecef;
  --surface-container-highest:#dee2e6;
  --surface-bright:           rgba(255, 255, 255, 0.94);
  --on-surface:               #1a2332;
  --outline-variant:          rgba(0, 0, 0, 0.10);

  /* Brand */
  --primary-token:    #0d6efd;
  --primary-light:    #b1c5ff;
  --primary-gradient: linear-gradient(135deg, #b1c5ff 0%, #0d6efd 100%);

  /* Macro tokens */
  --color-carbs:   #ffc107;
  --color-protein: #3b82f6;
  --color-fat:     #fd7e14;
  --color-fiber:   #198754;
  --color-sport:   #dc3545;
  --color-water:   #0dcaf0;
}

[data-bs-theme="dark"] {
  --surface:                  #0c141b;
  --surface-container-low:    #161e27;
  --surface-container:        #1e2830;
  --surface-container-high:   #252f3b;
  --surface-container-highest:#2d3845;
  --surface-bright:           rgba(30, 40, 52, 0.92);
  --on-surface:               #dce8f4;
  --outline-variant:          rgba(255, 255, 255, 0.10);
  --primary-token:            #b1c5ff;
}

[data-bs-theme="dark"] .text-success {
  color: #4ade80 !important;
}

/* ── Global: Font & Body ── */
body {
  font-family: var(--balance-font);
  font-size: 0.875rem;
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

/* ── Navbar: Glassmorphism ── */
.navbar {
  position: sticky !important;
  top: 0;
  z-index: 1030;
  background: rgba(244, 246, 248, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--outline-variant) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .navbar {
  background: rgba(12, 20, 27, 0.82) !important;
}

/* Nav text colors independent of navbar-dark/light */
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--on-surface) !important;
  opacity: 1;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  color: var(--primary-token) !important;
  opacity: 1;
}

.navbar .nav-link.active {
  color: var(--primary-token) !important;
  font-weight: 600;
}

/* Toggler icon: explicit SVG per theme for reliable contrast */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,35,50,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(220,232,244,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
  border-color: var(--outline-variant) !important;
}

/* Theme toggle button */
.btn-outline-light {
  border-color: var(--outline-variant) !important;
  color: var(--on-surface) !important;
}

.btn-outline-light:hover {
  background-color: var(--outline-variant) !important;
  color: var(--on-surface) !important;
}

/* Quickaccess shortlinks: compact icon-only buttons on desktop */
.quickaccess-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0 !important;
  margin-right: 0.25rem;
}

/* ── Body background ── */
[data-bs-theme="dark"] body {
  background-color: var(--surface) !important;
}

/* ── Cards: Tonal Layering (no borders, no shadows) ── */
.card {
  border: none !important;
  background-color: var(--surface-container) !important;
  box-shadow: none !important;
}

/* Soft ambient lift for cards sitting on the page surface */
[data-bs-theme="dark"] .card {
  box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.18) !important;
}

/* ── Mahlzeit-Karten ── */
.meal-card {
  border-left: 4px solid #fff !important;
  border-radius: 0.5rem !important;
}

.meal-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 1px solid var(--surface-container-highest, #dee2e6);
  border-radius: 6px;
  color: var(--primary-token, #0d6efd);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.meal-add-btn:hover {
  background: rgba(13, 110, 253, 0.08);
  border-color: var(--primary-token, #0d6efd);
}
[data-bs-theme="dark"] .meal-add-btn {
  border-color: rgba(255,255,255,0.2);
}
[data-bs-theme="dark"] .meal-add-btn:hover {
  background: rgba(177, 197, 255, 0.1);
  border-color: var(--primary-light, #b1c5ff);
  color: var(--primary-light, #b1c5ff);
}

/* ── Typography ── */

/* Hero Metric (Display LG) – main calorie number */
.hero-metric {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: var(--balance-font);
}

/* Label above/beside hero metric */
.hero-metric-label {
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  display: block;
  margin-bottom: 0.15rem;
}

/* Macro labels (Body label – all-caps) */
.macro-label {
  font-size: 0.72rem;
  font-weight: 500;
}

/* Sub-labels under hero numbers */
.kcal-sub {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  display: block;
}

/* ── Progress Bars: 4px + glow on hover ── */
.progress {
  height: 4px !important;
  border-radius: 99px !important;
  background-color: var(--surface-container-highest) !important;
  overflow: visible !important;
}

.progress-bar {
  border-radius: 99px !important;
  transition: box-shadow 0.2s ease;
}

/* Macro fills */
.progress-kcal    .progress-bar { background: var(--primary-gradient) !important; }
.progress-carbs   .progress-bar { background-color: var(--color-carbs) !important; }
.progress-protein .progress-bar { background-color: var(--color-protein) !important; }
.progress-fat     .progress-bar { background-color: var(--color-fat) !important; }
.progress-fiber   .progress-bar { background-color: var(--color-fiber) !important; }

/* Hover glow */
.progress-kcal:hover    .progress-bar { box-shadow: 0 0 12px rgba(13, 110, 253, 0.55); }
.progress-carbs:hover   .progress-bar { box-shadow: 0 0 12px rgba(255, 193, 7, 0.55); }
.progress-protein:hover .progress-bar { box-shadow: 0 0 12px rgba(59, 130, 246, 0.55); }
.progress-fat:hover     .progress-bar { box-shadow: 0 0 12px rgba(253, 126, 20, 0.55); }
.progress-fiber:hover   .progress-bar { box-shadow: 0 0 12px rgba(25, 135, 84, 0.55); }

/* Week overview progress bars */
.progress .bg-success { background-color: var(--color-protein) !important; }
.progress .bg-warning { background-color: var(--color-carbs) !important; }
.progress .bg-danger  { background-color: var(--color-sport) !important; }

/* ── Buttons ── */

/* Primary: flat solid */
.btn-primary {
  background: var(--primary-token) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #1a7cff !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Primary: fixed deep blue in dark mode (prevent washed-out #b1c5ff bg) */
[data-bs-theme="dark"] .btn-primary {
  background: #2d6ae0 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus-visible {
  background: #3a79f0 !important;
  color: #fff !important;
}

/* Secondary outline: subtle ghost border (default Bootstrap border is too dark) */
.btn-outline-secondary {
  border-color: var(--outline-variant) !important;
}

/* ── Input Fields: Subtle surface fill ── */
.form-control,
.form-select {
  background-color: var(--surface-container-high) !important;
  border: 1px solid var(--outline-variant) !important;
  color: var(--on-surface) !important;
  border-radius: 0.375rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-container-high) !important;
  border-color: var(--primary-token) !important;
  box-shadow: 0 0 0 3px rgba(177, 197, 255, 0.15) !important;
  color: var(--on-surface) !important;
}

.form-control::placeholder {
  opacity: 0.45;
}

.form-control.text-muted {
  color: var(--bs-secondary-color) !important;
}

/* ── Modals: Surface Bright + Glassmorphism ── */
.modal-content {
  background-color: var(--surface-bright) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--outline-variant) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--outline-variant) !important;
}

/* ── Tables ── */
.table {
  color: var(--on-surface);
}

/* Replace table-light with tonal surface */
.table-light,
thead.table-light,
.table thead {
  --bs-table-bg: var(--surface-container-high) !important;
  --bs-table-color: var(--on-surface) !important;
  background-color: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--outline-variant) !important;
}

/* ── Macro text utilities ── */
.text-fat     { color: var(--color-fat)     !important; }
.text-carbs   { color: var(--color-carbs)   !important; }
.text-protein { color: var(--color-protein) !important; }
.text-fiber   { color: var(--color-fiber)   !important; }

/* ── Sport button (hellblau) ── */
.btn-sport {
  background-color: #b1c5ff !important;
  border-color: transparent !important;
  color: #1a2332 !important;
  font-weight: 500;
}
.btn-sport:hover,
.btn-sport:focus-visible {
  background-color: #9fb5ff !important;
}

/* ── Water utilities ── */
.bg-water { background-color: var(--color-water) !important; }

.btn-water {
  background-color: var(--color-water) !important;
  border-color: transparent !important;
  color: #000 !important;
  font-weight: 500;
}
.btn-water:hover,
.btn-water:focus-visible {
  background-color: #31d2f2 !important;
}

.btn-outline-water {
  border-color: var(--outline-variant) !important;
  color: var(--color-water) !important;
  background: transparent;
}
.btn-outline-water:hover {
  background-color: rgba(13, 202, 240, 0.10) !important;
}

/* ── Badges ── */
.badge.bg-secondary {
  background-color: var(--surface-container-highest) !important;
  color: var(--on-surface) !important;
}

/* ── Flash Alerts ── */
.alert {
  border-radius: 0.5rem;
  border: none !important;
  border-left: 3px solid transparent !important;
}

.alert-success { border-left-color: var(--color-protein) !important; }
.alert-danger  { border-left-color: var(--color-sport) !important; }
.alert-warning { border-left-color: var(--color-carbs) !important; }
.alert-info    { border-left-color: #0dcaf0 !important; }

/* ── Day Navigation ── */
.day-nav { font-size: 1rem; }

/* ── Favoriten-Stern ── */
.btn-fav       { color: var(--color-carbs); }
.btn-fav:hover { color: #e0a800; }

/* ── Eintrags-Zeile Hover ── */
.entry-row:hover { background-color: var(--outline-variant) !important; }

/* ── Barcode-Scanner ── */
.scanner-region {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #000;
  min-height: 200px;
}

/* ── Nav Tabs in Modals ── */
.nav-tabs {
  border-bottom-color: var(--outline-variant) !important;
}

.nav-tabs .nav-link {
  color: var(--on-surface) !important;
  opacity: 0.65;
  border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
  opacity: 1;
  border-color: transparent !important;
  background: var(--outline-variant) !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-token) !important;
  opacity: 1;
  background: transparent !important;
  border-bottom: 2px solid var(--primary-token) !important;
  font-weight: 600;
}

/* ── Week table today highlight ── */
.table-primary {
  --bs-table-bg: rgba(177, 197, 255, 0.10) !important;
}

/* ── TCM rating badges ── */
.tcm-oo    { background-color: #198754; color: #fff; }
.tcm-o     { background-color: #75b798; color: #000; }
.tcm-delta { background-color: #ffc107; color: #000; }
.tcm-x     { background-color: #fd7e14; color: #fff; }
.tcm-xx    { background-color: #dc3545; color: #fff; }
.tcm-badge { font-size: .65rem; padding: .15em .4em; border-radius: .25rem; }

/* Macro donut chart (CSS conic-gradient) */
.macro-donut {
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0;
}
.macro-donut::after {
  content: ''; display: block;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-container);
  margin: 8px auto;
}

/* TCM filter buttons: dimmed when inactive, full color when active */
button.filter-tcm.tcm-oo,
button.filter-tcm.tcm-o,
button.filter-tcm.tcm-delta,
button.filter-tcm.tcm-x,
button.filter-tcm.tcm-xx {
  opacity: 0.55;
  border: 1px solid transparent;
}
button.filter-tcm.active {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 1px;
  font-weight: 600;
}

/* TCM table column highlight */
.tcm-col-highlight {
  background-color: rgba(177, 197, 255, 0.12) !important;
}
[data-bs-theme="dark"] .tcm-col-highlight {
  background-color: rgba(177, 197, 255, 0.08) !important;
}

/* Foods page – equal-width action buttons on mobile */
@media (max-width: 575.98px) {
  .foods-action-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

/* ── Tagestipp & Erfolg Overlay ── */
#tagestippOverlay,
#erfolgOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tagestipp-card {
  background-color: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: 1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  max-width: 440px;
  width: 90%;
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  cursor: default;
}

.tagestipp-icon {
  font-size: 2.5rem;
  color: var(--bs-warning);
  margin-bottom: 0.5rem;
}

.tagestipp-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  opacity: 0.55;
  margin-bottom: 0.75rem;
}

.tagestipp-text {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

/* ── Hilfe-Assistent: globales Floating-Widget ── */
.help-assistant-fab {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1040;
  transition: transform 0.15s ease;
}
.help-assistant-fab:hover { transform: scale(1.08); color: #fff; }

.help-assistant-panel {
  position: fixed;
  bottom: 9.5rem;
  right: 1.5rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 60vh;
  background-color: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: 1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  z-index: 1041;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.help-assistant-panel.d-none { display: none !important; }

.help-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.help-assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 160px;
}

.help-assistant-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--outline-variant);
}

@media (max-width: 420px) {
  .help-assistant-panel { right: 1rem; left: 1rem; width: auto; }
  .help-assistant-fab { right: 1rem; }
}

/* ── Kcal- & Makro-Karten: Lean-Minimal-Darstellung ── */
.card-summary {
  border: 1px solid var(--outline-variant) !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .card-summary {
  box-shadow: none !important;
}
.card-summary .progress {
  height: 8px !important;
}
.card-summary .progress-kcal:hover    .progress-bar,
.card-summary .progress-carbs:hover   .progress-bar,
.card-summary .progress-protein:hover .progress-bar,
.card-summary .progress-fat:hover     .progress-bar {
  box-shadow: none !important;
}

/* Weight goal progress bar */
.progress-weight {
  height: 10px !important;
  border-radius: 99px !important;
}