/* ==========================================================================
   HAUMDAUCHER THEME FOR AUTHENTIK
   Wurst und Spezialitäten n.e.V.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* --- Global Brand Font (Safe for all pages) --- */
:root {
  --hd-font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pf-global--FontFamily--sans-serif: var(--hd-font);
  --pf-v5-global--FontFamily--sans-serif: var(--hd-font);
}

/* ==========================================================================
   AUTHENTICATED INTERFACE POLISH (User Dashboard & Admin Console)
   Ensure brand logo is well proportioned and high-contrast in masthead
   ========================================================================== */
ak-interface-user .pf-c-brand img,
ak-interface-admin .pf-c-brand img,
.pf-c-page__header-brand img,
.pf-v5-c-page__header-brand img {
  max-height: 38px !important;
  width: auto !important;
}

[data-theme='dark'] ak-interface-user .pf-c-brand img,
[data-theme='dark'] ak-interface-admin .pf-c-brand img,
[data-theme='dark'] .pf-c-page__header-brand img,
[data-theme='dark'] .pf-v5-c-page__header-brand img {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   LOGIN & AUTHENTICATION FLOW SCOPE
   All custom card styling, colors, and layout rules are strictly scoped
   to ak-flow-executor and .pf-c-login to avoid leaking into the dashboard!
   ========================================================================== */

/* --- Flow Executor Variables & Overrides --- */
ak-flow-executor,
.pf-c-login,
.pf-v5-c-login,
ak-stage,
.ak-stage {
  --hd-bg: #f4f5f8;
  --hd-card-bg: #ffffff;
  --hd-card-border: rgba(0, 0, 0, 0.08);
  --hd-text-main: #111111;
  --hd-text-muted: #555555;
  --hd-input-bg: #f9f9fb;
  --hd-input-border: #d0d5dd;
  --hd-btn-bg: #000000;
  --hd-btn-text: #ffffff;
  --hd-radius: 12px;
  --hd-card-radius: 22px;
  --hd-transition: all 0.2s ease-in-out;

  /* Force PatternFly flow text & inputs to crisp black on the white card */
  --pf-global--FontFamily--sans-serif: var(--hd-font) !important;
  --pf-v5-global--FontFamily--sans-serif: var(--hd-font) !important;
  --pf-global--Color--100: #111111 !important;
  --pf-v5-global--Color--100: #111111 !important;
  --pf-global--Color--200: #222222 !important;
  --pf-v5-global--Color--200: #222222 !important;
  --pf-global--Color--300: #444444 !important;
  --pf-v5-global--Color--300: #444444 !important;
  --pf-global--Color--dark-100: #111111 !important;
  --pf-v5-global--Color--dark-100: #111111 !important;
  --pf-global--Color--light-100: #111111 !important;
  --pf-v5-global--Color--light-100: #111111 !important;
  --pf-global--primary-color--100: #000000 !important;
  --pf-v5-global--primary-color--100: #000000 !important;

  /* Form & Label Variables */
  --pf-c-form__label--Color: #111111 !important;
  --pf-v5-c-form__label--Color: #111111 !important;
  --pf-c-form__label-text--Color: #111111 !important;
  --pf-v5-c-form__label-text--Color: #111111 !important;
  --pf-c-form-control--Color: #111111 !important;
  --pf-v5-c-form-control--Color: #111111 !important;
  --pf-c-form-control--placeholder--Color: #666666 !important;
  --pf-v5-c-form-control--placeholder--Color: #666666 !important;
  --pf-c-form-control--BackgroundColor: #f9f9fb !important;
  --pf-v5-c-form-control--BackgroundColor: #f9f9fb !important;
  --pf-c-form-control--BorderColor: #d0d5dd !important;
  --pf-v5-c-form-control--BorderColor: #d0d5dd !important;
  --pf-c-form__helper-text--Color: #555555 !important;
  --pf-v5-c-form__helper-text--Color: #555555 !important;
}

/* --- Flow Executor Viewport Centering & Background --- */
ak-flow-executor,
.pf-c-login,
.pf-v5-c-login {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f4f5f8 !important;
  background-image: radial-gradient(circle at 50% 15%, rgba(0, 0, 0, 0.03) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  padding: 32px 16px 48px 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-family: var(--hd-font) !important;
  color: #111111 !important;
}

/* --- Centered Login Container --- */
ak-flow-executor .pf-c-login__container,
.pf-c-login .pf-c-login__container,
.pf-v5-c-login .pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* --- Top Header & Logo Layout --- */
ak-flow-executor .pf-c-login__header,
.pf-c-login .pf-c-login__header,
.pf-v5-c-login .pf-v5-c-login__header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

ak-flow-executor .pf-c-login__header ak-brand,
ak-flow-executor .pf-c-login__header img,
.pf-c-login .pf-c-login__header ak-brand,
.pf-c-login .pf-c-login__header img,
.pf-v5-c-login .pf-v5-c-login__header ak-brand,
.pf-v5-c-login .pf-v5-c-login__header img {
  display: block !important;
  max-height: 85px !important;
  max-width: 240px !important;
  width: auto !important;
  margin: 0 auto !important;
  mix-blend-mode: multiply !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)) !important;
  transition: all 0.2s ease-in-out;
}

/* --- Classic White Card --- */
ak-flow-executor .pf-c-login__main,
.pf-c-login .pf-c-login__main,
.pf-v5-c-login .pf-v5-c-login__main,
ak-flow-executor ak-stage,
ak-flow-executor .ak-stage {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  padding: 36px 32px 32px 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #111111 !important;
}

/* --- Fully Hide Duplicate / Generic Flow Title --- */
ak-flow-executor .pf-c-login__main-header-title,
ak-flow-executor .pf-v5-c-login__main-header-title,
ak-flow-executor .pf-c-title,
ak-flow-executor .pf-v5-c-title,
.pf-c-login .pf-c-login__main-header-title,
.pf-v5-c-login .pf-v5-c-login__main-header-title {
  display: none !important;
}

ak-flow-executor .pf-c-login__main-header,
.pf-c-login .pf-c-login__main-header,
.pf-v5-c-login .pf-v5-c-login__main-header {
  margin-bottom: 24px !important;
  padding: 0 !important;
  text-align: center !important;
}

ak-flow-executor .pf-c-login__main-header-desc,
.pf-c-login .pf-c-login__main-header-desc,
.pf-v5-c-login .pf-v5-c-login__main-header-desc {
  font-family: var(--hd-font) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: #555555 !important;
  text-align: center !important;
}

ak-flow-executor .pf-c-login__main-header-desc strong,
ak-flow-executor .pf-c-login__main-header-desc b,
.pf-c-login .pf-c-login__main-header-desc strong,
.pf-c-login .pf-c-login__main-header-desc b,
.pf-v5-c-login .pf-v5-c-login__main-header-desc strong,
.pf-v5-c-login .pf-v5-c-login__main-header-desc b {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* --- Form Field Groups --- */
ak-flow-executor .pf-c-form__group,
.pf-c-login .pf-c-form__group,
.pf-v5-c-login .pf-v5-c-form__group {
  margin-bottom: 20px !important;
}

/* --- LABELS & LABEL TEXT (High-Contrast Black inside login flow) --- */
ak-flow-executor .pf-c-form__label,
ak-flow-executor .pf-v5-c-form__label,
ak-flow-executor .pf-c-form__label-text,
ak-flow-executor .pf-v5-c-form__label-text,
ak-flow-executor .pf-c-form__group-label,
ak-flow-executor .pf-v5-c-form__group-label,
ak-flow-executor label,
ak-flow-executor label *,
.pf-c-login .pf-c-form__label,
.pf-c-login .pf-v5-c-form__label,
.pf-c-login .pf-c-form__label-text,
.pf-c-login .pf-v5-c-form__label-text,
.pf-c-login label,
.pf-c-login label *,
.pf-v5-c-login label,
.pf-v5-c-login label * {
  font-family: var(--hd-font) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #111111 !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
  opacity: 1 !important;
}

/* Required Asterisk */
ak-flow-executor .pf-c-form__label-required,
ak-flow-executor .pf-v5-c-form__label-required,
.pf-c-login .pf-c-form__label-required,
.pf-v5-c-login .pf-v5-c-form__label-required {
  color: #c9190b !important;
  margin-left: 4px !important;
  font-weight: 700 !important;
}

/* --- INPUT FIELDS & TEXT (inside login flow) --- */
ak-flow-executor .pf-c-form-control,
ak-flow-executor .pf-v5-c-form-control,
ak-flow-executor input[type="text"],
ak-flow-executor input[type="password"],
ak-flow-executor input[type="email"],
ak-flow-executor input,
.pf-c-login .pf-c-form-control,
.pf-c-login .pf-v5-c-form-control,
.pf-c-login input,
.pf-v5-c-login input {
  font-family: var(--hd-font) !important;
  font-size: 0.98rem !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background-color: #f9f9fb !important;
  border: 1px solid #d0d5dd !important;
  color: #111111 !important;
  transition: all 0.2s ease-in-out !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Input Placeholder */
ak-flow-executor input::placeholder,
.pf-c-login input::placeholder,
.pf-v5-c-login input::placeholder {
  color: #666666 !important;
  font-style: normal !important;
  opacity: 1 !important;
}

/* Focus State */
ak-flow-executor input:focus,
.pf-c-login input:focus,
.pf-v5-c-login input:focus {
  outline: none !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* Browser Autofill Fix (Prevent White on White) */
ak-flow-executor input:-webkit-autofill,
ak-flow-executor input:-webkit-autofill:hover,
ak-flow-executor input:-webkit-autofill:focus,
.pf-c-login input:-webkit-autofill,
.pf-v5-c-login input:-webkit-autofill {
  -webkit-text-fill-color: #111111 !important;
  -webkit-box-shadow: 0 0 0 1000px #f9f9fb inset !important;
  box-shadow: 0 0 0 1000px #f9f9fb inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* --- Solid Black Submit Button (inside login flow) --- */
ak-flow-executor button[type="submit"],
ak-flow-executor .pf-c-button.pf-m-primary,
ak-flow-executor .pf-v5-c-button.pf-m-primary,
.pf-c-login button[type="submit"],
.pf-c-login .pf-c-button.pf-m-primary,
.pf-v5-c-login button[type="submit"],
.pf-v5-c-login .pf-v5-c-button.pf-m-primary {
  font-family: var(--hd-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  border: none !important;
  cursor: pointer !important;
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease-in-out !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

ak-flow-executor button[type="submit"]:hover,
.pf-c-login button[type="submit"]:hover,
.pf-v5-c-login button[type="submit"]:hover {
  background: #222222 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

ak-flow-executor button[type="submit"]:active,
.pf-c-login button[type="submit"]:active,
.pf-v5-c-login button[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Secondary Buttons (inside login flow) */
ak-flow-executor .pf-c-button.pf-m-secondary,
ak-flow-executor .pf-v5-c-button.pf-m-secondary,
.pf-c-login .pf-c-button.pf-m-secondary,
.pf-v5-c-login .pf-v5-c-button.pf-m-secondary {
  font-family: var(--hd-font) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 11px 18px !important;
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #111111 !important;
  transition: all 0.2s ease-in-out !important;
}

ak-flow-executor .pf-c-button.pf-m-secondary:hover,
.pf-c-login .pf-c-button.pf-m-secondary:hover,
.pf-v5-c-login .pf-v5-c-button.pf-m-secondary:hover {
  background: #f4f5f7 !important;
  border-color: #000000 !important;
}

/* --- Alerts & Messages (inside login flow) --- */
ak-flow-executor .pf-c-alert,
ak-flow-executor .pf-v5-c-alert,
.pf-c-login .pf-c-alert,
.pf-v5-c-login .pf-v5-c-alert {
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

/* --- LANGUAGE BUTTON AT BOTTOM (inside login flow only) --- */
ak-flow-executor ak-locale-select,
ak-flow-executor [part="locale-select"],
ak-flow-executor::part(locale-select),
.pf-c-login ak-locale-select,
.pf-v5-c-login ak-locale-select {
  position: fixed !important;
  inset-block-start: auto !important;
  inset-inline-start: auto !important;
  top: auto !important;
  left: auto !important;
  bottom: 14px !important;
  right: 18px !important;
  z-index: 999 !important;
  opacity: 0.65 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

ak-flow-executor ak-locale-select:hover,
.pf-c-login ak-locale-select:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

ak-flow-executor ak-locale-select select,
.pf-c-login ak-locale-select select {
  color: #111111 !important;
  background: transparent !important;
  cursor: pointer !important;
}

ak-flow-executor ak-locale-select label,
.pf-c-login ak-locale-select label {
  color: #111111 !important;
  cursor: pointer !important;
}

/* --- Footer & Copyright (inside login flow) --- */
ak-flow-executor ak-brand-links,
ak-flow-executor .pf-c-login__footer,
ak-flow-executor .pf-v5-c-login__footer,
.pf-c-login .pf-c-login__footer,
.pf-v5-c-login .pf-v5-c-login__footer {
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: #555555 !important;
}

ak-flow-executor ak-brand-links a,
ak-flow-executor .pf-c-login__footer a,
.pf-c-login .pf-c-login__footer a,
.pf-v5-c-login .pf-v5-c-login__footer a {
  color: #111111 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

ak-flow-executor ak-brand-links a:hover,
ak-flow-executor .pf-c-login__footer a:hover,
.pf-c-login .pf-c-login__footer a:hover,
.pf-v5-c-login .pf-v5-c-login__footer a:hover {
  text-decoration: underline !important;
}

/* --- Watermark (inside login flow container) --- */
ak-flow-executor .pf-c-login__container::after,
.pf-c-login .pf-c-login__container::after,
.pf-v5-c-login .pf-v5-c-login__container::after {
  content: "HAUMDAUCHER • Wurst und Spezialitäten n.e.V.";
  display: block;
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 0.76rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: #888888;
  text-align: center;
}

/* --- Mobile Responsiveness (inside login flow) --- */
@media (max-width: 480px) {
  ak-flow-executor,
  .pf-c-login,
  .pf-v5-c-login {
    padding: 24px 12px 48px 12px !important;
  }

  ak-flow-executor .pf-c-login__container,
  .pf-c-login .pf-c-login__container,
  .pf-v5-c-login .pf-v5-c-login__container {
    padding: 0 !important;
  }

  ak-flow-executor .pf-c-login__header,
  .pf-c-login .pf-c-login__header,
  .pf-v5-c-login .pf-v5-c-login__header {
    margin-bottom: 18px !important;
  }

  ak-flow-executor .pf-c-login__main,
  .pf-c-login .pf-c-login__main,
  .pf-v5-c-login .pf-v5-c-login__main,
  ak-flow-executor ak-stage,
  ak-flow-executor .ak-stage {
    padding: 28px 20px 24px 20px !important;
    border-radius: 18px !important;
  }

  ak-flow-executor .pf-c-login__header img,
  .pf-c-login .pf-c-login__header img,
  .pf-v5-c-login .pf-v5-c-login__header img {
    max-height: 72px !important;
  }

  ak-flow-executor .pf-c-login__container::after,
  .pf-c-login .pf-c-login__container::after,
  .pf-v5-c-login .pf-v5-c-login__container::after {
    margin-top: 20px;
    margin-bottom: 8px;
  }

  ak-flow-executor ak-locale-select,
  .pf-c-login ak-locale-select,
  .pf-v5-c-login ak-locale-select {
    bottom: 10px !important;
    right: 12px !important;
  }
}