/* ELJ brand v2, Field Day register (same design as eddielathamjones.com; spec: DESIGN.md in
   eddielathamjones/eddielathamjones.com). Fonts are injected by nginx (mealie.nginx.conf).
   Paper ground, white sticker cards with a 3px ink outline and a hard ink drop shadow,
   Fredoka headings, Barlow prose, Barlow Condensed labels, cobalt + mustard accents. */
:root {
  --cobalt: #2350A0; --lift: #869FCB; --paper: #F2EDE1; --paper-2: #E6DFCD; --ink: #1D1F23; --ink-2: #3A3D42;
  --pin: #D33A2C; --mustard: #E8B13A; --butter: #F0CF7A; --sage: #A9BF84; --sky: #C4CAD3; --white: #FFFFFF;
  --display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* Vuetify's main bundle is loaded crossorigin and injects theme colors via a
   dynamically-appended <style> tag at hydration time, which lands after this
   stylesheet in the DOM and wins any specificity tie. Out-specify it
   deliberately (repeated classes are a valid way to raise specificity). */
html body .v-theme--dark.v-application.v-application,
html body .v-theme--light.v-application.v-application {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
}

html body .v-theme--dark.v-card.v-card,
html body .v-theme--light.v-card.v-card,
html body .v-theme--dark.v-sheet.v-sheet,
html body .v-theme--light.v-sheet.v-sheet {
  background-color: var(--white) !important;
  color: var(--ink) !important;
}

html body .v-theme--dark.v-card.v-card *:not(.v-chip):not(.v-btn),
html body .v-theme--light.v-card.v-card *:not(.v-chip):not(.v-btn),
html body .v-theme--dark.v-application.v-application *:not(.v-chip):not(.v-btn):not(.v-toolbar):not(.v-toolbar *),
html body .v-theme--light.v-application.v-application *:not(.v-chip):not(.v-btn):not(.v-toolbar):not(.v-toolbar *) {
  color: var(--ink) !important;
}

/* ---- Type ---- */
.v-application,
.v-card-text,
.v-list-item-subtitle,
.text-body-1, .text-body-2,
p, li, td, input, textarea {
  font-family: var(--body) !important;
}
.v-card-title,
.v-toolbar__title,
.v-list-item-title,
.v-btn,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
h1, h2, h3, h4, h5 {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.v-card-title { line-height: 1.25 !important; }
/* small labels: chips, captions, overlines -> Barlow Condensed caps */
.v-chip, .text-caption, .text-overline, .v-label {
  font-family: var(--label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
.v-chip, .text-overline { text-transform: uppercase !important; }
/* recipe body (instructions/notes): roomier prose */
.v-card-text p, .markdown p { font-size: 1.05rem; line-height: 1.65; }
a:not(.v-btn):not(.v-list-item):not(.v-card) {
  color: var(--cobalt) !important;
  text-decoration-color: var(--mustard) !important;
  text-decoration-thickness: 2px;
}

/* ---- Header: paper, 3px ink rule (no blue bar) ---- */
html body .v-application.v-application .v-app-bar.v-app-bar,
html body .v-application.v-application .v-app-bar.v-app-bar .v-toolbar__content {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
html body .v-application.v-application .v-app-bar.v-app-bar { border-bottom: 3px solid var(--ink) !important; }
html body .v-application.v-application .v-app-bar.v-app-bar *:not(input) { color: var(--ink) !important; }

/* ---- Stickers: top-level cards (not cards inside cards, not menus) ---- */
html body .v-application .v-card.v-card:not(.v-card .v-card):not(.v-overlay .v-card) {
  border: 3px solid var(--ink) !important;
  border-radius: 16px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .v-application .v-card.v-card--link:not(.v-card .v-card):hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink) !important;
}
/* ink rule under a recipe card's photo */
.v-card > .v-img:first-child, .v-card > a > .v-img:first-child { border-bottom: 3px solid var(--ink); }
/* dialogs and menus: sticker too, a bit lighter */
html body .v-overlay .v-card.v-card:not(.v-card .v-card),
html body .v-overlay .v-list.v-list {
  border: 3px solid var(--ink) !important;
  border-radius: 16px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}
html body .v-card .v-card.v-card { box-shadow: none !important; }

/* ---- Pills: buttons and chips ---- */
.v-btn:not(.v-btn--icon) { border-radius: 999px !important; }
html body .v-application.v-application .v-btn.v-btn--variant-elevated,
html body .v-application.v-application .v-btn.v-btn--variant-flat:not(.v-btn--icon) {
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
html body .v-application.v-application .v-btn.v-btn--variant-elevated:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink) !important;
}
html body .v-application.v-application .v-chip.v-chip {
  border-radius: 999px !important;
  border: 2px solid var(--ink) !important;
  background-color: var(--butter) !important;
  color: var(--ink) !important;
}
html body .v-application.v-application .v-chip.v-chip * { color: var(--ink) !important; }
html body .v-application.v-application .v-chip.v-chip:nth-of-type(3n+2) { background-color: var(--sage) !important; }
html body .v-application.v-application .v-chip.v-chip:nth-of-type(3n) { background-color: var(--sky) !important; }
.v-chip__underlay, .v-chip__overlay { display: none !important; }

/* inputs: white with an ink outline */
.v-field--variant-outlined .v-field__outline { --v-field-border-opacity: 1; color: var(--ink) !important; }
.v-field--variant-solo, .v-field--variant-filled { background: var(--white) !important; }

/* Rating stars: mustard */
.v-icon.mdi-star, .v-icon.mdi-star-outline, .v-icon.mdi-star-half-full {
  color: var(--mustard) !important;
}

/* Recipes without a photo: the Field Day landscape instead of blank white */
.v-img:not(:has(img[src])) {
  background-image: url('/site-hero.svg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--sky) !important;
}

/* ---- Sidebar: paper drawer, ink rule; active item is a white pill ---- */
html body .v-navigation-drawer.v-navigation-drawer {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-right: 3px solid var(--ink) !important;
}
html body .v-navigation-drawer.v-navigation-drawer .v-icon,
html body .v-navigation-drawer.v-navigation-drawer .v-list-item-title {
  color: var(--ink) !important;
  opacity: 1 !important;
}
html body .v-navigation-drawer.v-navigation-drawer .v-list-item { border-radius: 999px !important; margin: 2px 8px; }
html body .v-navigation-drawer.v-navigation-drawer .v-list-item:hover { background-color: var(--butter) !important; }
html body .v-navigation-drawer.v-navigation-drawer .v-list-item--active {
  background-color: var(--white) !important;
  border: 2px solid var(--ink);
}
.v-navigation-drawer .v-list-item__overlay { display: none !important; }
html body .v-navigation-drawer.v-navigation-drawer .v-list-item--active .v-icon,
html body .v-navigation-drawer.v-navigation-drawer .v-list-item--active .v-list-item-title {
  color: var(--cobalt) !important;
}
html body .v-navigation-drawer.v-navigation-drawer .v-divider {
  border-color: var(--ink) !important;
  opacity: .25 !important;
}

/* Lists inside pages (e.g. Active API tokens) kept the dark theme background. */
html body main .v-theme--dark.v-list.v-list {
  background-color: var(--white) !important;
  color: var(--ink) !important;
}

/* Primary buttons: cobalt with white text; the sidebar Create button is the mustard CTA.
   Extra repeated classes are needed to beat the global dark-text rule near the top. */
html body .v-application.v-application.v-application .v-btn.bg-primary,
html body .v-application.v-application.v-application .v-btn.bg-primary * { color: var(--white) !important; }
html body .v-application.v-application.v-application .v-navigation-drawer.v-navigation-drawer .v-btn.v-btn--variant-elevated.v-btn--variant-elevated {
  background-color: var(--mustard) !important;
  color: var(--ink) !important;
}
html body .v-application.v-application.v-application .v-navigation-drawer.v-navigation-drawer .v-btn.v-btn--variant-elevated.v-btn--variant-elevated * {
  color: var(--ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  .v-card, .v-btn { transition: none !important; }
}

/* Header title + header search: Vuetify 3 uses .v-toolbar-title; the search field is a dark
   bg-primary-darken-1 field (dark text on it was unreadable) -> white pill with an ink outline. */
.v-toolbar-title, .v-app-bar-title { font-family: var(--display) !important; font-weight: 600 !important; }
html body .v-application.v-application .v-app-bar.v-app-bar .v-field.v-field {
  background-color: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
html body .v-application.v-application .v-app-bar.v-app-bar .v-field.v-field .v-field__overlay { display: none !important; }

/* Vuetify's newer type scale (text-headline-*, text-title-*, text-display-*) -> Fredoka */
[class*="text-headline-"], [class*="text-title-"], [class*="text-display-"] {
  font-family: var(--display) !important;
  font-weight: 600 !important;
}
/* Rating stars (.rating-display): mustard, filled and empty */
html body .v-application.v-application.v-application.v-application .rating-display .star,
html body .v-application.v-application.v-application.v-application .rating-display .star * { color: var(--mustard) !important; }

/* Dark-theme flat icon buttons (e.g. ingredient scaling) had a #1e1e1e fill -> black blob. */
html body .v-application.v-application .v-btn.v-btn--icon.v-btn--variant-flat.v-theme--dark:not([class*="bg-"]) {
  background-color: var(--white) !important;
  border: 2px solid var(--ink) !important;
}
/* Recipe page rating (v-rating): mustard stars */
html body .v-application.v-application.v-application.v-application .v-rating.v-rating .v-rating__item,
html body .v-application.v-application.v-application.v-application .v-rating.v-rating .v-rating__item * { color: var(--mustard) !important; }

/* Field Day landscape behind the app: the site hero's contour hills (no sky block), pinned to the
   bottom of the window so the cards float over it. A fixed pseudo-element (own compositor layer) instead
   of background-attachment: fixed, which repaints the whole page on every scroll. PNG, not SVG, for the same reason. */
html body .v-application.v-application::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 35vw;
  background: url('/mealie-bg.png') center bottom / 100% auto no-repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
html body .v-application .v-application__wrap { position: relative; z-index: 1; }
html body .v-application .v-main, html body .v-application .v-main > * { background: transparent !important; }