/*
 * Mealie Drop Family Theme v0.5.0
 * Dialogs, menus and settings/profile refinement for Mealie v3.25.x.
 * Loaded last. Semantic error/warning/success colors remain native.
 */

/* ------------------------------------------------------------
   Dialogs: BaseDialog.vue
   ------------------------------------------------------------ */
.v-dialog > .v-overlay__content > .v-card {
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 22px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 28px 90px rgba(60, 38, 16, .24), 0 0 0 1px rgba(255,255,255,.16) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
}

.v-theme--dark .v-dialog > .v-overlay__content > .v-card {
  box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(255,158,45,.08) !important;
}

/* Primary/info/accent dialog headers join the Family palette.
   Do not override warning/error/success because those carry meaning. */
.v-dialog .v-toolbar.bg-primary,
.v-dialog .v-toolbar.bg-info,
.v-dialog .v-toolbar.bg-accent {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c 0%, var(--mdf2-amber-2) 30%, var(--mdf2-amber) 72%, #ff7b08 100%) !important;
  border-bottom: 1px solid rgba(150,73,7,.18) !important;
  box-shadow: 0 8px 24px rgba(240,138,23,.14) !important;
}

.v-dialog .v-toolbar.bg-primary *,
.v-dialog .v-toolbar.bg-info *,
.v-dialog .v-toolbar.bg-accent * {
  color: #2b1706 !important;
}

/* Restore Vuetify semantic toolbar colors that the v0.1 global toolbar rule
   would otherwise wash out. */
.v-dialog .v-toolbar.bg-error {
  color: rgb(var(--v-theme-on-error, 255, 255, 255)) !important;
  background: rgb(var(--v-theme-error, 179, 38, 30)) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(179,38,30,.18) !important;
}

.v-dialog .v-toolbar.bg-warning {
  color: rgb(var(--v-theme-on-warning, 40, 28, 0)) !important;
  background: rgb(var(--v-theme-warning, 245, 158, 11)) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(245,158,11,.16) !important;
}

.v-dialog .v-toolbar.bg-success {
  color: rgb(var(--v-theme-on-success, 255, 255, 255)) !important;
  background: rgb(var(--v-theme-success, 56, 142, 60)) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(56,142,60,.16) !important;
}

.v-dialog .v-toolbar.bg-error *,
.v-dialog .v-toolbar.bg-warning *,
.v-dialog .v-toolbar.bg-success * {
  color: inherit !important;
}

.v-dialog > .v-overlay__content > .v-card > .v-card-actions {
  min-height: 58px !important;
  padding: 10px 14px !important;
  background: color-mix(in srgb, var(--mdf2-panel-strong) 88%, transparent) !important;
  border-top: 1px solid var(--mdf2-line) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.v-dialog .v-card-text {
  color: var(--mdf2-text) !important;
  line-height: 1.55 !important;
}

.v-dialog .v-btn.text-grey,
.v-dialog .v-btn.text-gray {
  color: var(--mdf2-text-soft) !important;
}

.v-overlay__scrim {
  opacity: .42 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.v-theme--dark .v-overlay__scrim {
  opacity: .58 !important;
}

/* ------------------------------------------------------------
   Menus / selects / context menus
   ------------------------------------------------------------ */
.v-menu > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content > .v-list,
.v-select__content,
.v-autocomplete__content {
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 18px 52px rgba(66,42,17,.18) !important;
  backdrop-filter: blur(24px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
}

.v-theme--dark .v-menu > .v-overlay__content > .v-card,
.v-theme--dark .v-menu > .v-overlay__content > .v-list,
.v-theme--dark .v-select__content,
.v-theme--dark .v-autocomplete__content {
  box-shadow: 0 22px 60px rgba(0,0,0,.50), 0 0 0 1px rgba(255,158,45,.05) !important;
}

.v-menu .v-list-item,
.v-select__content .v-list-item,
.v-autocomplete__content .v-list-item {
  min-height: 42px !important;
  margin: 3px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

.v-menu .v-list-item:hover,
.v-select__content .v-list-item:hover,
.v-autocomplete__content .v-list-item:hover,
.v-menu .v-list-item--active,
.v-select__content .v-list-item--active,
.v-autocomplete__content .v-list-item--active {
  background: rgba(240,138,23,.09) !important;
  border-color: rgba(240,138,23,.17) !important;
}

.v-menu .v-list-item--active .v-list-item-title,
.v-select__content .v-list-item--active .v-list-item-title,
.v-autocomplete__content .v-list-item--active .v-list-item-title {
  color: var(--mdf2-amber-deep) !important;
  font-weight: 680 !important;
}

.v-theme--dark .v-menu .v-list-item--active .v-list-item-title,
.v-theme--dark .v-select__content .v-list-item--active .v-list-item-title,
.v-theme--dark .v-autocomplete__content .v-list-item--active .v-list-item-title {
  color: var(--mdf2-amber-2) !important;
}

/* RecipeSettingsMenu activator is color=accent. */
.v-main .v-btn.bg-accent:not(.v-btn--icon) {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c, var(--mdf2-amber), #ff7b08) !important;
  border-color: rgba(163,77,4,.20) !important;
}

/* ------------------------------------------------------------
   Settings/profile cards
   ------------------------------------------------------------ */
.v-main .narrow-container .v-card--variant-outlined,
.v-main .v-card--variant-outlined.v-card--link,
.v-main section > .v-row > .v-col > .v-card--variant-outlined:not([class*="bg-"]) {
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,184,78,.035), transparent 40%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 12px 34px rgba(74,48,22,.065) !important;
}

.v-theme--dark .v-main .narrow-container .v-card--variant-outlined,
.v-theme--dark .v-main .v-card--variant-outlined.v-card--link,
.v-theme--dark .v-main section > .v-row > .v-col > .v-card--variant-outlined:not([class*="bg-"]) {
  background:
    linear-gradient(135deg, rgba(255,158,45,.045), transparent 40%),
    rgba(12,16,15,.78) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.27) !important;
}

.v-main .v-card--variant-outlined.v-card--link {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.v-main .v-card--variant-outlined.v-card--link:hover {
  transform: translateY(-3px) !important;
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 20px 50px rgba(74,48,22,.12), var(--mdf2-glow) !important;
}

.v-theme--dark .v-main .v-card--variant-outlined.v-card--link:hover {
  box-shadow: 0 22px 56px rgba(0,0,0,.42), var(--mdf2-glow) !important;
}

/* Profile cards contain SVG illustrations. Keep them decorative, not screaming. */
.v-main .v-card--variant-outlined.v-card--link img[src$=".svg"] {
  filter: sepia(.08) saturate(.92) drop-shadow(0 10px 18px rgba(74,48,22,.08)) !important;
}

.v-theme--dark .v-main .v-card--variant-outlined.v-card--link img[src$=".svg"] {
  filter: sepia(.30) saturate(1.10) brightness(.82) drop-shadow(0 0 18px rgba(240,138,23,.10)) !important;
}

.v-main .v-card--variant-outlined.v-card--link .v-card-title {
  color: var(--mdf2-text) !important;
  font-weight: 720 !important;
}

.v-main .v-card--variant-outlined.v-card--link .v-card-text {
  color: var(--mdf2-text-soft) !important;
  line-height: 1.55 !important;
}

.v-main .v-card--variant-outlined.v-card--link .v-btn.text-info,
.v-main .v-card--variant-outlined.v-card--link .text-info {
  color: var(--mdf2-amber-deep) !important;
  font-weight: 680 !important;
}

.v-theme--dark .v-main .v-card--variant-outlined.v-card--link .v-btn.text-info,
.v-theme--dark .v-main .v-card--variant-outlined.v-card--link .text-info {
  color: var(--mdf2-amber-2) !important;
}

/* ------------------------------------------------------------
   Profile/settings forms
   ------------------------------------------------------------ */
.v-main .narrow-container .v-field--variant-underlined {
  min-height: 48px !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-main .narrow-container .v-field--variant-underlined::before,
.v-main .narrow-container .v-field--variant-underlined::after {
  display: none !important;
}

.v-main .narrow-container .v-field--variant-underlined.v-field--focused {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 3px rgba(240,138,23,.10), 0 8px 22px rgba(74,48,22,.06) !important;
}

.v-main .narrow-container .v-selection-control__input,
.v-dialog .v-selection-control__input,
.v-menu .v-selection-control__input {
  color: var(--mdf2-amber) !important;
}

.v-main .narrow-container .v-switch__track,
.v-dialog .v-switch__track,
.v-menu .v-switch__track {
  border: 1px solid var(--mdf2-line) !important;
}

.v-main .narrow-container .v-switch .v-selection-control--dirty .v-switch__track,
.v-dialog .v-switch .v-selection-control--dirty .v-switch__track,
.v-menu .v-switch .v-selection-control--dirty .v-switch__track {
  background: var(--mdf2-amber) !important;
  opacity: .52 !important;
}

/* Info buttons used as settings toggles should match the family accent. */
.v-main .narrow-container .v-btn.bg-info:not(.v-btn--icon),
.v-main .narrow-container .v-btn.text-info:not(.v-btn--icon) {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c, var(--mdf2-amber), #ff7b08) !important;
  border: 1px solid rgba(163,77,4,.18) !important;
  box-shadow: 0 8px 22px rgba(240,138,23,.14) !important;
}

/* ------------------------------------------------------------
   Expansion panels / tabs often used by group-household settings
   ------------------------------------------------------------ */
.v-main .v-expansion-panel:not([class*="bg-"]) {
  overflow: hidden !important;
  margin-block: 7px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 15px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 8px 24px rgba(74,48,22,.05) !important;
}

.v-main .v-expansion-panel-title {
  min-height: 50px !important;
  color: var(--mdf2-text) !important;
  font-weight: 650 !important;
}

.v-main .v-expansion-panel-title--active {
  color: var(--mdf2-amber-deep) !important;
  background: rgba(240,138,23,.055) !important;
}

.v-theme--dark .v-main .v-expansion-panel-title--active {
  color: var(--mdf2-amber-2) !important;
}

.v-main .v-tabs {
  padding: 4px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 14px !important;
  background: var(--mdf2-panel-soft) !important;
}

.v-main .v-tab {
  min-height: 42px !important;
  border-radius: 10px !important;
}

.v-main .v-tab--selected {
  color: var(--mdf2-amber-deep) !important;
  background: rgba(240,138,23,.09) !important;
  font-weight: 680 !important;
}

.v-theme--dark .v-main .v-tab--selected {
  color: var(--mdf2-amber-2) !important;
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-dialog > .v-overlay__content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .v-dialog > .v-overlay__content > .v-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
  }

  .v-dialog .v-toolbar {
    min-height: 52px !important;
    padding-inline: 10px !important;
  }

  .v-dialog .v-toolbar-title {
    min-width: 0 !important;
    font-size: 1.08rem !important;
    white-space: normal !important;
    line-height: 1.22 !important;
  }

  .v-dialog > .v-overlay__content > .v-card > .v-card-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .v-main .narrow-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  .v-main .v-card--variant-outlined.v-card--link:hover {
    transform: none !important;
  }

  .v-main .v-card--variant-outlined.v-card--link > .d-flex.justify-space-between {
    min-width: 0 !important;
  }

  .v-main .v-card--variant-outlined.v-card--link .v-card-title,
  .v-main .v-card--variant-outlined.v-card--link .v-card-text {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .v-menu > .v-overlay__content,
  .v-select__content,
  .v-autocomplete__content {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-main .v-card--variant-outlined.v-card--link,
  .v-menu .v-list-item,
  .v-select__content .v-list-item,
  .v-autocomplete__content .v-list-item {
    transition: none !important;
  }
}