/* Gardens, locations, dashboard, planting events, wishlist, harvest log.
   Views: app/views/{gardens,locations,dashboard,planting_events,
   planting_wishlist_items,harvest_records}. */

/* ==========================================================================
   Page layout
   ========================================================================== */

.garden-page {
  width: 100%;
}

/* Centered narrow page used by forms and the location page */
.garden-form-page {
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 48rem) {
  .garden-form-page {
    width: calc(2 / 3 * 100%);
  }
}

.garden-title {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);
}

.garden-title--spaced {
  margin-bottom: 1.5rem;
}

/* Title row with a primary action on the right */
.garden-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.garden-page-header--top {
  align-items: flex-start;
}

.garden-header__subtitle {
  color: var(--color-gray-500);
}

/* Vertical rhythm between children (space-y-N) */
.garden-stack > :not(:last-child) {
  margin-block-end: var(--stack-gap);
}

.garden-stack--1 { --stack-gap: .25rem; }
.garden-stack--2 { --stack-gap: .5rem; }
.garden-stack--3 { --stack-gap: .75rem; }
.garden-stack--4 { --stack-gap: 1rem; }

/* ==========================================================================
   Cards
   ========================================================================== */

.garden-card {
  border: 1px solid var(--color-green-800);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: 1.5rem;
}

.garden-card--compact { padding: 1rem; }
.garden-card--tile    { padding: .75rem; }
.garden-card--roomy   { padding: 1.25rem; }
.garden-card--spaced  { margin-bottom: 1.5rem; }
.garden-card--center  { text-align: center; }
.garden-card--anchor  { scroll-margin-top: 5rem; }

.garden-card--link {
  display: block;
}

.garden-card--fade {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .garden-card--link:hover {
    border-color: var(--color-green-300);
  }
}

.garden-card__title {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-semibold);
}

.garden-card__title--spaced {
  margin-bottom: 1rem;
}

.garden-card__intro {
  margin-bottom: 1rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-card__empty {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Row inside a list card (gardens, locations, wishlist) */
.garden-item__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.garden-item__title {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
}

.garden-item__meta {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-item__count {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-item__progress {
  margin-top: .75rem;
}

.garden-item__progress-label {
  margin-top: .25rem;
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* Progress bar: gray track with a green fill */
.garden-progress {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: .5rem;
  border: 0;
  border-radius: 3.40282e38px;
  background-color: var(--color-gray-200);
  overflow: hidden;
}

.garden-progress::-webkit-progress-bar {
  background-color: var(--color-gray-200);
  border-radius: 3.40282e38px;
}

.garden-progress::-webkit-progress-value {
  background-color: var(--color-green-600);
  border-radius: 3.40282e38px;
}

.garden-progress::-moz-progress-bar {
  background-color: var(--color-green-600);
  border-radius: 3.40282e38px;
}

/* ==========================================================================
   Small shared bits: links, pills, empty states, notices
   ========================================================================== */

.garden-link {
  color: var(--color-green-600);
  text-decoration-line: underline;
}

.garden-link--sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

@media (hover: hover) {
  .garden-link:hover {
    text-decoration-line: none;
  }
}

.garden-footer-link {
  margin-top: 1rem;
}

.garden-remove-btn {
  color: var(--color-red-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  cursor: pointer;
}

.garden-remove-btn--fixed {
  flex-shrink: 0;
}

@media (hover: hover) {
  .garden-remove-btn:hover {
    color: var(--color-red-700);
  }
}

.garden-pill {
  display: inline-block;
  border-radius: 3.40282e38px;
  padding: .125rem .5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.garden-pill--green         { background-color: var(--color-green-100);  color: var(--color-green-700); }
.garden-pill--yellow        { background-color: var(--color-yellow-100); color: var(--color-yellow-700); }
.garden-pill--red           { background-color: var(--color-red-100);    color: var(--color-red-700); }
.garden-pill--gray          { background-color: var(--color-gray-100);   color: var(--color-gray-600); }
.garden-pill--orange-strong { background-color: var(--color-orange-200); color: var(--color-orange-800); }
.garden-pill--yellow-strong { background-color: var(--color-yellow-200); color: var(--color-yellow-800); }

.garden-pill--primary {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-700);
  font-weight: var(--font-weight-medium);
}

/* Larger pills on the locations list */
.garden-pill--zone,
.garden-pill--pending {
  padding: .25rem .75rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-pill--zone {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
  font-weight: var(--font-weight-medium);
}

.garden-pill--pending {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}

.garden-pill--fixed {
  flex-shrink: 0;
}

.garden-pill--end {
  flex-shrink: 0;
  margin-left: .5rem;
}

.garden-empty {
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-50);
  padding: 2rem;
  text-align: center;
}

.garden-empty--loading {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

.garden-empty__text {
  margin-bottom: 1rem;
  color: var(--color-gray-500);
}

.garden-empty--loading .garden-empty__text {
  margin-bottom: 0;
}

.garden-empty__hint {
  margin-bottom: 1rem;
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-empty__choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.garden-notice {
  border-radius: var(--radius-lg);
  background-color: var(--color-yellow-50);
  padding: 1.5rem;
}

.garden-notice__title {
  margin-bottom: .5rem;
  color: var(--color-yellow-700);
  font-weight: var(--font-weight-medium);
}

.garden-notice__body {
  margin-bottom: 1rem;
  color: var(--color-yellow-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Category shortcut tiles (dashboard and empty wishlist) */
.garden-category__icon {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

.garden-category__label {
  margin-top: .25rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.garden-category__label--sm {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ==========================================================================
   Forms (gardens and locations)
   ========================================================================== */

.garden-form {
  display: contents;
}

.garden-errors {
  margin-bottom: 1.25rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-red-50);
  padding: .5rem .75rem;
  color: var(--color-red-500);
  font-weight: var(--font-weight-medium);
}

.garden-field {
  margin-block: 1.25rem;
}

.garden-field--tight {
  margin-block: .75rem;
}

.garden-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.garden-label {
  display: block;
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.garden-label--tight {
  margin-bottom: .25rem;
}

.garden-input {
  display: block;
  width: 100%;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.garden-input:focus {
  outline-color: var(--color-green-600);
}

.garden-input--labeled {
  margin-top: .5rem;
}

.garden-form__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.garden-form__submit {
  display: inline;
}

.garden-form__submit-btn {
  width: 100%;
}

@media (min-width: 40rem) {
  .garden-form__submit-btn {
    width: auto;
  }
}

.location-form__subtitle {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
}

.location-form__hint {
  margin-bottom: 1rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.location-form__intro {
  margin-bottom: 1.5rem;
  color: var(--color-gray-600);
}

/* ==========================================================================
   Print task pages
   ========================================================================== */

.garden-print__header {
  margin-bottom: 1.5rem;
}

.garden-print__title {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  font-weight: var(--font-weight-bold);
}

.garden-print__meta {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-print__empty {
  color: var(--color-gray-500);
}

.garden-print__empty--section {
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-print__section {
  margin-top: .5rem;
  margin-bottom: 1rem;
}

.garden-print__section-title {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);
}

.garden-print__year {
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-normal);
}

.garden-print__plants {
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ==========================================================================
   Garden page: actions menu
   ========================================================================== */

.garden-menu {
  position: relative;
}

.garden-menu__toggle {
  border-radius: var(--radius-md);
  padding: .5rem;
  cursor: pointer;
}

.garden-menu__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-gray-600);
}

/* Shown/hidden by the dropdown controller via the .hidden class */
.garden-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin-top: .25rem;
  width: 12rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding-block: .25rem;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

.garden-menu__item {
  display: block;
  padding: .5rem 1rem;
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-menu__item--button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.garden-menu__divider {
  margin-block: .25rem;
  border-top: 1px solid var(--color-gray-100);
}

@media (hover: hover) {
  .garden-menu__toggle:hover {
    background-color: var(--color-gray-100);
  }

  .garden-menu__item:hover {
    background-color: var(--color-gray-50);
  }
}

/* ==========================================================================
   Calendar (calendar_controller.js renders the grid cells)
   ========================================================================== */

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar__nav {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.calendar__nav-btn {
  border-radius: var(--radius-sm);
  padding: .375rem;
  color: var(--color-gray-500);
}

.calendar__nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.calendar__month {
  min-width: 140px;
  border-radius: var(--radius-sm);
  padding: .25rem .5rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

@media (hover: hover) {
  .calendar__nav-btn:hover,
  .calendar__month:hover {
    background-color: var(--color-gray-100);
  }
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
}

.calendar__weekdays {
  margin-bottom: .25rem;
}

.calendar__weekday {
  padding-block: .25rem;
  color: var(--color-gray-400);
  text-align: center;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.calendar__cell {
  height: 6rem;
  border-radius: var(--radius-lg);
}

.calendar__cell--empty {
  background-color: var(--color-gray-50);
}

.calendar__cell--day {
  border: 1px solid var(--color-gray-100);
  background-color: var(--color-white);
  padding: .25rem;
  overflow: hidden;
}

.calendar__cell--today {
  border-color: var(--color-green-500);
  background-color: var(--color-green-50);
}

.calendar__day-number {
  margin-bottom: .25rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.calendar__day-number--today {
  color: var(--color-green-700);
}

.calendar__event {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .125rem;
  border-radius: var(--radius-sm);
  padding-inline: .125rem;
}

.calendar__event--completed {
  opacity: .5;
  text-decoration-line: line-through;
}

.calendar__event--skipped {
  opacity: .3;
  text-decoration-line: line-through;
}

.calendar__event--clickable {
  cursor: pointer;
}

@media (hover: hover) {
  .calendar__event:hover {
    background-color: var(--color-gray-100);
  }
}

.calendar__event-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-700);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.calendar__more {
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-gray-100);
  padding-top: .75rem;
}

.calendar__legend-item {
  display: flex;
  align-items: center;
  gap: .25rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* Colored dot per event type (legend and calendar cells) */
.calendar__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 3.40282e38px;
}

.calendar__dot--small {
  flex-shrink: 0;
  width: .375rem;
  height: .375rem;
}

.calendar__dot--start-indoors { background-color: var(--color-purple-500); }
.calendar__dot--harden-off    { background-color: var(--color-yellow-500); }
.calendar__dot--transplant    { background-color: var(--color-blue-500); }
.calendar__dot--direct-sow    { background-color: var(--color-green-500); }
.calendar__dot--harvest       { background-color: var(--color-orange-500); }
.calendar__dot--cleanup       { background-color: var(--color-gray-400); }

/* Temporary highlight when a calendar entry scrolls to its task */
.calendar-highlight,
.planting-event.calendar-highlight {
  background-color: var(--color-orange-50);
  box-shadow: 0 0 0 1px var(--color-orange-400);
}

/* ==========================================================================
   Task filter (task_filter_controller.js)
   ========================================================================== */

.task-filter__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.task-filter__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}

@media (min-width: 40rem) {
  .task-filter__header {
    flex-direction: row;
    align-items: center;
  }

  .task-filter__controls {
    flex-direction: row;
    align-items: center;
  }
}

.task-filter__search {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: .375rem .75rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

@media (min-width: 40rem) {
  .task-filter__search {
    width: 11rem;
  }
}

.task-filter__search:focus {
  outline-style: none;
  border-color: var(--color-green-500);
  box-shadow: 0 0 0 1px var(--color-green-500);
}

.task-filter__tabs {
  display: flex;
  gap: .25rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding: .125rem;
}

.task-filter__tab {
  border-radius: var(--radius-md);
  padding: .375rem .75rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

@media (hover: hover) {
  .task-filter__tab:hover {
    color: var(--color-gray-700);
  }
}

.task-filter__tab--active {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.task-filter__count {
  margin-top: .75rem;
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ==========================================================================
   Plants in a garden
   ========================================================================== */

.garden-plant {
  border-bottom: 1px solid var(--color-gray-100);
  padding-bottom: .75rem;
}

.garden-plant:last-child {
  border-width: 0;
  padding-bottom: 0;
}

.garden-plant__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.garden-plant__main {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.garden-plant__image,
.garden-plant__placeholder {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
}

.garden-plant__image {
  object-fit: cover;
}

.garden-plant__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-green-100);
}

.garden-plant__emoji {
  color: var(--color-green-600);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

.garden-plant__name {
  color: var(--color-green-600);
  font-weight: var(--font-weight-medium);
}

@media (hover: hover) {
  .garden-plant__name:hover {
    text-decoration-line: underline;
  }
}

.garden-plant__variety {
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-plant__stats {
  margin-top: .25rem;
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.garden-plant__next {
  margin-top: .5rem;
  border-radius: var(--radius-md);
  background-color: var(--color-green-50);
  padding: .5rem;
}

.garden-plant__next-title {
  margin-bottom: .25rem;
  color: var(--color-green-800);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.garden-plant__next-item {
  color: var(--color-green-700);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.garden-plant__next-name {
  font-weight: var(--font-weight-medium);
}

.garden-plant__next-warning {
  color: var(--color-red-500);
}

/* ==========================================================================
   Succession opportunities
   ========================================================================== */

.succession {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.succession--high   { border-color: var(--color-orange-300); background-color: var(--color-orange-50); }
.succession--medium { border-color: var(--color-yellow-200); background-color: var(--color-yellow-50); }
.succession--low    { border-color: var(--color-green-200);  background-color: var(--color-green-50); }

.succession__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.succession__title {
  color: var(--color-gray-800);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
}

.succession__icon {
  margin-right: .25rem;
}

.succession__plant {
  color: var(--color-green-700);
}

.succession__timing {
  margin-top: .125rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.succession__lead {
  margin-bottom: .75rem;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.succession__emphasis {
  font-weight: var(--font-weight-medium);
}

.succession__crops-label {
  color: var(--color-gray-500);
  text-transform: uppercase;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.succession__crop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  padding: .5rem .75rem;
}

.succession__crop-main {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.succession__crop-action {
  color: var(--color-green-600);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.succession__crop-name {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.succession__crop-details {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.succession__ok   { color: var(--color-green-600); }
.succession__warn { color: var(--color-red-500); }

/* ==========================================================================
   Companion planting tips
   ========================================================================== */

.garden-tip {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: .75rem;
}

.garden-tip--bad  { border-color: var(--color-red-200);   background-color: var(--color-red-50); }
.garden-tip--good { border-color: var(--color-green-200); background-color: var(--color-green-50); }

.garden-tip__row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.garden-tip__icon {
  flex-shrink: 0;
  margin-top: .125rem;
}

.garden-tip--bad  .garden-tip__icon  { color: var(--color-red-500); }
.garden-tip--good .garden-tip__icon  { color: var(--color-green-500); }

.garden-tip__title {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.garden-tip__note {
  margin-top: .125rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.garden-tip--bad  .garden-tip__title { color: var(--color-red-800); }
.garden-tip--bad  .garden-tip__note  { color: var(--color-red-700); }
.garden-tip--good .garden-tip__title { color: var(--color-green-800); }
.garden-tip--good .garden-tip__note  { color: var(--color-green-700); }

/* ==========================================================================
   Add plant to garden
   ========================================================================== */

.garden-add-plant__form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.garden-add-plant__plant {
  flex-grow: 1;
  width: 100%;
}

.garden-add-plant__stage {
  width: 100%;
}

.garden-add-plant__submit {
  flex-shrink: 0;
}

@media (min-width: 40rem) {
  .garden-add-plant__form {
    flex-direction: row;
  }

  .garden-add-plant__plant {
    width: auto;
  }

  .garden-add-plant__stage {
    width: 12rem;
  }
}

.garden-add-plant__hint {
  margin-top: .5rem;
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ==========================================================================
   Planting events (_event partial)
   ========================================================================== */

.planting-event {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: .75rem;
}

.planting-event--completed { background-color: var(--color-green-50); }
.planting-event--skipped   { background-color: var(--color-gray-50); }

.planting-event__body {
  flex-grow: 1;
}

.planting-event__headline {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.planting-event__check,
.planting-event__dash {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.planting-event__check { color: var(--color-green-600); }
.planting-event__dash  { color: var(--color-gray-400); }

.planting-event__dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 3.40282e38px;
  background-color: var(--color-green-600);
}

.planting-event__title {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.planting-event__title--skipped {
  color: var(--color-gray-400);
  text-decoration-line: line-through;
}

.planting-event__meta {
  margin-top: .25rem;
  margin-left: 1rem;
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.planting-event__window { color: var(--color-gray-300); }
.planting-event__done   { color: var(--color-green-600); }

.planting-event__instructions {
  margin-top: .25rem;
  margin-left: 1rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.planting-event__actions {
  flex-shrink: 0;
  margin-left: 1rem;
}

.planting-event__buttons {
  display: flex;
  gap: .5rem;
}

.planting-event__action {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  cursor: pointer;
}

.planting-event__action--confirm {
  color: var(--color-green-600);
  font-weight: var(--font-weight-medium);
}

.planting-event__action--quiet {
  color: var(--color-gray-400);
}

@media (hover: hover) {
  .planting-event__action--confirm:hover { color: var(--color-green-800); }
  .planting-event__action--quiet:hover   { color: var(--color-gray-600); }
}

.planting-event__form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.planting-event__label {
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.planting-event__date {
  width: 9rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: .25rem .5rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ==========================================================================
   Harvest log (_section partial)
   ========================================================================== */

.harvest-log {
  margin-top: .5rem;
  padding-left: 3.25rem;
}

.harvest-log__details {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.harvest-log__summary {
  color: var(--color-gray-500);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) {
  .harvest-log__summary:hover {
    color: var(--color-gray-700);
  }
}

.harvest-log__totals {
  color: var(--color-green-700);
  font-weight: var(--font-weight-medium);
}

.harvest-log__list {
  margin-top: .5rem;
}

.harvest-log__list > :not(:last-child) {
  margin-block-end: .25rem;
}

.harvest-log__record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--color-gray-600);
}

.harvest-log__remove-form {
  display: inline;
}

.harvest-log__remove {
  color: var(--color-red-400);
  cursor: pointer;
}

@media (hover: hover) {
  .harvest-log__remove:hover {
    color: var(--color-red-600);
  }
}

.harvest-log__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}

.harvest-log__input {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: .25rem .375rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.harvest-log__input--qty {
  width: 4rem;
}

.harvest-log__input--notes {
  flex-grow: 1;
}

.harvest-log__submit {
  border-radius: var(--radius-sm);
  background-color: var(--color-green-600);
  padding: .25rem .625rem;
  color: var(--color-white);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  cursor: pointer;
}

@media (hover: hover) {
  .harvest-log__submit:hover {
    background-color: var(--color-green-700);
  }
}

/* ==========================================================================
   Locations
   ========================================================================== */

/* Leaflet map container (locations index and dashboard) */
.location-map {
  z-index: 0;
  margin-bottom: 1.5rem;
  height: 24rem;
  width: 100%;
  border: 1px solid var(--color-green-800);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

.location-map--compact {
  margin-bottom: 0;
  height: 18rem;
}

.location-item__heading {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.location-item__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.location-item__set-primary {
  color: var(--color-gray-500);
  text-decoration-line: underline;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

@media (hover: hover) {
  .location-item__set-primary:hover {
    color: var(--color-green-600);
  }
}

.location-item__frost {
  margin-top: .5rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.location-header {
  margin-bottom: 1.5rem;
}

.location-header__title {
  margin-bottom: .75rem;
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);
}

.location-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.location-primary-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: var(--color-yellow-100);
  padding: .625rem .875rem;
  color: var(--color-yellow-700);
  font-weight: var(--font-weight-medium);
}

.location-footer-link {
  margin-top: 1.5rem;
}

.location-detecting {
  border-radius: var(--radius-lg);
  background-color: var(--color-green-50);
  padding: 1.5rem;
  text-align: center;
}

.location-detecting__spinner {
  display: inline-block;
  margin-bottom: 1rem;
  width: 2rem;
  height: 2rem;
  border: 4px solid var(--color-green-600);
  border-top-color: transparent;
  border-radius: 3.40282e38px;
  animation: garden-spin 1s linear infinite;
}

.location-detecting__title {
  color: var(--color-green-700);
  font-weight: var(--font-weight-medium);
}

.location-detecting__body {
  margin-top: .5rem;
  color: var(--color-green-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Growing zone details partial */
.location-details__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.location-details__term {
  color: var(--color-gray-500);
}

.location-details__value {
  font-weight: var(--font-weight-medium);
}

.location-details__value--zone {
  color: var(--color-green-700);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  font-weight: var(--font-weight-bold);
}

.location-details__warning {
  margin-top: 1rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-yellow-50);
  padding: .75rem;
}

.location-details__warning-text {
  color: var(--color-yellow-700);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* USDA zone legend on Leaflet maps (map_controller.js) */
.map-legend {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: .5rem .75rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.map-legend__title {
  margin-bottom: .25rem;
  font-weight: var(--font-weight-semibold);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.map-legend__swatch {
  display: inline-block;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash-header {
  margin-bottom: 2rem;
}

.dash-section {
  margin-bottom: 1.5rem;
}

.dash-section__title {
  margin-bottom: .75rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.dash-section__header .dash-section__title {
  margin-bottom: 0;
}

.dash-section__intro {
  margin-bottom: 1rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: .75rem;
}

@media (min-width: 40rem) {
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Plant search */
.dash-search {
  display: flex;
  gap: .5rem;
}

.dash-search__input {
  display: inline-block;
  flex-grow: 1;
  width: auto;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Full-screen "Searching..." overlay; search_loading_controller removes .hidden */
.dash-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #fffc;
}

@supports (color: color-mix(in lab, red, red)) {
  .dash-overlay {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}

.dash-overlay__content {
  text-align: center;
}

.dash-overlay__spinner {
  display: inline-block;
  margin-bottom: .75rem;
  width: 2rem;
  height: 2rem;
  border: 4px solid var(--color-green-200);
  border-top-color: var(--color-green-600);
  border-radius: 3.40282e38px;
  animation: garden-spin 1s linear infinite;
}

.dash-overlay__text {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

/* Recently searched */
.dash-recent__title {
  margin-bottom: .5rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-recent__list {
  display: flex;
  gap: .75rem;
  padding-bottom: .5rem;
  overflow-x: auto;
}

.dash-recent__card {
  flex-shrink: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding: .75rem;
  width: 7rem;
  text-align: center;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .dash-recent__card:hover {
    border-color: var(--color-green-400);
  }
}

.dash-recent__image,
.dash-recent__placeholder {
  margin-inline: auto;
  margin-bottom: .5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 3.40282e38px;
}

.dash-recent__image {
  object-fit: cover;
}

.dash-recent__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-green-100);
  animation: garden-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.dash-recent__emoji {
  color: var(--color-green-600);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.dash-recent__name,
.dash-recent__type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.dash-recent__name {
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.dash-recent__type {
  color: var(--color-gray-400);
}

@media (hover: hover) {
  .dash-recent__card:hover .dash-recent__name {
    color: var(--color-green-600);
  }
}

/* Nudges */
.dash-nudge {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.dash-nudge--high   { border-color: var(--color-red-300);    background-color: var(--color-red-50); }
.dash-nudge--medium { border-color: var(--color-orange-300); background-color: var(--color-orange-50); }
.dash-nudge--low    { border-color: var(--color-green-200);  background-color: var(--color-green-50); }

.dash-nudge__row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.dash-nudge__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.dash-nudge__title {
  color: var(--color-gray-800);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-nudge__body {
  margin-top: .125rem;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Suggestion and perennial cards */
.dash-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .25rem;
}

.dash-card__name {
  font-weight: var(--font-weight-medium);
}

.dash-card__tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.dash-card__action {
  color: var(--color-green-600);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.dash-card__description {
  margin-bottom: .5rem;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.dash-card__days {
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.dash-perennial {
  display: flex;
  gap: .75rem;
}

.dash-perennial__image {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.dash-perennial__body {
  flex-grow: 1;
}

.dash-perennial__scientific {
  margin-bottom: .5rem;
  color: var(--color-gray-400);
  font-style: italic;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.dash-perennial__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* This week / upcoming / current garden */
.dash-week {
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-green-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-green-50);
  padding: 1.5rem;
}

.dash-week__title {
  margin-bottom: .75rem;
  color: var(--color-green-800);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-current__title {
  margin-bottom: .5rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-current__meta {
  margin-bottom: .75rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* Onboarding steps */
.dash-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.dash-step__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3.40282e38px;
  background-color: var(--color-gray-200);
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}

.dash-step__num--done {
  background-color: var(--color-green-600);
  color: var(--color-white);
}

.dash-step__title {
  font-weight: var(--font-weight-medium);
}

.dash-step__body {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.dash-step__link {
  display: inline-block;
  margin-top: .25rem;
}

/* Quick actions and category tiles */
.dash-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dash-quick__title {
  font-weight: var(--font-weight-medium);
}

.dash-quick__count {
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.dash-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

/* Planning ahead */
.dash-milestone--current {
  border-color: var(--color-green-600);
  box-shadow: 0 0 0 2px var(--color-green-200);
}

.dash-milestone__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.dash-milestone__month {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
}

.dash-milestone__title {
  margin-bottom: .5rem;
  color: var(--color-gray-800);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}

.dash-milestone__tasks {
  margin-bottom: .5rem;
}

.dash-milestone__task {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.dash-milestone__bullet {
  flex-shrink: 0;
  margin-top: .125rem;
  color: var(--color-green-600);
}

.dash-milestone__tip {
  border-radius: var(--radius-md);
  background-color: var(--color-green-50);
  padding: .5rem;
}

.dash-milestone__tip-text {
  color: var(--color-green-700);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.dash-milestone__tip-label {
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Planting wishlist
   ========================================================================== */

.wishlist__header {
  margin-bottom: 1.5rem;
}

.wishlist__back {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.wishlist__back-link {
  color: var(--color-green-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

@media (hover: hover) {
  .wishlist__back-link:hover {
    color: var(--color-green-800);
  }
}

.wishlist__title {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
  font-weight: var(--font-weight-bold);
}

.wishlist__intro {
  margin-top: .25rem;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.wishlist__category {
  width: 6rem;
}

.wishlist-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.wishlist-item__variety {
  color: var(--color-green-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.wishlist-item__tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

.wishlist-item__description {
  margin-bottom: .75rem;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.wishlist-item__footer {
  margin-top: .75rem;
  border-top: 1px solid var(--color-gray-100);
  padding-top: .75rem;
}

.wishlist-item__footer--row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.wishlist-item__footer-label {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes garden-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes garden-pulse {
  50% {
    opacity: .5;
  }
}