/* =========================================================
   CORPORATE LOGIN THEME – corp.css
   ========================================================= */

/* =========================================================
   1. CORPORATE DESIGN TOKENS
   ========================================================= */
:root {
  /* Font */
  --corp-font: ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Arial,
               "Noto Sans", "Liberation Sans", sans-serif;

  /* BACKGROUND (LIGHT BLUE) */
  --corp-bg-main: rgb(47, 85, 151);

  /* Card */
  --corp-card-bg: #ffffff;
  --corp-card-border: rgba(47, 85, 151, 0.20);
  --corp-card-shadow: rgba(47, 85, 151, 0.25);

  /* CORPORATE DARK BLUE (REQUIRED) */
  --corp-blue-strong: rgb(47, 85, 151);
  --corp-blue-muted: rgba(47, 85, 151, 0.70);

  /* Primary action */
  --corp-primary: rgb(47, 85, 151);
  --corp-primary-hover: rgb(32, 65, 120);

  /* Layout */
  --corp-radius: 14px;
  --corp-card-max-width: 420px;
}

/* =========================================================
   2. PAGE BACKGROUND + CENTERING
   ========================================================= */
html, body {
  height: 100%;
}

.login-pf {
  /*background: #030303 url(../img/logo.svg) repeat-x 50% 0; */
}

.login-pf body {
  font-family: var(--corp-font);
  background:
    radial-gradient(
      1200px 600px at 20% 10%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--corp-bg-main) 0%,
      rgba(91, 191, 247, 0.85) 100%
    );
}

/* Vertical + horizontal centering */
.login-pf-page,
#kc-page,
.kc-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

/* =========================================================
   3. REMOVE REALM NAME / DEFAULT HEADER
   ========================================================= */
#kc-header-wrapper,
#kc-header,
.kc-header,
.kc-header-wrapper {
  display: none !important;
}

/* =========================================================
   4. LOGO ABOVE LOGIN FORM
   ========================================================= */
.corp-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.corp-login-logo img {
  height: 44px;
  max-width: 220px;
}

/* =========================================================
   5. LOGIN CARD (DARK BLUE TEXT)
   ========================================================= */
.card-pf,
#kc-login {
  width: 100%;
  max-width: var(--corp-card-max-width);
  margin: 0 auto;

  background: var(--corp-card-bg);
  border: 1px solid var(--corp-card-border);
  border-radius: var(--corp-radius);
  box-shadow: 0 20px 45px var(--corp-card-shadow);

  color: var(--corp-blue-strong);
}

#kc-content-wrapper::before {
  content: "";
  display: block;
  height: 150px;
  margin: 0 auto 18px auto;
  background: url("../img/logo.svg") no-repeat center;
  background-size: contain;
}

/* Prevent layout forcing width */
#kc-content,
#kc-content-wrapper {
  width: 100%;
}

/* =========================================================
   6. FORM TEXT, LABELS, PASSWORD (DARK BLUE)
   ========================================================= */
label,
input,
select,
textarea {
  color: var(--corp-blue-strong) !important;
  font-family: var(--corp-font);
}

/* Password dots + typed text */
input[type="password"] {
  color: var(--corp-blue-strong) !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: #ffffff !important;
  border: 1px solid rgba(47, 85, 151, 0.35) !important;
  border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--corp-primary) !important;
  box-shadow: 0 0 0 4px rgba(47, 85, 151, 0.25) !important;
}

/* Tighter spacing */
.form-group {
  margin-bottom: 14px !important;
}

/* =========================================================
   7. PRIMARY BUTTON
   ========================================================= */
.btn-primary,
#kc-login input[type="submit"] {
  background: var(--corp-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
#kc-login input[type="submit"]:hover {
  background: var(--corp-primary-hover) !important;
}

/* =========================================================
   8. LINKS + HELPER TEXT
   ========================================================= */
a {
  color: var(--corp-blue-strong);
}

a:hover {
  text-decoration: underline;
}

.help-block,
.subtitle,
.kc-feedback-text,
#kc-info-wrapper {
  color: var(--corp-blue-muted) !important;
}

/* =========================================================
   9. SSO / IDENTITY PROVIDER BUTTONS
   ========================================================= */
#kc-social-providers ul {
  padding-left: 0;
}

#kc-social-providers li {
  list-style: none;
  margin-bottom: 10px;
}

#kc-social-providers a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(47, 85, 151, 0.35);

  background: #ffffff;
  color: var(--corp-blue-strong);
  text-decoration: none;
}

#kc-social-providers a:hover {
  border-color: var(--corp-primary);
  box-shadow: 0 10px 24px rgba(47, 85, 151, 0.25);
}

/* =========================================================
   10. FOOTER LINKS
   ========================================================= */
.corp-footer-links {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--corp-blue-muted);
}

.corp-footer-links a {
  color: var(--corp-blue-muted);
  text-decoration: none;
}

.corp-footer-links a:hover {
  color: var(--corp-blue-strong);
  text-decoration: underline;
}

.corp-dot {
  margin: 0 8px;
  opacity: 0.6;
}

/* =========================================================
   11. ERROR PAGE
   ========================================================= */
.corp-error {
  padding: 8px 4px 0 4px;
}

.corp-error-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: var(--corp-blue-strong);
}

.corp-error-text {
  margin: 0 0 14px 0;
  color: var(--corp-blue-muted);
  line-height: 1.5;
}

.corp-error-actions {
  margin-top: 6px;
}