/* Catppuccin Macchiato for Mealie. MIT license. */
:root {
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink: #f5bde6;
  --ctp-mauve: #c6a0f6;
  --ctp-red: #ed8796;
  --ctp-maroon: #ee99a0;
  --ctp-peach: #f5a97f;
  --ctp-yellow: #eed49f;
  --ctp-green: #a6da95;
  --ctp-teal: #8bd5ca;
  --ctp-sky: #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue: #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
  color-scheme: dark;
}

/* Apply to both Vuetify modes, including menus rendered outside the app. */
.v-theme--light, .v-theme--dark {
  --v-theme-background: 36, 39, 58 !important;
  --v-theme-surface: 30, 32, 48 !important;
  --v-theme-surface-bright: 54, 58, 79 !important;
  --v-theme-surface-light: 54, 58, 79 !important;
  --v-theme-surface-variant: 73, 77, 100 !important;
  --v-theme-on-surface-variant: 202, 211, 245 !important;
  --v-theme-on-background: 202, 211, 245 !important;
  --v-theme-on-surface: 202, 211, 245 !important;
  --v-theme-primary: 183, 189, 248 !important;
  --v-theme-accent: 198, 160, 246 !important;
  --v-theme-secondary: 139, 213, 202 !important;
  --v-theme-success: 166, 218, 149 !important;
  --v-theme-info: 138, 173, 244 !important;
  --v-theme-warning: 245, 169, 127 !important;
  --v-theme-error: 237, 135, 150 !important;
  --v-theme-on-primary: 24, 25, 38 !important;
  --v-theme-on-accent: 24, 25, 38 !important;
  --v-theme-on-secondary: 24, 25, 38 !important;
  --v-theme-on-success: 24, 25, 38 !important;
  --v-theme-on-info: 24, 25, 38 !important;
  --v-theme-on-warning: 24, 25, 38 !important;
  --v-theme-on-error: 24, 25, 38 !important;
  --v-border-color: 147, 154, 183 !important;
  --v-border-opacity: .18;
  --v-high-emphasis-opacity: 1;
  --v-medium-emphasis-opacity: .82;
  --v-disabled-opacity: .55;
}
html, body, #__nuxt, .v-application, .v-main {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
html { scrollbar-color: var(--ctp-surface1) var(--ctp-mantle); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--ctp-surface2); color: var(--ctp-text); }
/* Quiet, solid navigation instead of the orange brand bar. */
.v-app-bar.v-toolbar, .v-navigation-drawer, .v-footer {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  box-shadow: none !important;
  border-color: var(--ctp-surface0) !important;
}
.v-app-bar { border-bottom: 1px solid var(--ctp-surface0); }
.v-navigation-drawer { border-right: 1px solid var(--ctp-surface0); }
.v-toolbar-title { font-weight: 650; letter-spacing: -.025em; }
.v-navigation-drawer .v-list { background: transparent !important; padding: 12px 8px; }
.v-navigation-drawer .v-list-item { border-radius: 10px; margin-block: 3px; }
.v-list-item--active { color: var(--ctp-lavender) !important; }
/* Recipe photography stays untouched. */
.v-card, .v-sheet:not(.v-toolbar):not(.v-bottom-sheet .v-sheet) {
  background-color: var(--ctp-mantle);
  color: var(--ctp-text);
}
.v-card {
  border: 1px solid var(--ctp-surface0) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.v-card--link:hover { border-color: var(--ctp-surface1) !important; }
.v-card-title { font-weight: 650; letter-spacing: -.02em; }
.v-card-subtitle { color: var(--ctp-subtext1); opacity: 1; }
.v-card-text { line-height: 1.65; }
h1, h2, h3 { letter-spacing: -.025em; }
.v-btn { border-radius: 10px; letter-spacing: .015em; text-transform: none !important; box-shadow: none !important; }
.v-btn--icon { border-radius: 50%; }
.v-btn--variant-outlined { border-color: var(--ctp-surface2); }
.v-chip { border-radius: 8px; }
.v-field { border-radius: 10px; color: var(--ctp-text); }
.v-field--variant-solo, .v-field--variant-solo-filled {
  background: var(--ctp-surface0) !important; box-shadow: none !important;
}
.v-field--variant-outlined .v-field__outline { color: var(--ctp-overlay1); }
input, textarea { caret-color: var(--ctp-lavender); }
input::placeholder, textarea::placeholder { color: var(--ctp-subtext0); opacity: 1; }
.v-menu > .v-overlay__content > .v-list, .v-autocomplete__content > .v-list,
.v-select__content > .v-list {
  background: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border: 1px solid var(--ctp-surface1);
  border-radius: 12px !important;
  box-shadow: 0 12px 32px #18192666 !important;
}
.v-divider { border-color: var(--ctp-surface1); }
.v-table { background: var(--ctp-mantle) !important; color: var(--ctp-text) !important; }
.v-table th { color: var(--ctp-subtext1) !important; }
.v-table td, .v-table th { border-color: var(--ctp-surface0) !important; }
.v-tabs { color: var(--ctp-subtext1); }
.v-tab--selected { color: var(--ctp-lavender) !important; }
.v-rating { color: var(--ctp-yellow); }
/* Legacy hard-coded neutrals used by some Mealie components. */
.bg-white, .bg-grey-lighten-5, .bg-grey-lighten-4, .bg-grey-darken-3,
.bg-grey-darken-4 { background-color: var(--ctp-mantle) !important; color: var(--ctp-text) !important; }
.text-black, .text-grey-darken-4, .text-grey-darken-3 { color: var(--ctp-text) !important; }
.text-grey, .text-grey-lighten-1 { color: var(--ctp-subtext0) !important; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ctp-lavender); outline-offset: 3px;
}
@media (max-width: 600px) {
  .v-card { border-radius: 12px !important; }
  .v-card-title { overflow-wrap: anywhere; }
}
/* A restrained glass layer on navigation and floating menus only.
   Solid backgrounds above remain the fallback without backdrop-filter. */
@media screen {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .v-app-bar.v-toolbar {
      background: rgba(30, 32, 48, .88) !important;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom-color: rgba(183, 189, 248, .14) !important;
      box-shadow: inset 0 1px 0 rgba(202, 211, 245, .055) !important;
    }
    .v-menu > .v-overlay__content > .v-list,
    .v-autocomplete__content > .v-list,
    .v-select__content > .v-list {
      background: rgba(30, 32, 48, .92) !important;
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      border-color: rgba(183, 189, 248, .18);
      box-shadow: inset 0 1px 0 rgba(202, 211, 245, .07),
                  0 12px 32px rgba(24, 25, 38, .32) !important;
    }
  }
}
/* Honor requests for reduced transparency, including supported OS settings. */
@media (prefers-reduced-transparency: reduce) {
  .v-app-bar.v-toolbar,
  .v-menu > .v-overlay__content > .v-list,
  .v-autocomplete__content > .v-list,
  .v-select__content > .v-list {
    background: var(--ctp-mantle) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Printed recipes retain ink-friendly colors. */
@media print {
  html, body, #__nuxt, .v-application, .v-main, .v-card, .v-sheet {
    background: white !important; color: black !important; box-shadow: none !important;
  }
  .v-theme--light, .v-theme--dark {
    --v-theme-background: 255,255,255 !important;
    --v-theme-surface: 255,255,255 !important;
    --v-theme-on-background: 0,0,0 !important;
    --v-theme-on-surface: 0,0,0 !important;
  }
}