/* ================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ================================ */
:root {
  /* Brand Colors */
  --nrw-primary: #283753;
  --nrw-primary-hover: #32476C;
  --nrw-background: #f5f7f7;
  --nrw-background-mobile: #f5f5f5;
  --nrw-white: #ffffff;
  --nrw-text-color: #101010;
  --nrw-text-hover: #404040;
  --nrw-gray: #666666; /* Gray color for instruction text */
  
  /* Semantic Colors */
  --primary-color: var(--nrw-primary);
  --primary-hover-color: var(--nrw-primary-hover);
  --background-color: var(--nrw-background);
  --text-color: var(--nrw-white);
  --link-color: var(--nrw-text-color);
  --link-hover-color: var(--nrw-text-hover);
  --instruction-text-color: var(--nrw-gray);
  
  /* Opacity Values */
  --border-opacity: 0.3;
  --focus-opacity: 0.25;
  --hover-opacity: 0.1;
  
  /* Spacing */
  --logo-height: 100px;
  --logo-width: 400px;
  --logo-height-mobile: 80px;
  --logo-width-mobile: 250px;
  --form-max-width: 500px;
  --form-padding: 40px;
  --form-padding-mobile: 20px;
  --form-spacing: 20px;
  --button-min-width: 120px;
  --border-width: 4px;
  --focus-ring-width: 0.125rem;
}

/* ================================
   BASE LAYOUT & BACKGROUND
   ================================ */
html, body {
  background: var(--background-color) !important;
  background-image: none !important;
  height: 100%;
  margin: 0;
  padding: 0;
}

.login-pf body,
#keycloak-bg,
body {
  background: var(--background-color) !important;
  background-image: none !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Make the main login container scrollable with full background */
.login-pf {
  min-height: 100vh;
  background: var(--background-color) !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Reduce space around the header */
#kc-header {
  margin-bottom: 20px;
  padding-top: 20px;
}

/* Main form card container with scroll capability */
.login-pf .card-pf {
  margin-top: 0;
  margin-bottom: 20px;
}

/* ================================
   LOGO STYLING
   ================================ */
div.kc-logo-text {
  background-image: url(../img/nrw-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: var(--logo-height);
  width: var(--logo-width);
  margin: 0 auto 15px auto; /* Reduced bottom margin */
}

div.kc-logo-text span {
  display: none;
}

/* ================================
   CUSTOM TEXT STYLING
   ================================ */
.kc-custom-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--instruction-text-color) !important; /* Use gray from color palette */
  text-align: center;
  margin: 15px 0 25px 0;
  line-height: 1.4;
}

/* ================================
   PAGE TITLE STYLING
   ================================ */
.login-pf-page {
  padding-bottom: 20px; /* Add bottom padding for better spacing */
}

.login-pf-page .login-pf-header h1 {
  font-size: 18px;
  color: var(--link-color) !important; /* Use black from color palette for titles */
}

/* ================================
   LAYOUT OVERRIDES
   ================================ */
.col-md-10 {
  width: 100% !important;
}

/* ================================
   FORM CONTAINER
   ================================ */
.card-pf {
  margin: 0 auto;
  box-shadow: var(--pf-global--BoxShadow--lg);
  padding: 0 var(--form-padding);
  max-width: var(--form-max-width);
  border-top: var(--border-width) solid var(--primary-color);
}

/* ================================
   FORM ELEMENTS
   ================================ */
.pf-c-form-control {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.form-group {
  margin-bottom: var(--form-spacing);
}

/* ================================
   BUTTONS
   ================================ */
.pf-c-button {
  min-width: var(--button-min-width);
}

.pf-c-button.pf-m-primary.pf-m-block.btn-lg[type="submit"] {
  margin-top: var(--form-spacing);
}

/* Primary Button Styling */
.pf-c-button.pf-m-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-color) !important;
}

.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus {
  background-color: var(--primary-hover-color) !important;
  border-color: var(--primary-hover-color) !important;
  color: var(--text-color) !important;
}

/* Control Button Styling */
.pf-c-button.pf-m-control,
button[data-password-toggle] {
  color: var(--primary-color) !important;
  border-color: rgba(from var(--link-color) r g b / var(--border-opacity)) !important;
}

.pf-c-button.pf-m-control:hover,
.pf-c-button.pf-m-control:focus,
.pf-c-button.pf-m-control:active,
button[data-password-toggle]:hover,
button[data-password-toggle]:focus,
button[data-password-toggle]:active {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background-color: rgba(from var(--link-color) r g b / var(--hover-opacity)) !important;
}

/* ================================
   LINKS
   ================================ */
a, 
.pf-c-button.pf-m-link,
#kc-form-login a {
  color: var(--link-color) !important;
}

a:hover,
a:focus,
.pf-c-button.pf-m-link:hover,
.pf-c-button.pf-m-link:focus,
#kc-form-login a:hover,
#kc-form-login a:focus {
  color: var(--link-hover-color) !important;
}

/* ================================
   INPUT FOCUS STATES
   ================================ */
.pf-c-form-control:focus,
#username:focus,
#password:focus {
  border-color: var(--link-color) !important;
  box-shadow: 0 0 0 var(--focus-ring-width) rgba(from var(--link-color) r g b / var(--focus-opacity)) !important;
}

/* ================================
   CSS CUSTOM PROPERTIES OVERRIDES
   ================================ */
.pf-c-form-control {
  --pf-c-form-control--focus--BorderColor: var(--link-color) !important;
  --pf-c-form-control--focus--BoxShadow: 0 0 0 var(--focus-ring-width) rgba(from var(--link-color) r g b / var(--focus-opacity)) !important;
  --pf-c-form-control--hover--BorderBottomColor: var(--link-color) !important;
  --pf-c-form-control--focus--BorderBottomColor: var(--link-color) !important;
}

.pf-c-button.pf-m-control {
  --pf-c-button--m-control--Color: var(--link-color) !important;
  --pf-c-button--m-control--BorderColor: rgba(from var(--link-color) r g b / var(--border-opacity)) !important;
  --pf-c-button--m-control--hover--Color: var(--link-color) !important;
  --pf-c-button--m-control--hover--BorderColor: var(--link-color) !important;
  --pf-c-button--m-control--focus--Color: var(--link-color) !important;
  --pf-c-button--m-control--focus--BorderColor: var(--link-color) !important;
  --pf-c-button--m-control--active--Color: var(--link-color) !important;
  --pf-c-button--m-control--active--BorderColor: var(--link-color) !important;
  --pf-c-button--m-control--after--BorderBottomColor: var(--link-color) !important;
  --pf-c-button--m-control--hover--after--BorderBottomColor: var(--link-color) !important;
  --pf-c-button--m-control--active--after--BorderBottomColor: var(--link-color) !important;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */
@media (max-width: 767px) {
  /* Mobile Logo */
  div.kc-logo-text {
    margin: 0 auto 10px auto; /* Further reduced bottom margin on mobile */
    width: var(--logo-width-mobile);
    height: var(--logo-height-mobile);
    background-size: contain;
  }
  
  /* Mobile Form Container */
  .card-pf {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 var(--form-padding-mobile);
    border-top: 0;
    box-shadow: none;
  }
  
  /* Mobile Background */
  html, body {
    background: var(--nrw-background-mobile) !important;
    background-image: none !important;
  }
  
  .login-pf body,
  #keycloak-bg,
  body {
    background: var(--nrw-background-mobile) !important;
    background-image: none !important;
  }
  
  .login-pf {
    background: var(--nrw-background-mobile) !important;
  }
  
  /* Mobile header spacing */
  #kc-header {
    margin-bottom: 15px;
    padding-top: 15px;
  }
  
  /* Mobile custom text */
  .kc-custom-text {
    font-size: 15px;
    margin: 10px 0 20px 0;
  }
}
`