/*
 * Mealie Drop Family Theme v0.6.0
 * Family workflow layer for Mealie v3.25.x:
 * Meal Planner + Shopping Lists.
 * Loaded after settings/forms/search layers.
 */

/* ------------------------------------------------------------
   Meal Planner shell and week controls
   ------------------------------------------------------------ */

/* Planner's main container is a direct v-container around its controls. */
.v-main .v-container > .d-flex.ga-2:first-child {
  width: fit-content;
  max-width: 100%;
  padding: 7px;
  margin-bottom: 10px;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background: var(--mdf2-panel) !important;
  box-shadow: 0 10px 28px rgba(74,48,22,.07) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}

.v-theme--dark .v-main .v-container > .d-flex.ga-2:first-child {
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px rgba(255,158,45,.04) !important;
}

.v-main .v-container > .d-flex.ga-2:first-child > .v-btn:not(.bg-primary) {
  border: 1px solid var(--mdf2-line) !important;
  background: var(--mdf2-panel-strong) !important;
  color: var(--mdf2-text) !important;
  box-shadow: none !important;
}

.v-main .v-container > .d-flex.ga-2:first-child > .v-btn.bg-primary {
  color: #2b1706 !important;
  background: linear-gradient(135deg,#ffc15c,var(--mdf2-amber),#ff7b08) !important;
  border: 1px solid rgba(163,77,4,.22) !important;
  box-shadow: 0 9px 24px rgba(240,138,23,.18), inset 0 1px rgba(255,255,255,.48) !important;
}

/* Date picker opened from Meal Planner. */
.v-menu .v-date-picker {
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--mdf2-text) !important;
}

.v-menu .v-date-picker .v-date-picker-month__day--selected .v-btn,
.v-menu .v-date-picker .v-date-picker-month__day--selected .v-btn.bg-primary {
  color: #2b1706 !important;
  background: linear-gradient(135deg,var(--mdf2-amber-2),var(--mdf2-amber)) !important;
}

/* ------------------------------------------------------------
   Meal Planner day columns
   Actual Mealie component: MealPlanLayout.vue -> .col-borders
   ------------------------------------------------------------ */

.v-main .col-borders {
  min-width: 0 !important;
  padding: 9px !important;
}

.v-main .col-borders > * {
  min-width: 0 !important;
}

/* Day header from MealPlanDayHeader.vue. It has rounded-sm px-2 and a
   Vuetify primary border. Preserve "today" semantics while making the
   surface part of Family Theme. */
.v-main .col-borders > .v-card.rounded-sm.px-2,
.v-main .col-borders .v-card.rounded-sm.px-2 {
  overflow: hidden !important;
  border: 1px solid rgba(240,138,23,.28) !important;
  border-left: 4px solid var(--mdf2-amber) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(120deg,rgba(255,184,78,.12),transparent 45%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 10px 28px rgba(74,48,22,.08) !important;
  transform: none !important;
}

.v-theme--dark .v-main .col-borders .v-card.rounded-sm.px-2 {
  background:
    linear-gradient(120deg,rgba(255,158,45,.10),transparent 45%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.30) !important;
}

.v-main .col-borders .v-card.rounded-sm.px-2 .text-primary {
  color: var(--mdf2-amber-deep) !important;
}

.v-theme--dark .v-main .col-borders .v-card.rounded-sm.px-2 .text-primary {
  color: var(--mdf2-amber-2) !important;
}

/* Meal sections rendered in planner/view.vue. */
.v-main .col-borders > .v-card.pl-4.pr-2,
.v-main .col-borders .v-card.pl-4.pr-2 {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-soft) !important;
  box-shadow: 0 9px 24px rgba(74,48,22,.055) !important;
  transform: none !important;
}

.v-main .col-borders .text-overline {
  color: var(--mdf2-text-soft) !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
}

/* Reused RecipeCardMobile inside planner should be a little calmer than
   catalogue cards and must never inherit desktop hover lift. */
.v-main .col-borders .v-list-item.py-0.px-0 {
  border-radius: 14px !important;
}

/* Planner edit-mode meal cards. */
.v-main .col-borders .v-card.my-2.ml-4.mr-1 {
  overflow: hidden !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 15px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 9px 25px rgba(74,48,22,.07) !important;
  transform: none !important;
}

.v-main .col-borders .v-card.my-2.ml-4.mr-1:hover {
  border-color: rgba(240,138,23,.27) !important;
  box-shadow: 0 13px 32px rgba(74,48,22,.10) !important;
}

.v-main .col-borders .v-card.my-2.ml-4.mr-1 .v-chip.bg-accent {
  color: var(--mdf2-amber-deep) !important;
  background: linear-gradient(135deg,rgba(255,184,78,.28),rgba(240,138,23,.15)) !important;
  border: 1px solid rgba(240,138,23,.25) !important;
}

.v-theme--dark .v-main .col-borders .v-card.my-2.ml-4.mr-1 .v-chip.bg-accent {
  color: #ffd8a2 !important;
  background: linear-gradient(135deg,rgba(255,158,45,.22),rgba(240,138,23,.10)) !important;
}

/* ------------------------------------------------------------
   Shopping Lists index
   Mealie uses .narrow-container and cards with .left-border.
   ------------------------------------------------------------ */

.v-main .narrow-container .v-card.left-border {
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-left: 5px solid var(--mdf2-amber) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(110deg,rgba(255,184,78,.09),transparent 35%),
    var(--mdf2-panel-strong) !important;
  box-shadow: var(--mdf2-shadow) !important;
  transform: none !important;
  transition: transform .17s ease,border-color .17s ease,box-shadow .17s ease !important;
}

.v-main .narrow-container .v-card.left-border:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(240,138,23,.30) !important;
  border-left-color: var(--mdf2-amber) !important;
  box-shadow: var(--mdf2-shadow-hover) !important;
}

.v-main .narrow-container .v-card.left-border .v-card-title {
  color: var(--mdf2-text) !important;
  font-weight: 720 !important;
}

.v-main .narrow-container .v-card.left-border .v-card-title > .v-icon {
  color: var(--mdf2-amber-deep) !important;
}

.v-theme--dark .v-main .narrow-container .v-card.left-border .v-card-title > .v-icon {
  color: var(--mdf2-amber-2) !important;
}

.v-main .narrow-container .v-card.left-border .v-btn[variant="plain"],
.v-main .narrow-container .v-card.left-border .v-btn.v-btn--variant-plain {
  color: var(--mdf2-text-soft) !important;
}

/* ------------------------------------------------------------
   Shopping List detail
   ------------------------------------------------------------ */

.v-main .md-container {
  max-width: 1040px !important;
}

/* Header actions row from shopping-lists/[id].vue. */
.v-main .md-container .v-container.px-0 > .v-row[no-gutters],
.v-main .md-container .v-container.px-0 > .v-row.v-row--no-gutters {
  min-width: 0 !important;
}

/* Add-item field/form gets its own tray. */
.v-main .md-container > section.py-2.d-flex.flex-column.ga-4 > .my-4,
.v-main .md-container > section.py-2.d-flex.flex-column.ga-4 > div:first-child {
  border-radius: 16px !important;
}

/* Label sections. Preserve dynamic label background colors on the title,
   only style structure around them. */
.v-main .md-container .shopping-list-section {
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background: var(--mdf2-panel) !important;
  box-shadow: 0 12px 34px rgba(74,48,22,.075) !important;
}

.v-theme--dark .v-main .md-container .shopping-list-section {
  box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
}

.v-main .md-container .shopping-list-section > .v-expansion-panel-title,
.v-main .md-container .shopping-list-section .section-title {
  min-height: 50px !important;
  padding-inline: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.005em !important;
}

.v-main .md-container .shopping-list-section .v-expansion-panel-text__wrapper {
  padding: 6px 10px 9px !important;
}

/* Individual shopping rows from ShoppingListItem.vue. */
.v-main .md-container .shopping-list-section .v-container.ml-2.pa-0 {
  width: calc(100% - 4px) !important;
  max-width: calc(100% - 4px) !important;
  margin: 4px 2px !important;
  padding: 5px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background-color .15s ease,border-color .15s ease !important;
}

.v-main .md-container .shopping-list-section .v-container.ml-2.pa-0:hover {
  background: rgba(240,138,23,.055) !important;
  border-color: rgba(240,138,23,.12) !important;
}

.v-main .md-container .shopping-list-section .v-checkbox .v-selection-control__input {
  color: var(--mdf2-amber) !important;
}

.v-main .md-container .shopping-list-section .handle .v-icon,
.v-main .md-container .shopping-list-section .v-btn.handle .v-icon {
  color: var(--mdf2-amber-deep) !important;
}

.v-theme--dark .v-main .md-container .shopping-list-section .handle .v-icon,
.v-theme--dark .v-main .md-container .shopping-list-section .v-btn.handle .v-icon {
  color: var(--mdf2-amber-2) !important;
}

/* Checked-items panel: intentionally secondary, but not unreadable. */
.v-main .md-container > section.py-2 .v-expansion-panels.flat > .v-expansion-panel,
.v-main .md-container > section.py-2 .v-expansion-panels > .v-expansion-panel {
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-soft) !important;
  box-shadow: none !important;
}

.v-main .md-container .strike-through,
.v-main .md-container .strike-through-note {
  color: var(--mdf2-text-soft) !important;
  opacity: .72 !important;
}

/* Linked recipes area under a shopping list. */
.v-main .md-container > .v-lazy.mt-6 > section {
  padding: 14px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background: var(--mdf2-panel) !important;
  box-shadow: var(--mdf2-shadow) !important;
}

/* ------------------------------------------------------------
   Mobile family workflows
   ------------------------------------------------------------ */

@media (max-width: 959px) {
  .v-main .col-borders {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 0 !important;
  }

  .v-main .col-borders .v-card.rounded-sm.px-2 {
    border-radius: 14px !important;
  }

  .v-main .md-container,
  .v-main .narrow-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v-main .md-container .shopping-list-section {
    border-radius: 15px !important;
  }
}

@media (max-width: 600px) {
  /* Planner top controls wrap instead of squeezing beyond viewport. */
  .v-main .v-container > .d-flex.ga-2:first-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  .v-main .v-container > .d-flex.ga-2:first-child > .v-btn.bg-primary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  .v-main .col-borders .v-card.pl-4.pr-2 {
    padding: 7px !important;
  }

  /* Shopping-list index title/actions may contain long names. */
  .v-main .narrow-container .v-card.left-border .v-card-title {
    min-width: 0 !important;
    padding: 10px 11px !important;
    gap: 2px !important;
  }

  .v-main .narrow-container .v-card.left-border .v-card-title > span.flex-grow-1 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .v-main .md-container {
    padding-inline: 7px !important;
  }

  .v-main .md-container .shopping-list-section .v-expansion-panel-text__wrapper {
    padding: 5px 4px 8px !important;
  }

  .v-main .md-container .shopping-list-section .v-container.ml-2.pa-0 {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 6px 4px !important;
    overflow: hidden !important;
  }

  .v-main .md-container .shopping-list-section .v-row.flex-nowrap.align-center {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v-main .md-container .shopping-list-section .v-row.flex-nowrap.align-center > .v-col {
    min-width: 0 !important;
  }

  .v-main .md-container .shopping-list-section .text-truncate {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-main .narrow-container .v-card.left-border,
  .v-main .col-borders .v-card.my-2.ml-4.mr-1,
  .v-main .md-container .shopping-list-section .v-container.ml-2.pa-0 {
    transition: none !important;
  }
}