/**
 * Feature page overrides — loaded after per-page <style> blocks.
 * Uses design tokens so light and dark mode both work.
 */

/* ---- Weekly meal / workout plans (shared bento grid) ---- */
.day-tile {
  background: var(--ht-surface) !important;
  border: 1px solid var(--ht-border) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow-sm) !important;
}

.day-tile:hover {
  border-color: var(--ht-accent) !important;
  box-shadow: var(--ht-shadow-md) !important;
}

.day-tile__head {
  background: var(--ht-surface-muted) !important;
  border-bottom: 1px solid var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.day-tile:hover .day-tile__head,
.day-tile__head:hover {
  background: var(--ht-accent-light) !important;
}

.day-tile__dow {
  color: var(--ht-text-muted) !important;
}

.day-tile__date,
.day-tile__meta,
.day-tile__kcal {
  color: var(--ht-text) !important;
}

.slot-row {
  background: var(--ht-surface-muted) !important;
  border: 1px solid var(--ht-border) !important;
  color: var(--ht-text-secondary) !important;
}

.slot-row a {
  color: var(--ht-accent) !important;
}

.slot-row__meta {
  color: var(--ht-text-muted) !important;
}

.weekly-legend,
.weekly-bento__subnav {
  color: var(--ht-text-muted) !important;
}

.weekly-bento__subnav a {
  color: var(--ht-accent) !important;
}

.weekly-week-btn.is-active {
  box-shadow: inset 0 0 0 2px var(--ht-accent) !important;
}

/* ---- Grocery lists ---- */
.grocery-page__header h1,
.grocery-detail-hero__title,
.grocery-items-panel__head,
.grocery-empty-inner h3,
.grocery-item-row__name {
  color: var(--ht-text) !important;
}

.grocery-page__subtitle,
.grocery-detail-hero__meta,
.grocery-detail-hero__plan,
.grocery-summary-card span,
.grocery-progress-panel__sub,
.grocery-progress-panel__pct,
.grocery-item-row__notes,
.grocery-item-row__cal,
.grocery-empty-inner {
  color: var(--ht-text-muted) !important;
}

.grocery-detail-hero,
.grocery-summary-card,
.grocery-items-panel,
.grocery-card {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.grocery-card__head,
.grocery-items-panel__head,
.grocery-item-row.is-done {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
}

.grocery-card__head h2,
.grocery-summary-card strong,
.grocery-item-row__qty {
  color: var(--ht-text) !important;
}

.grocery-progress-panel {
  background: var(--ht-accent-light) !important;
  border-color: var(--ht-border-strong) !important;
}

.grocery-progress-panel__title {
  color: var(--ht-text) !important;
}

.grocery-progress-bar {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
}

.grocery-item-row {
  border-bottom-color: var(--ht-border) !important;
}

.grocery-item-row.is-done .grocery-item-row__name,
.grocery-item-row.is-done .grocery-item-row__qty {
  color: var(--ht-text-muted) !important;
}

/* ---- Recipe list ---- */
.recipe-list-card {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.recipe-list-card__title,
.recipe-list-card__title-text,
.recipe-list-nutrition-compact strong {
  color: var(--ht-text) !important;
}

.recipe-list-card__title {
  background: var(--ht-surface-muted) !important;
  border-bottom-color: var(--ht-border) !important;
}

.recipe-list-card__view-link:hover,
.recipe-list-card__view-link:focus-visible {
  background: var(--ht-surface-muted) !important;
}

.recipe-list-card__view-link:hover .recipe-list-card__title,
.recipe-list-card__view-link:focus-visible .recipe-list-card__title {
  background: var(--ht-accent-light) !important;
}

.recipe-list-card__view-link:hover .recipe-list-card__title-text,
.recipe-list-card__view-link:focus-visible .recipe-list-card__title-text {
  color: var(--ht-accent-hover) !important;
}

.recipe-meta-grid__label,
.recipe-list-category-heading__badge,
.recipe-list-category-empty,
.recipe-list-nutrition-compact {
  color: var(--ht-text-muted) !important;
}

.recipe-list-category-heading {
  color: var(--ht-text) !important;
  border-bottom-color: var(--ht-border) !important;
}

.recipe-list-category-empty {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border-strong) !important;
}

.recipe-list-meal-filter-compact {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

/* ---- Meal plan food search tabs ---- */
.plan-search-tab {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text-secondary) !important;
}

.plan-search-tab.is-active {
  background: var(--ht-accent-light) !important;
  border-color: var(--ht-accent) !important;
  color: var(--ht-accent-hover) !important;
}

/* ---- Contextual planning nav (meal planner tabs) ---- */
.contextual-nav__shortcut-mobile-toggle {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.contextual-nav__shortcut-toggle-chevron {
  color: var(--ht-text-muted) !important;
}

/* ---- Recipe detail ---- */
.recipe-h1 {
  color: var(--ht-text) !important;
}

.recipe-detail-panel {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.recipe-detail-panel__head {
  background: var(--ht-surface-muted) !important;
  border-bottom-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.recipe-macro-table th,
.recipe-macro-table td {
  color: var(--ht-text-secondary) !important;
  border-color: var(--ht-border) !important;
}

.recipe-macro-table th {
  background: var(--ht-surface-muted) !important;
  color: var(--ht-text) !important;
}

.recipe-macro-table tfoot td {
  color: var(--ht-text) !important;
  background: var(--ht-surface-muted) !important;
}

/* ---- Workout plan list / detail extras ---- */
.workout-plan-card,
.weekly-workout-day-card,
.plan-day-panel,
.plan-card-item {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.plan-card-item h4,
.plan-card-item a {
  color: var(--ht-text) !important;
}

/* ---- Weekly calendar picker (meal + workout plans) ---- */
.weekly-picker-trigger__label,
.weekly-calendar-modal__hint,
.weekly-calendar-grid__dow {
  color: var(--ht-text-muted) !important;
}

.weekly-calendar-modal__panel {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.weekly-calendar-modal__head {
  background: var(--ht-surface-muted) !important;
  border-bottom-color: var(--ht-border) !important;
}

.weekly-calendar-modal__head h2 {
  color: var(--ht-text) !important;
}

.weekly-calendar-modal__nav button {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text-secondary) !important;
}

.weekly-calendar-modal__nav button:hover {
  background: var(--ht-surface-muted) !important;
}

.weekly-calendar-day {
  background: var(--ht-surface-muted) !important;
  color: var(--ht-text) !important;
}

.weekly-calendar-day.is-outside {
  color: var(--ht-text-muted) !important;
}

/* ---- Weekly plan day view (meal sections) ---- */
.day-plan .meal-section {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow-sm) !important;
}

.day-plan .meal-section__header {
  background: var(--ht-surface-muted) !important;
  border-bottom-color: var(--ht-border) !important;
}

.day-plan .meal-section__title,
.day-plan .meal-item__name {
  color: var(--ht-text) !important;
}

.day-plan .meal-section__meta,
.day-plan .meal-item__detail,
.day-plan .meal-section__empty {
  color: var(--ht-text-muted) !important;
}

.day-plan .meal-item__kcal {
  color: var(--ht-text-secondary) !important;
}

.day-plan .meal-item {
  border-bottom-color: var(--ht-border) !important;
}

.day-plan .meal-item__badge {
  background: var(--ht-accent-light) !important;
  color: var(--ht-accent-hover) !important;
}

/* Kill light-only gradients from inline page styles */
.day-tile__head,
.day-tile__head:hover,
.grocery-card__head,
.grocery-card:hover .grocery-card__head {
  background: var(--ht-surface-muted) !important;
  background-image: none !important;
}

.day-tile:hover .day-tile__head,
.day-tile__head:hover {
  background: var(--ht-accent-light) !important;
}

/* ---- Contextual planning nav tabs ---- */
.contextual-nav {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
}

.contextual-nav__label {
  color: var(--ht-text-muted) !important;
}

.contextual-nav__link {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text-secondary) !important;
}

.contextual-nav__link:hover,
.contextual-nav__link:focus-visible {
  background: var(--ht-accent-light) !important;
  border-color: var(--ht-border-strong) !important;
  color: var(--ht-accent-hover) !important;
}

.contextual-nav__link--current,
.contextual-nav__link--current:visited {
  background: var(--ht-accent-light) !important;
  border-color: var(--ht-accent) !important;
  color: var(--ht-accent-hover) !important;
}

/* ---- Grocery list cards (list page extras) ---- */
.grocery-card__meta,
.grocery-card__stat-label {
  color: var(--ht-text-muted) !important;
}

.grocery-card__stat {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
}

.grocery-card__stat-value {
  color: var(--ht-accent) !important;
}

.grocery-empty {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border-strong) !important;
  color: var(--ht-text-secondary) !important;
}

.grocery-empty h2 {
  color: var(--ht-text) !important;
}

/* ---- Recipe build / ingredient tabs ---- */
.recipe-tab {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text-secondary) !important;
}

.recipe-tab.is-active {
  background: var(--ht-accent-light) !important;
  border-color: var(--ht-accent) !important;
  color: var(--ht-accent-hover) !important;
}

.recipe-search-card,
.recipe-ingredient-card {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

.recipe-build-head h1 {
  color: var(--ht-text) !important;
}

.recipe-result-item {
  border-bottom-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
}

/* ---- Workout plan cards ---- */
.plan-card-item p {
  color: var(--ht-text-muted) !important;
}

.plan-card-item .text-slate-500 {
  color: var(--ht-text-muted) !important;
}

/* ---- Weekly workout plan day view ---- */
.day-plan .workout-entry {
  background: var(--ht-surface) !important;
  border-color: var(--ht-border) !important;
  color: var(--ht-text) !important;
  box-shadow: var(--ht-shadow-sm) !important;
}

.day-plan .workout-entry__header {
  background: var(--ht-surface-muted) !important;
  background-image: none !important;
  border-bottom-color: var(--ht-border) !important;
}

.day-plan .workout-entry__title {
  color: var(--ht-text) !important;
}

.day-plan .workout-entry__meta,
.day-plan .workout-entry__label {
  color: var(--ht-text-muted) !important;
}

.day-plan .workout-entry__text {
  color: var(--ht-text-secondary) !important;
}

.day-plan .workout-shared-pill {
  background: var(--ht-info-light) !important;
  color: var(--ht-accent) !important;
}

.day-plan .day-plan__empty {
  background: var(--ht-surface-muted) !important;
  border-color: var(--ht-border-strong) !important;
  color: var(--ht-text-muted) !important;
}