/* =========================================
   FC Safety Login Theme - Modern Design
   ========================================= */

:root {
  /* Brand colors */
  --fc-primary-600: #15803d;
  --fc-primary-500: #16a34a;
  --fc-primary-400: #22c55e;
  --fc-primary-300: #4ade80;

  /* Neutrals */
  --fc-gray-50: #fafafa;
  --fc-gray-100: #f4f4f5;
  --fc-gray-200: #e4e4e7;
  --fc-gray-300: #d4d4d8;
  --fc-gray-400: #a1a1aa;
  --fc-gray-500: #71717a;
  --fc-gray-600: #52525b;
  --fc-gray-700: #3f3f46;
  --fc-gray-800: #27272a;
  --fc-gray-900: #18181b;

  /* Semantic */
  --fc-link: #2563eb;
  --fc-link-hover: #3b82f6;
  --fc-error: #dc2626;
  --fc-error-light: #fef2f2;

  /* Shadows */
  --fc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --fc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --fc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --fc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Spacing */
  --fc-radius: 8px;
  --fc-radius-lg: 12px;

  /* PatternFly overrides */
  --pf-v5-global--primary-color--100: var(--fc-primary-600);
  --pf-v5-global--primary-color--200: var(--fc-primary-500);
  --pf-v5-global--primary-color--300: var(--fc-primary-400);
  --pf-v5-global--FontFamily--heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --pf-v5-global--FontFamily--text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

.pf-v5-c-form {
  --pf-v5-c-form--GridGap: 0.5rem;
}

/* Primary button styling */
.pf-v5-c-button {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fc-primary-500);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fc-primary-600);
}

/* Login card */
.pf-v5-c-login__main {
  border: none;
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-xl);
  max-width: 420px;
  width: 100%;
  place-self: center;
  background: #fff;
}

/* Page background */
.login-pf body {
  background: linear-gradient(135deg, var(--fc-gray-100) 0%, var(--fc-gray-200) 100%);
  min-height: 100vh;
}

/* Logo header */
#kc-header-wrapper {
  background-image: url(https://content.fc-safety.com/fc_safety_logo_full_05x-light.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 2.4rem;
  height: 5rem;
  margin: 0 auto;
  color: transparent;
}

/* Collapse header when empty (no title shown) */
#kc-header-wrapper:empty,
.pf-v5-c-login__main-header:empty,
.pf-v5-c-login__main-header:not(:has(*)) {
  display: none;
}

/* Hide header section when title is empty/hidden */
.pf-v5-c-login__main-header:has(#kc-page-title:empty) {
  display: none;
}

/* Tighten card internal spacing */
.pf-v5-c-login__main-header {
  padding-bottom: 0;
}

.pf-v5-c-login__main-body {
  padding-top: 1.5rem;
}

/* Add spacing between instruction text and buttons */
.instruction,
p.instruction,
.content-area > p {
  margin-bottom: 1rem;
}

/* When there's an alert at top, give it some breathing room */
.pf-v5-c-login__main-body .pf-v5-c-alert:first-child {
  margin-bottom: 1rem;
}

/* Page title */
#kc-page-title {
  text-align: center;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--fc-gray-800);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

/* =========================================
   Dark Mode
   ========================================= */

:where(.pf-v5-theme-dark) {
  --fc-gray-50: #18181b;
  --fc-gray-100: #27272a;
  --fc-gray-200: #3f3f46;
  --fc-gray-300: #52525b;
  --fc-gray-400: #71717a;
  --fc-gray-500: #a1a1aa;
  --fc-gray-600: #d4d4d8;
  --fc-gray-700: #e4e4e7;
  --fc-gray-800: #f4f4f5;
  --fc-gray-900: #fafafa;

  --fc-link: #60a5fa;
  --fc-link-hover: #93c5fd;
  --fc-error-light: #450a0a;

  --fc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

:where(.pf-v5-theme-dark) .pf-v5-c-login__main {
  box-shadow: var(--fc-shadow-xl);
  background: #27272a;
  border: none;
}

.login-pf:where(.pf-v5-theme-dark) body {
  background: linear-gradient(135deg, #0f0f10 0%, var(--fc-gray-900) 100%);
}

:where(.pf-v5-theme-dark) #kc-header-wrapper {
  background-image: url(https://content.fc-safety.com/fc_safety_logo_full_05x-dark.png);
}

:where(.pf-v5-theme-dark) .pf-v5-c-button {
  --pf-v5-c-button--m-primary--BackgroundColor: #15803d;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #166534;
}

:where(.pf-v5-theme-dark) #kc-page-title {
  color: #f4f4f5 !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-title,
:where(.pf-v5-theme-dark) .pf-v5-c-login__main-header-desc {
  color: #a1a1aa !important;
}

/* =========================================
   Layout
   ========================================= */

.pf-v5-c-login__container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1200px) {
  .pf-v5-c-login__container {
    display: grid;
    flex-direction: initial;
    grid-template-areas: "main header";
    align-items: center;
  }
}

#kc-header {
  margin-block-start: 0;
}

#kc-header-wrapper * {
  display: none;
}

/* =========================================
   Form Controls
   ========================================= */

.pf-v5-c-form-control:has(> :is(input, select, textarea)) {
  border: 1px solid var(--fc-gray-300);
  border-radius: var(--fc-radius);
  background: var(--fc-gray-50);
  transition: all 0.15s ease;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: inherit;
  background: transparent;
}

.pf-v5-c-form-control:has(> :is(input, select, textarea):hover) {
  border-color: var(--fc-gray-400);
}

.pf-v5-c-form-control:has(> :is(input, select, textarea):focus) {
  border-color: var(--fc-primary-500);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.15);
  background: #fff;
}

.pf-v5-c-form-control:has(> :is(input, select, textarea)[aria-invalid="true"]) {
  border-color: var(--fc-error);
  background: var(--fc-error-light);
}

.pf-v5-c-form-control:has(> :is(input, select, textarea)[aria-invalid="true"]:focus) {
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

/* Remove default PatternFly underline styling */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none;
}

.pf-v5-c-form-control,
.pf-v5-c-form-control > :is(input, select, textarea) {
  outline: none;
}

#kc-info-wrapper {
  border-bottom-right-radius: var(--fc-radius);
  border-bottom-left-radius: var(--fc-radius);
}

/* Input groups (password reveal, etc.) */
.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
}

.pf-v5-c-input-group > * + * {
  margin: 0;
}

.pf-v5-c-input-group .pf-v5-c-form-control:has(> :is(input, select, textarea)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.pf-v5-c-input-group .pf-v5-c-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid var(--fc-gray-300);
  border-left: none;
  background: var(--fc-gray-50);
  color: var(--fc-gray-500);
  padding: 0 0.75rem;
  transition: all 0.15s ease;
}

.pf-v5-c-input-group .pf-v5-c-button:hover {
  background: var(--fc-gray-100);
  color: var(--fc-gray-700);
}

.pf-v5-c-input-group__item {
  border-inline-start-color: var(--fc-gray-300);
}

/* Restart login button - compact icon-only style */
#reset-login {
  padding: 0 0.625rem;
}

#reset-login .kc-tooltip-text {
  display: none;
}

/* Form labels - tighter spacing to inputs */
.pf-v5-c-form__group-label {
  margin-bottom: 0.25rem;
  padding-bottom: 0;
}

/* Tighter spacing between form groups (username/password) */
.pf-v5-c-form__group {
  margin-bottom: 0rem;
}

.pf-v5-c-form__group:last-of-type {
  margin-bottom: 0rem;
}

.pf-v5-c-form__label-text {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--fc-gray-700);
}

/* =========================================
   Buttons
   ========================================= */

.pf-v5-c-button {
  transition: all 0.15s ease;
  border-radius: var(--fc-radius);
  font-weight: 500;
}

.pf-v5-c-button::after {
  display: none;
}

.pf-v5-c-button.pf-m-primary {
  box-shadow: var(--fc-shadow-sm);
}

.pf-v5-c-button.pf-m-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow);
}

.pf-v5-c-button.pf-m-primary:active {
  transform: translateY(0);
}

.pf-v5-c-button.pf-m-secondary {
  border: 1px solid var(--fc-gray-300);
  background: #fff;
  color: var(--fc-gray-700);
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--fc-gray-50);
  border-color: var(--fc-gray-400);
}

.btn-lg {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
}

/* =========================================
   Links
   ========================================= */

.login-pf a:not(.pf-v5-c-button) {
  color: var(--fc-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.login-pf a:not(.pf-v5-c-button):hover {
  color: var(--fc-link-hover);
  text-decoration: underline;
}

/* =========================================
   Social/SSO Providers
   ========================================= */

#kc-social-providers hr {
  margin: 0.5rem 0;
}

#kc-social-providers h2,
#kc-social-providers .pf-v5-c-login__main-footer-band-item {
  margin: 0.5rem 0;
}

/* PatternFly footer band (contains the "Or sign in with" divider) */
.pf-v5-c-login__main-footer-band {
  padding-top: 0.75rem;
  padding-bottom: 0;
  border-block-start: 0;
}

.pf-v5-c-login__main-footer-band::before {
  margin-bottom: 0.5rem;
}

.pf-v5-c-login__main-footer-links-item {
  margin-top: 0.5rem;
}

.kc-social-gray.pf-c-button,
.kc-social-gray.pf-v5-c-button {
  background: var(--fc-gray-800);
  color: #fff;
  border: none;
  transition: all 0.15s ease;
  box-shadow: var(--fc-shadow-sm);
}

.kc-social-gray.pf-c-button:hover,
.kc-social-gray.pf-v5-c-button:hover {
  background: var(--fc-gray-900);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow);
}

#kc-social-providers svg {
  height: var(--pf-v5-global--FontSize--xl);
  fill: currentColor;
}

/* =========================================
   Alerts & Messages
   ========================================= */

.pf-v5-c-alert {
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow-sm);
  padding: 0.75rem 1rem;
}

.pf-v5-c-alert.pf-m-success {
  background: #dcfce7;
  border: 1px solid #86efac;
}

.pf-v5-c-alert.pf-m-info {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.pf-v5-c-alert.pf-m-warning {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.pf-v5-c-alert.pf-m-danger {
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

/* Dark mode alerts */
:where(.pf-v5-theme-dark) .pf-v5-c-alert.pf-m-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-alert.pf-m-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-alert.pf-m-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-alert.pf-m-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

#kc-info-message,
#kc-error-message {
  text-align: center;
  margin-top: 1rem;
}

#kc-info-message a,
#kc-error-message a {
  font-size: 1.125rem;
  width: 100%;
  display: block;
}

#instruction1 {
  text-align: center;
}

#instruction1 a {
  font-size: 1rem;
}

/* =========================================
   Try Another Way
   ========================================= */

#kc-select-try-another-way-form {
  text-align: center;
}

#kc-select-try-another-way-form a {
  color: var(--fc-gray-500);
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

#kc-select-try-another-way-form a:hover {
  color: var(--fc-gray-700);
}

#kc-select-try-another-way-form .form-group {
  margin-top: 0.75rem;
}

/* =========================================
   Spacing & Layout Tweaks
   ========================================= */

@media (min-width: 768px) {
  .login-pf-page .login-pf-page-header {
    margin-bottom: 1.5rem;
  }
}

#kc-form {
  margin-bottom: 1rem;
}

/* =========================================
   Dark Mode Adjustments
   ========================================= */

:where(.pf-v5-theme-dark) .pf-v5-c-form-control:has(> :is(input, select, textarea)) {
  background: #27272a !important;
  border-color: #3f3f46 !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-form-control > :is(input, select, textarea) {
  background: transparent !important;
  color: #fafafa !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-form-control:has(> :is(input, select, textarea):focus) {
  background: #27272a !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgb(74 222 128 / 0.2);
}

:where(.pf-v5-theme-dark) .pf-v5-c-form__label-text {
  color: #a1a1aa;
}

:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-secondary {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #e4e4e7 !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-secondary:hover {
  background: #3f3f46 !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-input-group .pf-v5-c-button {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #a1a1aa !important;
}

:where(.pf-v5-theme-dark) .pf-v5-c-input-group .pf-v5-c-button:hover {
  background: #3f3f46 !important;
  color: #e4e4e7 !important;
}

/* Social/SSO buttons in dark mode */
:where(.pf-v5-theme-dark) .kc-social-gray.pf-c-button,
:where(.pf-v5-theme-dark) .kc-social-gray.pf-v5-c-button,
:where(.pf-v5-theme-dark) #kc-social-providers .pf-v5-c-button,
:where(.pf-v5-theme-dark) #kc-social-providers .pf-c-button {
  background: #3f3f46 !important;
  color: #fafafa !important;
  border: 1px solid #52525b !important;
}

:where(.pf-v5-theme-dark) .kc-social-gray.pf-c-button:hover,
:where(.pf-v5-theme-dark) .kc-social-gray.pf-v5-c-button:hover,
:where(.pf-v5-theme-dark) #kc-social-providers .pf-v5-c-button:hover,
:where(.pf-v5-theme-dark) #kc-social-providers .pf-c-button:hover {
  background: #52525b !important;
}