/* ============================================================
   EatWise — Material Design 3
   Seed: Green · Surfaces: white/neutral · On-surface: near-black
   ============================================================ */

:root {
  /* M3 tonal palette (green seed) */
  --md-sys-color-primary: #006e2f;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #69ff8e;
  --md-sys-color-on-primary-container: #002109;

  --md-sys-color-secondary: #516551;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d4e8d1;
  --md-sys-color-on-secondary-container: #0f1f12;

  --md-sys-color-tertiary: #39656c;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #bcebf2;
  --md-sys-color-on-tertiary-container: #001f24;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-surface: #f7fbf2;
  --md-sys-color-surface-dim: #d7dbd3;
  --md-sys-color-surface-bright: #f7fbf2;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f5ed;
  --md-sys-color-surface-container: #ebefe7;
  --md-sys-color-surface-container-high: #e5e9e1;
  --md-sys-color-surface-container-highest: #e0e4dc;
  --md-sys-color-on-surface: #181d18;
  --md-sys-color-on-surface-variant: #414941;
  --md-sys-color-outline: #717970;
  --md-sys-color-outline-variant: #c1c9bf;
  --md-sys-color-inverse-surface: #2d322d;
  --md-sys-color-inverse-on-surface: #eef2ea;
  --md-sys-color-inverse-primary: #4ce274;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* Gradient accent (brand) */
  --md-grad-primary: linear-gradient(135deg, #00e676 0%, #00c853 40%, #006e2f 100%);
  --md-grad-soft: linear-gradient(135deg, rgba(0, 200, 83, 0.14), rgba(0, 110, 47, 0.06));

  /* Shape (M3) */
  --md-radius-xs: 4px;
  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-xl: 28px;
  --md-radius-full: 999px;

  /* Elevation */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.05);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.08), 0 2px 6px 2px rgba(0,0,0,.06);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.08);

  /* Layout */
  --md-nav-h: 80px;
  --md-bar-h: 64px;

  /* Bridge to existing tokens */
  --primary: var(--md-sys-color-primary);
  --g1: #00c853;
  --g2: var(--md-sys-color-primary);
  --g3: #004d22;
  --green-grad: var(--md-grad-primary);
  --green-grad-soft: var(--md-grad-soft);
  --ink: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --line: var(--md-sys-color-outline-variant);
  --bg: var(--md-sys-color-surface);
  --surface: var(--md-sys-color-surface-container-lowest);
  --danger: var(--md-sys-color-error);
  --radius: var(--md-radius-lg);
  --nav-h: var(--md-nav-h);
  --bar-h: var(--md-bar-h);
  --shadow: var(--md-elev-1);
  --shadow-2: var(--md-elev-2);
  --shadow-fab: 0 4px 12px rgba(0, 110, 47, 0.35);
  --ew-green: var(--md-sys-color-primary);
  --ew-bg: var(--md-sys-color-surface);
  --ew-surface: var(--md-sys-color-surface-container-lowest);
  --ew-ink: var(--md-sys-color-on-surface);
  --ew-muted: var(--md-sys-color-on-surface-variant);
  --ew-line: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --white: #ffffff;
  --border: var(--md-sys-color-outline-variant);
}

/* ----- Base ----- */
html, body {
  background: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  font-family: 'Cairo', 'Roboto', system-ui, sans-serif !important;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
  font-size: 14px;
  line-height: 1.45;
}

/* Type roles */
.md-title-large, .app-header h2, .auth-header h2, .modal-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
.md-title-medium, .meal-card-full h4, .section-label {
  font-size: 1rem;
  font-weight: 700;
}
.md-body-medium { font-size: 0.875rem; font-weight: 400; }
.md-label-large, .btn, .nav-item span:last-child {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ----- Top app bar ----- */
.app-header {
  min-height: var(--md-bar-h) !important;
  padding: 12px 16px 16px !important;
  background: var(--md-grad-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: none !important;
  border-radius: 0 0 var(--md-radius-xl) var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}
.app-header.simple {
  background: var(--md-sys-color-surface-container-lowest) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  padding-bottom: 12px !important;
}
.app-header.simple h2 {
  color: var(--md-sys-color-on-surface) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}
#home .app-header,
#home .app-header * { color: var(--md-sys-color-on-primary) !important; }
#home .app-header .greeting {
  opacity: 0.92;
  font-size: 0.85rem;
  font-weight: 500;
}
#home .app-header h2 { font-weight: 800; font-size: 1.4rem; }

/* ----- Navigation bar (M3) ----- */
.bottom-nav {
  height: calc(var(--md-nav-h) + env(safe-area-inset-bottom)) !important;
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom)) !important;
  background: var(--md-sys-color-surface-container) !important;
  border-top: none !important;
  box-shadow: none !important;
  gap: 4px;
}
.bottom-nav .nav-item {
  border-radius: var(--md-radius-xl) !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  transition: background 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s;
}
.bottom-nav .nav-item .nav-icon {
  width: 40px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-radius-xl);
  transition: background 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.bottom-nav .nav-item .nav-icon i,
.bottom-nav .nav-item [data-lucide] {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2;
}
.bottom-nav .nav-item.active {
  color: var(--md-sys-color-on-secondary-container) !important;
  background: transparent !important;
}
.bottom-nav .nav-item.active .nav-icon {
  background: var(--md-sys-color-secondary-container) !important;
}
.bottom-nav .nav-item:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
}

/* ----- Buttons (M3) ----- */
/* Filled */
.btn, .btn-primary, .btn-success, .btn.btn-primary, .btn.btn-success {
  min-height: 40px !important;
  padding: 10px 24px !important;
  border-radius: var(--md-radius-xl) !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  border: none !important;
  box-shadow: none !important;
  letter-spacing: 0.01em;
  transition: box-shadow 0.2s, filter 0.15s;
}
.btn-primary, .btn-success, .btn.btn-primary, .btn.btn-success,
.btn-add-cart, .btn-log-today {
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}
.btn-primary:hover, .btn-success:hover {
  box-shadow: var(--md-elev-1) !important;
}
.btn-primary:active, .btn-success:active {
  box-shadow: none !important;
  filter: brightness(0.95);
}
/* Outlined */
.btn-outline, .btn-outline-secondary {
  background: transparent !important;
  color: var(--md-sys-color-primary) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: var(--md-radius-xl) !important;
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) !important;
}
/* Tonal */
.btn-tonal, .cart-btn {
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border: none !important;
  border-radius: var(--md-radius-xl) !important;
}
.btn-sm {
  min-height: 32px !important;
  padding: 6px 16px !important;
  border-radius: var(--md-radius-lg) !important;
  font-size: 12px !important;
}
.btn-full, .w-100.btn { border-radius: var(--md-radius-xl) !important; }

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

/* ----- Cards (elevated surface) ----- */
.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-sys-color-surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1) !important;
}
.meal-card-full { overflow: hidden !important; }
.meal-card-full h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--md-sys-color-on-surface) !important;
}

/* Filter chips (M3) */
.filter-btn, .cat-chip, .slot-toggle {
  min-height: 32px !important;
  padding: 6px 16px !important;
  border-radius: var(--md-radius-sm) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  background: transparent !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.filter-btn.active, .cat-chip.active, .slot-toggle.active {
  background: var(--md-sys-color-secondary-container) !important;
  border-color: transparent !important;
  color: var(--md-sys-color-on-secondary-container) !important;
}

/* Text fields — filled */
.input-group input,
.input-group select,
.input-group textarea,
.meals-search {
  min-height: 56px !important;
  border: none !important;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant) !important;
  border-radius: var(--md-radius-xs) var(--md-radius-xs) 0 0 !important;
  background: var(--md-sys-color-surface-container-highest) !important;
  padding: 16px !important;
  font-size: 16px !important;
  color: var(--md-sys-color-on-surface) !important;
  box-shadow: none !important;
}
.input-group input:focus,
.input-group select:focus,
.meals-search:focus {
  border-bottom: 2px solid var(--md-sys-color-primary) !important;
  background: var(--md-sys-color-surface-container-high) !important;
  outline: none !important;
  box-shadow: none !important;
}
.input-group label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  margin-bottom: 6px !important;
}

/* Lists */
.profile-menu.list-group, .profile-menu {
  border-radius: var(--md-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--md-elev-1) !important;
  border: none !important;
  background: var(--md-sys-color-surface-container-lowest) !important;
}
.profile-menu .list-group-item,
.profile-menu .menu-item {
  padding: 16px 20px !important;
  border: none !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  background: var(--md-sys-color-surface-container-lowest) !important;
  font-weight: 600 !important;
  min-height: 56px !important;
  color: var(--md-sys-color-on-surface) !important;
}
.profile-menu .menu-item:last-child { border-bottom: none !important; }
.profile-menu .menu-item:active {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent) !important;
}
.profile-menu .text-danger { color: var(--md-sys-color-error) !important; }

/* Stats */
#progress .p-stat, .progress-stats .p-stat {
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1) !important;
  border: none !important;
  background: var(--md-sys-color-surface-container-lowest) !important;
}
.p-stat-icon {
  background: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  border-radius: var(--md-radius-md) !important;
}

/* Tables */
.data-table-wrap {
  border: none !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1) !important;
  overflow: hidden !important;
  background: var(--md-sys-color-surface-container-lowest) !important;
}
.data-table th {
  background: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-weight: 700 !important;
}

/* Sheets / modals */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0; right: 0;
  }
  .modal-content {
    border-radius: var(--md-radius-xl) var(--md-radius-xl) 0 0 !important;
    border: none !important;
    max-height: 92vh;
  }
}
.modal-content {
  border: none !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  background: var(--md-sys-color-surface-container-low) !important;
}
.modal-header {
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  padding: 16px 24px !important;
}
.modal-title {
  font-weight: 700 !important;
  color: var(--md-sys-color-on-surface) !important;
}
.modal-body { padding: 16px 24px 24px !important; }

/* Snackbar */
.toast {
  bottom: calc(var(--md-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  left: 16px !important;
  right: 16px !important;
  max-width: none !important;
  border-radius: var(--md-radius-xs) !important;
  background: var(--md-sys-color-inverse-surface) !important;
  color: var(--md-sys-color-inverse-on-surface) !important;
  padding: 14px 16px !important;
  font-weight: 500 !important;
  box-shadow: var(--md-elev-2) !important;
}
.toast.success {
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}
.toast.error {
  background: var(--md-sys-color-error) !important;
  color: var(--md-sys-color-on-error) !important;
}

/* Splash / auth */
#splash { background: var(--md-grad-primary) !important; }
#splash .logo-icon {
  background: var(--md-sys-color-surface-container-lowest) !important;
  color: var(--md-sys-color-primary) !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-3) !important;
  font-weight: 900;
}
#splash h1 { color: #fff !important; font-weight: 800; }
.auth-header .logo-icon {
  background: var(--md-grad-primary) !important;
  color: #fff !important;
  border-radius: var(--md-radius-md);
}
.auth-header h2 { color: var(--md-sys-color-on-surface) !important; font-weight: 800; }
.link-bold, .link {
  color: var(--md-sys-color-primary) !important;
  font-weight: 700;
}

.section-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  margin: 20px 4px 10px !important;
  letter-spacing: 0.02em;
}

[data-lucide] { display: inline-block; vertical-align: middle; }

.app-header .cart-btn {
  background: color-mix(in srgb, #fff 22%, transparent) !important;
  color: #fff !important;
  border-radius: var(--md-radius-xl) !important;
}
.app-header.simple .cart-btn {
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
}

.fit-badge {
  border-radius: var(--md-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

main, .home-content, .meals-page-content, .plan-content,
.progress-content, .profile-content, .help-content, .orders-admin-content {
  padding-bottom: calc(var(--md-nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  max-width: 480px;
  margin-inline: auto;
}

/* State layers */
.meal-card-full:active,
.package-card:active,
.order-card:active {
  filter: brightness(0.98);
}


/* ----- Plan page: compact colored title ----- */
.plan-header-compact {
  background: var(--md-grad-primary) !important;
  color: #fff !important;
  min-height: auto !important;
  padding: 10px 16px !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: var(--md-elev-1) !important;
  display: flex !important;
  align-items: center !important;
}
.plan-header-compact .plan-page-title,
.plan-header-compact h2 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  width: auto !important;
}

/* shrink current plan card a bit */
#plan .current-plan-card {
  margin-top: 12px !important;
  padding: 16px !important;
}
#plan .current-plan-card .big-cal {
  font-size: 1.75rem !important;
}

/* FAB with label — أضف باقتك */
.fab-add-package {
  position: fixed !important;
  bottom: calc(var(--md-nav-h, 80px) + 16px + env(safe-area-inset-bottom)) !important;
  right: 16px !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  padding: 12px 18px 12px 16px !important;
  border: none !important;
  border-radius: 16px !important;
  background: var(--md-sys-color-primary-container, #69ff8e) !important;
  color: var(--md-sys-color-on-primary-container, #002109) !important;
  box-shadow: var(--md-elev-3, 0 4px 12px rgba(0,0,0,.15)) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}
.fab-add-package [data-lucide] {
  width: 22px !important;
  height: 22px !important;
}
.fab-add-package .fab-label {
  white-space: nowrap;
}
.fab-add-package:active {
  filter: brightness(0.97);
}