/*
 * Mealie Drop Family Theme v0.2.4
 * Conservative mobile compatibility layer for Mealie v3.25.x.
 *
 * Important:
 * - no :has() selectors;
 * - no width:0 hacks;
 * - respects Vuetify's grid-based v-list-item layout;
 * - loaded last, desktop unaffected.
 */

@media (max-width: 959px) {
  html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  html,
  body,
  #__nuxt,
  .v-application,
  .v-application__wrap,
  .v-main,
  .v-main__wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .v-main .v-container,
  .v-main .v-row,
  .v-main .v-col,
  .v-main .v-card,
  .v-main .v-sheet,
  .v-main .v-list-item,
  .v-main .v-list-item__content {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------
   Mobile catalogue: RecipeCardMobile.vue
   Horizontal card uses v-list-item.py-0.px-0.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-list-item.py-0.px-0 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    grid-template-columns: min(125px, 36vw) minmax(0, 1fr) !important;
  }

  .v-list-item.py-0.px-0 .v-list-item__prepend {
    width: min(125px, 36vw) !important;
    max-width: min(125px, 36vw) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .v-list-item.py-0.px-0 .v-list-item__prepend .v-img,
  .v-list-item.py-0.px-0 .v-list-item__prepend .v-responsive {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v-list-item.py-0.px-0 .v-list-item__content {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .v-list-item.py-0.px-0 .v-list-item__content > .pl-4.d-flex.flex-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
  }

  .v-list-item.py-0.px-0 .v-list-item-title.text-top.text-truncate {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    font-size: 1rem !important;
  }

  .v-list-item.py-0.px-0 .v-list-item-subtitle.text-top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    font-size: .91rem !important;
  }

  .v-list-item.py-0.px-0 .v-list-item-subtitle.text-top .markdown,
  .v-list-item.py-0.px-0 .v-list-item-subtitle.text-top p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .v-theme--light .v-list-item.py-0.px-0 .v-list-item-title,
  .v-theme--light .v-list-item.py-0.px-0 .v-list-item-subtitle,
  .v-theme--light .v-list-item.py-0.px-0 .v-list-item-subtitle *,
  .v-theme--light .v-list-item.py-0.px-0 .v-card-actions,
  .v-theme--light .v-list-item.py-0.px-0 .v-card-actions * {
    color: #2a241f !important;
  }

  .v-theme--dark .v-list-item.py-0.px-0 .v-list-item-title {
    color: #f8f3eb !important;
  }

  .v-theme--dark .v-list-item.py-0.px-0 .v-list-item-subtitle,
  .v-theme--dark .v-list-item.py-0.px-0 .v-list-item-subtitle * {
    color: #c8beb1 !important;
  }

  .v-list-item.py-0.px-0 .v-card-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* RecipeChips.vue uses bg-accent explicitly. Make mobile consistent
     without relying on a parent :has() selector. */
  .v-theme--light .v-main .v-chip.bg-accent {
    color: #9b4d05 !important;
    background: linear-gradient(135deg, rgba(255,184,78,.30), rgba(240,138,23,.18)) !important;
    border: 1px solid rgba(240,138,23,.28) !important;
  }

  .v-theme--dark .v-main .v-chip.bg-accent {
    color: #ffd8a2 !important;
    background: linear-gradient(135deg, rgba(255,158,45,.22), rgba(240,138,23,.11)) !important;
    border: 1px solid rgba(255,158,45,.28) !important;
  }
}

/* ------------------------------------------------------------
   Mobile recipe page.
   RecipePage.vue root:
   v-container.px-0 > v-card.d-print-none
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-container.px-0 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .v-container.px-0 > .v-card.d-print-none {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /* RecipePageHeader root div, then RecipePageInfoCard flex wrapper. */
  .v-container.px-0 > .v-card.d-print-none
  > div:first-child > .d-flex.justify-end.flex-wrap.align-stretch {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child > .d-flex.justify-end.flex-wrap.align-stretch > .v-img {
    order: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child > .d-flex.justify-end.flex-wrap.align-stretch > .v-card {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child > .d-flex.justify-end.flex-wrap.align-stretch > .v-card > .v-card-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .v-card-title.text-h5 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    font-size: 1.35rem !important;
    line-height: 1.22 !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .markdown,
  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .markdown *,
  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .v-card-text p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .v-card-text > .v-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  > div:first-child .v-card-text > .v-container > .mx-6 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  /* Recipe actions. */
  .v-container.px-0 .fixed-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
  }

  .v-container.px-0 .fixed-bar .custom-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  /* Main RecipePage v-row: remove Vuetify negative gutter on tiny screens. */
  .v-container.px-0 > .v-card.d-print-none > .v-card-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px 22px !important;
    overflow: hidden !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > .v-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > .v-row > .v-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .recipe-step-title,
  .list-group-item > .v-card .v-card-text {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Comments. */
  .v-container.px-0 > .px-1.my-4.d-print-none {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    min-width: 0 !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------
   v0.2.6 verified mobile recipe fixes
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /*
   * RecipePageInfoCard.vue renders SafeMarkdown as a plain root <div class="my-3">.
   * It does NOT add a .markdown class. Give that exact description block its own
   * safe inset so hydration/layout changes cannot put the first glyph under the viewport edge.
   */
  .v-container.px-0 > .v-card.d-print-none
  .d-flex.justify-end.flex-wrap.align-stretch
  > .v-card > .v-card-text
  > .v-divider.my-2 + .my-3 {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 12px 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .v-container.px-0 > .v-card.d-print-none
  .d-flex.justify-end.flex-wrap.align-stretch
  > .v-card > .v-card-text
  > .v-divider.my-2 + .my-3 > p {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #2a241f !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .v-theme--dark .v-container.px-0 > .v-card.d-print-none
  .d-flex.justify-end.flex-wrap.align-stretch
  > .v-card > .v-card-text
  > .v-divider.my-2 + .my-3 > p {
    color: #f8f3eb !important;
  }


}