/* OpSee Keycloak Login Theme */

:root {
  --opsee-primary: #1877F2;
  --opsee-primary-hover: #1565D8;
  --opsee-text: #1A1A2E;
  --opsee-text-secondary: #6B7280;
  --opsee-border: #E5E7EB;
  --opsee-error: #DC2626;
  --opsee-error-bg: #FEF2F2;
  --opsee-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --opsee-radius: 12px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================
   WHITE BG + KILL KEYCLOAK WRAPPERS
   ============================================ */
html, body {
  background: #FFFFFF !important;
  background-image: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--opsee-text) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Every wrapper between body and our card: invisible */
.login-pf, body.login-pf, .login-pf-page,
.pf-c-login, .pf-v5-c-login,
.pf-c-login__container, .pf-v5-c-login__container,
.pf-c-login__main, .pf-v5-c-login__main,
.pf-c-login__main-body, .pf-v5-c-login__main-body,
.pf-c-login__main-header, .pf-v5-c-login__main-header,
.pf-c-login__main-footer, .pf-v5-c-login__main-footer,
#kc-container, #kc-container-wrapper,
#kc-content, #kc-content-wrapper,
#kc-form, #kc-form-wrapper,
.card-pf, .card-pf-body,
div[class^="pf-c-login"], div[class^="pf-v5-c-login"],
div[class*="kc-login"], main[class*="pf-c-login"],
main[class*="pf-v5-c-login"] {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  outline: none !important;
}

/* Hide all Keycloak default chrome */
#kc-header, #kc-header-wrapper, #kc-locale,
#kc-info, #kc-info-wrapper, .kc-social-providers,
#kc-registration,
.pf-c-login__footer, .pf-v5-c-login__footer,
.pf-c-login__header, .pf-v5-c-login__header,
.pf-c-login__main-footer, .pf-v5-c-login__main-footer,
.pf-c-login__main-header, .pf-v5-c-login__main-header {
  display: none !important;
}

/* ============================================
   CENTERING
   ============================================ */
body,
.login-pf,
.pf-c-login, .pf-v5-c-login,
#kc-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
}

.pf-c-login__container, .pf-v5-c-login__container,
#kc-container-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: 24px !important;
}

.pf-c-login__main, .pf-v5-c-login__main,
.pf-c-login__main-body, .pf-v5-c-login__main-body,
#kc-content, #kc-content-wrapper,
#kc-form, #kc-form-wrapper {
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  grid-template-columns: unset !important;
}

/* ============================================
   OUR LOGIN CARD
   ============================================ */
.opsee-login-card {
  background: #FFFFFF !important;
  border-radius: var(--opsee-radius) !important;
  box-shadow: var(--opsee-shadow) !important;
  width: 33vw !important;
  min-width: 420px !important;
  max-width: 600px !important;
  padding: 56px 64px !important;
}

/* ============================================
   LOGO
   ============================================ */
.opsee-logo {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.opsee-logo img {
  height: 280px !important;
  width: auto !important;
}

/* ============================================
   FORM — narrower than card, centered
   ============================================ */
#kc-form-login {
  width: 66% !important;
  margin: 0 auto !important;
}

.opsee-form-group {
  margin-bottom: 20px !important;
}

.opsee-form-group label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--opsee-text) !important;
  margin-bottom: 6px !important;
}

.opsee-form-group input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--opsee-border) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: var(--opsee-text) !important;
  background: #FFFFFF !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
}

.opsee-form-group input:focus {
  border-color: var(--opsee-primary) !important;
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15) !important;
}

.opsee-form-group input::placeholder {
  color: #9CA3AF !important;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */
.opsee-submit-btn {
  width: 100% !important;
  padding: 14px !important;
  background: var(--opsee-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s, transform 0.1s !important;
  margin-top: 8px !important;
}

.opsee-submit-btn:hover {
  background: var(--opsee-primary-hover) !important;
}

.opsee-submit-btn:active {
  transform: scale(0.98) !important;
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.opsee-error {
  background: var(--opsee-error-bg) !important;
  border: 1px solid #FECACA !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 66% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.opsee-error-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--opsee-error) !important;
  margin-top: 1px !important;
}

.opsee-error-text {
  font-size: 14px !important;
  color: var(--opsee-error) !important;
  line-height: 1.4 !important;
}

/* ============================================
   LOGOUT / INFO PAGES
   ============================================ */
.opsee-logout-content {
  text-align: center !important;
  width: 66% !important;
  margin: 0 auto !important;
}

.opsee-logout-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--opsee-text) !important;
  margin: 0 0 8px 0 !important;
}

.opsee-logout-text {
  font-size: 15px !important;
  color: var(--opsee-text-secondary) !important;
  margin: 0 0 24px 0 !important;
}

.opsee-link-btn {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
}

.opsee-back-link {
  margin-top: 16px !important;
  font-size: 14px !important;
}

.opsee-back-link a {
  color: var(--opsee-primary) !important;
  text-decoration: none !important;
}

.opsee-back-link a:hover {
  text-decoration: underline !important;
}

/* ============================================
   FOOTER
   ============================================ */
.opsee-footer {
  text-align: center !important;
  margin-top: 32px !important;
  font-size: 12px !important;
  color: var(--opsee-text-secondary) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .pf-c-login__container, .pf-v5-c-login__container,
  #kc-container-wrapper {
    padding: 16px !important;
  }

  .opsee-login-card {
    width: 90vw !important;
    min-width: unset !important;
    padding: 32px 24px !important;
    border-radius: 8px !important;
  }

  .opsee-logo img {
    height: 120px !important;
  }
}