/* HCCC Keycloak Theme - Base Overrides - Updated 2025-12-09 */

/* HCCC Brand Variables */
:root {
  --hccc-teal: #00857a;
  --hccc-teal-dark: #006b5f;
  --hccc-blue: #2b3990;
  --hccc-white: #ffffff;
  --hccc-gray: #f4f7f6;
}

/* Page background color - must override Keycloak defaults */
html,
body,
.login-pf,
.login-pf body,
.login-pf-page {
  background: #f4f7f6 !important;
  background-color: #f4f7f6 !important;
}

/* HEADER LOGO - Outside the card */
.hccc-header-logo {
  text-align: center !important;
  margin-top: 40px !important;
  margin-bottom: 30px !important;
}

.hccc-header-logo img {
  max-width: 200px !important;
  width: 100% !important;
  height: auto !important;
}

/* Remove default Keycloak background image */
.login-pf body:before {
  display: none;
}

/* Override default container width */
.container {
  max-width: 100%;
  padding: 0 20px;
}

/* Center the login card */
.row {
  margin: 0;
  display: flex;
  justify-content: center;
}

.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3.col-lg-6.col-lg-offset-3 {
  max-width: 450px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Remove default card styling */
.card-pf {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Override form group spacing */
.form-group {
  margin-bottom: 20px;
}

/* Override button styling to remove PatternFly defaults */
.btn {
  font-family: 'Montserrat', sans-serif;
  border: none;
  box-shadow: none;
}

.btn-primary {
  background-image: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-image: none;
  box-shadow: none;
}

/* Override alert styling */
.pf-c-alert,
.alert {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
}

/* Remove default PatternFly input styling */
.pf-c-form-control,
.form-control {
  background-image: none;
  box-shadow: none;
}

/* Override default link styling in form options */
#kc-form-options a {
  font-size: 0.875rem;
}

/* Ensure proper spacing for form wrapper */
#kc-form-wrapper {
  margin-top: 0;
}

/* Override default header styling */
#kc-header {
  background: none;
  padding: 0;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Remove unnecessary margins */
#kc-content-wrapper {
  margin: 0;
  padding: 0;
}

/* MICROSOFT-ONLY LOGIN CONFIGURATION */
/* Use higher specificity to override PatternFly styles - ONLY for login page, NOT logout confirmation */
.login-pf-page #kc-content #kc-form:not([action*="logout-confirm"]),
.login-pf-page #kc-content #kc-form-wrapper:not([action*="logout-confirm"]),
.login-pf-page #kc-content #kc-form-login,
.login-pf-page #kc-content input#username,
.login-pf-page #kc-content input#password,
.login-pf-page #kc-content label[for="username"],
.login-pf-page #kc-content label[for="password"],
.login-pf-page .card-pf #kc-form:not([action*="logout-confirm"]),
.login-pf-page .card-pf .form-group:not([action*="logout-confirm"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide form buttons and options ONLY on login page (pages WITHOUT logout confirmation) */
.login-pf-page #kc-content #kc-form-buttons:not(#kc-logout-confirm #kc-form-buttons),
.login-pf-page #kc-content #kc-form-options:not(#kc-logout-confirm #kc-form-options),
.login-pf-page #kc-content .form-group:not(#kc-logout-confirm .form-group),
.login-pf-page #kc-content .pf-c-form__group:not(#kc-logout-confirm .pf-c-form__group) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Additional override: Make sure logout confirmation elements are ALWAYS visible */
#kc-logout-confirm #kc-form-buttons,
#kc-logout-confirm #kc-form-options,
#kc-logout-confirm .form-group,
#kc-logout-confirm input[type="submit"],
#kc-logout-confirm button {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Hide "Or sign in with:" text */
#kc-social-providers h4,
.kc-social-section h4 {
  display: none !important;
}

/* Instruction text above social providers */
.hccc-login-instruction {
  margin: 20px 0 15px 0;
  text-align: center;
}

.hccc-login-instruction p {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

/* Social providers are now properly positioned in template - simplified styling */
#kc-social-providers {
  margin-top: 10px;
  text-align: center;
}

/* Style Microsoft button - HCCC Brand: clean, professional, less rounded */
#social-microsoft {
  background-color: var(--hccc-teal) !important;
  background-image: none !important;
  color: var(--hccc-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  text-align: center !important;
  max-width: 300px !important;
  margin: 0 auto 20px auto !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover state for Microsoft button - HCCC Brand */
#social-microsoft:hover {
  background-color: var(--hccc-teal-dark) !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  border-color: transparent !important;
  border: none !important;
  color: var(--hccc-white) !important;
}

/* Add Microsoft icon styling - broader targeting */
#social-microsoft::before,
.kc-social-item::before,
a[href*="microsoft"]::before,
a[href*="broker/microsoft"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23ffffff' d='M0 0h11v11H0zM13 0h11v11H13zM0 13h11v11H0zM13 13h11v11H13z'/%3E%3C/svg%3E");
  margin-right: 8px;
  font-size: 1.1em;
}

/* Center the social providers section and improve layout */
.kc-social-section {
  text-align: center !important;
  margin-top: 20px !important;
}

.kc-social-list,
.pf-c-login__main-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Fix UL container padding that shifts button right */
#kc-social-providers ul {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

/* AGGRESSIVE MICROSOFT BUTTON CENTERING FIX - Override all conflicting styles */
#social-microsoft,
a[href*="microsoft"],
a[href*="broker/microsoft"] {
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: translateX(0) !important;
  position: relative !important;
  display: block !important;
  width: 300px !important;
  max-width: 300px !important;
  text-align: center !important;
}

/* Force center the parent container */
#kc-social-providers {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

#kc-social-providers ul {
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  width: 100% !important;
  text-align: center !important;
}

/* Hide the separator line */
#kc-social-providers hr {
  display: none !important;
}

/* Ensure proper card layout for Microsoft-only */
#kc-content {
  padding: 40px !important;
  text-align: center;
  min-height: 200px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Update page title for Microsoft-only context */
#kc-page-title {
  margin-bottom: 30px !important;
}

/* Force center positioning for any Microsoft login elements */
.login-pf-page [class*="social"],
.login-pf-page [id*="social"],
.login-pf-page [href*="microsoft"] {
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* HCCC Custom Microsoft Button Styling - moved into kc-content */
#hccc-microsoft-container {
  text-align: center !important;
  margin: 30px auto !important;
  max-width: 300px !important;
  width: 100% !important;
}

#hccc-microsoft-button,
.hccc-microsoft-btn {
  background-color: var(--hccc-teal) !important;
  background-image: none !important;
  color: var(--hccc-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  text-align: center !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 8px rgba(0, 133, 122, 0.2) !important;
  position: relative !important;
  cursor: pointer !important;
}

#hccc-microsoft-button:hover,
.hccc-microsoft-btn:hover {
  background-color: var(--hccc-teal-dark) !important;
  background-image: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 133, 122, 0.3) !important;
  text-decoration: none !important;
  color: var(--hccc-white) !important;
}

/* Hide the original social providers section when button is moved */
#kc-social-providers[style*="display: none"] {
  display: none !important;
}

/* LOGOUT CONFIRMATION PAGE STYLING */
/* Ensure logout confirmation elements are visible and styled */
#kc-logout-confirm {
  text-align: center !important;
  padding: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}

#kc-logout-confirm .instruction {
  font-size: 1.1rem !important;
  color: #333 !important;
  margin-bottom: 30px !important;
  font-weight: 500 !important;
}

/* Ensure logout confirmation buttons are visible and styled */
#kc-logout-confirm #kc-form-buttons,
#kc-logout-confirm #kc-form-options {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 20px 0 !important;
}

/* Style the logout button */
#kc-logout-confirm #kc-logout {
  background-color: var(--hccc-teal) !important;
  background-image: none !important;
  color: var(--hccc-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  margin: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 133, 122, 0.2) !important;
}

#kc-logout-confirm #kc-logout:hover {
  background-color: var(--hccc-teal-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 133, 122, 0.3) !important;
}

/* Style the back to application link */
#kc-logout-confirm #kc-info-message a {
  color: var(--hccc-blue) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: color 0.3s ease !important;
}

#kc-logout-confirm #kc-info-message a:hover {
  color: var(--hccc-teal) !important;
  text-decoration: underline !important;
}

/* LOGIN PAGE HELP TEXT STYLING */
.hccc-login-help-text {
  margin-top: 20px !important;
  padding: 15px !important;
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  color: #333 !important;
  line-height: 1.6 !important;
}

.hccc-login-help-text p {
  margin: 0 !important;
}

.hccc-login-help-text strong {
  color: var(--hccc-blue) !important;
}

.hccc-login-help-text a {
  color: var(--hccc-teal) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.hccc-login-help-text a:hover {
  color: var(--hccc-teal-dark) !important;
  text-decoration: underline !important;
}

.hccc-login-help-text .hccc-disclaimer {
  font-size: 0.75rem !important;
  color: #666 !important;
  font-style: italic !important;
}