/*
 * Mealie "Pantry" theme — warm, editorial, paper-and-ink instead of Material.
 * Injected into every Mealie page by /opt/mealie/theme/inject.sh at container start.
 *
 * Vuetify keeps its CSS in cascade layers, so the plain rules here win without
 * specificity fights. The one exception is Vuetify's !important utilities
 * (bg-*, elevation-*, text-*): those are beaten from `pantry-important`, which
 * this file declares before any Vuetify layer exists.
 */
@layer pantry-important;
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap");

/* ---------- palette ---------- */

:root,
.v-theme--light {
  --paper: #f5efe4;
  --card: #fffcf6;
  --sunk: #ede5d6;
  --ink: #2b241e;
  --ink-soft: #5a4f45;
  --muted: #8b7e71;
  --line: #e3d9c8;
  --line-strong: #cfc2ad;
  --accent: #b5532c;
  --accent-ink: #fffaf3;
  --accent-tint: #f3e0d3;
  --herb: #5d6b43;
  --herb-tint: #e5e7d6;
  --shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 8px 24px -12px rgba(60, 40, 20, .18);

  --v-theme-background: 245, 239, 228;
  --v-theme-surface: 255, 252, 246;
  --v-theme-surface-bright: 255, 252, 246;
  --v-theme-surface-light: 237, 229, 214;
  --v-theme-surface-variant: 43, 36, 30;
  --v-theme-on-surface-variant: 245, 239, 228;
  --v-theme-on-background: 43, 36, 30;
  --v-theme-on-surface: 43, 36, 30;
  --v-theme-primary: 181, 83, 44;
  --v-theme-primary-darken-1: 150, 64, 30;
  --v-theme-on-primary: 255, 250, 243;
  --v-theme-secondary: 93, 107, 67;
  --v-theme-secondary-darken-1: 72, 84, 50;
  --v-theme-on-secondary: 255, 250, 243;
  --v-theme-accent: 93, 107, 67;
  --v-theme-on-accent: 255, 250, 243;
  --v-theme-info: 90, 79, 69;
  --v-theme-on-info: 255, 250, 243;
  --v-theme-success: 93, 107, 67;
  --v-theme-warning: 196, 138, 42;
  --v-theme-error: 168, 52, 40;
  --v-border-color: 120, 95, 70;
  --v-hover-opacity: .05;
}

:root:has(.v-application.v-theme--dark),
.v-theme--dark {
  --paper: #191613;
  --card: #221e1a;
  --sunk: #2b2621;
  --ink: #efe7da;
  --ink-soft: #cfc4b4;
  --muted: #9a8e80;
  --line: #342e28;
  --line-strong: #4a4239;
  --accent: #e0835a;
  --accent-ink: #1d1410;
  --accent-tint: #3a271d;
  --herb: #a9b685;
  --herb-tint: #2c2f22;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);

  --v-theme-background: 25, 22, 19;
  --v-theme-surface: 34, 30, 26;
  --v-theme-surface-bright: 43, 38, 33;
  --v-theme-surface-light: 43, 38, 33;
  --v-theme-surface-variant: 239, 231, 218;
  --v-theme-on-surface-variant: 25, 22, 19;
  --v-theme-on-background: 239, 231, 218;
  --v-theme-on-surface: 239, 231, 218;
  --v-theme-primary: 224, 131, 90;
  --v-theme-primary-darken-1: 200, 110, 72;
  --v-theme-on-primary: 29, 20, 16;
  --v-theme-secondary: 169, 182, 133;
  --v-theme-secondary-darken-1: 140, 153, 106;
  --v-theme-on-secondary: 25, 22, 19;
  --v-theme-accent: 169, 182, 133;
  --v-theme-on-accent: 25, 22, 19;
  --v-theme-info: 207, 196, 180;
  --v-theme-on-info: 25, 22, 19;
  --v-theme-success: 169, 182, 133;
  --v-theme-warning: 222, 170, 80;
  --v-theme-error: 226, 110, 92;
  --v-border-color: 239, 231, 218;
}

/* ---------- type ---------- */

html, body, .v-application {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.v-application {
  background: var(--paper) !important;
  color: var(--ink);
}
h1, h2, h3, .v-card-title, .v-toolbar-title, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.text-headline-large, .text-headline-medium, .text-headline-small, .text-display-small,
.v-list-subheader, .recipe-title, .headline {
  font-family: "Fraunces", Georgia, serif !important;
  font-optical-sizing: auto;
  letter-spacing: -.01em !important;
  font-weight: 500 !important;
  color: var(--ink);
}
.v-btn, .v-chip, .v-tab, .v-list-item-title, .v-label, .v-field, .v-card-text, .v-card-subtitle {
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* No Material ink ripples or state overlays */
.v-ripple__container { display: none !important; }

/* ---------- elevation: hairlines, not shadows ---------- */

@layer pantry-important {
  [class*="elevation-"], .v-btn--variant-elevated, .v-card--variant-elevated, .v-sheet, .v-app-bar, .v-toolbar, .v-navigation-drawer, .v-menu > .v-overlay__content > *, .v-expansion-panel::after {
    box-shadow: none !important;
  }
}

/* ---------- top bar ---------- */

.v-app-bar.v-toolbar {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  backdrop-filter: saturate(1.2) blur(10px);
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.v-app-bar .v-toolbar-title { font-size: 1.35rem !important; font-weight: 600 !important; }
.v-app-bar .v-icon { color: var(--ink-soft); }
.v-app-bar a .v-icon { color: var(--accent) !important; }
.v-app-bar .v-field {
  background: var(--sunk) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}
.v-app-bar .v-field input::placeholder { color: var(--muted) !important; opacity: 1; }

/* ---------- side nav ---------- */

.v-navigation-drawer {
  background: var(--paper) !important;
  border-right: 1px solid var(--line) !important;
}
.v-navigation-drawer .v-divider { border-color: var(--line) !important; opacity: 1; }
.v-navigation-drawer .v-list-item-title { font-size: .92rem !important; font-weight: 500; color: var(--ink-soft); }
.v-navigation-drawer .v-list-item .v-icon { color: var(--muted); opacity: 1; }
.v-navigation-drawer .v-list-item--nav { border-radius: 10px !important; min-height: 40px !important; }
.v-navigation-drawer .v-list-item--nav:hover { background: var(--sunk); }
.v-navigation-drawer .v-list-item--active { background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); }
.v-navigation-drawer .v-list-item--active .v-list-item__overlay { opacity: 0 !important; }
.v-navigation-drawer .v-list-item--active .v-list-item-title,
.v-navigation-drawer .v-list-item--active .v-icon { color: var(--accent) !important; font-weight: 600; }
/* the "Create" button */
.v-navigation-drawer .v-btn--size-large {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 12px !important;
  height: 44px !important;
  font-weight: 600 !important;
}
.v-navigation-drawer .v-btn--size-large .v-icon { color: var(--accent) !important; }

/* ---------- buttons ---------- */

.v-btn { border-radius: 10px; font-weight: 500 !important; }
.v-btn--rounded { border-radius: 999px !important; }
.v-btn--variant-elevated, .v-btn--variant-flat {
  border: 1px solid transparent;
}
.v-btn--icon { border-radius: 999px !important; }
.v-btn__overlay { background: currentColor; }

/* the filter row and sort buttons over the recipe grid */
.search-row .v-btn, .search-container .v-btn--variant-elevated {
  background: var(--card) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: .82rem !important;
}
.search-row .v-btn .v-icon { color: var(--muted) !important; }
.search-row .v-btn:hover { border-color: var(--line-strong) !important; color: var(--ink) !important; }
.search-row .v-badge__badge { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* ---------- inputs ---------- */

.v-field { border-radius: 12px !important; }
.v-field--variant-outlined .v-field__outline { color: var(--line-strong); --v-field-border-opacity: 1; }
.v-field--variant-outlined.v-field--focused .v-field__outline { color: var(--accent); }
.v-field--variant-filled, .v-field--variant-solo-filled, .v-field--variant-solo {
  background: var(--sunk) !important;
  box-shadow: none !important;
}
.v-field--variant-filled .v-field__outline::before, .v-field--variant-filled .v-field__outline::after { border-color: transparent !important; }
.search-box .v-field {
  background: var(--card) !important;
  border-radius: 14px !important;
  min-height: 52px;
}

/* ---------- cards ---------- */

.v-card {
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}
.v-card--link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.v-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
  border-color: var(--line-strong) !important;
}
.v-card--link .v-card__overlay { display: none; }
.v-card .v-img:first-child, .v-card > .v-responsive:first-child { border-radius: 15px 15px 0 0; }
.v-card .v-card-title { font-size: 1.2rem !important; line-height: 1.3 !important; padding-top: 14px; }
.v-card-text, .v-card-subtitle { color: var(--ink-soft); }

/* recipe card description hover */
.v-card .v-img .v-responsive__content > div[class*="bg-"],
.v-card .v-overlay__scrim { background: rgba(30, 22, 15, .72) !important; }

/* ---------- chips / tags ---------- */

.v-chip { border-radius: 999px !important; font-weight: 500; }
.recipe-card-tags .v-chip, .v-chip.v-chip--label {
  background: var(--herb-tint) !important;
  color: var(--herb) !important;
  height: 24px !important;
  font-size: .75rem !important;
  padding: 0 10px !important;
}
.recipe-card-tags .v-chip:hover { background: var(--accent-tint) !important; color: var(--accent) !important; }
.v-chip .v-chip__overlay { display: none; }

/* ---------- lists, menus, dialogs ---------- */

.v-overlay__content > .v-list, .v-overlay__content > .v-card, .v-menu .v-list {
  background: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}
.v-dialog .v-card { box-shadow: 0 30px 80px -30px rgba(30, 20, 10, .5) !important; }
.v-overlay__scrim { background: rgb(30, 22, 15) !important; }
.v-tooltip > .v-overlay__content {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 8px !important;
  font-size: .78rem;
}
.v-divider { border-color: var(--line) !important; opacity: 1 !important; }

/* ---------- recipe page ---------- */

.v-main .v-container > .v-card:not(.v-card--link),
.v-main .v-card--flat { border: none !important; background: transparent !important; }
.v-checkbox .v-selection-control__input .v-icon { color: var(--line-strong); }
.v-selection-control--dirty .v-icon, .v-checkbox--checked .v-icon { color: var(--accent) !important; }

/* round action buttons (favourite, timeline, edit, more) */
.v-btn--icon.bg-info, .v-btn--icon.bg-primary, .v-btn--icon.bg-secondary, .v-btn--icon.bg-accent {
  background: var(--card) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
}

/* ---------- scrollbars ---------- */

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::selection { background: var(--accent-tint); color: var(--ink); }

/* ---------- fixes found on real pages ---------- */

html, body { background: var(--paper) !important; }
/* text sitting on a coloured bar keeps the bar's on-colour, not ink */
:is(.bg-primary, .bg-secondary, .bg-accent, .bg-info) :is(h1, h2, h3, .v-card-title, .v-toolbar-title) { color: inherit; }

@layer pantry-important {
  /* recipe description revealed on card hover */
  .v-card--reveal {
    background: linear-gradient(180deg, rgba(28, 20, 14, .35), rgba(28, 20, 14, .82)) !important;
    color: #fbf4ea !important;
  }
  /* round recipe action buttons (favourite, timeline, edit, more) */
  .v-btn.rounded-circle.bg-info, .v-btn.rounded-circle.bg-primary, .v-btn.rounded-circle.bg-secondary {
    background: var(--card) !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--line) !important;
  }
  .v-btn.rounded-circle:is(.bg-info, .bg-primary, .bg-secondary) .v-icon { color: var(--ink-soft) !important; }
  .v-btn.rounded-circle:is(.bg-info, .bg-primary, .bg-secondary):hover { border-color: var(--line-strong) !important; color: var(--accent) !important; }
  .v-btn.rounded-circle:is(.bg-info, .bg-primary, .bg-secondary):hover .v-icon { color: var(--accent) !important; }
}

/* recipe page title: a proper headline */
.v-main .v-card-title.text-h5 {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  letter-spacing: -.02em !important;
}
.v-rating .v-btn { color: var(--accent) !important; opacity: .85; }
.v-card--reveal .v-card-text { color: #fbf4ea !important; font-size: .9rem; line-height: 1.5; }

@layer pantry-important {
  /* the login / register screens */
  .bg-off-white { background: var(--paper) !important; }
}

/* compact (phone) recipe cards */
.v-card--link .v-list-item-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 1.08rem !important;
  font-weight: 500 !important;
  color: var(--ink);
}
.v-card--link .v-list-item { background: transparent !important; }
.v-card--link .v-list-item__prepend > .v-img { border-radius: 15px 0 0 15px; }