/* ==========================================================================
   KTemplate Keycloak Theme — CSS overrides for keycloak.v2 (PatternFly v5)
   Palette: Dynamic via CSS custom properties, Lato font, PrimeNG Lara style
   ========================================================================== */

/* --- Google Fonts: Lato --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

/* 1a. Primary color palette (overridden by JS from cookie, default: orange) */
:root {
  --kt-primary: #F97316;
  --kt-primary-hover: #EA580C;
  --kt-primary-dark: #C2410C;
  --kt-primary-light: #FFF7ED;
  --kt-primary-light-dark: #7C2D12;
  --kt-primary-link-dark: #FDBA74;
  --kt-primary-link-hover-dark: #FED7AA;
}

/* 1b. Contextual variables — light mode defaults (switch in dark mode) */
:root {
  /* Page & card */
  --kt-page-bg: #f8fafc;
  --kt-card-bg: #ffffff;
  --kt-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  /* Typography */
  --kt-title-color: #1e293b;
  --kt-label-color: #334155;
  --kt-body-color: #1e293b;
  --kt-footer-color: #94a3b8;

  /* Borders & inputs */
  --kt-border-color: #e2e8f0;
  --kt-input-border: #cbd5e1;
  --kt-input-bg: #ffffff;
  --kt-input-color: #1e293b;

  /* Links (primary-dependent, auto-switch in dark) */
  --kt-link: var(--kt-primary);
  --kt-link-hover: var(--kt-primary-hover);

  /* Accent background */
  --kt-accent-bg: var(--kt-primary-light);

  /* Focus states */
  --kt-focus-border: var(--kt-primary);
  --kt-focus-ring: color-mix(in srgb, var(--kt-primary) 15%, transparent);
  --kt-focus-ring-strong: color-mix(in srgb, var(--kt-primary) 35%, transparent);

  /* Password / control toggle button */
  --kt-toggle-bg: #27272a;
  --kt-toggle-color: #ffffff;
  --kt-toggle-hover-bg: #1c1c1f;
  --kt-toggle-hover-color: #ffffff;

  /* Logo */
  --kt-logo-filter: none;

  /* Alerts */
  --kt-alert-error-bg: #FEF2F2;
  --kt-alert-error-color: #991B1B;
  --kt-alert-success-bg: #F0FDF4;
  --kt-alert-success-color: #166534;
  --kt-alert-warning-bg: #FFFBEB;
  --kt-alert-warning-color: #92400E;
  --kt-alert-info-bg: var(--kt-primary-light);
  --kt-alert-info-color: #9A3412;
}

/* 1c. Dark mode — class-based (set by JS from cookie) */
html.kraafty-dark {
  --kt-page-bg: #111114;
  --kt-card-bg: #1c1c1f;
  --kt-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --kt-title-color: #f1f5f9;
  --kt-label-color: #cbd5e1;
  --kt-body-color: #e2e8f0;
  --kt-footer-color: #64748b;
  --kt-border-color: #27272a;
  --kt-input-border: #3f3f46;
  --kt-input-bg: #111114;
  --kt-input-color: #f1f5f9;
  --kt-link: var(--kt-primary-link-dark);
  --kt-link-hover: var(--kt-primary-link-hover-dark);
  --kt-accent-bg: var(--kt-primary-light-dark);
  --kt-focus-border: var(--kt-primary-link-dark);
  --kt-focus-ring: color-mix(in srgb, var(--kt-primary-link-dark) 20%, transparent);
  --kt-focus-ring-strong: color-mix(in srgb, var(--kt-primary-link-dark) 35%, transparent);
  --kt-toggle-bg: #1c1c1f;
  --kt-toggle-color: var(--kt-primary-link-dark);
  --kt-toggle-hover-bg: var(--kt-primary-light-dark);
  --kt-toggle-hover-color: var(--kt-primary-link-hover-dark);
  --kt-logo-filter: none;
  --kt-alert-error-bg: #451a1a;
  --kt-alert-error-color: #fca5a5;
  --kt-alert-success-bg: #14332a;
  --kt-alert-success-color: #6ee7b7;
  --kt-alert-warning-bg: #422006;
  --kt-alert-warning-color: #fcd34d;
  --kt-alert-info-bg: #431407;
  --kt-alert-info-color: var(--kt-primary-link-dark);
}

/* 1d. Dark mode fallback — system preference (when JS hasn't set a class) */
@media (prefers-color-scheme: dark) {
  html:not(.kraafty-dark):not(.kraafty-light) {
    --kt-page-bg: #111114;
    --kt-card-bg: #1c1c1f;
    --kt-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --kt-title-color: #f1f5f9;
    --kt-label-color: #cbd5e1;
    --kt-body-color: #e2e8f0;
    --kt-footer-color: #64748b;
    --kt-border-color: #27272a;
    --kt-input-bg: #111114;
    --kt-input-color: #f1f5f9;
    --kt-link: var(--kt-primary-link-dark);
    --kt-link-hover: var(--kt-primary-link-hover-dark);
    --kt-accent-bg: var(--kt-primary-light-dark);
    --kt-focus-border: var(--kt-primary-link-dark);
    --kt-focus-ring: color-mix(in srgb, var(--kt-primary-link-dark) 20%, transparent);
    --kt-focus-ring-strong: color-mix(in srgb, var(--kt-primary-link-dark) 35%, transparent);
    --kt-toggle-bg: #1c1c1f;
    --kt-toggle-color: var(--kt-primary-link-dark);
    --kt-toggle-hover-bg: var(--kt-primary-light-dark);
    --kt-toggle-hover-color: var(--kt-primary-link-hover-dark);
    --kt-logo-filter: none;
    --kt-alert-error-bg: #451a1a;
    --kt-alert-error-color: #fca5a5;
    --kt-alert-success-bg: #14332a;
    --kt-alert-success-color: #6ee7b7;
    --kt-alert-warning-bg: #422006;
    --kt-alert-warning-color: #fcd34d;
    --kt-alert-info-bg: #431407;
    --kt-alert-info-color: var(--kt-primary-link-dark);
  }
}

/* ==========================================================================
   2. PatternFly v5 Global Variables
   ========================================================================== */
:root {
  /* Typography */
  --pf-v5-global--FontFamily--text: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pf-v5-global--FontSize--md: 0.9rem;

  /* Primary */
  --pf-v5-global--primary-color--100: var(--kt-primary);
  --pf-v5-global--primary-color--200: var(--kt-primary-hover);
  --pf-v5-global--primary-color--light-100: var(--kt-accent-bg);
  --pf-v5-global--primary-color--dark-100: var(--kt-primary-dark);

  /* Active */
  --pf-v5-global--active-color--100: var(--kt-primary);
  --pf-v5-global--active-color--200: var(--kt-primary-hover);
  --pf-v5-global--active-color--300: var(--kt-primary-dark);

  /* Login header accent */
  --pf-v5-c-login__main-header--BorderTopColor: var(--kt-primary);
  --pf-v5-c-login__main-body--before--BackgroundColor: var(--kt-primary);

  /* Link */
  --pf-v5-global--link--Color: var(--kt-link);
  --pf-v5-global--link--Color--hover: var(--kt-link-hover);
  --pf-v5-global--link--Color--visited: var(--kt-link);

  /* Danger */
  --pf-v5-global--danger-color--100: #EF4444;
  --pf-v5-global--danger-color--200: #DC2626;

  /* Success */
  --pf-v5-global--success-color--100: #10B981;
  --pf-v5-global--success-color--200: #059669;

  /* Warning */
  --pf-v5-global--warning-color--100: #F59E0B;
  --pf-v5-global--warning-color--200: #D97706;

  /* Page background */
  --pf-v5-global--BackgroundColor--200: var(--kt-page-bg);
}

/* ==========================================================================
   3. Page Background — Crossed conic arcs (sources off-screen)
   ========================================================================== */
.login-pf body,
body.pf-v5-c-page {
  background-color: var(--kt-page-bg) !important;
}

#kc-login-page,
.pf-v5-c-login,
.login-pf {
  background-color: var(--kt-page-bg) !important;
  background-image:
    /* Cône 1 : source en haut-gauche hors écran, balaye vers le bas-droite */
    conic-gradient(from 220deg at -15% -15%,
      color-mix(in srgb, var(--kt-primary) 46%, transparent) 0deg,
      transparent 60deg,
      color-mix(in srgb, var(--kt-primary-hover) 34%, transparent) 120deg,
      transparent 200deg,
      color-mix(in srgb, var(--kt-primary) 28%, transparent) 290deg,
      color-mix(in srgb, var(--kt-primary) 46%, transparent) 360deg),
    /* Cône 2 : source en bas-droite hors écran, balaye en sens opposé */
    conic-gradient(from 40deg at 115% 115%,
      color-mix(in srgb, var(--kt-primary-hover) 36%, transparent) 0deg,
      transparent 80deg,
      color-mix(in srgb, var(--kt-primary) 28%, transparent) 160deg,
      transparent 240deg,
      color-mix(in srgb, var(--kt-primary-hover) 36%, transparent) 360deg) !important;
  background-attachment: fixed;
}

/* Dark mode: stronger primary stops, link tints for the second cone */
html.kraafty-dark #kc-login-page,
html.kraafty-dark .pf-v5-c-login,
html.kraafty-dark .login-pf {
  background-image:
    conic-gradient(from 220deg at -15% -15%,
      color-mix(in srgb, var(--kt-primary) 58%, transparent) 0deg,
      transparent 60deg,
      color-mix(in srgb, var(--kt-primary-link-dark) 26%, transparent) 120deg,
      transparent 200deg,
      color-mix(in srgb, var(--kt-primary) 34%, transparent) 290deg,
      color-mix(in srgb, var(--kt-primary) 58%, transparent) 360deg),
    conic-gradient(from 40deg at 115% 115%,
      color-mix(in srgb, var(--kt-primary-link-dark) 28%, transparent) 0deg,
      transparent 80deg,
      color-mix(in srgb, var(--kt-primary) 34%, transparent) 160deg,
      transparent 240deg,
      color-mix(in srgb, var(--kt-primary-link-dark) 28%, transparent) 360deg) !important;
}

/* ==========================================================================
   4. Logo (native header hidden, logo injected inside the card)
   ========================================================================== */
/* Hide Keycloak's native header entirely — in some Keycloak builds, #kc-header
   is rendered AFTER the main card, which made any "glued header" approach
   unworkable. We render the logo via a pseudo-element inside the card. */
.pf-v5-c-login__header,
.login-pf-brand,
#kc-header,
#kc-header-wrapper,
#kc-logo-text,
.pf-v5-c-brand {
  display: none !important;
}

/* Inject logo as a pseudo-element at the top of the card's main-header */
.pf-v5-c-login__main-header::before {
  content: '' !important;
  display: block !important;
  width: 220px;
  height: 49px;
  margin: 0 auto 1rem auto;
  background-image: url('../img/kraafty-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--kt-logo-filter);
}

/* ==========================================================================
   5. Login Card
   ========================================================================== */
.pf-v5-c-login__main,
.card-pf {
  background: color-mix(in srgb, var(--kt-card-bg) 72%, transparent) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--kt-border-color) 60%, transparent);
  border-radius: 0.75rem;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.25),
    0 4px 12px -4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 500px !important;
  width: 100%;
  margin: 0 auto !important;
  box-sizing: border-box;
  color: var(--kt-body-color);
}

#kc-form-wrapper {
  background: transparent;
}

/* Accent bar at top of card */
.pf-v5-c-login__main::before,
.card-pf::before {
  content: '' !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--kt-primary), color-mix(in srgb, var(--kt-primary) 75%, white)) !important;
  border-radius: 0.75rem 0.75rem 0 0;
  border: none !important;
}

/* Override any PatternFly accent border on card and header */
.pf-v5-c-login__main,
.card-pf {
  border-top: none !important;
}

/* Remove PatternFly default blue border on header */
.pf-v5-c-login__main-header {
  border-top: none !important;
}

/* Kill PatternFly pseudo-element accents that draw spurious lines.
   NOTE: .pf-v5-c-login__main-header::before is intentionally NOT in this list
   — it's used in section 4 to render the logo. */
.pf-v5-c-login__main-header::after,
.pf-v5-c-login__main-body::before,
.pf-v5-c-login__main-body::after,
.pf-v5-c-login__main::after {
  display: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* Nuclear override: kill any #0066CC from PatternFly */
.pf-v5-c-login__main *,
.pf-v5-c-login__main *::before,
.pf-v5-c-login__main *::after {
  border-top-color: inherit;
}

/* Card body padding */
.pf-v5-c-login__main-body {
  padding: 2rem 2.5rem;
}

/* Card header — now contains the logo (::before) + the page title */
.pf-v5-c-login__main-header {
  padding: 2rem 2.5rem 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Page title inside card */
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--kt-title-color);
  text-align: center;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce space before social providers separator */
#kc-social-providers hr {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

#kc-social-providers h2 {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */
/* Primary button */
.pf-v5-c-button.pf-m-primary,
#kc-login,
#kc-register,
input[type="submit"].pf-v5-c-button.pf-m-primary {
  background-color: var(--kt-primary) !important;
  border: 1px solid var(--kt-primary) !important;
  border-radius: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Kill PatternFly's thicker top accent border (---BorderTopWidth) that
   overflows the rounded corners */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--BorderTopWidth: 1px;
  --pf-v5-c-button--BorderRightWidth: 1px;
  --pf-v5-c-button--BorderBottomWidth: 1px;
  --pf-v5-c-button--BorderLeftWidth: 1px;
}

.pf-v5-c-button.pf-m-primary::before,
.pf-v5-c-button.pf-m-primary::after,
#kc-login::before,
#kc-login::after,
#kc-register::before,
#kc-register::after {
  display: none !important;
  border: none !important;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover,
#kc-register:hover,
input[type="submit"].pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--kt-primary-hover) !important;
  border-color: var(--kt-primary-hover) !important;
}

.pf-v5-c-button.pf-m-primary:focus,
#kc-login:focus,
#kc-register:focus {
  box-shadow: 0 0 0 3px var(--kt-focus-ring-strong) !important;
}

.pf-v5-c-button.pf-m-primary:active {
  background-color: var(--kt-primary-dark) !important;
  border-color: var(--kt-primary-dark) !important;
}

/* Link-style buttons */
.pf-v5-c-button.pf-m-link {
  color: var(--kt-link);
  font-family: 'Lato', sans-serif;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--kt-link-hover);
}

/* ==========================================================================
   7. Form Inputs
   ========================================================================== */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea {
  font-family: 'Lato', sans-serif;
  border-radius: 0.5rem;
  background-color: var(--kt-input-bg);
  color: var(--kt-input-color);
  border: 1px solid var(--kt-input-border) !important;
}

/* Remove PatternFly inner borders (::after = bottom, ::before = top on focus) */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: none !important;
  display: none !important;
}

/* Remove PatternFly default outline on focus */
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus-within > input,
.pf-v5-c-form-control:focus-within > textarea {
  border-color: var(--kt-focus-border) !important;
  box-shadow: 0 0 0 3px var(--kt-focus-ring-strong) !important;
  outline: none !important;
  --pf-v5-c-form-control--after--BorderBottomColor: var(--kt-focus-border) !important;
}

/* Password input group — seamless toggle inside the field */
.pf-v5-c-input-group {
  border: 1px solid var(--kt-input-border);
  border-radius: 0.5rem;
  background-color: var(--kt-input-bg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--kt-focus-border) !important;
  box-shadow: 0 0 0 3px var(--kt-focus-ring-strong) !important;
}

/* Remove ALL borders, outlines, pseudo-elements from children inside the group */
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-input-group__item,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  outline: none !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control::before,
.pf-v5-c-input-group .pf-v5-c-form-control::after,
.pf-v5-c-input-group .pf-v5-c-input-group__item::before,
.pf-v5-c-input-group .pf-v5-c-input-group__item::after,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  display: none !important;
  border: none !important;
}

/* Toggle button — transparent, inside the field */
.pf-v5-c-input-group__item button,
.pf-v5-c-button.pf-m-control,
[data-password-toggle] {
  border: none !important;
  background-color: transparent !important;
  color: var(--kt-footer-color) !important;
  border-radius: 0 !important;
  padding: 0 0.75rem !important;
  cursor: pointer;
}

.pf-v5-c-input-group__item button:hover,
.pf-v5-c-button.pf-m-control:hover,
[data-password-toggle]:hover {
  color: var(--kt-primary) !important;
  background-color: transparent !important;
}

/* Language selector */
.pf-v5-c-menu-toggle,
#kc-locale-dropdown > button,
.kc-locale-dropdown > button {
  color: var(--kt-link) !important;
  border: 1px solid var(--kt-border-color);
  background-color: var(--kt-card-bg);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
}

.pf-v5-c-menu-toggle:hover,
#kc-locale-dropdown > button:hover,
.kc-locale-dropdown > button:hover {
  color: var(--kt-link-hover) !important;
  background-color: var(--kt-accent-bg);
  border-color: var(--kt-focus-border);
}

/* Language dropdown menu */
.pf-v5-c-menu {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-family: 'Lato', sans-serif;
  background-color: var(--kt-card-bg);
  border-color: var(--kt-border-color);
}

.pf-v5-c-menu__list-item:hover {
  background-color: var(--kt-accent-bg);
}

/* Labels */
.pf-v5-c-form__label-text {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  color: var(--kt-label-color);
}

/* ==========================================================================
   8. Links
   ========================================================================== */
a,
.pf-v5-c-login__main-footer-links a,
#kc-registration a,
#kc-form-options a {
  color: var(--kt-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
.pf-v5-c-login__main-footer-links a:hover,
#kc-registration a:hover,
#kc-form-options a:hover {
  color: var(--kt-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   9. Alerts / Messages
   ========================================================================== */
/* Error alert */
.pf-v5-c-alert.pf-m-danger,
.alert-error {
  border-left-color: #EF4444;
  background-color: var(--kt-alert-error-bg);
  color: var(--kt-alert-error-color);
  border-radius: 0.5rem;
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: #EF4444;
}

/* Success alert */
.pf-v5-c-alert.pf-m-success {
  border-left-color: #10B981;
  background-color: var(--kt-alert-success-bg);
  color: var(--kt-alert-success-color);
  border-radius: 0.5rem;
}

/* Warning alert */
.pf-v5-c-alert.pf-m-warning {
  border-left-color: #F59E0B;
  background-color: var(--kt-alert-warning-bg);
  color: var(--kt-alert-warning-color);
  border-radius: 0.5rem;
}

/* Info alert */
.pf-v5-c-alert.pf-m-info {
  border-left-color: var(--kt-primary);
  background-color: var(--kt-alert-info-bg);
  color: var(--kt-alert-info-color);
  border-radius: 0.5rem;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__footer {
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: var(--kt-footer-color);
  text-align: center;
  padding: 1rem 2.5rem;
}

/* ==========================================================================
   11. Social / Identity Provider Buttons
   ========================================================================== */
#kc-social-providers {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 0;
}

#kc-social-providers ul {
  margin: 0.5rem 0;
  padding: 0;
}

#kc-social-providers .pf-v5-c-button,
#kc-social-providers a[id^="social-"] {
  border-radius: 0.5rem;
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.25rem;
  background-color: var(--kt-card-bg) !important;
  border: 1px solid var(--kt-input-border) !important;
  border-top: 1px solid var(--kt-primary) !important;
  color: var(--kt-body-color) !important;
  cursor: pointer;
}

#kc-social-providers .pf-v5-c-button:hover,
#kc-social-providers a[id^="social-"]:hover {
  background-color: color-mix(in srgb, var(--kt-body-color) 8%, transparent) !important;
  color: var(--kt-body-color) !important;
}

#kc-social-providers .pf-v5-c-button:focus,
#kc-social-providers a[id^="social-"]:focus {
  outline: none !important;
  border-color: var(--kt-focus-border) !important;
  box-shadow: 0 0 0 3px var(--kt-focus-ring-strong) !important;
}

#kc-social-providers .pf-v5-c-button .kc-social-provider-logo,
#kc-social-providers a[id^="social-"] .kc-social-provider-logo,
#kc-social-providers .pf-v5-c-button i,
#kc-social-providers a[id^="social-"] i {
  color: var(--kt-body-color) !important;
}

/* ==========================================================================
   12. Checkbox / Remember Me
   ========================================================================== */
.pf-v5-c-check__input:checked {
  background-color: var(--kt-primary);
  border-color: var(--kt-primary);
}

.pf-v5-c-check__label {
  font-family: 'Lato', sans-serif;
  color: var(--kt-label-color);
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 576px) {
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .pf-v5-c-login {
    padding: 0;
    align-items: flex-start;
    min-height: auto;
  }

  .pf-v5-c-login__main,
  .card-pf {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible !important;
  }

  .pf-v5-c-login__main::before,
  .card-pf::before {
    border-radius: 0;
  }

  .pf-v5-c-login__main-body {
    padding: 1.5rem 1.25rem;
  }

  .pf-v5-c-login__main-header {
    padding: 1.25rem 1.25rem 0;
  }

  .pf-v5-c-login__main-footer-band {
    padding: 1rem 1.25rem;
  }

  /* Compact logo on mobile */
  #kc-logo-text,
  .pf-v5-c-brand {
    width: 200px;
    height: 44px;
    margin-bottom: 1rem;
  }

  /* Compact back-to-app on mobile */
  .back-to-app {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /* Prevent any PatternFly container from overflowing */
  .pf-v5-c-login__container,
  .pf-v5-c-login__main-body,
  .pf-v5-c-login__main-footer,
  .pf-v5-c-login__main,
  #kc-form,
  #kc-form-wrapper {
    max-width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   14. Misc
   ========================================================================== */
/* Smooth transitions on interactive elements */
.pf-v5-c-button,
.pf-v5-c-form-control,
a {
  transition: all 0.2s ease;
}

/* Hide PatternFly default background pattern if any */
.pf-v5-c-login__container::before {
  display: none !important;
}

/* Ensure card is centered vertically */
.pf-v5-c-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Back to application link */
.back-to-app {
  text-align: center;
  margin-top: 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
}

.back-to-app a {
  color: var(--kt-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-to-app a:hover {
  color: var(--kt-link-hover);
  text-decoration: underline;
}