/*
 * Mealie Drop Family Theme v0.4.0
 * Creation + recipe editing forms refinement for Mealie v3.25.x.
 * Loaded after search/mobile layers. View-mode recipe/catalog styles stay untouched.
 */

/* ------------------------------------------------------------
   Recipe edit: basic info block
   RecipePage.vue keeps an empty first wrapper in view mode, so :not(:empty)
   scopes these rules to actual edit mode without using :has().
   ------------------------------------------------------------ */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) {
  margin: 2px 0 18px !important;
  padding: 18px 20px 14px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,184,78,.055), transparent 36%),
    var(--mdf2-panel-soft) !important;
  box-shadow: 0 12px 34px rgba(74,48,22,.065), inset 0 1px rgba(255,255,255,.30) !important;
}

.v-theme--dark .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) {
  background:
    linear-gradient(135deg, rgba(255,158,45,.065), transparent 36%),
    rgba(13,17,15,.60) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px rgba(255,158,45,.04) !important;
}

/* Underlined fields in RecipePageInfoEditor become calm glass inputs. */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-field--variant-underlined {
  min-height: 46px !important;
  padding-inline: 12px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 13px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 5px 16px rgba(74,48,22,.04) !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-field--variant-underlined::after,
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-field--variant-underlined::before {
  display: none !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-field--focused {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 3px rgba(240,138,23,.11), 0 8px 20px rgba(74,48,22,.06) !important;
}

/* ------------------------------------------------------------
   Recipe editor toolbar: image/settings/owner controls
   ------------------------------------------------------------ */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) > .d-flex {
  gap: 7px !important;
  margin-bottom: 18px !important;
  padding: 10px 12px !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;
}

.v-theme--dark .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) > .d-flex {
  background: rgba(13,17,15,.58) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) .v-select {
  min-width: min(260px, 100%) !important;
}

/* ------------------------------------------------------------
   Ingredient editor
   ------------------------------------------------------------ */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) {
  margin-bottom: 20px !important;
  padding: 18px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background: var(--mdf2-panel-soft) !important;
  box-shadow: 0 12px 34px rgba(74,48,22,.06) !important;
}

.v-theme--dark .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) {
  background: rgba(13,17,15,.56) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) h2.text-h5 {
  color: var(--mdf2-text) !important;
  opacity: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -.016em !important;
}

/* Each draggable ingredient header row receives a subtle editable surface. */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .d-flex.pt-2.align-center {
  margin-top: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 14px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 7px 20px rgba(74,48,22,.045) !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .handle {
  color: var(--mdf2-amber-deep) !important;
  opacity: .76 !important;
  cursor: grab !important;
}

.v-theme--dark .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .handle {
  color: var(--mdf2-amber-2) !important;
}

/* Filled quantity/unit/food/note fields become one coherent glass row. */
.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .v-field--variant-filled {
  min-height: 44px !important;
  border: 1px solid rgba(121,83,43,.14) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
}

.v-theme--dark .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .v-field--variant-filled {
  border-color: rgba(255,158,45,.14) !important;
  background: rgba(5,8,7,.44) !important;
}

.v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .v-field--variant-filled.v-field--focused {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 2px rgba(240,138,23,.10) !important;
}

/* Preserve split-button geometry while giving it Family Theme accent. */
.v-container.px-0 .split-main.bg-success,
.v-container.px-0 .split-dropdown.bg-success {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c 0%, var(--mdf2-amber) 72%, #ff7b08 100%) !important;
  border-color: rgba(163,77,4,.20) !important;
}

/* ------------------------------------------------------------
   Instruction editor
   ------------------------------------------------------------ */
.v-container.px-0 .list-group-item .v-card .v-field--variant-solo,
.v-container.px-0 .list-group-item .v-card .v-field--variant-filled {
  min-width: 0 !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 11px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: none !important;
}

.v-container.px-0 .list-group-item .v-card .v-field--focused {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 2px rgba(240,138,23,.10) !important;
}

.v-container.px-0 .list-group-item .v-card .handle {
  color: var(--mdf2-amber-deep) !important;
  opacity: .72 !important;
}

.v-theme--dark .v-container.px-0 .list-group-item .v-card .handle {
  color: var(--mdf2-amber-2) !important;
}

/* Markdown editor textareas and ordinary edit textareas. */
.v-container.px-0 .list-group-item textarea,
.v-container.px-0 .list-group-item .v-textarea textarea {
  color: var(--mdf2-text) !important;
  caret-color: var(--mdf2-amber) !important;
  line-height: 1.55 !important;
}

.v-container.px-0 .linked-ingredients-editor {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px dashed rgba(240,138,23,.28) !important;
  border-radius: 12px !important;
  background: rgba(240,138,23,.045) !important;
}

/* ------------------------------------------------------------
   Create recipe flow and generic creation inputs
   ------------------------------------------------------------ */
.v-main .v-field--variant-solo-filled {
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 14px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 9px 24px rgba(74,48,22,.055), inset 0 1px rgba(255,255,255,.28) !important;
}

.v-theme--dark .v-main .v-field--variant-solo-filled {
  box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 1px rgba(255,158,45,.04) !important;
}

.v-main .v-field--variant-solo-filled.v-field--focused {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 3px rgba(240,138,23,.11), 0 10px 26px rgba(74,48,22,.07) !important;
}

/* Creation illustration: quieter in Light, warm glow in Dark. */
.v-main img[src$="recipes-create.svg"] {
  filter: sepia(.08) saturate(.92) drop-shadow(0 12px 22px rgba(74,48,22,.10)) !important;
}

.v-theme--dark .v-main img[src$="recipes-create.svg"] {
  filter: sepia(.22) saturate(1.12) brightness(.88) drop-shadow(0 0 24px rgba(240,138,23,.12)) !important;
}

/* ------------------------------------------------------------
   Edit save FAB and form helper text
   ------------------------------------------------------------ */
.v-main .v-fab.bg-success,
.v-application > .v-fab.bg-success {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c, var(--mdf2-amber), #ff7b08) !important;
  box-shadow: 0 14px 34px rgba(240,138,23,.28), inset 0 1px rgba(255,255,255,.50) !important;
}

.v-theme--light .v-messages__message {
  color: var(--mdf2-text-soft) !important;
}

/* ------------------------------------------------------------
   Mobile edit/create stability
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty),
  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) {
    margin-inline: 0 !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* RecipePageInfoEditor: 3/3/6 columns are too narrow on phones. */
  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-row {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .v-row > .v-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .d-flex.flex-wrap {
    display: block !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:first-child:not(:empty) .d-flex.flex-wrap > .v-input {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) > .d-flex {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) .v-spacer {
    display: none !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(2):not(:empty) .v-select {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ingredient editor already switches to flex-column at mdAndDown; ensure fields shrink. */
  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .v-input,
  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .v-field,
  .v-container.px-0 .list-group-item .v-input,
  .v-container.px-0 .list-group-item .v-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v-container.px-0 > .v-card.d-print-none > .v-card-text > div:nth-child(3):not(:empty) .d-flex.pt-2.align-center {
    padding: 7px !important;
  }

  .v-main .v-card-actions > div[style*="width: 250px"] {
    width: min(250px, 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-container.px-0 .handle {
    transition: none !important;
  }
}