@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* Marketing-to-app theme bridge (authoritative final layer) */
html[data-theme="postdoserx"] {
  --cream: #fdf8f4;
  --warm: #fdf8f4;
  --sand: #f5ede4;
  --sand-light: #faf6f1;
  --gold: #c9a86c;
  --gold-light: #e8d5b0;
  --gold-dark: #8b7341;
  --navy: #1b2a4a;
  --navy-light: #2d4166;
  --slate: #4a5568;
  --slate-light: #718096;
  --magenta: #c6168d;
  --magenta-light: #fef0f7;
  --magenta-dark: #9b1170;
  --teal: #2a7f7f;
  --teal-light: #e6f5f5;
  --teal-dark: #1d5c5c;
  --white: #ffffff;
  --border: #e8e0d6;
  --text: #2d2d2d;
  --text-sec: #5a5a5a;
  --text-muted: #8a8a8a;
}

html[data-theme="postdoserx"] body {
  background: var(--cream) !important;
  color: var(--text) !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

html[data-theme="postdoserx"] .main-content,
html[data-theme="postdoserx"] .sidebar,
html[data-theme="postdoserx"] .header,
html[data-theme="postdoserx"] .user-dropdown,
html[data-theme="postdoserx"] .dropdown-menu {
  background: var(--cream) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="postdoserx"] .main-content {
  background: var(--cream) !important;
}

/* Replace legacy white surfaces with marketing hero off-white */
html[data-theme="postdoserx"] .view,
html[data-theme="postdoserx"] .content-card,
html[data-theme="postdoserx"] .day-card,
html[data-theme="postdoserx"] .meal-slot,
html[data-theme="postdoserx"] .ingredient-item,
html[data-theme="postdoserx"] .insight-box,
html[data-theme="postdoserx"] .recommendation-item,
html[data-theme="postdoserx"] .history-item,
html[data-theme="postdoserx"] .progress-card,
html[data-theme="postdoserx"] .prediction-item,
html[data-theme="postdoserx"] .modal-content {
  background: var(--cream) !important;
}

html[data-theme="postdoserx"] h1,
html[data-theme="postdoserx"] h2,
html[data-theme="postdoserx"] h3,
html[data-theme="postdoserx"] h4,
html[data-theme="postdoserx"] h5,
html[data-theme="postdoserx"] h6,
html[data-theme="postdoserx"] .view-title,
html[data-theme="postdoserx"] .section-title,
html[data-theme="postdoserx"] .modal-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--navy) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

html[data-theme="postdoserx"] p,
html[data-theme="postdoserx"] span,
html[data-theme="postdoserx"] label,
html[data-theme="postdoserx"] .view-subtitle,
html[data-theme="postdoserx"] .metric-label,
html[data-theme="postdoserx"] .insight-text,
html[data-theme="postdoserx"] .dropdown-item {
  color: var(--text-sec) !important;
}

/* Header + dropdown alignment */
html[data-theme="postdoserx"] .header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html[data-theme="postdoserx"] .user-area {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

html[data-theme="postdoserx"] .user-dropdown {
  right: 0 !important;
  left: auto !important;
  width: 360px !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px rgba(27, 42, 74, 0.18) !important;
}

html[data-theme="postdoserx"] .dropdown-header {
  text-align: left !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Sidebar visual language from approved screenshots */
html[data-theme="postdoserx"] .nav-title {
  color: var(--gold-dark) !important;
  letter-spacing: 0.14em !important;
  border-bottom: 0 !important;
  text-shadow: none !important;
}

html[data-theme="postdoserx"] .nav-link {
  color: var(--slate) !important;
  background: transparent !important;
  border-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="postdoserx"] .nav-link:hover {
  color: var(--navy) !important;
  background: var(--sand-light) !important;
}

html[data-theme="postdoserx"] .nav-link.active {
  color: var(--magenta-dark) !important;
  background: var(--magenta-light) !important;
  border-left: 3px solid var(--magenta) !important;
}

html[data-theme="postdoserx"] .nav-link.premium-feature {
  background: var(--warm) !important;
  border: 1px solid var(--gold-light) !important;
  border-radius: 12px !important;
  margin: 0.35rem 0 !important;
}

html[data-theme="postdoserx"] .pro-badge,
html[data-theme="postdoserx"] .pro-badge-gold {
  background: var(--gold) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(139, 115, 65, 0.22) !important;
}

/* Solid magenta buttons (requested) */
html[data-theme="postdoserx"] .button-professional,
html[data-theme="postdoserx"] .modal-content .button-professional {
  background: var(--magenta) !important;
  border: 1px solid var(--magenta) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(198, 22, 141, 0.25) !important;
}

html[data-theme="postdoserx"] .button-professional:hover,
html[data-theme="postdoserx"] .modal-content .button-professional:hover {
  background: var(--magenta-dark) !important;
  border-color: var(--magenta-dark) !important;
}

html[data-theme="postdoserx"] .button-professional--outline,
html[data-theme="postdoserx"] .modal-cancel-btn {
  background: #7a8ea9 !important;
  border: 1px solid #7a8ea9 !important;
  color: #fff !important;
}

/* Icon treatment: white icons on magenta background (requested) */
html[data-theme="postdoserx"] .nav-icon,
html[data-theme="postdoserx"] .dropdown-icon,
html[data-theme="postdoserx"] .icon-professional,
html[data-theme="postdoserx"] .card-icon,
html[data-theme="postdoserx"] .stat-icon,
html[data-theme="postdoserx"] .user-avatar,
html[data-theme="postdoserx"] .lock-icon,
html[data-theme="postdoserx"] .inline-icon {
  background: var(--magenta) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html[data-theme="postdoserx"] .nav-icon i,
html[data-theme="postdoserx"] .dropdown-icon i,
html[data-theme="postdoserx"] .card-icon i,
html[data-theme="postdoserx"] .stat-icon i,
html[data-theme="postdoserx"] [data-lucide] {
  stroke: #fff !important;
  color: #fff !important;
}

/* Buttons: icons should blend with the same button surface */
html[data-theme="postdoserx"] button .btn-icon,
html[data-theme="postdoserx"] .button-professional .btn-icon,
html[data-theme="postdoserx"] .button-professional--outline .btn-icon,
html[data-theme="postdoserx"] .button-professional--accent .btn-icon,
html[data-theme="postdoserx"] button .premium-btn-icon,
html[data-theme="postdoserx"] button .icon-professional,
html[data-theme="postdoserx"] button .inline-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

html[data-theme="postdoserx"] button .btn-icon i,
html[data-theme="postdoserx"] button .icon-professional i,
html[data-theme="postdoserx"] button [data-lucide] {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Cards and surfaces */
html[data-theme="postdoserx"] .content-card,
html[data-theme="postdoserx"] .day-card,
html[data-theme="postdoserx"] .meal-slot,
html[data-theme="postdoserx"] .ingredient-item,
html[data-theme="postdoserx"] .insight-box,
html[data-theme="postdoserx"] .recommendation-item,
html[data-theme="postdoserx"] .history-item,
html[data-theme="postdoserx"] .progress-card,
html[data-theme="postdoserx"] .prediction-item {
  background: var(--warm) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 28px rgba(27, 42, 74, 0.08), 0 3px 10px rgba(27, 42, 74, 0.05) !important;
  color: var(--text) !important;
}

html[data-theme="postdoserx"] .content-card::before {
  background: var(--magenta) !important;
}

/* Modal system */
html[data-theme="postdoserx"] .modal-overlay {
  background: rgba(27, 42, 74, 0.46) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-theme="postdoserx"] .modal-content {
  background: var(--warm) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="postdoserx"] .modal-header {
  background: var(--warm) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="postdoserx"] .modal-subtitle {
  color: var(--text-muted) !important;
}

html[data-theme="postdoserx"] .modal-close,
html[data-theme="postdoserx"] .close-btn {
  background: var(--magenta) !important;
  color: #fff !important;
  border: 0 !important;
}

html[data-theme="postdoserx"] .modal-body,
html[data-theme="postdoserx"] .modal-body *,
html[data-theme="postdoserx"] .modal-content p,
html[data-theme="postdoserx"] .modal-content li,
html[data-theme="postdoserx"] .modal-content span,
html[data-theme="postdoserx"] .modal-content div {
  color: var(--text) !important;
  text-shadow: none !important;
}

html[data-theme="postdoserx"] .modal-content .instruction-item,
html[data-theme="postdoserx"] .modal-content .ingredient-item,
html[data-theme="postdoserx"] .modal-section {
  background: var(--sand-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

html[data-theme="postdoserx"] .modal-content .instruction-item::before {
  background: var(--magenta) !important;
  color: #fff !important;
}

/* Stats and tags */
html[data-theme="postdoserx"] .nutrition-item {
  border: 0 !important;
  border-radius: 12px !important;
}

html[data-theme="postdoserx"] .nutrition-item:nth-child(1) { background: #dceeee !important; color: #216a67 !important; }
html[data-theme="postdoserx"] .nutrition-item:nth-child(2) { background: #f7eaf3 !important; color: var(--magenta-dark) !important; }
html[data-theme="postdoserx"] .nutrition-item:nth-child(3) { background: #e9dbb5 !important; color: var(--gold-dark) !important; }
html[data-theme="postdoserx"] .nutrition-item:nth-child(4) { background: #dde7f3 !important; color: #5d718c !important; }
html[data-theme="postdoserx"] .nutrition-value,
html[data-theme="postdoserx"] .nutrition-label { color: inherit !important; }

html[data-theme="postdoserx"] .meal-tag.gentle,
html[data-theme="postdoserx"] .tag.gentle { background: var(--teal-light) !important; color: var(--teal-dark) !important; border-color: #cfe7e3 !important; }
html[data-theme="postdoserx"] .meal-tag.protein,
html[data-theme="postdoserx"] .tag.protein,
html[data-theme="postdoserx"] .tag.glp1 { background: var(--magenta-light) !important; color: var(--magenta-dark) !important; border-color: #eed8e7 !important; }
html[data-theme="postdoserx"] .meal-tag.comfort,
html[data-theme="postdoserx"] .tag.comfort,
html[data-theme="postdoserx"] .tag.quick { background: #e9dbb5 !important; color: var(--gold-dark) !important; border-color: #dfcda0 !important; }
html[data-theme="postdoserx"] .meal-tag.light,
html[data-theme="postdoserx"] .tag.light,
html[data-theme="postdoserx"] .tag.hydrating { background: #dde7f3 !important; color: #5d718c !important; border-color: #ccd9e8 !important; }

/* Stars */
html[data-theme="postdoserx"] .star,
html[data-theme="postdoserx"] .star.empty {
  color: #d6b45e !important;
  opacity: 0.5 !important;
}

html[data-theme="postdoserx"] .star:hover,
html[data-theme="postdoserx"] .star.active,
html[data-theme="postdoserx"] .star.selected {
  color: #b78b2c !important;
  opacity: 1 !important;
}

/* Premium conversion panel */
html[data-theme="postdoserx"] .premium-upgrade-card {
  background: radial-gradient(120% 120% at 0% 0%, #1e2e66 0%, #0f1b35 100%) !important;
  border: 1px solid rgba(201, 168, 108, 0.35) !important;
  color: #eef1ff !important;
  box-shadow: 0 26px 48px rgba(17, 25, 55, 0.38) !important;
}

html[data-theme="postdoserx"] .premium-upgrade-card h3,
html[data-theme="postdoserx"] .premium-upgrade-card h4,
html[data-theme="postdoserx"] .premium-upgrade-card p,
html[data-theme="postdoserx"] .premium-upgrade-card li,
html[data-theme="postdoserx"] .premium-upgrade-card span {
  color: #eef1ff !important;
}

/* Comprehensive Progress hard reset (override legacy inline rules) */
html[data-theme="postdoserx"] #comprehensive-progress,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress {
  background: var(--cream) !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

html[data-theme="postdoserx"] #comprehensive-progress *,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress * {
  font-family: inherit !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .view-title,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .view-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  color: var(--navy) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .view-subtitle,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .view-subtitle {
  color: var(--text-muted) !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .content-card,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .content-card {
  background: var(--warm) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 28px rgba(27, 42, 74, 0.08), 0 3px 10px rgba(27, 42, 74, 0.05) !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .premium-header,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .premium-header {
  background: var(--sand-light) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .premium-title-section h3,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .premium-title-section h3 {
  color: var(--navy) !important;
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
}

html[data-theme="postdoserx"] #comprehensive-progress .trend-analysis-content p,
html[data-theme="postdoserx"] #comprehensive-progress .cycle-analysis-content p,
html[data-theme="postdoserx"] #comprehensive-progress .correlation-content p,
html[data-theme="postdoserx"] #comprehensive-progress .trend-analysis-content li,
html[data-theme="postdoserx"] #comprehensive-progress .cycle-analysis-content li,
html[data-theme="postdoserx"] #comprehensive-progress .correlation-content li,
html[data-theme="postdoserx"] #comprehensive-progress .prediction-content p,
html[data-theme="postdoserx"] #comprehensive-progress .prediction-content span,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .trend-analysis-content p,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .cycle-analysis-content p,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .correlation-content p,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .prediction-content p,
html[data-theme="postdoserx"] body.comprehensive-progress-active #comprehensive-progress .prediction-content span {
  color: var(--text-sec) !important;
}

/* Use marketing site's final section color for requested action buttons */
html[data-theme="postdoserx"] button[onclick*="saveSymptomLog"],
html[data-theme="postdoserx"] button[onclick*="viewSymptomHistory"],
html[data-theme="postdoserx"] button[onclick*="setNewGoal"],
html[data-theme="postdoserx"] button[onclick*="shareProgress"],
html[data-theme="postdoserx"] button[onclick*="exportComprehensiveReport"],
html[data-theme="postdoserx"] button[onclick*="shareWithProvider"] {
  background: var(--navy) !important;
  border: 1px solid var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(27, 42, 74, 0.22) !important;
}

html[data-theme="postdoserx"] button[onclick*="saveSymptomLog"]:hover,
html[data-theme="postdoserx"] button[onclick*="viewSymptomHistory"]:hover,
html[data-theme="postdoserx"] button[onclick*="setNewGoal"]:hover,
html[data-theme="postdoserx"] button[onclick*="shareProgress"]:hover,
html[data-theme="postdoserx"] button[onclick*="exportComprehensiveReport"]:hover,
html[data-theme="postdoserx"] button[onclick*="shareWithProvider"]:hover {
  background: var(--navy-light) !important;
  border-color: var(--navy-light) !important;
}

html[data-theme="postdoserx"] button[onclick*="saveSymptomLog"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="viewSymptomHistory"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="setNewGoal"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="shareProgress"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="exportComprehensiveReport"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="shareWithProvider"] [data-lucide] {
  color: #fff !important;
  stroke: #fff !important;
}

/* Match requested seven buttons to marketing CTA pill style */
html[data-theme="postdoserx"] button[onclick*="completeMedicationSetup"],
html[data-theme="postdoserx"] button[onclick*="generateGroceryList"],
html[data-theme="postdoserx"] [onclick*="showTimelineModal('90days')"],
html[data-theme="postdoserx"] button[onclick*="implementRecommendation"],
html[data-theme="postdoserx"] button[onclick*="optimizeInjectionTiming"],
html[data-theme="postdoserx"] button[onclick*="updateMealPlan"],
html[data-theme="postdoserx"] button[onclick*="setHydrationReminders"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  padding: 0.95rem 1.6rem !important;
  border-radius: 22px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%) !important;
  color: #fff !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  box-shadow: 0 8px 24px rgba(42, 127, 127, 0.2) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-theme="postdoserx"] button[onclick*="completeMedicationSetup"]:hover,
html[data-theme="postdoserx"] button[onclick*="generateGroceryList"]:hover,
html[data-theme="postdoserx"] [onclick*="showTimelineModal('90days')"]:hover,
html[data-theme="postdoserx"] button[onclick*="implementRecommendation"]:hover,
html[data-theme="postdoserx"] button[onclick*="optimizeInjectionTiming"]:hover,
html[data-theme="postdoserx"] button[onclick*="updateMealPlan"]:hover,
html[data-theme="postdoserx"] button[onclick*="setHydrationReminders"]:hover {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(42, 127, 127, 0.3) !important;
}

html[data-theme="postdoserx"] button[onclick*="completeMedicationSetup"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="generateGroceryList"] [data-lucide],
html[data-theme="postdoserx"] [onclick*="showTimelineModal('90days')"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="implementRecommendation"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="optimizeInjectionTiming"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="updateMealPlan"] [data-lucide],
html[data-theme="postdoserx"] button[onclick*="setHydrationReminders"] [data-lucide] {
  stroke: #fff !important;
  color: #fff !important;
}