html {
  --background: #000314;
  --primary: #ffd200;
  --secondary: #22263c;
  --text-primary: #fff;
  --text-secondary: #757c9f;

  --clip-size: 25px;
  --clip-size-small: 14px;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
}

/* Page Background */
.login-page {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  width: 100%;
  background: var(--background);
  font-family: "JetBrains Mono", sans-serif;
}

/* Navbar */
.navbar {
  position: relative;
  backdrop-filter: blur(64px);
  border-bottom: 1px solid var(--secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  z-index: 10;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar-left > a > img {
  aspect-ratio: 1 / 1;
  width: 70px;
}
.logo-text {
  color: #fff;
  font-family: "JetBrains Mono", sans-serif;
  font-size: 24px;
}
.version {
  color: var(--primary);
  font-weight: bold;
}
.menu-icon {
  width: 20px;
  height: 20px;
  background: var(--primary);
}

/* Login container */
.login-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  height: 100%;
  padding: 150px 20px;
  z-index: 5;
}

@media (max-width: 500px) {
  .login-container {
    padding: 100px 20px;
  }
}

.login-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Login card */
.login-card {
  position: relative;
  width: 100%;
  padding: 20px;
  background: var(--secondary);
  backdrop-filter: blur(64px);
  border: 1px solid var(--secondary);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #fff;
  clip-path: polygon(
    0 0,
    calc(100% - var(--clip-size)) 0,
    100% var(--clip-size),
    100% 100%,
    var(--clip-size) 100%,
    0 calc(100% - var(--clip-size)),
    0% 100%
  );
}

/* Login header */
.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-title {
  font-family: "JetBrains Mono", sans-serif;
  font-size: 28px;
}
.login-title img {
  max-width: 200px;
  height: auto;
}
.login-icon {
  width: 40px;
  height: 33px;
  background: var(--primary);
}

/* Inputs */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
}
.input-group label {
  font-size: 14px;
  color: var(--text-primary);
}
.input-group label .required {
  color: #e61224;
  tvertical-align: super;
}
.input-group input {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--text-primary);
  color: var(--background);
  font-weight: bold;
  border: none;
  font-size: 14px;
  font-family: "JetBrains Mono", sans-serif;
  clip-path: polygon(
    0 0,
    calc(100% - var(--clip-size-small)) 0,
    100% var(--clip-size-small),
    100% 100%,
    var(--clip-size-small) 100%,
    0 calc(100% - var(--clip-size-small)),
    0% 100%
  );
}

/* Submit Button */
button#kc-login {
  width: 100%;
  height: 38px;
  background: var(--primary);
  border: none;
  color: var(--background);
  font-size: 16px;
  font-family: "JetBrains Mono", sans-serif;
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
  clip-path: polygon(
    0 0,
    calc(100% - var(--clip-size-small)) 0,
    100% var(--clip-size-small),
    100% 100%,
    var(--clip-size-small) 100%,
    0 calc(100% - var(--clip-size-small)),
    0% 100%
  );
}
button#kc-login:hover {
  opacity: 0.9;
}

/* Remember me */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
}
.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.remember-me label {
  cursor: pointer;
}

/* Footer links */
.login-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  text-align: center;
  padding: 0px;
  color: var(--text-primary);
  text-decoration: none;
}
.login-footer a {
  color: var(--text-primary);
  text-decoration: none;
}
.login-footer a.forgot-password {
  text-align: right;
  align-self: flex-end;
  padding-top: 5px;
  padding-bottom: 5px;
}
.login-footer a.new-account {
  color: var(--primary);
  text-decoration: none;
}
.login-footer a.back-to-login {
  color: var(--text-primary);
  text-decoration: none;
  transition: 0.3s;
}
.login-footer a.back-to-login:hover {
  color: #fff;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Form titles */
.form-title {
  font-family: "Russo One", sans-serif;
  letter-spacing: 3px;
  font-size: 40px;
  color: var(--primary);
  font-weight: bold;
  margin: 0;
  text-align: center;
}
.form-subtitle {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0;
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

.submit-button {
  margin-top: 20px;
  width: 100%;
}

/* Verify email content */
.verify-email-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

/* Update password actions */
.update-actions {
  display: flex;
  gap: 10px;
}
.update-actions button {
  flex: 1;
}
.btn-secondary {
  width: 100%;
  height: 42px;
  background: transparent;
  border: 1px solid var(--secondary);
  color: var(--text-primary);
  font-size: 16px;
  font-family: "JetBrains Mono", sans-serif;
  cursor: pointer;
  transition: 0.3s;
}
.btn-secondary:hover {
  border-color: #fff;
  color: #fff;
}

/* Info/Loading page */
.info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  text-align: center;
}
.info-message {
  font-size: 14px;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}
.info-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(142, 137, 136, 0.3);
  color: #fff;
}
.info-icon.success {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.info-icon.warning {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}
.info-icon.error {
  background: rgba(230, 18, 36, 0.2);
  color: var(--primary);
}

/* Loading spinner */
.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(142, 137, 136, 0.3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Override Keycloak default loading styles */
#kc-loading-wrapper,
.kc-loading-wrapper {
  background: #090a0f !important;
}

#kc-loading-wrapper .kc-spinner,
.kc-loading-wrapper .kc-spinner,
#kc-loading-wrapper .pf-c-spinner,
.pf-c-spinner {
  --pf-c-spinner--Color: var(--primary) !important;
  border-color: rgba(142, 137, 136, 0.3) !important;
  border-top-color: var(--primary) !important;
}

/* PatternFly loading overrides */
.pf-c-background-image {
  background-color: #090a0f !important;
  background-image: none !important;
}

.pf-c-login {
  background-color: #090a0f !important;
}

.pf-c-login__main {
  background: rgba(40, 40, 48, 0.5) !important;
  backdrop-filter: blur(64px) !important;
  border: 1px solid var(--secondary) !important;
}

/* Override any loading/spinner from parent theme */
[class*="spinner"],
[class*="loading"] .pf-c-spinner {
  --pf-c-spinner--diameter: 50px;
  --pf-c-spinner--Color: var(--primary);
}

.pf-c-spinner__clipper::before,
.pf-c-spinner__clipper::after,
.pf-c-spinner__lead-ball::before,
.pf-c-spinner__tail-ball::before {
  background-color: var(--primary) !important;
}

.pf-c-spinner__path {
  stroke: var(--primary) !important;
}

/* Custom loading overlay */
#kc-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(9, 10, 15, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#kc-loading-overlay .loading-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
#kc-loading-overlay p {
  color: #fff;
  font-family: "JetBrains Mono", sans-serif;
  font-size: 16px;
  margin: 0;
}

/* Alert messages */
.alert {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.alert-error {
  background: rgba(230, 18, 36, 0.2);
  border: 1px solid #e61224;
  color: #e61224;
}
.alert-warning {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid #eab308;
  color: #eab308;
}
.alert-success {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  color: #22c55e;
}
.alert-info {
  background: rgba(142, 137, 136, 0.2);
  border: 1px solid #8e8988;
  color: #8e8988;
}

/* Force hide default Keycloak loading elements */
#kc-loading-wrapper,
.kc-loading-wrapper,
[id*="loading-wrapper"],
.pf-c-backdrop,
.pf-c-page__main-section--loading,
#kc-loading,
.kc-loading,
#kc-spinner,
.kc-spinner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Override Keycloak v2 specific loading */
body > div[style*="loading"],
body > .loading,
body.pf-m-redisplay-spinner .pf-c-spinner,
.pf-c-login .pf-c-spinner {
  display: none !important;
}

/* Hide any PatternFly backgrounds/spinners */
.pf-v5-c-backdrop,
.pf-v5-c-spinner,
.pf-c-background-image,
#kc-content-wrapper > .pf-c-spinner,
.pf-v5-c-button .pf-v5-c-spinner {
  display: none !important;
}

/* Hide Keycloak default loading screen completely */
body:not(.login-page) {
  background: #090a0f !important;
}

/* Ensure parent theme wrappers don't show through */
.pf-c-page,
.pf-c-login,
.pf-c-login__container,
.pf-c-login__main {
  background: transparent !important;
}