/* DBS Branding for Keycloak v26 (PatternFly v5)
 * Overrides default Keycloak login theme with DBS corporate style.
 * Managed by Ansible — do not edit manually.
 */

/* === Font === */
@font-face {
  font-family: "Manrope";
  font-display: swap;
  font-style: normal;
  font-weight: 200 800;
  src: url("/branding/manrope-variable.woff2") format("woff2-variations");
}

/* === Variables === */
:root {
  --dbs-dark: #1C1C1C;
  --dbs-surface: #252525;
  --dbs-surface-hover: #2E2E2E;
  --dbs-border: rgba(255, 255, 255, 0.10);
  --dbs-accent: #FF6300;
  --dbs-accent-hover: #E55A00;
  --dbs-light: #F2F1F0;
  --dbs-text: #D0CFCE;
  --dbs-text-secondary: #9A9998;
  --dbs-input-bg: #1A1A1A;
  --dbs-input-border: #404040;
  --dbs-grad-top: oklch(55% 0.09 50);
  --dbs-grad-mid: oklch(35% 0.04 50);
  --dbs-grad-bottom: oklch(20% 0.002 17);
}

/* === Global === */
html, body, html.login-pf {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.005em !important;
}

/* === Background === */
body#keycloak-bg {
  background: linear-gradient(180deg, var(--dbs-grad-top) 0%, var(--dbs-grad-mid) 40%, var(--dbs-grad-bottom) 100%) !important;
  min-height: 100vh !important;
}

/* === Login container === */
.pf-v5-c-login {
  background: transparent !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pf-v5-c-login__container {
  max-width: 440px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* === Header (realm branding) === */
.pf-v5-c-login__header {
  text-align: center !important;
  padding: 0 0 24px 0 !important;
}

#kc-header-wrapper.pf-v5-c-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-size: 0 !important;
  color: transparent !important;
}

#kc-header-wrapper.pf-v5-c-brand::before {
  content: "" !important;
  display: inline-block !important;
  width: 100px !important;
  height: 24px !important;
  background: url("/branding/logo.svg") no-repeat center / contain !important;
}

#kc-header-wrapper.pf-v5-c-brand::after {
  content: "VPN" !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dbs-text-secondary) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-left: 12px !important;
}

/* === Main card === */
.pf-v5-c-login__main {
  background: var(--dbs-surface) !important;
  border: 1px solid var(--dbs-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

/* === Main header (title + language selector) === */
.pf-v5-c-login__main-header {
  padding: 32px 32px 16px !important;
  background: transparent !important;
}

.pf-v5-c-login__main-header h1,
#kc-page-title {
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Language selector */
.pf-v5-c-login__main-header-utilities {
  display: flex !important;
  justify-content: center !important;
  margin-top: 12px !important;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  background: var(--dbs-input-bg) !important;
  border: 1px solid var(--dbs-input-border) !important;
  border-radius: 8px !important;
}

.pf-v5-c-login__main-header-utilities select {
  background: transparent !important;
  color: var(--dbs-text-secondary) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 13px !important;
  border: none !important;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__toggle-icon {
  color: var(--dbs-text-secondary) !important;
}

/* === Main body (form) === */
.pf-v5-c-login__main-body {
  padding: 16px 32px 32px !important;
}

/* === Form labels === */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--dbs-text) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* === Form inputs === */
.pf-v5-c-form-control input,
.pf-v5-c-form-control > span > input,
.pf-v5-c-input-group input {
  background: var(--dbs-input-bg) !important;
  border: 2px solid var(--dbs-input-border) !important;
  border-radius: 8px !important;
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  height: auto !important;
  caret-color: var(--dbs-accent) !important;
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-input-group input:focus {
  border-color: var(--dbs-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 99, 0, 0.15) !important;
  outline: none !important;
}

.pf-v5-c-form-control input::placeholder {
  color: #666 !important;
}

/* Input wrapper border override */
.pf-v5-c-form-control:not(.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control) {
  border: none !important;
  background: transparent !important;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent !important;
}

/* === Input group (password field) === */
.pf-v5-c-input-group {
  background: transparent !important;
}

.pf-v5-c-input-group__item {
  background: transparent !important;
}

/* Show/hide password button */
.pf-v5-c-button.pf-m-control {
  background: var(--dbs-input-bg) !important;
  border: 2px solid var(--dbs-input-border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--dbs-text-secondary) !important;
}

.pf-v5-c-button.pf-m-control:hover {
  color: var(--dbs-light) !important;
}

/* === Submit button === */
.pf-v5-c-button.pf-m-primary {
  background: var(--dbs-accent) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--dbs-accent-hover) !important;
}

/* === Footer === */
.pf-v5-c-login__main-footer {
  background: transparent !important;
  padding: 0 32px 24px !important;
}

/* === Links === */
.pf-v5-c-login a,
.pf-v5-c-login__main a {
  color: var(--dbs-accent) !important;
}

.pf-v5-c-login a:hover,
.pf-v5-c-login__main a:hover {
  color: var(--dbs-accent-hover) !important;
}

/* === Alert messages === */
.pf-v5-c-alert {
  background: rgba(255, 77, 77, 0.1) !important;
  border: 1px solid rgba(255, 77, 77, 0.3) !important;
  border-radius: 8px !important;
}

.pf-v5-c-alert__title {
  color: #FF4D4D !important;
  font-family: "Manrope", sans-serif !important;
}

/* === Dark mode override (Keycloak auto-detects) === */
html.pf-v5-theme-dark body#keycloak-bg,
body#keycloak-bg {
  background: linear-gradient(180deg, var(--dbs-grad-top) 0%, var(--dbs-grad-mid) 40%, var(--dbs-grad-bottom) 100%) !important;
}

html.pf-v5-theme-dark .pf-v5-c-login__main,
.pf-v5-c-login__main {
  background: var(--dbs-surface) !important;
}

/* === Selection === */
::selection {
  background: rgba(255, 99, 0, 0.3) !important;
  color: #fff !important;
}

/* === Responsive === */
@media (max-width: 480px) {
  .pf-v5-c-login__container {
    padding: 0 16px !important;
  }
  .pf-v5-c-login__main-header,
  .pf-v5-c-login__main-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}