/*
 * Mealie Drop Family Theme v0.1.0
 * Light-first glass theme with an optional dark mode.
 * Built for readability first: high-contrast text, calmer glass opacity,
 * warm amber accents and subtle food decoration.
 */

:root {
  --mdf-radius: 18px;
  --mdf-radius-sm: 12px;
  --mdf-accent: #f08a17;
  --mdf-accent-strong: #ff971f;
  --mdf-accent-deep: #c86508;
  --mdf-success: #198754;
  --mdf-danger: #c73c45;
  --mdf-warning: #b96a08;
  --mdf-focus: 0 0 0 3px rgba(240, 138, 23, 0.28);
}

/* ------------------------------
   Palette: LIGHT (default/family)
   ------------------------------ */
.v-theme--light {
  --mdf-bg: #f7f3ec;
  --mdf-bg-2: #eee8dd;
  --mdf-text: #25221f;
  --mdf-text-soft: #5f5a53;
  --mdf-text-faint: #7a746c;
  --mdf-surface: rgba(255, 255, 255, 0.86);
  --mdf-surface-strong: rgba(255, 255, 255, 0.96);
  --mdf-surface-soft: rgba(255, 252, 247, 0.74);
  --mdf-border: rgba(141, 103, 55, 0.18);
  --mdf-border-hot: rgba(240, 138, 23, 0.42);
  --mdf-shadow: 0 18px 52px rgba(79, 54, 25, 0.11), 0 2px 8px rgba(79, 54, 25, 0.06);
  --mdf-shadow-hover: 0 24px 58px rgba(79, 54, 25, 0.16), 0 5px 14px rgba(79, 54, 25, 0.08);
  --mdf-nav: rgba(255, 253, 249, 0.91);
  --mdf-input: rgba(255, 255, 255, 0.92);
  --mdf-chip: rgba(240, 138, 23, 0.10);
  --mdf-chip-border: rgba(240, 138, 23, 0.24);
  --mdf-overlay: rgba(74, 50, 22, 0.18);
  --mdf-decor-opacity: 0.13;
  --mdf-decor-filter: saturate(.82) brightness(1.08);
}

/* ------------------------------
   Palette: DARK
   ------------------------------ */
.v-theme--dark {
  --mdf-bg: #080c0c;
  --mdf-bg-2: #12110e;
  --mdf-text: #f7f4ee;
  --mdf-text-soft: #c7c1b7;
  --mdf-text-faint: #a79f93;
  --mdf-surface: rgba(13, 18, 18, 0.76);
  --mdf-surface-strong: rgba(15, 19, 19, 0.92);
  --mdf-surface-soft: rgba(21, 22, 19, 0.64);
  --mdf-border: rgba(255, 158, 45, 0.18);
  --mdf-border-hot: rgba(255, 158, 45, 0.46);
  --mdf-shadow: 0 20px 60px rgba(0, 0, 0, 0.38), 0 2px 10px rgba(0, 0, 0, 0.22);
  --mdf-shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.48), 0 8px 22px rgba(240, 138, 23, 0.08);
  --mdf-nav: rgba(8, 12, 12, 0.86);
  --mdf-input: rgba(18, 24, 24, 0.88);
  --mdf-chip: rgba(255, 158, 45, 0.12);
  --mdf-chip-border: rgba(255, 158, 45, 0.26);
  --mdf-overlay: rgba(0, 0, 0, 0.54);
  --mdf-decor-opacity: 0.30;
  --mdf-decor-filter: saturate(.95) brightness(.86);
}

/* Base page */
.v-application,
.v-main,
.v-main__wrap,
main {
  color: var(--mdf-text) !important;
}

.v-application.v-theme--light {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 186, 88, 0.20), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(112, 150, 85, 0.11), transparent 28rem),
    linear-gradient(180deg, var(--mdf-bg) 0%, var(--mdf-bg-2) 100%) !important;
  background-attachment: fixed !important;
}

.v-application.v-theme--dark {
  background:
    radial-gradient(circle at 12% 7%, rgba(255, 138, 0, 0.18), transparent 31rem),
    radial-gradient(circle at 88% 13%, rgba(97, 128, 62, 0.09), transparent 28rem),
    linear-gradient(180deg, var(--mdf-bg) 0%, var(--mdf-bg-2) 100%) !important;
  background-attachment: fixed !important;
}

/* Food edge decoration, deliberately quiet in Light mode. */
.v-application::before,
.v-application::after {
  content: "";
  position: fixed;
  top: 14%;
  bottom: 8%;
  width: min(250px, 20vw);
  pointer-events: none;
  z-index: 0;
  opacity: var(--mdf-decor-opacity);
  filter: var(--mdf-decor-filter);
  background-repeat: no-repeat;
  background-size: contain;
}
.v-application::before {
  left: 0;
  background-position: left center;
  background-image: url('/mealie-drop-decor-left.webp');
}
.v-application::after {
  right: 0;
  background-position: right center;
  background-image: url('/mealie-drop-decor-right.webp');
}

.v-application__wrap,
.v-main,
.v-navigation-drawer,
.v-app-bar,
.v-toolbar {
  position: relative;
  z-index: 1;
}

.v-main,
.v-container,
.v-layout,
.bg-off-white,
.bg-grey-lighten-5,
.bg-white {
  background: transparent !important;
  background-color: transparent !important;
}

/* Typography: preserve readability, especially in light mode. */
.v-theme--light .text-black,
.v-theme--light .v-card-title,
.v-theme--light .v-card-text,
.v-theme--light .v-list-item-title,
.v-theme--light .v-label,
.v-theme--light .v-field__input,
.v-theme--light input,
.v-theme--light textarea,
.v-theme--light p,
.v-theme--light h1,
.v-theme--light h2,
.v-theme--light h3,
.v-theme--light h4,
.v-theme--light h5,
.v-theme--light h6 {
  color: var(--mdf-text) !important;
}

.v-theme--dark .v-card-title,
.v-theme--dark .v-card-text,
.v-theme--dark .v-list-item-title,
.v-theme--dark .v-label,
.v-theme--dark .v-field__input,
.v-theme--dark input,
.v-theme--dark textarea,
.v-theme--dark p,
.v-theme--dark h1,
.v-theme--dark h2,
.v-theme--dark h3,
.v-theme--dark h4,
.v-theme--dark h5,
.v-theme--dark h6 {
  color: var(--mdf-text) !important;
}

.text-medium-emphasis,
.v-card-subtitle,
.v-list-item-subtitle,
.v-messages,
.v-counter,
.v-field__input::placeholder,
::placeholder {
  color: var(--mdf-text-soft) !important;
  opacity: 1 !important;
}

.v-card-text,
.v-list-item-title,
.v-list-item-subtitle,
.v-field__input,
.v-label,
p {
  line-height: 1.5 !important;
}

/* Glass surfaces */
.v-card,
.v-sheet,
.v-table,
.v-data-table,
.v-menu > .v-overlay__content,
.v-dialog > .v-overlay__content > .v-card,
.v-expansion-panel,
.v-stepper,
.v-timeline-item__body > .v-card {
  background: var(--mdf-surface) !important;
  border: 1px solid var(--mdf-border) !important;
  box-shadow: var(--mdf-shadow) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
}

.v-card,
.v-sheet,
.v-table,
.v-data-table,
.v-dialog > .v-overlay__content > .v-card {
  border-radius: var(--mdf-radius) !important;
}

.v-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v-card:hover {
  transform: translateY(-2px);
  border-color: var(--mdf-border-hot) !important;
  box-shadow: var(--mdf-shadow-hover) !important;
}

/* Top bar and sidebar */
.v-navigation-drawer,
.v-app-bar,
header.v-toolbar,
.v-toolbar {
  background: var(--mdf-nav) !important;
  border-color: var(--mdf-border) !important;
  box-shadow: 0 10px 34px rgba(45, 30, 13, 0.08) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

.v-navigation-drawer .v-list,
.v-navigation-drawer .v-list-item,
.v-list-item {
  background: transparent !important;
}

.v-navigation-drawer .v-list-item,
.v-list-item {
  border-radius: 14px !important;
  margin: 3px 8px !important;
  min-height: 46px !important;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.v-list-item:hover,
.v-list-item--active {
  background: var(--mdf-chip) !important;
  box-shadow: inset 0 0 0 1px var(--mdf-chip-border) !important;
}

.v-list-item--active .v-list-item-title,
.v-list-item--active .v-icon {
  color: var(--mdf-accent-deep) !important;
}

/* Buttons */
.v-btn:not(.v-btn--variant-text):not(.v-btn--variant-plain) {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  min-height: 40px;
  box-shadow: 0 9px 24px rgba(71, 42, 10, 0.12), inset 0 1px 0 rgba(255,255,255,0.22) !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) {
  background: linear-gradient(135deg, #ffb33b 0%, var(--mdf-accent) 56%, #ff7a00 100%) !important;
  color: #251307 !important;
  border: 1px solid rgba(158, 79, 5, 0.22) !important;
  box-shadow: 0 12px 30px rgba(240, 138, 23, 0.22), inset 0 1px 0 rgba(255,255,255,0.42) !important;
}
.v-btn.bg-primary .v-icon,
.v-btn.bg-primary svg,
.v-btn.bg-accent .v-icon,
.v-btn.bg-accent svg,
.v-btn.bg-secondary .v-icon,
.v-btn.bg-secondary svg {
  color: #251307 !important;
  fill: currentColor !important;
}

.v-btn:hover {
  filter: brightness(1.04);
}

.v-btn:focus-visible,
.v-list-item:focus-visible,
.v-field:focus-within {
  outline: none !important;
  box-shadow: var(--mdf-focus) !important;
}

/* Chips / tags */
.v-chip {
  border-radius: 999px !important;
}
.v-chip:not([class*="bg-"]) {
  background: var(--mdf-chip) !important;
  border: 1px solid var(--mdf-chip-border) !important;
  color: var(--mdf-text) !important;
}

/* Inputs: strong contrast in Light mode, no translucent text soup. */
.v-field,
.v-input .v-field,
.v-text-field .v-field,
.v-select .v-field,
.v-autocomplete .v-field {
  background: var(--mdf-input) !important;
  border-radius: 14px !important;
}
.v-field__outline {
  --v-field-border-opacity: .22 !important;
}

/* Alerts */
.v-alert {
  background: var(--mdf-surface-strong) !important;
  color: var(--mdf-text) !important;
  border: 1px solid var(--mdf-border) !important;
  border-radius: var(--mdf-radius-sm) !important;
  box-shadow: var(--mdf-shadow) !important;
  backdrop-filter: blur(18px) !important;
}
.v-alert.bg-success,
.v-alert[class*="bg-success"] { border-color: rgba(25, 135, 84, .38) !important; }
.v-alert.bg-error,
.v-alert[class*="bg-error"] { border-color: rgba(199, 60, 69, .38) !important; }

/* Recipe view: keep instructions easy to scan. */
.v-main .v-card-text,
.v-main .v-list-item-title,
.v-main .v-list-item-subtitle {
  font-size: max(0.95rem, 15px) !important;
}

/* Menus/dialog overlays */
.v-overlay__scrim {
  background: var(--mdf-overlay) !important;
}

/* Accessibility: motion is decoration, not a requirement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* On narrow screens the edge art gets out of the way. */
@media (max-width: 900px) {
  .v-application::before,
  .v-application::after {
    width: 110px;
    opacity: calc(var(--mdf-decor-opacity) * .55);
  }
  .v-card,
  .v-sheet,
  .v-dialog > .v-overlay__content > .v-card {
    border-radius: 14px !important;
  }
}

@media (max-width: 600px) {
  .v-application::before,
  .v-application::after {
    display: none;
  }
  .v-navigation-drawer .v-list-item,
  .v-list-item {
    min-height: 50px !important;
  }
}