/*
 * Mealie Drop Family Theme v0.3.0
 * Search / Categories / Tags refinement for Mealie v3.25.x.
 * Loaded after the stable v0.2.7 layers.
 */

/* ------------------------------------------------------------
   Recipe selector / search panels
   ------------------------------------------------------------ */
.recipe-selector {
  min-width: 0 !important;
}

.recipe-selector > .v-input:first-child .v-field {
  min-height: 48px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 55%),
    var(--mdf2-panel-strong) !important;
  border-color: rgba(240,138,23,.22) !important;
  box-shadow: 0 10px 28px rgba(67,43,19,.07), inset 0 1px rgba(255,255,255,.34) !important;
}

.v-theme--dark .recipe-selector > .v-input:first-child .v-field {
  background:
    linear-gradient(135deg, rgba(255,158,45,.055), transparent 55%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035) !important;
}

.recipe-selector .recipe-results {
  padding: 6px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-soft) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22) !important;
}

.recipe-selector .recipe-results > .v-list {
  overflow: hidden !important;
  border-radius: 13px !important;
  background: transparent !important;
}

.recipe-selector .recipe-results .v-list-item {
  margin: 3px 0 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

.recipe-selector .recipe-results .v-list-item:hover,
.recipe-selector .recipe-results .v-list-item--active {
  transform: translateX(2px) !important;
  background: rgba(240,138,23,.075) !important;
  border-color: rgba(240,138,23,.16) !important;
}

.recipe-selector .v-chip.bg-primary {
  color: var(--mdf2-amber-deep) !important;
  background: linear-gradient(135deg, rgba(255,184,78,.24), rgba(240,138,23,.13)) !important;
  border: 1px solid rgba(240,138,23,.25) !important;
}

.v-theme--dark .recipe-selector .v-chip.bg-primary {
  color: #ffd8a2 !important;
  background: linear-gradient(135deg, rgba(255,158,45,.19), rgba(240,138,23,.09)) !important;
  border-color: rgba(255,158,45,.24) !important;
}

/* ------------------------------------------------------------
   SearchFilter.vue popup
   Mealie renders the filter card with inline width=400.
   ------------------------------------------------------------ */
.v-overlay__content > .v-card[style*="width: 400px"],
.v-overlay__content .v-card[style*="width: 400px"] {
  width: min(400px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line-hot) !important;
  border-radius: 20px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 24px 70px rgba(74,48,22,.18), 0 0 0 1px rgba(240,138,23,.06) !important;
  backdrop-filter: blur(26px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
}

.v-theme--dark .v-overlay__content > .v-card[style*="width: 400px"],
.v-theme--dark .v-overlay__content .v-card[style*="width: 400px"] {
  box-shadow: 0 28px 78px rgba(0,0,0,.52), 0 0 0 1px rgba(255,158,45,.08) !important;
}

.v-overlay__content .v-card[style*="width: 400px"] > .v-card-text {
  padding: 16px !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-virtual-scroll {
  overflow: hidden auto !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 14px !important;
  background: var(--mdf2-panel-soft) !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-list-item {
  min-height: 44px !important;
  margin: 3px 5px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-list-item:hover {
  background: rgba(240,138,23,.08) !important;
  border-color: rgba(240,138,23,.15) !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-selection-control__input,
.v-overlay__content .v-card[style*="width: 400px"] .v-checkbox-btn,
.v-overlay__content .v-card[style*="width: 400px"] .v-radio {
  color: var(--mdf2-amber) !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-btn-toggle {
  padding: 3px !important;
  gap: 3px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 999px !important;
  background: var(--mdf2-panel-soft) !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-btn-toggle .v-btn {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-btn-toggle .v-btn--active {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c, var(--mdf2-amber)) !important;
}

.v-badge .v-badge__badge.bg-primary {
  color: #fffaf4 !important;
  background: var(--mdf2-amber-deep) !important;
  box-shadow: 0 3px 10px rgba(185,93,8,.25) !important;
}

/* ------------------------------------------------------------
   RecipeOrganizerPage.vue: categories / tags / tools
   ------------------------------------------------------------ */
.v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 {
  min-height: 64px !important;
  margin: 4px 0 18px !important;
  padding: 10px 12px 10px 16px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(110deg, rgba(255,184,78,.10), transparent 34%),
    var(--mdf2-panel) !important;
  box-shadow: 0 12px 34px rgba(74,48,22,.075) !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
}

.v-theme--dark .v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 {
  background:
    linear-gradient(110deg, rgba(255,158,45,.075), transparent 34%),
    var(--mdf2-panel) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.28) !important;
}

.v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 > .v-icon {
  color: var(--mdf2-amber-deep) !important;
}

.v-theme--dark .v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 > .v-icon {
  color: var(--mdf2-amber-2) !important;
}

.v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 .v-toolbar-title {
  color: var(--mdf2-text) !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
}

section > .v-card.bg-background.pb-2 {
  margin: 22px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

section > .v-card.bg-background.pb-2 .v-card-title {
  color: var(--mdf2-text-soft) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

section > .v-card.bg-background.pb-2 .v-card-title::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--mdf2-amber) !important;
  box-shadow: 0 0 0 5px rgba(240,138,23,.10) !important;
}

section > .v-card.bg-background.pb-2 .v-divider {
  margin-top: 9px !important;
  border-color: rgba(240,138,23,.16) !important;
}

.v-card.left-border {
  min-height: 58px !important;
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-left: 4px solid rgba(240,138,23,.72) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(105deg, rgba(255,184,78,.075), transparent 42%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 9px 26px rgba(74,48,22,.07) !important;
  transform: translateY(0) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.v-theme--dark .v-card.left-border {
  background:
    linear-gradient(105deg, rgba(255,158,45,.07), transparent 42%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}

.v-card.left-border:hover {
  transform: translateY(-2px) translateX(2px) !important;
  border-color: rgba(240,138,23,.34) !important;
  border-left-color: var(--mdf2-amber) !important;
  box-shadow: 0 16px 36px rgba(74,48,22,.11), 0 0 0 1px rgba(240,138,23,.055) !important;
}

.v-card.left-border .v-card-actions {
  min-height: 56px !important;
  padding: 8px 10px 8px 14px !important;
}

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

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

.v-card.left-border .v-card-title {
  color: var(--mdf2-text) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

.v-card.left-border .v-btn,
.v-card.left-border .v-btn:hover {
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   Mobile organizer / filter ergonomics
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-overlay__content > .v-card[style*="width: 400px"],
  .v-overlay__content .v-card[style*="width: 400px"] {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(82vh, 620px) !important;
    border-radius: 17px !important;
  }

  .v-overlay__content .v-card[style*="width: 400px"] > .v-card-text {
    padding: 12px !important;
  }

  .v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 {
    min-height: 58px !important;
    margin-bottom: 14px !important;
    padding: 8px 8px 8px 12px !important;
  }

  .v-main .mt-n1.rounded.align-center.position-relative.w-100.left-0.top-0 .v-toolbar-title {
    font-size: 1.25rem !important;
  }

  .v-card.left-border {
    border-radius: 14px !important;
  }

  .v-card.left-border:hover {
    transform: none !important;
  }

  section > .v-card.bg-background.pb-2 {
    margin-top: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-selector .recipe-results .v-list-item,
  .v-card.left-border {
    transition: none !important;
  }
}

/* v0.3.0 test hardening */
.v-main .v-card.left-border {
  border-left-color: rgba(240,138,23,.72) !important;
}

.v-main .v-card.left-border:hover {
  border-left-color: var(--mdf2-amber) !important;
}

.v-card.left-border .v-btn--icon {
  color: var(--mdf2-text-soft) !important;
  background: transparent !important;
  border: 0 !important;
}

.v-theme--dark .v-card.left-border .v-btn--icon {
  color: #d8cfc4 !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-list-item {
  padding-inline: 10px !important;
  gap: 8px !important;
}

.v-overlay__content .v-card[style*="width: 400px"] .v-divider {
  border-color: var(--mdf2-line) !important;
  opacity: 1 !important;
}

/* Vuetify overlays carry the theme class on the teleported overlay root.
   Cover both normal ancestry and theme-on-overlay forms. */
.v-overlay.v-theme--light .v-overlay__content > .v-card[style*="width: 400px"],
.v-overlay__content.v-theme--light > .v-card[style*="width: 400px"] {
  color: #2a241f !important;
  background: rgba(255,253,249,.96) !important;
}

.v-overlay.v-theme--dark .v-overlay__content > .v-card[style*="width: 400px"],
.v-overlay__content.v-theme--dark > .v-card[style*="width: 400px"] {
  color: #f8f3eb !important;
  background: rgba(15,18,17,.97) !important;
  border-color: rgba(255,158,45,.28) !important;
}

.v-overlay.v-theme--dark .v-overlay__content > .v-card[style*="width: 400px"] .v-field,
.v-overlay__content.v-theme--dark > .v-card[style*="width: 400px"] .v-field,
.v-overlay.v-theme--dark .v-overlay__content > .v-card[style*="width: 400px"] .v-virtual-scroll,
.v-overlay__content.v-theme--dark > .v-card[style*="width: 400px"] .v-virtual-scroll {
  color: #f8f3eb !important;
  background: rgba(18,20,17,.84) !important;
}