/*
 * Mealie Drop Family Theme v0.2.0
 * Visual refinement layer for Mealie v3.24.x.
 * Loaded after the v0.1 base theme so rollback stays trivial.
 */

/* ------------------------------------------------------------
   v0.2 design tokens
   ------------------------------------------------------------ */
.v-theme--light {
  --mdf2-page: #f6efe6;
  --mdf2-page-2: #eee2d3;
  --mdf2-panel: rgba(255, 252, 247, 0.82);
  --mdf2-panel-strong: rgba(255, 253, 249, 0.94);
  --mdf2-panel-soft: rgba(255, 248, 238, 0.66);
  --mdf2-line: rgba(121, 83, 43, 0.16);
  --mdf2-line-hot: rgba(240, 138, 23, 0.46);
  --mdf2-text: #2a241f;
  --mdf2-text-soft: #655b52;
  --mdf2-amber: #f08a17;
  --mdf2-amber-2: #ffad37;
  --mdf2-amber-deep: #b95d08;
  --mdf2-green: #708a52;
  --mdf2-shadow: 0 18px 52px rgba(74, 48, 22, 0.11), 0 3px 10px rgba(74, 48, 22, 0.05);
  --mdf2-shadow-hover: 0 28px 70px rgba(74, 48, 22, 0.17), 0 8px 20px rgba(74, 48, 22, 0.08);
  --mdf2-glow: 0 0 0 1px rgba(255, 173, 55, 0.14), 0 12px 34px rgba(240, 138, 23, 0.10);
}

.v-theme--dark {
  --mdf2-page: #080a09;
  --mdf2-page-2: #11110d;
  --mdf2-panel: rgba(12, 16, 15, 0.76);
  --mdf2-panel-strong: rgba(15, 18, 17, 0.92);
  --mdf2-panel-soft: rgba(18, 20, 17, 0.62);
  --mdf2-line: rgba(255, 158, 45, 0.17);
  --mdf2-line-hot: rgba(255, 166, 58, 0.52);
  --mdf2-text: #f8f3eb;
  --mdf2-text-soft: #c8beb1;
  --mdf2-amber: #ff9e2d;
  --mdf2-amber-2: #ffc05a;
  --mdf2-amber-deep: #f08a17;
  --mdf2-green: #8ba66a;
  --mdf2-shadow: 0 22px 64px rgba(0, 0, 0, 0.40), 0 4px 14px rgba(0, 0, 0, 0.24);
  --mdf2-shadow-hover: 0 30px 78px rgba(0, 0, 0, 0.52), 0 10px 28px rgba(240, 138, 23, 0.10);
  --mdf2-glow: 0 0 0 1px rgba(255, 158, 45, 0.18), 0 14px 38px rgba(240, 138, 23, 0.12);
}

/* ------------------------------------------------------------
   App shell: warmer Light Glass, loader-like Dark Glass
   ------------------------------------------------------------ */
.v-application.v-theme--light {
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 179, 78, 0.24), transparent 27rem),
    radial-gradient(circle at 88% 16%, rgba(117, 143, 82, 0.13), transparent 31rem),
    radial-gradient(circle at 50% 82%, rgba(255, 214, 157, 0.16), transparent 34rem),
    linear-gradient(180deg, var(--mdf2-page) 0%, var(--mdf2-page-2) 100%) !important;
}

.v-application.v-theme--dark {
  background:
    radial-gradient(circle at 16% 5%, rgba(255, 133, 0, 0.22), transparent 30rem),
    radial-gradient(circle at 88% 12%, rgba(116, 145, 72, 0.10), transparent 30rem),
    radial-gradient(circle at 50% 88%, rgba(240, 138, 23, 0.07), transparent 35rem),
    linear-gradient(180deg, var(--mdf2-page) 0%, var(--mdf2-page-2) 100%) !important;
}

.v-application::before,
.v-application::after {
  width: min(285px, 21vw) !important;
  transition: opacity .25s ease, filter .25s ease !important;
}

.v-theme--light.v-application::before,
.v-theme--light.v-application::after {
  opacity: .12 !important;
  filter: saturate(.82) brightness(1.09) drop-shadow(0 12px 34px rgba(103, 73, 35, .10)) !important;
}

.v-theme--dark.v-application::before,
.v-theme--dark.v-application::after {
  opacity: .34 !important;
  filter: saturate(1.02) brightness(.84) drop-shadow(0 0 26px rgba(240, 138, 23, .12)) !important;
}

/* ------------------------------------------------------------
   Top app bar: fix disappearing Mealie logo and give it presence
   ------------------------------------------------------------ */
.v-app-bar,
header.v-toolbar {
  min-height: 48px !important;
  border-bottom: 1px solid var(--mdf2-line) !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 8px 30px rgba(67, 43, 19, .07) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

.v-theme--dark .v-app-bar,
.v-theme--dark header.v-toolbar {
  box-shadow: 0 8px 34px rgba(0, 0, 0, .32), 0 1px 0 rgba(255, 158, 45, .10) !important;
}

.v-theme--light .v-app-bar,
.v-theme--light .v-app-bar *,
.v-theme--light header.v-toolbar,
.v-theme--light header.v-toolbar * {
  color: var(--mdf2-text) !important;
}

.v-theme--light .v-app-bar svg,
.v-theme--light header.v-toolbar svg {
  color: var(--mdf2-text) !important;
  fill: currentColor !important;
}

.v-app-bar .v-btn,
header.v-toolbar .v-btn {
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   Sidebar: actual glass panel instead of a flat slab
   ------------------------------------------------------------ */
.v-navigation-drawer {
  background: var(--mdf2-panel-strong) !important;
  border-right: 1px solid var(--mdf2-line) !important;
  box-shadow: 14px 0 40px rgba(67, 43, 19, .08) !important;
  backdrop-filter: blur(26px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
}

.v-theme--dark .v-navigation-drawer {
  box-shadow: 14px 0 46px rgba(0,0,0,.28), inset -1px 0 rgba(255,158,45,.06) !important;
}

.v-navigation-drawer .v-list {
  padding-inline: 7px !important;
}

.v-navigation-drawer .v-list-item {
  min-height: 46px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  margin: 4px 2px !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.v-navigation-drawer .v-list-item:hover {
  transform: translateX(2px);
  background: rgba(240, 138, 23, .08) !important;
  border-color: rgba(240, 138, 23, .14) !important;
}

.v-navigation-drawer .v-list-item--active {
  background: linear-gradient(135deg, rgba(255, 184, 78, .20), rgba(240, 138, 23, .11)) !important;
  border-color: rgba(240, 138, 23, .30) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 22px rgba(240,138,23,.08) !important;
}

.v-theme--dark .v-navigation-drawer .v-list-item--active {
  background: linear-gradient(135deg, rgba(255, 158, 45, .17), rgba(240, 138, 23, .07)) !important;
  border-color: rgba(255, 158, 45, .30) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 24px rgba(240,138,23,.08) !important;
}

.v-navigation-drawer .v-list-item--active .v-list-item-title,
.v-navigation-drawer .v-list-item--active .v-icon {
  color: var(--mdf2-amber-deep) !important;
}

.v-theme--dark .v-navigation-drawer .v-list-item--active .v-list-item-title,
.v-theme--dark .v-navigation-drawer .v-list-item--active .v-icon {
  color: var(--mdf2-amber-2) !important;
}

/* ------------------------------------------------------------
   Search, inputs and filters
   ------------------------------------------------------------ */
.v-field,
.v-input .v-field,
.v-text-field .v-field,
.v-select .v-field,
.v-autocomplete .v-field {
  background: var(--mdf2-panel-strong) !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 8px 24px rgba(67, 43, 19, .05) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.v-field:focus-within,
.v-input .v-field:focus-within {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 3px rgba(240,138,23,.13), 0 12px 30px rgba(67,43,19,.07) !important;
}

.v-field__outline {
  opacity: 0 !important;
}

.v-chip {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.v-chip:not([class*="bg-"]) {
  background: rgba(240, 138, 23, .09) !important;
  border: 1px solid rgba(240, 138, 23, .18) !important;
}

/* ------------------------------------------------------------
   Buttons: closer to Mealie Drop loader
   ------------------------------------------------------------ */
.v-btn:not(.v-btn--variant-text):not(.v-btn--variant-plain):not(.v-btn--icon) {
  min-height: 40px !important;
  border-radius: 999px !important;
  font-weight: 650 !important;
}

.v-btn.bg-primary,
.v-btn.bg-accent,
.v-btn.bg-secondary,
.v-navigation-drawer .v-btn:not(.v-btn--icon):not(.v-btn--variant-text):not(.v-btn--variant-plain) {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c 0%, var(--mdf2-amber-2) 24%, var(--mdf2-amber) 66%, #ff7b08 100%) !important;
  border: 1px solid rgba(163, 77, 4, .20) !important;
  box-shadow: 0 10px 26px rgba(240,138,23,.20), inset 0 1px rgba(255,255,255,.50) !important;
}

.v-btn.bg-primary:hover,
.v-btn.bg-accent:hover,
.v-btn.bg-secondary:hover {
  filter: brightness(1.035) saturate(1.04) !important;
  box-shadow: 0 14px 34px rgba(240,138,23,.27), inset 0 1px rgba(255,255,255,.56) !important;
}

/* ------------------------------------------------------------
   Recipe cards, targeted to Mealie v3.24 RecipeCard.vue
   ------------------------------------------------------------ */
.v-card:has(.recipe-card-footer) {
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 20px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: var(--mdf2-shadow) !important;
  transform: translateY(0) !important;
  transition: transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .20s ease, border-color .20s ease !important;
}

.v-card:has(.recipe-card-footer).on-hover {
  transform: translateY(-4px) !important;
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: var(--mdf2-shadow-hover), var(--mdf2-glow) !important;
}

.v-card:has(.recipe-card-footer) .v-img,
.v-card:has(.recipe-card-footer) .v-responsive {
  overflow: hidden !important;
}

.v-card:has(.recipe-card-footer) .v-img__img {
  transition: transform .34s cubic-bezier(.2,.8,.2,1), filter .34s ease !important;
}

.v-card:has(.recipe-card-footer).on-hover .v-img__img {
  transform: scale(1.035) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.v-card:has(.recipe-card-footer) > .v-card-title {
  color: var(--mdf2-text) !important;
  font-weight: 680 !important;
  letter-spacing: -.012em !important;
  line-height: 1.24 !important;
}

.recipe-card-footer {
  min-height: 86px !important;
  padding-bottom: 4px !important;
}

.recipe-card-tags {
  gap: 6px !important;
}

.recipe-card-tags .v-chip {
  background: linear-gradient(135deg, rgba(255, 184, 78, .24), rgba(240, 138, 23, .14)) !important;
  color: var(--mdf2-amber-deep) !important;
  border: 1px solid rgba(240, 138, 23, .24) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28) !important;
}

.v-theme--dark .recipe-card-tags .v-chip {
  color: #ffd8a2 !important;
  background: linear-gradient(135deg, rgba(255, 158, 45, .20), rgba(240, 138, 23, .10)) !important;
  border-color: rgba(255, 158, 45, .25) !important;
}

.recipe-card-actions .v-btn {
  box-shadow: none !important;
}

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

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

/* Mealie v3.24 hover description.
   Stock component uses: bg-secondary v-card--reveal + inline height:100%.
   Turn that full red wash into a compact glass caption at the image bottom. */
.v-card:has(.recipe-card-footer) .v-card--reveal.bg-secondary {
  top: auto !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 42% !important;
  max-height: 64% !important;
  align-items: flex-end !important;
  opacity: 1 !important;
  color: #fffaf4 !important;
  background:
    linear-gradient(180deg, rgba(34, 24, 15, .05) 0%, rgba(34, 24, 15, .64) 38%, rgba(26, 18, 12, .90) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 -12px 28px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.v-theme--dark .v-card:has(.recipe-card-footer) .v-card--reveal.bg-secondary {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, .06) 0%, rgba(5, 6, 5, .70) 38%, rgba(5, 6, 5, .94) 100%) !important;
  border-top-color: rgba(255,158,45,.20) !important;
}

.v-card:has(.recipe-card-footer) .v-card--reveal .v-card-text,
.v-card:has(.recipe-card-footer) .v-card--reveal .descriptionWrapper,
.v-card:has(.recipe-card-footer) .v-card--reveal .descriptionWrapper *,
.v-card:has(.recipe-card-footer) .v-card--reveal p,
.v-card:has(.recipe-card-footer) .v-card--reveal span {
  color: #fffaf4 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.62) !important;
}

.v-card:has(.recipe-card-footer) .v-card--reveal .v-card-text {
  padding: 16px 16px 13px !important;
  font-size: .94rem !important;
  font-weight: 560 !important;
  line-height: 1.42 !important;
}

/* ------------------------------------------------------------
   General panels, dialogs, tables and settings screens
   ------------------------------------------------------------ */
.v-card:not(:has(.recipe-card-footer)),
.v-sheet,
.v-data-table,
.v-table,
.v-dialog > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content,
.v-expansion-panel,
.v-stepper {
  border-color: var(--mdf2-line) !important;
  background: var(--mdf2-panel) !important;
  box-shadow: var(--mdf2-shadow) !important;
}

.v-dialog > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content,
.v-expansion-panel,
.v-stepper {
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

.v-dialog > .v-overlay__content > .v-card {
  border-radius: 22px !important;
}

.v-data-table,
.v-table {
  overflow: hidden !important;
}

/* Keep ordinary list rows calm. v0.1 globally gave every list item margins,
   which is good for navigation but too loud in forms/menus. */
.v-main .v-list-item,
.v-menu .v-list-item,
.v-dialog .v-list-item {
  margin: 2px 4px !important;
  border-radius: 12px !important;
}

/* ------------------------------------------------------------
   Typography and small polish
   ------------------------------------------------------------ */
.v-main h1,
.v-main h2,
.v-main h3,
.v-main .text-h4,
.v-main .text-h5 {
  letter-spacing: -.018em !important;
}

.v-theme--light .text-medium-emphasis,
.v-theme--light .v-card-subtitle,
.v-theme--light .v-list-item-subtitle {
  color: var(--mdf2-text-soft) !important;
}

.v-divider {
  border-color: var(--mdf2-line) !important;
  opacity: 1 !important;
}

.v-overlay__scrim {
  backdrop-filter: blur(3px) !important;
}

/* ------------------------------------------------------------
   Mobile: keep the family mode practical
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .v-card:has(.recipe-card-footer) {
    border-radius: 16px !important;
  }

  .v-card:has(.recipe-card-footer).on-hover {
    transform: none !important;
  }

  .v-navigation-drawer .v-list-item:hover {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .v-card:has(.recipe-card-footer) .v-card--reveal.bg-secondary {
    min-height: 46% !important;
    max-height: 70% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-card:has(.recipe-card-footer),
  .v-card:has(.recipe-card-footer) .v-img__img,
  .v-navigation-drawer .v-list-item {
    transition: none !important;
  }
}