/* Mealie (Family Meals) in the Our Family look. Colours come from Mealie's THEME_* settings
   (see ~/mealie/compose.yaml); this file adds the shared font, page backgrounds and softer corners. */
html body, .v-application, .v-application .text-h1, .v-application .text-h2, .v-application .text-h3,
.v-application .text-h4, .v-application .text-h5, .v-application .text-h6, .v-application [class*="text-"] {
  font-family: var(--our-font) !important;
}
.v-theme--dark.v-application, .v-theme--dark .v-main { background: var(--our-sky-gradient) fixed var(--our-sky) !important; }
.v-theme--light.v-application, .v-theme--light .v-main { background: var(--our-page-light) !important; }
.v-card, .v-sheet.v-card, .v-list.rounded, .v-menu > .v-overlay__content > .v-card { border-radius: var(--our-radius-lg) !important; }
.v-btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.v-btn:not(.v-btn--icon), .v-field { border-radius: var(--our-radius) !important; }

/* Top bar: deep navy in both modes, like the desktop taskbar (Mealie draws white icons on it) */
.v-app-bar.v-toolbar { background: #0d2440 !important; color: #fff !important; border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: none !important; }
.v-app-bar .v-field { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.v-theme--dark .v-navigation-drawer { background: var(--our-surface-dark) !important; border-color: var(--our-line-dark) !important; }

/* Brand: the family crest (on the home link) and "Family Meals" instead of the Mealie logo and name */
.v-app-bar .v-toolbar__content > a[href^="/g/"] .v-icon { display: none !important; }
.v-app-bar .v-toolbar__content > a[href^="/g/"] .v-btn__content::before { content: ""; width: 34px; height: 34px; background: url("https://our.thcpsolutions.com/alverson-a.svg") center / contain no-repeat; }
.v-app-bar .v-toolbar-title__placeholder { font-size: 0 !important; }
.v-app-bar .v-toolbar-title__placeholder::after { content: "Family Meals"; font: 600 1.25rem/1 var(--our-font); color: #fff; }

/* The side menu fills the bottom-left corner here, so the 🏠 home button sits bottom-right */
#thcp-home { left: auto !important; right: max(12px, env(safe-area-inset-right)) !important; }