/*
 * Cache-busted layout and color corrections for the Star Stage login screen.
 * This file is intentionally loaded after login.css so browsers that retained
 * the previous theme still receive the corrected layout immediately.
 */
:root {
  --ssj-primary: #c30765 !important;
  --ssj-primary-bright: #c47ae0 !important;
}

.pf-v5-c-login__container {
  grid-template-areas: "header" "main" !important;
  grid-template-columns: minmax(320px, 520px) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-content: center !important;
}

#kc-header,
.pf-v5-c-login__header {
  grid-area: header !important;
  justify-self: center !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  text-align: center !important;
}

.pf-v5-c-login__main,
.card-pf {
  grid-area: main !important;
  width: 100% !important;
  border-top-color: var(--ssj-primary-bright) !important;
}

.pf-v5-c-login__main-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

.pf-v5-c-login__main-header-utilities {
  justify-self: start !important;
}

#kc-page-title {
  width: 100% !important;
  white-space: nowrap !important;
}

#kc-login,
.pf-v5-c-button.pf-m-primary {
  border-color: var(--ssj-primary) !important;
  background: linear-gradient(135deg, #c30765 0%, #a846c8 100%) !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover {
  border-color: #a60055 !important;
  background: linear-gradient(135deg, #a60055 0%, #8f35b0 100%) !important;
}

a,
#kc-form-options a,
#kc-info a {
  color: #a60055 !important;
}

.pf-v5-c-input-group {
  align-items: stretch !important;
}

.pf-v5-c-input-group > .pf-v5-c-form-control,
.pf-v5-c-input-group > input {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.pf-v5-c-input-group > .pf-v5-c-button.pf-m-control {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 600px) {
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #kc-page-title {
    white-space: normal !important;
  }
}