/* ============================================================
   EatWise — Android / Material Design 3 skin
   ============================================================ */
:root {
  /* Material 3-ish palette (green brand) */
  --md-primary: #006E47;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #8CF5C2;
  --md-on-primary-container: #002114;
  --md-secondary: #4C6358;
  --md-surface: #F7FBF7;
  --md-surface-card: #FFFFFF;
  --md-surface-variant: #DCE5DD;
  --md-on-surface: #181D1A;
  --md-on-surface-variant: #404943;
  --md-outline: #707973;
  --md-outline-variant: #C0C9C1;
  --md-error: #B3261E;
  --md-shadow: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --md-shadow-2: 0 2px 6px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.10);
  --md-shadow-3: 0 4px 12px rgba(0,0,0,.16);
  --md-radius: 16px;
  --md-radius-sm: 12px;
  --md-nav-h: 64px;
  --md-bar-h: 56px;

  --primary: var(--md-primary);
  --ew-green: var(--md-primary);
  --ew-green-hover: #005C3B;
  --ew-bg: var(--md-surface);
  --ew-surface: var(--md-surface-card);
  --ew-ink: var(--md-on-surface);
  --ew-muted: var(--md-on-surface-variant);
  --ew-line: var(--md-outline-variant);
  --bg: var(--md-surface);
  --text: var(--md-on-surface);
  --border: var(--md-outline-variant);
  --white: #FFFFFF;
}

html, body {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  font-family: 'Cairo', 'Roboto', system-ui, sans-serif !important;
  -webkit-tap-highlight-color: rgba(0, 110, 71, 0.12);
}

/* ----- Top app bar (Android) ----- */
.app-header {
  min-height: var(--md-bar-h) !important;
  padding: 12px 16px !important;
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border-radius: 0 !important;
  box-shadow: var(--md-shadow-2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}
.app-header.simple {
  background: var(--md-surface-card) !important;
  color: var(--md-on-surface) !important;
  border-bottom: none !important;
  box-shadow: var(--md-shadow) !important;
}
.app-header.simple h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--md-on-surface) !important;
}
#home .app-header,
#home .app-header * {
  color: var(--md-on-primary) !important;
}
#home .app-header {
  background: var(--md-primary) !important;
  border-radius: 0 0 20px 20px !important;
  padding-bottom: 20px !important;
}

/* ----- Bottom navigation (Material) ----- */
.bottom-nav {
  height: calc(var(--md-nav-h) + env(safe-area-inset-bottom)) !important;
  padding: 6px 8px env(safe-area-inset-bottom) !important;
  background: var(--md-surface-card) !important;
  border-top: 1px solid var(--md-outline-variant) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
  gap: 4px;
}
.bottom-nav .nav-item {
  border-radius: 16px !important;
  min-height: 52px !important;
  padding: 6px 8px !important;
  color: var(--md-on-surface-variant) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: background .15s ease, color .15s ease;
}
.bottom-nav .nav-item.active {
  color: var(--md-primary) !important;
  background: rgba(0, 110, 71, 0.12) !important;
}
.bottom-nav .nav-item.active .nav-svg {
  stroke: var(--md-primary);
}
.bottom-nav .nav-item:active {
  background: rgba(0, 110, 71, 0.08) !important;
}

/* ----- Buttons (Material filled / outlined) ----- */
.btn,
.btn-primary,
.btn-success,
.btn.btn-primary,
.btn.btn-success {
  min-height: 40px !important;
  padding: 10px 20px !important;
  border-radius: 20px !important; /* full pill like M3 */
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.btn-primary,
.btn-success,
.btn.btn-primary,
.btn.btn-success,
.btn-add-cart,
.btn-log-today,
.cart-btn {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}
.btn-primary:active,
.btn-success:active {
  box-shadow: var(--md-shadow) !important;
  opacity: 0.92;
}
.btn-outline,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--md-primary) !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: 20px !important;
}
.btn-outline:hover,
.btn-outline-secondary:hover {
  background: rgba(0, 110, 71, 0.08) !important;
}
.btn-sm {
  min-height: 32px !important;
  padding: 6px 14px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
}
.btn-full,
.w-100.btn {
  border-radius: 24px !important;
}

/* FAB — Android floating action button */
.fab-add-meal,
#btn-add-meal.fab-add-meal,
button.fab-add-meal {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important; /* M3 FAB */
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  border: none !important;
  box-shadow: var(--md-shadow-3) !important;
  bottom: calc(var(--md-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  right: 16px !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.fab-add-meal:active {
  box-shadow: var(--md-shadow-2) !important;
}

/* ----- Cards (Material elevated) ----- */
.meal-card,
.meal-card-full,
.package-card,
.day-meals-card,
.order-card,
.weight-card,
.current-plan-card,
.p-stat,
.weekly-summary,
.help-card,
.help-item,
.auth-container,
.plan-option {
  background: var(--md-surface-card) !important;
  border: none !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow) !important;
}
.meal-card-full {
  overflow: hidden !important;
}
.meal-card-full .meal-details {
  padding: 14px 16px 16px !important;
}
.meal-card-full h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--md-on-surface) !important;
}

/* ----- Chips (Material filter chips) ----- */
.filter-btn,
.cat-chip,
.slot-toggle {
  min-height: 32px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--md-outline) !important;
  background: transparent !important;
  color: var(--md-on-surface-variant) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.filter-btn.active,
.cat-chip.active,
.slot-toggle.active {
  background: var(--md-secondary-container, #CDE8D7) !important;
  border-color: transparent !important;
  color: var(--md-on-primary-container) !important;
  background: #CDE8D7 !important;
}

/* ----- Text fields (Material filled-ish) ----- */
.input-group input,
.input-group select,
.input-group textarea,
.meals-search {
  min-height: 48px !important;
  border: none !important;
  border-bottom: 1px solid var(--md-outline) !important;
  border-radius: 4px 4px 0 0 !important;
  background: #E7EFE9 !important;
  padding: 12px 14px !important;
  font-size: 16px !important; /* Android avoids zoom on focus */
  color: var(--md-on-surface) !important;
  box-shadow: none !important;
}
.input-group input:focus,
.input-group select:focus,
.meals-search:focus {
  border-bottom: 2px solid var(--md-primary) !important;
  background: #DDEBE2 !important;
  box-shadow: none !important;
  outline: none !important;
}
.input-group label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--md-on-surface-variant) !important;
  margin-bottom: 6px !important;
}

/* ----- Lists (Android settings style) ----- */
.profile-menu.list-group,
.profile-menu {
  border-radius: var(--md-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--md-shadow) !important;
  border: none !important;
  background: var(--md-surface-card) !important;
}
.profile-menu .list-group-item,
.profile-menu .menu-item {
  padding: 16px 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  background: var(--md-surface-card) !important;
  font-weight: 500 !important;
  min-height: 56px !important; /* Android list item */
}
.profile-menu .list-group-item:last-child,
.profile-menu .menu-item:last-child {
  border-bottom: none !important;
}
.profile-menu .list-group-item:active,
.profile-menu .menu-item:active {
  background: rgba(0, 110, 71, 0.08) !important;
}

/* ----- Progress stats ----- */
.progress-stats .p-stat,
#progress .p-stat {
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow) !important;
  border: none !important;
  padding: 14px 8px !important;
  min-height: 96px !important;
}
.p-stat-icon {
  background: #CDE8D7 !important;
  border-radius: 12px !important;
}

/* ----- Data tables ----- */
.data-table-wrap {
  border: none !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow) !important;
  overflow: hidden !important;
}
.data-table th {
  background: #E7EFE9 !important;
  font-weight: 600 !important;
  color: var(--md-on-surface-variant) !important;
}

/* ----- Bootstrap modals → bottom sheets feel on mobile ----- */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    align-items: flex-end !important;
  }
  .modal-content {
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
    max-height: 92vh;
  }
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .25s ease-out;
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }
}
.modal-content {
  border: none !important;
  border-radius: 24px !important;
  box-shadow: var(--md-shadow-3) !important;
}
.modal-header {
  border-bottom: 1px solid var(--md-outline-variant) !important;
  padding: 16px 20px !important;
}
.modal-title {
  font-weight: 600 !important;
  font-size: 18px !important;
}
.modal-body {
  padding: 16px 20px 24px !important;
}

/* ----- Toast (Android snackbar) ----- */
.toast {
  bottom: calc(var(--md-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  left: 16px !important;
  right: 16px !important;
  transform: translateY(12px) !important;
  max-width: none !important;
  width: auto !important;
  border-radius: 4px !important;
  background: #2D322F !important;
  color: #fff !important;
  padding: 14px 16px !important;
  box-shadow: var(--md-shadow-2) !important;
  font-weight: 500 !important;
}
.toast.show {
  transform: translateY(0) !important;
}
.toast.success { background: #1B4332 !important; }
.toast.error { background: #6B1D1D !important; }

/* ----- Cart badge / header actions ----- */
.cart-btn {
  border-radius: 20px !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.app-header.simple .cart-btn {
  background: rgba(0, 110, 71, 0.12) !important;
  color: var(--md-primary) !important;
}

/* ----- Splash ----- */
#splash {
  background: var(--md-primary) !important;
}
#splash .logo-icon {
  background: #fff !important;
  color: var(--md-primary) !important;
  border-radius: 20px !important;
  box-shadow: var(--md-shadow-3) !important;
}

/* ----- Fit badges ----- */
.fit-badge {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

/* ----- Section labels ----- */
.section-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--md-on-surface-variant) !important;
  letter-spacing: 0.02em;
  margin: 20px 4px 10px !important;
}

/* Ripple-ish press */
.meal-card-full:active,
.package-card:active,
.order-card:active {
  opacity: 0.92;
}