/* Meal Cards - blue theme with card base style.
   Nesting is read from the header shade (darker blue meal / light blue dish)
   and the gap between blocks, not from an indent: bodies carry no horizontal
   padding so a nested dish header spans exactly the same width as its meal
   header. */
@utility meal-card {
  @layer components {
    @apply bg-white rounded-lg shadow-md mb-4;
  }
}

@utility meal-card__header {
  @layer components {
    @apply px-3 py-4 border-b border-blue-300 bg-blue-100 rounded-t-lg;
  }
}

@utility meal-card__body {
  @layer components {
    @apply py-3;

    /* A nested dish is the same width as its meal, so its shadow would spill
       past the meal's edges — the header shade alone carries the nesting. */
    & .dish-card {
      @apply shadow-none;
    }
  }
}

/* Dish Cards - light blue theme with card base style, one shade lighter than
   the meal header so the two read as the same hue at different depths. */
@utility dish-card {
  @layer components {
    @apply bg-white rounded-lg shadow-md;
  }
}

@utility dish-card__header {
  @layer components {
    @apply px-3 py-4 border-b border-blue-200 bg-blue-50 rounded-t-lg;
  }
}

@utility dish-card__body {
  @layer components {
    @apply py-3;
  }
}

/* Meal Type Badges */
@utility meal-type-badge {
  @layer components {
    @apply inline-block px-2 py-1 text-xs font-bold rounded uppercase;
  }
}

@utility meal-type-badge--breakfast {
  @layer components {
    @apply bg-yellow-200 text-yellow-800;
  }
}

@utility meal-type-badge--lunch {
  @layer components {
    @apply bg-blue-200 text-blue-800;
  }
}

@utility meal-type-badge--dinner {
  @layer components {
    @apply bg-red-100 text-red-700;
  }
}

@utility meal-type-badge--snack {
  @layer components {
    @apply bg-yellow-100 text-yellow-700;
  }
}

@utility meal-type-badge--other {
  @layer components {
    @apply bg-gray-200 text-gray-800;
  }
}

/* Dish Type Badges */
@utility dish-type-badge {
  @layer components {
    @apply inline-block px-2 py-1 text-xs font-bold rounded uppercase;
  }
}

@utility dish-type-badge--dish {
  @layer components {
    @apply bg-green-200 text-green-800;
  }
}

@utility dish-type-badge--starter {
  @layer components {
    @apply bg-teal-200 text-teal-800;
  }
}

@utility dish-type-badge--dessert {
  @layer components {
    @apply bg-red-200 text-red-800;
  }
}

/* Form: Group Selection */
@utility group-option {
  @layer components {
    @apply flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors;
  }
}

@utility group-option--meal {
  @layer components {
    @apply border-blue-200 hover:bg-blue-50;
  }
}

@utility group-option--dish {
  @layer components {
    @apply border-green-200 hover:bg-green-50;
  }
}

@utility group-option__label {
  @layer components {
    @apply text-gray-900 font-medium;
  }
}

/* Form: Pill Selection */
@utility pill-option {
  @layer components {
    @apply inline-flex items-center px-3 py-2 mr-2 mb-2 rounded-full border-2 border-gray-300 text-sm font-medium text-gray-700 cursor-pointer transition-all hover:border-blue-400 hover:bg-blue-50;
  }
}

@utility pill-option__label {
  @layer components {
    @apply transition-colors;
  }
}