/*
 * Mealie Drop Family Theme v0.7.0
 * Authentication, recovery and final accessibility polish for Mealie v3.25.x.
 * Loaded last.
 */

/* ------------------------------------------------------------
   Authentication shell
   login.vue / forgot-password.vue / reset-password.vue
   ------------------------------------------------------------ */
.v-container.fill-height.fluid.d-flex.justify-center.align-center {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  min-height: 100dvh !important;
  padding: clamp(18px, 4vw, 42px) !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card {
  width: min(600px, 100%) !important;
  max-width: 600px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 178, 68, .12), transparent 18rem),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 34px 90px rgba(74,48,22,.18), 0 8px 24px rgba(74,48,22,.08), inset 0 1px rgba(255,255,255,.45) !important;
  backdrop-filter: blur(30px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(145%) !important;
  transform: none !important;
}

.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 146, 23, .13), transparent 18rem),
    rgba(10, 13, 12, .94) !important;
  box-shadow: 0 38px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,158,45,.08), inset 0 1px rgba(255,255,255,.035) !important;
}

/* Login's primary toolbar becomes the product signature instead of a stock bar. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-toolbar.bg-primary,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-toolbar.bg-primary {
  width: 100% !important;
  min-height: 72px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(164,78,5,.20) !important;
  background: linear-gradient(135deg, #ffc565 0%, #ffae39 31%, #f08a17 72%, #ff7905 100%) !important;
  box-shadow: 0 12px 34px rgba(240,138,23,.20), inset 0 1px rgba(255,255,255,.52) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-toolbar.bg-primary *,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-toolbar.bg-primary * {
  color: #2b1706 !important;
  opacity: 1 !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-toolbar-title.text-h4 {
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
}

/* Auth titles and explanatory copy. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-card-title,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-card-title {
  color: var(--mdf2-text) !important;
  font-weight: 760 !important;
  letter-spacing: -.018em !important;
  white-space: normal !important;
  text-align: center !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-card-text,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-card-text {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: var(--mdf2-text-soft) !important;
}

/* Auth inputs are intentionally slightly stronger than ordinary forms. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field--variant-solo-filled {
  min-height: 54px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 10px 28px rgba(74,48,22,.07), inset 0 1px rgba(255,255,255,.38) !important;
}

.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field--variant-solo-filled {
  background: rgba(18, 21, 19, .96) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px rgba(255,158,45,.04) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field--variant-solo-filled.v-field--focused,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field:focus-within {
  border-color: var(--mdf2-line-hot) !important;
  box-shadow: 0 0 0 3px rgba(240,138,23,.13), 0 14px 34px rgba(74,48,22,.08) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__input,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__prepend-inner,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__append-inner,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-label {
  color: var(--mdf2-text) !important;
  opacity: 1 !important;
}

.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__input,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__prepend-inner,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-field__append-inner,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-label {
  color: #f8f3eb !important;
}

/* Keep password-manager autofill readable in both modes. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill,
.v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill:hover,
.v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mdf2-text) !important;
  caret-color: var(--mdf2-text) !important;
  transition: background-color 9999s ease-out 0s !important;
}

.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill:hover,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8f3eb !important;
  caret-color: #f8f3eb !important;
}

/* Remember Me should look like a first-class family-device option. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-checkbox {
  color: var(--mdf2-text-soft) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-checkbox .v-selection-control__input,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-checkbox .v-icon {
  color: var(--mdf2-amber) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-checkbox .v-label {
  color: var(--mdf2-text) !important;
  font-weight: 620 !important;
}

/* Primary auth action. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button {
  width: min(300px, 100%) !important;
  max-width: 100% !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button .v-btn.bg-primary,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button .v-btn.text-primary {
  min-height: 50px !important;
  color: #2b1706 !important;
  font-weight: 760 !important;
  letter-spacing: .005em !important;
  background: linear-gradient(135deg, #ffc565 0%, #ffae39 31%, #f08a17 72%, #ff7905 100%) !important;
  border: 1px solid rgba(163,77,4,.20) !important;
  box-shadow: 0 13px 32px rgba(240,138,23,.24), inset 0 1px rgba(255,255,255,.52) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button .v-btn.bg-primary:hover,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button .v-btn.text-primary:hover {
  filter: brightness(1.035) saturate(1.03) !important;
  box-shadow: 0 17px 38px rgba(240,138,23,.29), inset 0 1px rgba(255,255,255,.58) !important;
}

/* Secondary auth links remain obvious without competing with login. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card .v-card-actions > .v-btn.v-btn--variant-text,
.v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card .v-card-actions > .v-btn.v-btn--variant-text,
.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-btn.v-btn--variant-text {
  color: var(--mdf2-amber-deep) !important;
  font-weight: 620 !important;
}

.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card .v-card-actions > .v-btn.v-btn--variant-text,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card .v-card-actions > .v-btn.v-btn--variant-text,
.v-theme--dark .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-btn.v-btn--variant-text {
  color: var(--mdf2-amber-2) !important;
}

.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-btn[disabled],
.v-container.fill-height.fluid.d-flex.justify-center.align-center .v-btn.v-btn--disabled {
  opacity: .48 !important;
}

/* OIDC separator: base theme makes bg-white transparent, so give the label a panel. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center .absolute.bg-white,
.v-container.fill-height.fluid.d-flex.justify-center.align-center .absolute.bg-grey-darken-4 {
  padding-inline: 12px !important;
  border-radius: 999px !important;
  color: var(--mdf2-text-soft) !important;
  background: var(--mdf2-panel-strong) !important;
}

/* First-login information remains semantic info, not amber marketing. */
.v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-alert.bg-info {
  max-width: 600px !important;
  border-radius: 18px !important;
  box-shadow: var(--mdf2-shadow) !important;
}

/* ------------------------------------------------------------
   Final universal polish: focus, selection, notifications
   ------------------------------------------------------------ */
::selection {
  color: #2b1706;
  background: rgba(255, 174, 57, .56);
}

.v-theme--dark ::selection {
  color: #fff8ef;
  background: rgba(240, 138, 23, .48);
}

.v-btn:focus-visible,
a:focus-visible,
.v-list-item:focus-visible,
.v-selection-control:focus-visible,
.v-field:focus-within {
  outline: 2px solid rgba(240,138,23,.72) !important;
  outline-offset: 2px !important;
}

/* Keep semantic snackbars semantic; only neutral ones become glass. */
.v-snackbar__wrapper:not(.bg-error):not(.bg-warning):not(.bg-success):not(.bg-info) {
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  color: var(--mdf2-text) !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: var(--mdf2-shadow-hover) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
}

/* ------------------------------------------------------------
   Mobile auth
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .v-container.fill-height.fluid.d-flex.justify-center.align-center {
    min-height: 100dvh !important;
    padding: 14px !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card,
  .v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-toolbar.bg-primary,
  .v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-toolbar.bg-primary {
    min-height: 62px !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-toolbar-title.text-h4 {
    font-size: 1.75rem !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center > .v-card > .v-card-text,
  .v-container.fill-height.fluid.d-flex.justify-center.align-center.flex-column > .v-card > .v-card-text {
    padding-inline: 16px !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center .v-card-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button {
    width: 100% !important;
  }

  .v-container.fill-height.fluid.d-flex.justify-center.align-center .max-button .v-btn {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-container.fill-height.fluid.d-flex.justify-center.align-center *,
  .v-container.fill-height.fluid.d-flex.justify-center.align-center *::before,
  .v-container.fill-height.fluid.d-flex.justify-center.align-center *::after {
    transition: none !important;
    animation: none !important;
  }
}